Post on 23-Jul-2020
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