Adam Daniels

Adam Daniels

1566459476

Building Micro Frontends with React, Vue, and Single-spa

Originally published by Nader Dabit at https://dev.to

Over the past few weeks the there has been a ton of discussion around micro-frontends (some negative, some positive).

When I see something new and controversial like this, I always want to try it out myself to see what all of the hype is about and also so I can form my own opinions about the subject.

This lead me down the path to creating a micro-frontend application that rendered two separate React applications along with a single Vue application.

In this tutorial I'll share what I've learned and show you how to build a micro-frontend app consisting of a React and a Vue application.

To view the final code for this application, click here.

Single SPA

The tool we will be using to create our project is Single SPA - A javascript framework for front-end microservices.

Single SPA enables you to use multiple frameworks in a single-page application, allowing you to split code by functionality and have Angular, React, Vue.js, etc. apps all living together.

You may be used to the days of the Create React APP CLI and the Vue CLI. With these tools you can quickly spin up an entire project, complete with webpack configurations, dependencies, and boilerplate ready to go for you.

If you're used to this ease of setup, then this first part may be somewhat jarring. That is because we will be creating everything from scratch, including installing all of the dependencies we need as well as creating the webpack and babel configuration from scratch.

If you are still curious what Single SPA does or why you may want to build using a micro-frontend architecture, check out this video.

Getting Started

The first thing you'll need to do is create a new folder to hold the application and change into the directory:

mkdir single-spa-app 
cd single-spa-app 

Next, we'll initialize a new package.json file:

npm init -y 

Now, this is the fun part. We will install all of the dependencies that we will need for this project. I will split these up into separate steps.

Installing regular dependencies

npm install react react-dom single-spa single-spa-react single-spa-vue vue 

Installing babel dependencies

npm install @babel/core @babel/plugin-proposal-object-rest-spread @babel/plugin-syntax-dynamic-import @babel/preset-env @babel/preset-react babel-loader --save-dev 

Installing webpack dependencies

npm install webpack webpack-cli webpack-dev-server clean-webpack-plugin css-loader html-loader style-loader vue-loader vue-template-compiler --save-dev 

Now, all of the dependencies have been installed and we can create our folder structure.

The main code of our app will live in a src directory. This src directory will hold subfolders for each of our applications. Let's go ahead and create the react and vue application folders within the src folder:

mkdir src src/vue src/react 

Now, we can create the configuration for both webpack and babel.

Creating webpack configuration

In the root of the main application, create a webpack.config.js file with the following code:

const path = require('path');

const webpack = require(‘webpack’);

const { CleanWebpackPlugin } = require(‘clean-webpack-plugin’);

const VueLoaderPlugin = require(‘vue-loader/lib/plugin’)

 

module.exports = {

  mode: ‘development’,

  entry: {

    ‘single-spa.config’: ‘./single-spa.config.js’,

  },

  output: {

    publicPath: ‘/dist/’,

    filename: ‘[name].js’,

    path: path.resolve(__dirname, ‘dist’),

  },

  module: {

    rules: [

      {

        test: /.css$/,

        use: [‘style-loader’, ‘css-loader’]

      }, {

        test: /.js$/,

        exclude: [path.resolve(__dirname, ‘node_modules’)],

        loader: ‘babel-loader’,

      },

      {

        test: /.vue$/,

        loader: ‘vue-loader’

      }

    ],

  },

  node: {

    fs: ‘empty’

  },

  resolve: {

    alias: {

      vue: ‘vue/dist/vue.js’

    },

    modules: [path.resolve(__dirname, ‘node_modules’)],

  },

  plugins: [

    new CleanWebpackPlugin(),

    new VueLoaderPlugin()

  ],

  devtool: ‘source-map’,

  externals: [],

  devServer: {

    historyApiFallback: true

  }

};

Creating babel configuration

In the root of the main application, create a .babelrc file with the following code:

{

  “presets”: [

    [“@babel/preset-env”, {

      “targets”: {

        “browsers”: [“last 2 versions”]

      }

    }],

    [“@babel/preset-react”]

  ],

  “plugins”: [

    “@babel/plugin-syntax-dynamic-import”,

    “@babel/plugin-proposal-object-rest-spread”

  ]

}

Initializing Single-spa

Registering applications is how we tell single-spa when and how to bootstrap, mount, and unmount an application.

In the webpack.config.js file we set the entry point to be single-spa.config.js.

Let’s go ahead and create that file in the root of the project and configure it.

single-spa.config.js 

import { registerApplication, start } from ‘single-spa’

 

registerApplication(

  ‘vue’,

  () => import(‘./src/vue/vue.app.js’),

  () => location.pathname === “/react” ? false : true

);

 

