@date: 2nd of august 2019 micro frontends @author: hidayat ... · npm i -s vue vue-router vuex...

Micro FrontendsSARCCOM Conference

@author: Hidayat Febiansyah@date: 2nd of August 2019

Disclaimer

Presentations are intended for educational purposes only and not to replace independent professional judgement. Statements of facts and opinions expressed here are those of the participant’s personally and do not necessarily reflect those of Blibli.com.

Blibli.com does not endorse or approve, and assumes no responsibility for the content, accuracy or completeness of the information presented.

Today..● Introduction ~ 15 mins● Micro Frontends ~ 20 mins● CompanyX Use case ~ 10 mins● Requirements / Preparation ~ 15 mins● Break ~ 10 mins● Basic Principals ~ 15 mins● Hands on (CSR)

○ Native script ~ 30 mins○ Using Vue ~ 60 mins

● Q&A ~ 20 mins● Conclusions

IntroWho Am I?

Hidayat Febiansyah ~ Senior Principal Dev Experience Engineer Blibli.com

Scope of interests:

+ Frontend Technology (mostly web)+ Operating System (Linux)+ Problem Solving

Micro FrontendsWhat?

~ UI, split by feature/team, independent dev/deploy, isolated module

Why?

~ FE dev is tired of being the scapegoat of late projects. One team is responsible from end-to-end. Too many instability on multi-module development.

How?

~ Assign urls or sections of a page to certain team

Micro Frontend Strategy● Page Reload (diff domain, folder)

○ http://127.0.0.1:8083/page-reload/

● Library imports○ https://localhost:10080/

● iFrames○ http://127.0.0.1:8083/iframe

● UI Server Aggregator○ Facebook: https://s.id/648SY ○ Mosaic project

● Partial Renders (innerHtml overwrite) (SSR)● Multi-mount CSR

Existing Micro FE implementations● Polymer Web Components https://www.polymer-project.org/ (C)● Open Components https://opencomponents.github.io/ (S)● Mosaic Project https://www.mosaic9.org/ (S)

○ Module: https://github.com/zalando/tailor

● BigPipe https://s.id/648SY (S)● Single SPA https://github.com/CanopyTax/single-spa (C)

○ Demo: https://single-spa.surge.sh/

● Yet another Single SPA JS Framework https://single-spa.js.org (C)

Server Side

Module A

Module B

Module C

Module A Module B

Module C

Aggregator

Complete page

Html output

fragments

Client Side

Module A

Module B

Module C

Webpack runtime (aggregator)

Fragments : html, js, css

Micro Frontend in CompanyX

● SPA

● Client Side Rendering (CSR)

● Multi Mount Vue instances

● Shared Data:○ Url route

○ Global variables / states

BL2

Company X: SPA

CompanyX: Multi Mount Instance● Each module filling in div

slots

● Showing only active module

● Split Module by urls

CompanyX: Shared Data● Vuex● State:

○ User data○ Login status○ Member rewards

● Common Functions:○ addToCart○ Login / Logout○ Autocomplete○ Get Categories

● Common Route○ All modules are observing the url

CompanyX: Additional details● One Framework: Vue

● No Jquery, lodash, underscore, polyfills, etc

● Perf Budgeting from dev phase

● Use ES6 to code, fallback to ES5 with babel

● Common DLS

● Thorough code reviews

PERFORMANCE

MAINTAINABILITY

STANDARDIZING

REUSABILITY

AND ALL OTHER GOOD THINGS!

CompanyX

● Develop each module independently○ Different repo, different team, their own style

● Loosely coupling things (less custom common lib)○ If you need it only in one or two module, just keep it on their side○ Duplicate logics in each modules for api call, somewhat similar components, states and

functions

● Isolated css and libs (no overriding, no conflict)○ CSS Scoping

● Yet, keep some things in SYNC○ States, libs and frameworks○ Make versions the same for libs

● Deploy independently○ No wait for other module to deploy, no breaking on production

Basic Principals

Requirements / Preparation● NodeJS v 10 with NPM v 6● Internet connection to download node modules, or you can prepare the lib

beforehand:○ npm i -g @vue/cli○ npm i -S webpack webpack-cli○ npm i -S vue vue-router vuex vue-script2○ npm i -S express compression http-proxy-middleware express-interceptor

● IDE: Atom, Visual Studio, IntelliJ, Webstorm

Common Website

Native JS Micro FrontendModules loaded in app-shell

Navigation synched across modules

Rendering given to each module

Using Vue.js● vue create wrapper-ui

● vue create module-ui

● proxyTable to collab

● change webpackJsonP

● Sync Data○ Vue-router

○ Vuex

● Bonus○ API Mock

Q&A● Server Side Rendering?

● SEO?

● Why only using one framework for micro frontend?

● Why Vue?

● Other framework than Vue.js?

Blibli.com● More technical article: https://medium.com/bliblidotcom-techblog● Contact me for any interests: hidayat.febiansyah@gdn-commerce.com

Resources● Microfrontend examples: https://github.com/havban/microfrontend-examples ● Pizza MFE: https://github.com/havban/pizza-mfe ● Vue MFE:

○ Wrapper: https://github.com/havban/micro-frontend-vue ○ Module: https://github.com/havban/micro-frontend-vue-collab

https://s.id/64ImK

References● https://micro-frontends.org/, August 2019● https://medium.com/@tomsoderlund/micro-frontends-a-microservice-approac

h-to-front-end-web-development-f325ebdadc16, August 2019