puzzle-js

PuzzleJs Logo

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.

Features

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

Showcase

Contributions

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