registerApplication(

  ‘react’,

  () => import(‘./src/react/main.app.js’),

  () => location.pathname === “/vue”  ? false : true

);

 

start();

 This file is where you register all of the applications that will be part of the main single page app. Each call to registerApplication registers a new application and takes three arguments:

  1. App name
  2. Loading function (what entrypoint to load)
  3. Activity function (logic to tell whether to load the app)

Next, we need to create the code for each of our apps.

React app

In src/react, create the following two files:

touch main.app.js root.component.js

src/react/main.app.js 

import React from ‘react’;

import ReactDOM from ‘react-dom’;

import singleSpaReact from ‘single-spa-react’;

import Home from ‘./root.component.js’;

 

function domElementGetter() {

  return document.getElementById(“react”)

}

 

const reactLifecycles = singleSpaReact({

  React,

  ReactDOM,

  rootComponent: Home,

  domElementGetter,

})

 

export const bootstrap = [

  reactLifecycles.bootstrap,

];

 

export const mount = [

  reactLifecycles.mount,

];

 

export const unmount = [

  reactLifecycles.unmount,

];

 src/react/root.component.js

import React from “react”
const App = () => <h1>Hello from React</h1>
export default App

Vue app

In src/vue, create the following two files:

touch vue.app.js main.vue

src/vue/vue.app.js 

import Vue from ‘vue’;

import singleSpaVue from ‘single-spa-vue’;

import Hello from ‘./main.vue’

 

const vueLifecycles = singleSpaVue({

  Vue,

  appOptions: {

    el: ‘#vue’,

    render: r => r(Hello)

  }

});

 

export const bootstrap = [

  vueLifecycles.bootstrap,

];

 

export const mount = [

  vueLifecycles.mount,

];

 

export const unmount = [

  vueLifecycles.unmount,

];

 src/vue/main.vue 

<template>

  <div>

      <h1>Hello from Vue</h1>

  </div>

</template>

 Next, create the index.html file in the root of the app:

touch index.html

index.html 

<html>

  <body>

    <div id=“react”></div>

    <div id=“vue”></div>

    <script src=“/dist/single-spa.config.js”></script>

  </body>

</html>

Updating Package.json with scripts

To run the app, let’s add the start script as well as a build script in package.json:

“scripts”: {

  “start”: “webpack-dev-server --open”,

  “build”: “webpack --config webpack.config.js -p”

}

Running the app

To run the app, run the start script:

npm start

Now, you can visit the following URLs:

# renders both apps

http://localhost:8080/

 

renders only react

http://localhost:8080/react

 

renders only vue

http://localhost:8080/vue

 To view the final code for this application, click here.

Conclusion

Overall, setting up this project was fairly painless with the exception of all of the initial boilerplate setup.

I think in the future it would be nice to have some sort of CLI that handles much of the boilerplate and initial project setup.

If you have the need for this type of architecture, Single-spa definitely seems like the most mature way to do it as of today and was really nice to work with.

#reactjs #vue-js #web-development #microservices

What is GEEK

Buddha Community

Building Micro Frontends with React, Vue, and Single-spa
Autumn  Blick

Autumn Blick

1598839687

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

Luna  Mosciski

Luna Mosciski

1600583123

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

Franz  Becker

Franz Becker

1651604400

React Starter Kit: Build Web Apps with React, Relay and GraphQL.

React Starter Kit — "isomorphic" web app boilerplate   

React Starter Kit is an opinionated boilerplate for web development built on top of Node.js, Express, GraphQL and React, containing modern web development tools such as Webpack, Babel and Browsersync. Helping you to stay productive following the best practices. A solid starting point for both professionals and newcomers to the industry.

See getting started guide, demo, docs, roadmap  |  Join #react-starter-kit chat room on Gitter  |  Visit our sponsors:

 

Hiring

Getting Started

Customization

The master branch of React Starter Kit doesn't include a Flux implementation or any other advanced integrations. Nevertheless, we have some integrations available to you in feature branches that you can use either as a reference or merge into your project:

You can see status of most reasonable merge combination as PRs labeled as TRACKING

If you think that any of these features should be on master, or vice versa, some features should removed from the master branch, please let us know. We love your feedback!

Comparison

 

React Starter Kit

React Static Boilerplate

ASP.NET Core Starter Kit

