@date: 2nd of August 2019 Micro Frontends @author: Hidayat ... · npm i -S vue vue-router vuex...

24
Micro Frontends SARCCOM Conference @author: Hidayat Febiansyah @date: 2nd of August 2019

Transcript of @date: 2nd of August 2019 Micro Frontends @author: Hidayat ... · npm i -S vue vue-router vuex...

Page 1: @date: 2nd of August 2019 Micro Frontends @author: Hidayat ... · npm i -S vue vue-router vuex vue-script2 npm i -S express compression http-proxy-middleware express-interceptor IDE:

Micro FrontendsSARCCOM Conference

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

Page 2: @date: 2nd of August 2019 Micro Frontends @author: Hidayat ... · npm i -S vue vue-router vuex vue-script2 npm i -S express compression http-proxy-middleware express-interceptor IDE:

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.

Page 3: @date: 2nd of August 2019 Micro Frontends @author: Hidayat ... · npm i -S vue vue-router vuex vue-script2 npm i -S express compression http-proxy-middleware express-interceptor IDE:

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

Page 4: @date: 2nd of August 2019 Micro Frontends @author: Hidayat ... · npm i -S vue vue-router vuex vue-script2 npm i -S express compression http-proxy-middleware express-interceptor IDE:

IntroWho Am I?

Hidayat Febiansyah ~ Senior Principal Dev Experience Engineer Blibli.com

Scope of interests:

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

Page 5: @date: 2nd of August 2019 Micro Frontends @author: Hidayat ... · npm i -S vue vue-router vuex vue-script2 npm i -S express compression http-proxy-middleware express-interceptor IDE:

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

Page 6: @date: 2nd of August 2019 Micro Frontends @author: Hidayat ... · npm i -S vue vue-router vuex vue-script2 npm i -S express compression http-proxy-middleware express-interceptor IDE:

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

Page 7: @date: 2nd of August 2019 Micro Frontends @author: Hidayat ... · npm i -S vue vue-router vuex vue-script2 npm i -S express compression http-proxy-middleware express-interceptor IDE:

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)

Page 8: @date: 2nd of August 2019 Micro Frontends @author: Hidayat ... · npm i -S vue vue-router vuex vue-script2 npm i -S express compression http-proxy-middleware express-interceptor IDE:

Server Side

Module A

Module B

Module C

Module A Module B

Module C

Aggregator

Complete page

Html output

fragments

Page 9: @date: 2nd of August 2019 Micro Frontends @author: Hidayat ... · npm i -S vue vue-router vuex vue-script2 npm i -S express compression http-proxy-middleware express-interceptor IDE:

Client Side

Module A

Module B

Module C

Webpack runtime (aggregator)

Fragments : html, js, css

Page 10: @date: 2nd of August 2019 Micro Frontends @author: Hidayat ... · npm i -S vue vue-router vuex vue-script2 npm i -S express compression http-proxy-middleware express-interceptor IDE:

Micro Frontend in CompanyX

● SPA

● Client Side Rendering (CSR)

● Multi Mount Vue instances

● Shared Data:○ Url route

○ Global variables / states

BL2

Page 11: @date: 2nd of August 2019 Micro Frontends @author: Hidayat ... · npm i -S vue vue-router vuex vue-script2 npm i -S express compression http-proxy-middleware express-interceptor IDE:

Company X: SPA

Page 12: @date: 2nd of August 2019 Micro Frontends @author: Hidayat ... · npm i -S vue vue-router vuex vue-script2 npm i -S express compression http-proxy-middleware express-interceptor IDE:

CompanyX: Multi Mount Instance● Each module filling in div

slots

● Showing only active module

● Split Module by urls

Page 13: @date: 2nd of August 2019 Micro Frontends @author: Hidayat ... · npm i -S vue vue-router vuex vue-script2 npm i -S express compression http-proxy-middleware express-interceptor IDE:

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

Page 14: @date: 2nd of August 2019 Micro Frontends @author: Hidayat ... · npm i -S vue vue-router vuex vue-script2 npm i -S express compression http-proxy-middleware express-interceptor IDE:

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!

Page 15: @date: 2nd of August 2019 Micro Frontends @author: Hidayat ... · npm i -S vue vue-router vuex vue-script2 npm i -S express compression http-proxy-middleware express-interceptor IDE:

CompanyX

Page 16: @date: 2nd of August 2019 Micro Frontends @author: Hidayat ... · npm i -S vue vue-router vuex vue-script2 npm i -S express compression http-proxy-middleware express-interceptor IDE:

● 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

Page 17: @date: 2nd of August 2019 Micro Frontends @author: Hidayat ... · npm i -S vue vue-router vuex vue-script2 npm i -S express compression http-proxy-middleware express-interceptor IDE:

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

Page 18: @date: 2nd of August 2019 Micro Frontends @author: Hidayat ... · npm i -S vue vue-router vuex vue-script2 npm i -S express compression http-proxy-middleware express-interceptor IDE:

Common Website

Page 19: @date: 2nd of August 2019 Micro Frontends @author: Hidayat ... · npm i -S vue vue-router vuex vue-script2 npm i -S express compression http-proxy-middleware express-interceptor IDE:

Native JS Micro FrontendModules loaded in app-shell

Navigation synched across modules

Rendering given to each module

Page 20: @date: 2nd of August 2019 Micro Frontends @author: Hidayat ... · npm i -S vue vue-router vuex vue-script2 npm i -S express compression http-proxy-middleware express-interceptor IDE:

Using Vue.js● vue create wrapper-ui

● vue create module-ui

● proxyTable to collab

● change webpackJsonP

● Sync Data○ Vue-router

○ Vuex

● Bonus○ API Mock

Page 21: @date: 2nd of August 2019 Micro Frontends @author: Hidayat ... · npm i -S vue vue-router vuex vue-script2 npm i -S express compression http-proxy-middleware express-interceptor IDE:

Q&A● Server Side Rendering?

● SEO?

● Why only using one framework for micro frontend?

● Why Vue?

● Other framework than Vue.js?

Page 22: @date: 2nd of August 2019 Micro Frontends @author: Hidayat ... · npm i -S vue vue-router vuex vue-script2 npm i -S express compression http-proxy-middleware express-interceptor IDE:

Blibli.com● More technical article: https://medium.com/bliblidotcom-techblog● Contact me for any interests: [email protected]

Page 23: @date: 2nd of August 2019 Micro Frontends @author: Hidayat ... · npm i -S vue vue-router vuex vue-script2 npm i -S express compression http-proxy-middleware express-interceptor IDE:

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

Page 24: @date: 2nd of August 2019 Micro Frontends @author: Hidayat ... · npm i -S vue vue-router vuex vue-script2 npm i -S express compression http-proxy-middleware express-interceptor IDE:

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