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

Draw a page with SPA

Avatar for Buzzvil Buzzvil
May 12, 2021
Programming
0
210

Draw a page with SPA

By May
Avatar for Buzzvil

Buzzvil

May 12, 2021
Tweet

More Decks by Buzzvil

See All by Buzzvil
220903_GFS
Avatar for Buzzvil buzzvil
0
470
Git 해부하기 2 + 3
Avatar for Buzzvil buzzvil
0
37
Metastable Failure
Avatar for Buzzvil buzzvil
0
230
Git 해부하기
Avatar for Buzzvil buzzvil
0
48
Introduction to Plate Solving
Avatar for Buzzvil buzzvil
0
39
Airbnb Minerva
Avatar for Buzzvil buzzvil
0
320
Shape up 방법론
Avatar for Buzzvil buzzvil
0
950
Buzzvil Billing Data Pipeline
Avatar for Buzzvil buzzvil
0
550
Journey of Dash's release-cycle
Avatar for Buzzvil buzzvil
0
180

Other Decks in Programming

See All in Programming
既存デザインを変更せずにタップ領域を広げる方法
Avatar for Tiphaine tahia910
1
240
複数アプリケーションを育てていくための共通化戦略
Avatar for irof irof
10
4k
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
Avatar for nrs nrslib
1
140
Go Modules: From Basics to Beyond / Go Modulesの基本とその先へ
Avatar for kuro kuro_kurorrr
0
120
レガシーシステムの機能調査・開発におけるAI利活用
Avatar for takuya ohtonari takuya_ohtonari
0
610
カクヨムAndroidアプリのリブート
Avatar for Nabe numeroanddev
0
430
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
Avatar for panda_program panda_program
3
280
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
Avatar for Chiaki Okamoto chiilog
1
120
Is Xcode slowly dying out in 2025?
Avatar for 上ちょ / uetyo uetyo
1
180
Beyond Portability: Live Migration for Evolving WebAssembly Workloads
Avatar for Yuki Nakata chikuwait chikuwait
0
380
エラーって何種類あるの？
Avatar for Takuma Kajikawa kajitack
5
280
GoのWebAssembly活用パターン紹介
Avatar for syumai syumai
3
10k

Featured

See All Featured
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
70k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
53
11k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
245
12k
KATA
Avatar for Megan Lloyd mclloyd
29
14k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.7k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
299
51k
Faster Mobile Websites
Avatar for Dean Hume deanohume
307
31k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
267
13k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
24
1.7k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
357
30k
Scaling GitHub
Avatar for Zach Holman holman
459
140k
A better future with KSS
Avatar for Kyle Neath kneath
239
17k

Transcript

  1. Copyright ⓒ All Right Reserved by Buzzvil Draw a page

    w/SPA! Ad Product Team May Min 2021.05.12 Server Side Rendering & Client Side Rendering

  2. Copyright ⓒ All Right Reserved by Buzzvil Terms SPA SSR

    CSR TTFB FP FCP TTI

  3. Copyright ⓒ All Right Reserved by Buzzvil Terms SPA: Single

    Page Application SSR: Server Side Rendering CSR: Client Side Rendering TTFB: Time to First Byte FP: First Paint FCP: First Contentful Paint TTI: Time to Interactive

  4. Copyright ⓒ All Right Reserved by Buzzvil SPA? Single Page

    Application multiple pages on one page!

  5. Copyright ⓒ All Right Reserved by Buzzvil SPA? Single Page

    Application multiple pages on one page!

  6. Copyright ⓒ All Right Reserved by Buzzvil Rendering History

  7. Copyright ⓒ All Right Reserved by Buzzvil Rendering?

  8. Copyright ⓒ All Right Reserved by Buzzvil Rendering? HTML CSS

    JavaScript DOM CSSOM Render Tree Layout Paint Composite

  9. Copyright ⓒ All Right Reserved by Buzzvil Static Rendering? (1990s)

    Static Rendering CSS + JS + HTML => Ready to render HTML Client: Request Page! Sever: Respond Page!

  10. Copyright ⓒ All Right Reserved by Buzzvil Era of Mobile:

    Limitation of Static Rendering ~Page 1 w/SSR~ Client: Request Page! Sever: Respond Page! ~Page 2 w/SSR~ Client: Request Page! Sever: Respond Page!

  11. Copyright ⓒ All Right Reserved by Buzzvil Era of Mobile:

    Limitation of Static Rendering ios, aos: I need to use native UI

  12. Copyright ⓒ All Right Reserved by Buzzvil Ajax (2005)

  13. Copyright ⓒ All Right Reserved by Buzzvil Ajax? Asynchronous Javascript

    and Xml

  14. Copyright ⓒ All Right Reserved by Buzzvil Ajax? Asynchronous Javascript

    and Xml XML CSV JSON ...

  15. Copyright ⓒ All Right Reserved by Buzzvil SPA! Single Page

    Application Fetching data seamlessly!

  16. Copyright ⓒ All Right Reserved by Buzzvil SPA! Single Page

    Application Fetching data seamlessly!

  17. Copyright ⓒ All Right Reserved by Buzzvil SPA! Single Page

    Application Fetching data seamlessly!

  18. Copyright ⓒ All Right Reserved by Buzzvil SPA! Single Page

    Application Fetching data seamlessly!

  19. Copyright ⓒ All Right Reserved by Buzzvil SPA! Single Page

    Application Fetching data seamlessly!

  20. Copyright ⓒ All Right Reserved by Buzzvil SPA! Single Page

    Application Fetching data seamlessly!

  21. Copyright ⓒ All Right Reserved by Buzzvil What makes (

    ) possible? Module bundler. like Webpack. &

  22. Copyright ⓒ All Right Reserved by Buzzvil CSR? Client Side

    Rendering HTML Client: Browser do every rendering! (All logic, data fetching, templating and routing) Sever: Respond API call! CSS JS

  23. Copyright ⓒ All Right Reserved by Buzzvil CSR, meaningless first

    TTFB <div id=root />

  24. Copyright ⓒ All Right Reserved by Buzzvil CSR, TTI >>>

    FCP ? undefined

  25. Copyright ⓒ All Right Reserved by Buzzvil CSR, bad SEO

    ?

  26. Copyright ⓒ All Right Reserved by Buzzvil SSR? Server Side

    Rendering CSS + JS + HTML => Ready to render HTML Client: Request Page! Sever: Respond Page!

  27. Copyright ⓒ All Right Reserved by Buzzvil SSR, Flickering Server

    Side Rendering Flickering issue!

  28. Copyright ⓒ All Right Reserved by Buzzvil SSR, Flickering Server

    Side Rendering Flickering issue!

  29. Copyright ⓒ All Right Reserved by Buzzvil SSR, Flickering Server

    Side Rendering Flickering issue!

  30. Copyright ⓒ All Right Reserved by Buzzvil SSR, Slow TTFB

    Server Side Rendering

  31. Copyright ⓒ All Right Reserved by Buzzvil from SSR to

    CSR https://developers.google.com/web/updates/2019/02/rendering-on-the-web

  32. Copyright ⓒ All Right Reserved by Buzzvil Thank you Ad

    Product Team May Min 2021.05.12