PuzzleJs - Micro Frontend Architecture at Trendyol Mobile Web

PuzzleJs is the framework written and open sourced by Trendyol Developers. Source is at http://github.com/puzzle-js/puzzle-js

Site speed is one of the key success factors at Trendyol and every millisecond counts. We have made our mobile web at least twice as fast after PuzzleJs implementation. It also enabled multiple domain teams to work autonomously and deploy independently.It is inspired by Facebook BigPipe and is the result of our passion to improve continuously, collaborate and share our learnings.

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.

Speaker

Ahmet Can Güven- Software Engineer /Front End Architect (Trendyol)

Ahmet Can is a front-end engineer at Trendyol. He is passionate about making the web faster! He is mainly focused on javascript and front-end technologies. He loves to contribute open source projects and currently working on a framework which implements the micro-frontends architecture using NodeJs.

Linkedin : https://www.linkedin.com/in/acanguven/
Github : https://github.com/Acanguven