Slide 1
Slide 1 text
High-Performance and
Scalable webapp
LINE TODAY Frontend - Liz Lin
Slide 2
Slide 2 text
Introduction
Slide 3
Slide 3 text
LINE TODAY
Product Scope
Election
News
Poll
Video
Weather
Thailand
Lottery
Live
Movie
Comment
Slide 4
Slide 4 text
Challenge
Slide 5
Slide 5 text
• Heavy Product Traffic
• Large Product Scope
Challenge
Slide 6
Slide 6 text
• Performance
• Scalable
Challenge
Slide 7
Slide 7 text
• Performance
• Scalable
Challenge
Slide 8
Slide 8 text
Performance
https://memeguy.com/photos/images/slow-loading-gifs-62730.png
Slide 9
Slide 9 text
Performance
Slide 10
Slide 10 text
Performance
• First Contentful Paint
• how long it takes the browser to render the first piece of
DOM content after a user navigates to your page.
https://web.dev/fcp/
Slide 11
Slide 11 text
Performance
• Server Side Rendering
Slide 12
Slide 12 text
Performance
• Server Side Rendering
• Universal Rendering(Isomorphic Javascript)
Slide 13
Slide 13 text
NUXTJS
• Complement Document
• Clean Code Structure
• Isomorphic Javascript
• Plugins
• i18n, Sentry
Slide 14
Slide 14 text
• Performance
• Scalable
Challenge
Slide 15
Slide 15 text
Scalable
Slide 16
Slide 16 text
Scalable
Slide 17
Slide 17 text
• Complicated Business Logic
• Highly Coupled Component
Scalable - Problems
Slide 18
Slide 18 text
Scalable - monorepos
• Reusable SDK
Slide 19
Slide 19 text
• Reduce Main File Size
• Separate Business Logic
• Reusable Component
Scalable – async component
Slide 20
Slide 20 text
Summary
Slide 21
Slide 21 text
• First Content Paint fast 80%
• Main File Size Reduce 75%
Summary
Slide 22
Slide 22 text
Thank you