App typeIsomorphic (universal)Single-page applicationSingle-page application
Frontend
LanguageJavaScript (ES2015+, JSX)JavaScript (ES2015+, JSX)JavaScript (ES2015+, JSX)
LibrariesReact, History, Universal RouterReact, History, ReduxReact, History, Redux
RoutesImperative (functional)DeclarativeDeclarative, cross-stack
Backend
LanguageJavaScript (ES2015+, JSX)n/aC#, F#
LibrariesNode.js, Express, Sequelize,
GraphQL
n/aASP.NET Core, EF Core,
ASP.NET Identity
SSRYesn/an/a
Data APIGraphQLn/aWeb API

Backers

♥ React Starter Kit? Help us keep it alive by donating funds to cover project expenses via OpenCollective or Bountysource!

lehneres Tarkan Anlar Morten Olsen Adam David Ernst Zane Hitchcox  

How to Contribute

Anyone and everyone is welcome to contribute to this project. The best way to start is by checking our open issues, submit a new issue or feature request, participate in discussions, upvote or downvote the issues you like or dislike, send pull requests.

Learn More

Related Projects

  • GraphQL Starter Kit — Boilerplate for building data APIs with Node.js, JavaScript (via Babel) and GraphQL
  • Membership Database — SQL schema boilerplate for user accounts, profiles, roles, and auth claims
  • Babel Starter Kit — Boilerplate for authoring JavaScript/React.js libraries

Support

License

Copyright © 2014-present Kriasoft, LLC. This source code is licensed under the MIT license found in the LICENSE.txt file. The documentation to the project is licensed under the CC BY-SA 4.0 license.


Author: kriasoft
Source Code: https://github.com/kriasoft/react-starter-kit
License: MIT License

#graphql #react 

Ollie  Dietrich

Ollie Dietrich

1632083580

Comprehensive Look At Angular, React and Vue.js

There is no doubting the fact that web development and custom software development has been on a thriving technological ride in previous times several years. And when it comes to the frontend, JavaScript has been at the helm of this drive.

 

This popularity has given increase to tons of JavaScript frameworks along the way. Deciding on a JavaScript framework for your web app can be overwhelming. Angular and React are very well-known these days, and there is a younger which has been getting a lot of traction lately: VueJS.

The aim of this video is to take a comprehensive look at such widely used frameworks – #Angular and #Vue – and one library – #React.

And also share your opinions on these three in the comment section.

 #javascript #angular #vue #react-native 

Setup a Micro Frontend Architecture With Vue and single-spa

A practical walkthrough on building a micro frontend architecture with multiple Vue.js apps using single-spa. Note that you can replace Vue with your framework of choice.

What are Micro Frontends?

The concept of micro frontends has been around for a while now but has been getting more attention in the past couple of years.

Image for post

Evolution of the search term “Micro Frontend” on Google Trends, 2015–2020

Micro frontends extend the concept of backend micro-services: breaking down a web app (a monolith SPA) into distinct pieces. Then, through an orchestrator layer, each part is assembled (or composed) together. There are multiple ways of doing so. In our case we will do what is called client-side composition using single-spa.

When should I use this approach?

At Unbabel we currently use a micro frontend architecture for one of our new customer-facing product.

Like any technical decision, there are gains and tradeoffs. We weighted a couple of factors when deciding for this approach:

  • The product to build would be comprised of at least 6 distinct areas, i.e. interfaces;
  • Several multi-disciplinary teams would own and have full autonomy on delivering parts of the product;
  • Have the possibility of partially changing parts of the product’s stack. Although Vue is the company’s framework of choice, we don’t know if it’ll still be what we want to use 3 years from now;

You should consider these advantages:

  • Teams have a greater autonomy on delivering value into the product at different paces as their development can be largely independent from other teams;
  • Ability to have totally separate repositories, test and deployment flows;
  • Ability to easily override parts of an application’s interface (i.e. A/B testing, incremental rollout);
  • Use different frameworks side-by-side or perform experiments without affecting other parts of your application;
  • Ability to refactor parts of your product without having to change it all at once;

You should consider these caveats:

  • Increased overhead to set up, deploy and maintain depending on the scope and characteristics of the product you’re building;
  • More moving parts: it’s important to have a solid documentation on how everything is setup and relates as well as defining guidelines that govern how development is to be done within the architecture;
  • Steeper learning for developers to understand the architecture, its lifecycle and dependencies. Hence having thorough documentation is imperative;
  • Micro frontends are still relatively new and there is no one-size-fits-all methodology or well established consensus on how to achieve this. Be ready to do a fair amount of R&D depending on your case;

In my experience, this approach is best when building a relatively large web app where you want to provide flexibility to multiple teams and have enough time to dedicate to governance and documentation.

Having said that, you can definitely leverage on many of the micro frontend advantages with a team of 2-3 people or even alone.

#software-development #vuejs #micro-frontends #web-development #development #vue