npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@puzzle-js/core

v3.67.3

Published

<p align="center"> <img src="https://image.ibb.co/jM29on/puzzlelogo.png" alt="PuzzleJs Logo" width="300" /> </p>

Downloads

1,149

Readme

PuzzleJs Framework

Micro frontend framework for scalable and blazing fast websites.

CircleCI npm npm Known Vulnerabilities codecov

New documentation and demo is under development

Live Demo - Repository

PuzzleJs makes it easy to create gateways and storefront projects that talk each other. It is inspired by Facebook's BigPipe, developed with lots of great features and passion.

Why?

The traditional model is very inefficient for modern websites.

  • Multiple teams working on the same code make everything harder to manage.
  • Time to first byte is as fast as the slowest api.
  • While backend is collecting data, user browser is wasting time waiting for first byte.
  • Features can't be online as soon as it is fully developed and tested, because other teams' features are not ready yet.
  • You can't use different technologies except from the existing one.
  • You can't scale specific process, because you are dependent to whole system.

Features

  • First Time To Byte PuzzleJs compiles html template into javascript function on compile time. This operation is fully independent from the request, so PuzzleJs can send the first chunk using this function.
  • Seo Friendly PuzzleJs is fully SEO friendly, as everything is prepared and rendered on server side.
  • Extensibility It is easy to extend PuzzleJs with your custom functions.
  • Easy You can easily create a gateway or storefront and connect them by providing a configuration file.
  • Independent You can use any technology on your gateways, PuzzleJs is fully independent from your technologies. ReactJs, Vue or anything else.
  • Scalable PuzzleJs can create storefront and gateways independent from each other. So you can easily scale single project on Dockerized environments.
  • Fail-Safe When your api required by a fragment is down, PuzzleJs guarantees other page fragments will be still working.

Getting Started

Checkout quick start guide for fastest implementation.

  1. Create one or more gateway projects.
  2. Create fragments and api on gateway projects.
  3. Create a storefront project and connect gateways with a config file.
  4. Create pages on storefront project and provide html files with desired fragments.

Please check the guide for full documentation.

How PuzzleJs works?

Compile time

  1. Gateways start exposing their fragments, api and gateway information.
  2. Storefront fetches registered gateways' information.
  3. Storefront downloads and caches required fragments, dependencies and assets.
  4. Storefront compiles html into in memory javascript function for fastest template rendering.

On Request

  1. Storefront sends a chunked response with the compiled function but doesn't close the connection. Users are now able to see your website with static contents and placeholders. It also sends backend requests to gateways to recieve rendered fragments.
  2. After any fragment is recieved from gateway, it sends it to browser as a chunk and replaces previously sended placeholder with the content.
  3. When all fragments are sent, PuzzleJs closes connection.

Documentation

Read the guide to familiarize yourself with how PuzzleJs works.

Changelog

Showcases

Contributions

Feel free to contribute to PuzzleJs, please read Contributions for detailed information.