Scribd
Upload
232 views35 pages

Shopee ReactJS Meetup: Micro FE & Hooks

This document summarizes a meetup event between Tech@Shopee and ReactJS.id that took place on September 25, 2019 at Pacific Century Place in Jakarta. The agenda included two tech talks - the first by Ahmad Fajar on micro frontends with React, and the second by Adib Firman on things to avoid when using React hooks. The document provides details on Shopee's tech team and stack, and Ahmad Fajar's presentation on implementing micro frontends at Shopee to support rapid deployment across multiple countries.

Uploaded by

D P
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
232 views35 pages

Shopee ReactJS Meetup: Micro FE & Hooks

This document summarizes a meetup event between Tech@Shopee and ReactJS.id that took place on September 25, 2019 at Pacific Century Place in Jakarta. The agenda included two tech talks - the first by Ahmad Fajar on micro frontends with React, and the second by Adib Firman on things to avoid when using React hooks. The document provides details on Shopee's tech team and stack, and Ahmad Fajar's presentation on implementing micro frontends at Shopee to support rapid deployment across multiple countries.

Uploaded by

D P
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

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 [Link]


- 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: [Link] 9
10
source: [Link] 11
source: [Link] 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…
[Link]

29
Thank you

Ahmad Fajar
Avoid This When Using Hooks

2 Adib Firman
Frontend Engineer, Qlue
[Link]

32
Thank you

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

[Link] 35

You might also like