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

The State of Angular Deployment, SSR, and Prere...

Avatar for Minko Gechev Minko Gechev
April 03, 2020
Programming
3.1k
2

The State of Angular Deployment, SSR, and Prerendering, ng-conf keynote

Avatar for Minko Gechev

Minko Gechev

April 03, 2020

More Decks by Minko Gechev

See All by Minko Gechev
Change the World With Open Source Software
Avatar for Minko Gechev mgechev
0
270
Fast Angular Apps from End to End
Avatar for Minko Gechev mgechev
1
280
The State of Angular
Avatar for Minko Gechev mgechev
1
240
The State of Angular
Avatar for Minko Gechev mgechev
1
470
Software Engineering as a Superpower
Avatar for Minko Gechev mgechev
1
270
Introduction to Angular
Avatar for Minko Gechev mgechev
1
300
Internals of the Angular CLI
Avatar for Minko Gechev mgechev
3
1.5k
The State of Angular
Avatar for Minko Gechev mgechev
1
270
The Future of the Front-End Frameworks
Avatar for Minko Gechev mgechev
2
400

Other Decks in Programming

See All in Programming
ソフトウェアエンジニアにとっての生成AI - 特性を知って使い倒す / generative ai for software enginner
Avatar for Naoki Kishida kishida
7
2.1k
AIの中の人になってみる
Avatar for tkym htkym
0
120
AIに既存システムを理解させる技術　～レガシーを見捨てないハーネスエンジニアリング入門～
Avatar for Ochtum ochtum
0
150
Claude Code全社展開のためにやったことn選～プラグイン302個・コミッター271人を支えるために～
Avatar for Kenichi Takahashi kenchan
5
1.8k
リアルな遅延を測る仕様
Avatar for kota-yata kota_yata
1
130
承認済みなのに差戻しできてしまうバグ、型で潰せます
Avatar for SHINCHI Takahiro shinchit
0
110
片田舎のおっさん、 Swift Buildのダイアモンド問題解決の不具合修正PRを出すが、解決方法がキャッシュをしないようにすることであり、ビルド時間が伸びると言われてマージされないので高速化もする/swiftbuild
Avatar for yimajo yimajo
0
290
バグを直したら useEffect が消えた
Avatar for taki colorful12
3
700
Gmail/Google DriveをトリガーにAIエージェントを動かそう！ / Run AI agents with Gmail/Google Drive as triggers!
Avatar for Har1101 har1101
2
440
書籍「プロフェッショナルAI駆動開発」紹介スライド
Avatar for Juntaro Matsumoto juntaromatsumoto
0
580
Android CLI
Avatar for Sungyong An fornewid
0
240
Claude CodeとAgentCore Gatewayを繋ぐ際の認証認可 / Authentication and authorization when connecting Claude Code with AgentCore Gateway
Avatar for Har1101 har1101
2
380

Featured

See All Featured
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
Avatar for Tech SEO Connect techseoconnect
PRO
0
430
Abbi's Birthday
Avatar for Violet Bock coloredviolet
3
9.5k
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
Avatar for Aleyda Solis aleyda
2
11k
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
Avatar for Mine Cetinkaya-Rundel minecr
1
360
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
Avatar for r-kagaya rkaga
63
45k
[SF Ruby Conf 2025] Rails X
Avatar for Vladimir Dementyev palkan
2
1.3k
The Impact of AI in SEO - AI Overviews June 2024 Edition
Avatar for Aleyda Solis aleyda
6
1.2k
Measuring Dark Social's Impact On Conversion and Attribution
Avatar for Stephen Akadiri stephenakadiri
2
260
The Curious Case for Waylosing
Avatar for Cassini Nazir cassininazir
1
480
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1033
470k
Designing for Timeless Needs
Avatar for Cassini Nazir cassininazir
1
450
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
306
120k

