Tech@Shopee X ReactJS.

id Meetup
Pacific Century Place
Wednesday, 25 September 2019

1
 Public Wi-Fi
“PCP Jakarta - Public” OR “Guest”
No password needed

2
 1. Micro FE with React
Ahmad Fajar
Software Engineer, Shopee

TECH TALK 2. Avoid This When Using Hooks

Adib Firman
AGENDA Frontend Engineer, Qlue

3
 Introduction to Tech@Shopee

1
and Micro FE With React

Ahmad Fajar
Software Engineer, Shopee
This is Us

Back-End
Front-End
DevOps / SRE
Product Management
QA/Test Automation

5
About Shopee Tech Team

Developed in Indonesia
Deployed to 7 countries
• ID, SG, MY, TH, VN, PH, TW
Millions of users every day
• Serba 10Rb
• Vote for Liga 1
• Golden Ticket
• Cristiano Ronaldo 7
• More...

6
Tech Stack

7
- Think it as microservice for front-end side.

- Definitions from micro-frontends.org

- The idea behind Micro Frontends is to think about a
website or web app as a composition of features which
are owned by 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, from database to user interface.

8
source: https://medium.com/javascript-in-plain-english/microfrontends-bringing-javascript-frameworks-together-react-angular-vue-etc-5d401cb0072b 9
10
source: https://medium.com/javascript-in-plain-english/microfrontends-bringing-javascript-frameworks-together-react-angular-vue-etc-5d401cb0072b 11
source: https://medium.com/javascript-in-plain-english/microfrontends-bringing-javascript-frameworks-together-react-angular-vue-etc-5d401cb0072b 12
Speed vs Quality
- Maintain rapid deployment without compromise code quality
- More flexible “tech-selection” -> relatively easier for design review
- More decoupled services means more decoupled automated test

13
Multi-country support
- Multi-country development is not easy
- Tackled by country-specified versioning
- One central app as the hub / base

14
Multi-Country Versioning with Micro-Frontend

15
16
npm install and import
registerApplication and
start from
`single-spa`

17
micro-fe app name that
will integrated

18
path to the app’s js.

19
condition when app
should be loaded.
must return boolean

20
props that will passed
down to apps

21
to make apps actually
mounted 22
main React object

23
main ReactDom object

24
top level component that
will be mounted

25
DOM element where app
(micro-app) will be
mounted

26
lifecycle functions

27
Webpack Rollup

28
 Demo…
https://github.com/ahmad-fajar/demo-micro-fe

29
 Thank you

Ahmad Fajar
 Avoid This When Using Hooks

2 Adib Firman
Frontend Engineer, Qlue
https://avoid-these-when-using-hooks.netlify.com

32
 Thank you

Adib Firman
 PANEL
DISCUSSION
34
We’d love to hear your feedback :)

https://bit.ly/2llgRCl 35