I created a Netflix clone using : an open-source framework for creating modular applications. Piral In this article, I will go over what microfrontends are, why they are useful, and what frameworks exist to make implementing them easier. I'll also share my experiences creating a project by myself using React and Piral: two technologies I had previously never touched. I will cover what I did, and how I did it. Finally, I will present some closing thoughts, opinions, and personal notes about this endeavor. The " " section will be written in a way where every developer, regardless of skill level, should be able to follow. Be sure to give Piral or microfrontends as a whole a try, and let me know how it went! How I did it This section is found on my DEV community article: My experiences creating a Netflix clone using microfrontends What are microfrontends? Microfrontends try to extend the idea and the benefits of microservices into the frontend space. In essence, this comes down to into smaller, more easily manageable pieces. architecture pattern "splitting up the frontend monolith" This allows fully cross-functional teams to work on these, focussing on a specific business feature or company mission. Rather than "horizontal" teams, per layer or technology; these teams manage the "vertical" slices of the application. Each team is autonomous, and has end-to-end -- from the database to the UI -- responsibility for the features they develop. Teams should be able to independently create and deploy these microfrontends. This cuts down on inter-team communication; which could then also enable . distributed development This is especially beneficial for larger companies and projects, where the Jeff Bezos "Two Pizza Team" rule (i.e. the whole team can be fed by two pizzas) can be helpful. Spotify for example, calls these smaller feature teams "squads". Interesting read . here Why microfrontends? Microfrontends make teams more agile When comparing the characteristics and benefits of microfrontends with the 12 Agile Principles, lots of overlap emerges: Autonomous teams satisfy lots of these agile principles. In short: teams that can operate on their own are less prone to being slowed down, can make changes quickly, and feel a greater sense of ownership. Autonomous teams. By being decoupled and decentralized, the microfrontends architecture pattern ensures that the incremental and iterative process of agile software development can succeed. Incremental upgrades. Microfrontends can be deployed independently. This can enable shorter release cycles, because all different parts don't have to be in sync with each other. Independent deployment. Simplicity is essential to agility: this makes it easier for the whole team to be on board and iterate fast. Decoupling makes using different technologies possible; but even when using the same technologies throughout the app it can still be very beneficial for efficiency of development. Simple and decoupled codebases. Microfrontend frameworks While you could take the microfrontend principles and devise your own solution to manage them (in fact, that's kinda what my bachelor thesis will be about); there are lots of frameworks already out there that can do some of the heavy lifting for you. Florian Rappl outlines and categorizes a lot of these frameworks in this blog post Popular options include , , , , and . Single SPA Open Components Mosaic Podium Luigi Piral Rather than competing frameworks, most of these exist side by side, and they each provide a different way of creating these microfrontend solutions. They differ in key properties such as completeness (just solving some problems such as routing vs providing a full end-to-end solution with error boundaries, tooling, eco-system, etc.) or architecture style (e.g., build-time composition vs client-side composition vs server-side composition). Piral Piral is an open-source framework for fully flexible modular applications. It is built on React, but has lots of plugins available for other frameworks and technologies. Building blocks and terminology An application built with piral consists of multiple parts. If you have no experience with microfrontends, this section can be confusing. Don't be alarmed: the section below will turn the abstract into the practical, which will be easier to follow. "The project" The Pilets (feature modules) These are the individual feature modules, also known as microfrontends. They each include their own dependencies and assets, and are completely independent of each other. Pilets can define how the integration of their components will happen. Does the pilet need a dedicated page, or will the content be rendered inside an already existing pilet? Maybe we need a dedicated page, and also register a button somewhere else that will link to the page? It is all possible. The feed service Pilets are usually published to a feed service (e.g. a REST API). Piral provides its own feed service over at . piral.cloud It should be noted that Piral can work without a feed service but a feed service makes deployments easy and consumption very dynamic; showcasing all the advantages of Piral. The Piral Instance (app shell) This is the place where all feature modules will be integrated. The piral instance will pull all registered pilets from the feed service, and put them where they need to go as defined by the pilets themselves. The app shell also is the place to put your basic layout: navbars, headers, footers, and shared components. The result of building the app shell is a dist/release directory for hosting, and a dist/emulator directory with a tarball which can be published to an NPM registry to aid in the development and the debugging of the individual pilets. (Component) extensions, pages and menu items The piral API supports registering in your pilets and Piral instance. Let's say for example we have a webshop with 2 pilets: a pilet that lists products and a pilet that enables users to purchase these items (this is by the way a classic example for microfrontends, read more ). The pilet should include a button to purchase items, but since that is not the responsibility of this team, the team will create this button and register it as an extension that all pilets can use. The pilet will then just register an extension slot where the app shell will integrate the right extension into. extensions discover checkout here discover checkout discover Piral also has a built-in way to register pages and menu items. These can also be seen as extensions, but where the work is already done for you. The project What I did You can find the application online on . netflix.deruwe.me This application is a Netflix clone with some basic functionalities. There is a Browse page where the user can discover showcases of trending series and movies, top-rated ones, etc. Of course, to find a specific movie or series, the user can also use the provided Search bar. Every media tile also has a Favorites toggle in the top right corner. Clicking it adds the series or movies to the user's favorites list, to be found on the favorites page. The user can switch accounts via the Profile option in the top right. All favorites are linked to the specific account. It is worth noting that this demo project does not come with a custom backend: all data is coming from a 3rd party API, the accounts are dummy accounts, and the favorites are stored in local storage. Impressions Read more of the technical details on my DEV community article: My experiences creating a Netflix clone using microfrontends Final thoughts While I had 0 experience using React and Piral before doing this project, I think the project turned out really well. When working with microfrontends, the biggest hurdle is getting to the big picture. To me, it was really complicated to imagine how all the microfrontends would come together ▸ The "black box method" for learning concepts I saw recently and it really stuck with me. When trying to understand hard concepts: treat them like a black box first, and learn how to them, before learning about how they work. this video use The experience you get by using a concept will give you a major advantage while learning how they work because you will already understand the desired outcome. The key to understanding microfrontends – in my opinion – is to build some! Once you see visually how they all come together, it's easier to imagine how this integration is happening. This is why a microfrontend framework is valuable. Not only does it provide the best developer experience, but also: lots of stuff is already done for you, and you can get started easily. This analogy, by the way, also makes sense when explaining how I learned to work with React in just one week. Rather than starting from scratch, I just tweaked an already existing project, and that already got me to understand lots of the concepts. (Of course, my experience with Angular helped a little as well) Also published at https://dev.to/dantederuwe/my-experiences-creating-a-netflix-clone-using-microfrontends-1n46

Mosaic

A Method That Will Help You Clone Netflix With Micro Frontends The Right Way

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

104 Stories To Learn About Go

105 Stories To Learn About Functional Programming

100+ Free Pluralsight Courses to learn Python, Java, and Spring Boot

10 Websites to Learn JavaScript for Beginners

104 Stories To Learn About Programming Top Story

10 Ways to Prevent and Manage Technical Debt—Tips from Developers

104 Stories To Learn About Go

105 Stories To Learn About Functional Programming

100+ Free Pluralsight Courses to learn Python, Java, and Spring Boot

10 Websites to Learn JavaScript for Beginners

104 Stories To Learn About Programming Top Story

10 Ways to Prevent and Manage Technical Debt—Tips from Developers

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps