Building Micro Frontends in React, Vue and Web Components with Podium

Learn how to build micro frontends in React, Vue.js, and Web Components using Podium for server-side composition

Micro frontends

The idea behind micro frontends is to think about a website or web app as a composition of features that are often owned by independent teams. An excellent place to start reading up on micro frontends is here.

Podium

Podium is a framework for composing micro frontends on the server-side, developed and maintained by the Norwegian company Finn.no for their classified ads site. It is implemented in JavaScript and runs on Node.js. A quick read-through their documentations and guides is a good place to start.

The setup

The goal is creating something suitable for an organisation with multiple autonomous teams, both vertical and horizontal, each responsible for their domain. Let’s assume we’re working in a company with multiple teams, whereas three of them are called Team Loans, Team Data, and Team Frontend. The former team is responsible for all apps related to loans. The latter two are working on common components used by all verticals like the header, generic feedback component, and UI-components from the design-system.

Just for fun, and to prove that using micro frontends makes it possible to be more framework agnostic, Team Loans use React, Team Feedback use Vue.js, and Team Frontend builds most of their components as pure Web Components.

Please note. This is a how-to-guide, not a deep evaluation of either Podium, React, or Vue.js. I’ll leave that up to better and more experienced developers. Also, this guide is written mainly because I wanted to learn more about both micro frontends and Podium, not because I’m an expert. If you find something I should change, please head over to the discussion on GitHub and help me make both the article and the example repo better.

What we are building

A simple page representing the loan vertical. The page (or more precisely the layout) consist of a header, some main content, and a feedback component.

All code below is also available on GitHub.

#react #vue #web-components #javascript #web-development

What is GEEK

Buddha Community

How native is React Native? | React Native vs Native App Development

If you are undertaking a mobile app development for your start-up or enterprise, you are likely wondering whether to use React Native. As a popular development framework, React Native helps you to develop near-native mobile apps. However, you are probably also wondering how close you can get to a native app by using React Native. How native is React Native?

In the article, we discuss the similarities between native mobile development and development using React Native. We also touch upon where they differ and how to bridge the gaps. Read on.

A brief introduction to React Native

Let’s briefly set the context first. We will briefly touch upon what React Native is and how it differs from earlier hybrid frameworks.

React Native is a popular JavaScript framework that Facebook has created. You can use this open-source framework to code natively rendering Android and iOS mobile apps. You can use it to develop web apps too.

Facebook has developed React Native based on React, its JavaScript library. The first release of React Native came in March 2015. At the time of writing this article, the latest stable release of React Native is 0.62.0, and it was released in March 2020.

Although relatively new, React Native has acquired a high degree of popularity. The “Stack Overflow Developer Survey 2019” report identifies it as the 8th most loved framework. Facebook, Walmart, and Bloomberg are some of the top companies that use React Native.

The popularity of React Native comes from its advantages. Some of its advantages are as follows:

• Performance: It delivers optimal performance.
• Cross-platform development: You can develop both Android and iOS apps with it. The reuse of code expedites development and reduces costs.
• UI design: React Native enables you to design simple and responsive UI for your mobile app.
• 3rd party plugins: This framework supports 3rd party plugins.
• Developer community: A vibrant community of developers support React Native.

Why React Native is fundamentally different from earlier hybrid frameworks

Are you wondering whether React Native is just another of those hybrid frameworks like Ionic or Cordova? It’s not! React Native is fundamentally different from these earlier hybrid frameworks.

React Native is very close to native. Consider the following aspects as described on the React Native website:

• Access to many native platforms features: The primitives of React Native render to native platform UI. This means that your React Native app will use many native platform APIs as native apps would do.
• Near-native user experience: React Native provides several native components, and these are platform agnostic.
• The ease of accessing native APIs: React Native uses a declarative UI paradigm. This enables React Native to interact easily with native platform APIs since React Native wraps existing native code.

Due to these factors, React Native offers many more advantages compared to those earlier hybrid frameworks. We now review them.

#android app #frontend #ios app #mobile app development #benefits of react native #is react native good for mobile app development #native vs #pros and cons of react native #react mobile development #react native development #react native experience #react native framework #react native ios vs android #react native pros and cons #react native vs android #react native vs native #react native vs native performance #react vs native #why react native #why use react native

Building Micro Frontends in React, Vue and Web Components with Podium

Learn how to build micro frontends in React, Vue.js, and Web Components using Podium for server-side composition

Micro frontends

The idea behind micro frontends is to think about a website or web app as a composition of features that are often owned by independent teams. An excellent place to start reading up on micro frontends is here.

Podium