Transcript

  1. @yourtwitter The State of Angular Deployment, SSR, and Prerendering ng-conf

    keynote twitter.com/mgechev github.com/mgechev blog.mgechev.com Minko Gechev

  2. @mgechev Web in 1991

  3. twitter.com/mgechev @mgechev

  4. @mgechev CGI

  5. twitter.com/mgechev Request page HTML @mgechev

  6. twitter.com/mgechev Execute program Request page HTML @mgechev LCP

  7. @mgechev Largest Contentful Paint (LCP) is a user-centric metric for

    estimating when the page is useful for the user. web.dev/lcp

  8. @mgechev Each interaction requires complete page reload

  9. twitter.com/ mgechev

  10. twitter.com/mgechev Execute program Request page HTML @mgechev LCP

  11. twitter.com/mgechev Execute program Request page HTML @mgechev Loading Request scripts

    JS LCP TTI

  12. twitter.com/mgechev Execute program Request page HTML @mgechev Fetch data (ajax)

    Loading Request scripts LCP TTI JS

  13. twitter.com/ mgechev @mgechev

  14. @mgechev @mgechev

  15. @mgechev

  16. @mgechev @mgechev

  17. twitter.com/mgechev Request / HTML @mgechev

  18. twitter.com/mgechev Request / Loading Request scripts HTML JS @mgechev

  19. twitter.com/mgechev Request / Loading Request scripts Loading Execute scripts HTML

    JS @mgechev

  20. twitter.com/mgechev Request / Loading Request scripts Loading Execute scripts HTML

    JS @mgechev TTI LCP

  21. twitter.com/mgechev Request / Loading Request scripts Loading Execute scripts HTML

    JS @mgechev

  22. twitter.com/ mgechev

  23. @mgechev Sometimes the bundle just can’t get any smaller Minko

    Gechev

  24. @mgechev What if the server…was a browser?

  25. twitter.com/mgechev Request / Run app on server HTML @mgechev Request

    scripts JS

  26. twitter.com/ mgechev

  27. twitter.com/mgechev

  28. twitter.com/mgechev @mgechev

  29. @yourtwitter Angular Universal in Crunchbase Amanda Cifaldi Senior Staff Engineer

    twitter.com/algcifaldi

  30. Our Mission: Democratize access to company information and provide solutions

    that guide our users to their next opportunities Angular Universal +

  31. Our Mission: Democratize access to company information and provide solutions

    that guide our users to their next opportunities Angular Universal +

  32. Our Mission: Democratize access to company information and provide solutions

    that guide our users to their next opportunities

  33. some pages took seconds to load 20 20 But...

  34. // TODO: // access + information => // opportunities?

  35. DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA

    DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA
  36. None

  37. biggest funding rounds this year

  38. DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA

    DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA

  39. biggest funding rounds this year

  40. First wave: Crawls any source that can be requested and

    any links in that source

  41. Second wave: Renders and crawls JS- generated content, and can

    be hours or weeks behind the first

  42. https://www.crunchbase.com

  43. recent series a funding in sf tech

  44. None

  45. recent series a funding in sf tech 70% organic traffic

  46. recent series a funding in sf tech

  47. None

  48. recent series a funding in sf tech

  49. recent series a funding in sf tech data science companies

    in new york

  50. DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA

    DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA

  51. 2K pages per minute

  52. 2K pages per minute 1M visitors per week

  53. 2K pages per minute 1M visitors per week 6 continents

    served

  54. 2K pages per minute 1M visitors per week 6 continents

    served 150 milliseconds per request
  55. None

  56. Our Mission: Democratize access to company information and provide solutions

    that guide our users to their next opportunities Angular Universal +

  57. @mgechev Challenges with Universal • Change-refresh time • Deployment

  58. @yourtwitter $ ng add @nguniversal/express-engine $ ng run [PROJECT_NAME]:serve-ssr New

    in v9!

  59. @yourtwitter $ ng update @nguniversal/express-engine

  60. twitter.com/mgechev @ManfredSteyer @AlanAgius4 @mgechev

  61. twitter.com/mgechev Deployment

  62. twitter.com/ mgechev New in @angular/fire

  63. New in @angular/fire

  64. twitter.com/ mgechev New in @angular/fire

  65. twitter.com/mgechev Request / HTML @mgechev Request scripts JS TTI Run

    app on server LCP

  66. twitter.com/mgechev Request / HTML @mgechev Request scripts JS TTI Run

    app on server LCP If not cached Return from the cache Cache LCP

  67. @mgechev Prerendering

  68. @yourtwitter $ ng add @nguniversal/express-engine $ ng run [PROJECT_NAME]:prerender Using

    Universal at build-time New in v9!

  69. @mgechev Building the app Prerendering <2s for 800 pages ng

    run app:prerender

  70. twitter.com/mgechev

  71. twitter.com/mgechev @mgechev JAMStack By HeroDevs

  72. twitter.com/mgechev @mgechev

  73. @mgechev Thank you! twitter.com/mgechev github.com/mgechev blog.mgechev.com Survey: mgv.io/talk