Upgrade to Pro — share decks privately, control downloads, hide ads and more …

High-Performance and Scalable webapp

High-Performance and Scalable webapp

20210416 LINE Developers Meetup #15 @ 清大教育館 by Liz Lin

Event: https://linegroup.kktix.cc/events/20210416

7975b9fd58c8945ae1c6b38747de7f28?s=128

line_developers_tw2

April 16, 2021
Tweet

Transcript

  1. High-Performance and Scalable webapp LINE TODAY Frontend - Liz Lin

  2. Introduction

  3. LINE TODAY Product Scope Election News Poll Video Weather Thailand

    Lottery Live Movie Comment
  4. Challenge

  5. • Heavy Product Traffic • Large Product Scope Challenge

  6. • Performance • Scalable Challenge

  7. • Performance • Scalable Challenge

  8. Performance https://memeguy.com/photos/images/slow-loading-gifs-62730.png

  9. Performance

  10. 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/
  11. Performance • Server Side Rendering

  12. Performance • Server Side Rendering • Universal Rendering(Isomorphic Javascript)

  13. NUXTJS • Complement Document • Clean Code Structure • Isomorphic

    Javascript • Plugins • i18n, Sentry
  14. • Performance • Scalable Challenge

  15. Scalable

  16. Scalable

  17. • Complicated Business Logic • Highly Coupled Component Scalable -

    Problems
  18. Scalable - monorepos • Reusable SDK

  19. • Reduce Main File Size • Separate Business Logic •

    Reusable Component Scalable – async component
  20. Summary

  21. • First Content Paint fast 80% • Main File Size

    Reduce 75% Summary
  22. Thank you