Podium is a framework for composing micro frontends on the server-side, developed and maintained by the Norwegian company Finn.no for their classified ads site. It is implemented in JavaScript and runs on Node.js. A quick read-through their documentations and guides is a good place to start.

The setup

The goal is creating something suitable for an organisation with multiple autonomous teams, both vertical and horizontal, each responsible for their domain. Let’s assume we’re working in a company with multiple teams, whereas three of them are called Team Loans, Team Data, and Team Frontend. The former team is responsible for all apps related to loans. The latter two are working on common components used by all verticals like the header, generic feedback component, and UI-components from the design-system.

Just for fun, and to prove that using micro frontends makes it possible to be more framework agnostic, Team Loans use React, Team Feedback use Vue.js, and Team Frontend builds most of their components as pure Web Components.

Please note. This is a how-to-guide, not a deep evaluation of either Podium, React, or Vue.js. I’ll leave that up to better and more experienced developers. Also, this guide is written mainly because I wanted to learn more about both micro frontends and Podium, not because I’m an expert. If you find something I should change, please head over to the discussion on GitHub and help me make both the article and the example repo better.

What we are building

A simple page representing the loan vertical. The page (or more precisely the layout) consist of a header, some main content, and a feedback component.

All code below is also available on GitHub.

#react #vue #web-components #javascript #web-development

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework.

Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

This framework was created by Evan You and still it is maintained by his private team members. Vue is of course an open-source framework which is based on MVVM concept (Model-view view-Model) and used extensively in building sublime user-interfaces and also considered a prime choice for developing single-page heavy applications.

Released in February 2014, Vue JS has gained 64,828 stars on Github, making it very popular in recent times.

Evan used Angular JS on many operations while working for Google and integrated many features in Vue to cover the flaws of Angular.

“I figured, what if I could just extract the part that I really liked about Angular and build something really lightweight." - Evan You

#vuejs #vue #vue-with-laravel #vue-top-story #vue-3 #build-vue-frontend #vue-in-laravel #vue.js

Building Powerfull React Components

React's core concept is the component, which is a self-contained block of code that manages its own state and can be reused throughout an application. In this article, we will discuss the basics of React components, their types, and how to create and use them effectively.

https://wp.me/peygZh-fx

#react #React #component #components #web-development #webdevelopers #javascript 
 

Micro-Frontend using Web Components

First of all, what is Micro Frontend?

Micro Frontend is a micro service approach to front end web development. The concept of Micro Frontend is to think about a web application as a composition of features owned by different independent teams. Each team has a distinct area of business or mission it cares about and specialises in. A team is cross functional and develops its features end-to-end.

Micro front end architecture

We’ve established a good micro service architecture for our backends. It’s time to apply the same principles to our front ends. A lot of firms are moving towards micro frontend from classic monolith architecture like Google, Amazon, Salesforce, Zalando, ThoughtWorks etc.

Amazon’s architecture for micro frontend

There are various implementations for micro frontend approach. But, in this article, we’d be talking about micro frontend implementation using Web Components only.

What are Web Components?

In modern web development, everyone is using components to encapsulate UI functionalities. Web components are low-level browser API that helps us to extend the browser with new components, they provide us a standard interface for defining new components. Web components have a standard way of creating components that use HTML and DOM API that every other front end framework uses and a common way of receiving and sending data using props and events.

Web component simply tells the browser WHEN and WHERE to create a component, not HOW to create a component.

Web Components comprises of 3 concepts:

1. Custom Elements: Set of JavaScript APIs that allow you to create your own HTML elements and define the way they behave.
2. Shadow DOM: A private DOM that is scoped to your component only and capable of isolating CSS and JavaScript.
3. HTML templates. New HTML tags that allows us to create templates for your components.

In simpler terms, you can create your own HTML selector, like , etc. EVERYONE is using Web components, according to Google, 5% of page loads today, use Web components. What’s driving this adoption? As a developer, we have full freedom to use the stack to create our own components and still maintain interoperability. That’s the key difference between web components and proprietary component libraries. Once you have invested your time in creating a web component, they can be used widely in a more diverse range of applications because they work anywhere the web works. Custom Elements The Custom Elements specification lays the foundation for designing and using new types of DOM elements. Autonomous custom elements are new HTML tags, defined entirely by you. They have none of the semantics of existing HTML elements, so all the behaviour needs to be defined by you. You can define your own custom element by using: customElements.define('custom-element', customElementClass); Custom Elements follow a lifecycle to mount and unmount the component on the DOM. To learn more about custom elements and shadow DOM in depth, refer WebComponents. Till here, I hope you got a basic understanding of micro frontends and web components. Let’s dive into the implementation part, and build something cool using Web Components and Custom HTML Elements.

#angular #github #micro-frontends #web-components #react