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
220

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
510
Git 해부하기 2 + 3
Avatar for Buzzvil buzzvil
0
49
Metastable Failure
Avatar for Buzzvil buzzvil
0
270
Git 해부하기
Avatar for Buzzvil buzzvil
0
60
Introduction to Plate Solving
Avatar for Buzzvil buzzvil
0
50
Airbnb Minerva
Avatar for Buzzvil buzzvil
0
380
Shape up 방법론
Avatar for Buzzvil buzzvil
0
990
Buzzvil Billing Data Pipeline
Avatar for Buzzvil buzzvil
0
600
Journey of Dash's release-cycle
Avatar for Buzzvil buzzvil
0
210

Other Decks in Programming

See All in Programming
全員アーキテクトで挑む、 巨大で高密度なドメインの紐解き方
Avatar for Agata Naomichi agatan
8
11k
How Software Deployment tools have changed in the past 20 years
Avatar for Geshan Manandhar geshan
0
17k
モビリティSaaSにおけるデータ利活用の発展
Avatar for Nealle nealle
1
650
データファイルをAWSのDWHサービスに格納する / 20251115jawsug-tochigi
Avatar for kasacchiful kasacchiful
2
100
Agentに至る道 〜なぜLLMは自動でコードを書けるようになったのか〜
Avatar for mackee mackee
5
2.3k
「正規表現をつくる」をつくる / make "make regex"
Avatar for TSUYUSATO Kitsune makenowjust
1
920
手軽に積ん読を増やすには？/読みたい本と付き合うには？
Avatar for hideki kinjyo o0h
PRO
1
120
「文字列→日付」の落とし穴 〜Ruby Date.parseの意外な挙動〜
Avatar for sg4k0 sg4k0
0
310
Developing Specifications - Jakarta EE: a Real World Example
Avatar for ivargrimstad ivargrimstad
0
250
connect-python: convenient protobuf RPC for Python
Avatar for Anuraag Agrawal anuraaga
0
300
最新のDirectX12で使えるレイトレ周りの機能追加について
Avatar for Pocol projectasura
0
300
CloudNative Days Winter 2025: 一週間で作る低レイヤコンテナランタイム
Avatar for ternbusty ternbusty
7
1.8k

Featured

See All Featured
Done Done
Avatar for chrislema chrislema
186
16k
Navigating Team Friction
Avatar for Lara Hogan lara
190
16k
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
91
590k
The Language of Interfaces
Avatar for Des Traynor destraynor
162
25k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4.1k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
970
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
18k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
162
23k
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
30
5.6k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.6k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
95
14k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
274
41k

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