Download to read offline
Uploaded byVinci Rufus
Making Angular2 lean and Fast
This document discusses how Angular2 aims to make applications fast and lean. It highlights several techniques Angular2 uses such as ahead-of-time compilation, lazy loading of routes, unidirectional data flow, and tree shaking that help reduce bundle size and improve performance. Universal rendering is also discussed as a way to eliminate the initial loading delay by pre-rendering pages on the server.
Making Angular2 lean and Fast
- 1. Making Angular2 Leanand Fast Vinci Rufus @areai51
- 2.
- 3.
- 4.
- 6.
- 7. Avg Human’s AttentionSpan 9 seconds8 seconds (2013) * Microsoft Attention Span Research Report
- 8. What’s taking youso long
- 9. The ng-show@ngConf 2016 •https://www.youtube.com/watch?v=aSFfLVxT5vA
- 10. Peek into theAngular2 Framework Platform Angular 2 Mobile Server Material UI CLI IDE & TypeScript Augury
- 11.
- 12. Angular2 performance Render 2.5x Faster Re-Render 4.2xFaster Always 5x Faster Angular2 Beta Final
- 13. Things that makeAngular2 Fast …just some of them Fast Change Detection Unidirectional Data Flow Lazy Loading of Routes 1 3 4 5 AoT Compilation JavaScript VM Friendly Code Tree Shake !! + Angular 1.x Angular 2
- 14. My India –Report Card The journey
- 15.
- 16. Ahead of Time(AoT) The best thing ever since Angular
- 17. Just in Time(JIT) Develop in TypeScript Compile using tsc Bundle & Minify Deploy Download JS Assets Angular Bootstraps JIT Compilation Render App App Development App Rendering
- 18. Ahead of Time(AoT) Develop in TypeScript Compile using ngc Bundle & Minify Deploy Download JS Assets Angular Bootstraps Render App App Development App Rendering Angular Templates+CSS into TypeScript TS into JavaScript
- 19.
- 20.
- 21. Bootstrapping Just In Time(JIT) Ahead of Time (AoT)
- 22.
- 23.
- 24. Tree Shake Rollup.js Google Closure Compiler AoT+Tree Shake 2.5x Smaller bundle sizes
- 25. 2.9 1.334 0.261 0 0.5 1 1.5 2 2.5 3 3.5 JIT AoT TreeShake +gzip SizeinMB
- 26. Universal Rendering …because firstimpressions matter.
- 27. Universal Rendering Render thefirst page on the server and transfer state to client side once it is loaded ..more to come Render Angular Universally using
- 29.
- 30. Preboot to theRescue 0 100 Initial Request View Painted JS arrives JS parsed +evaled Uncanny Valley Record Events Relay Events Preboot.js
- 31.
- 32. Web Workers ..the realworkhorse
- 33. Main Thread Web Workersin Angular Angular Application (View Parts) Worker Thread Angular Application (CPU intensive Parts) ClientMessageBroker ServiceMessageBroker
- 34. PWA & ServiceWorkers ..the new kid on the block
- 35. "Its costs moreto transmit a byte than to compute it" especially on mobile devices
- 36. App Shell Model Instant Loading Offline Support Progressive WebApp 60 fps Add to Home Screen Render Root Component Universally Root Component as App Shell Service Worker via CLI Web Worker Web App Manifest via CLI
- 37. Some Numbers 2356 287 128 0 500 1000 1500 2000 2500 Standard AppShell +Service worker Timeinmsec
- 38.
- 39. PWA Web Workers Universal Ahead ofTime (AoT) +Tree Shake For All Applications - Gets many new visitors - SEO is important - Social shares happen a lot #eCommerce - Need consistent 60 fps - CPU Intensive Tasks #Data Visualization, #Number Crunching Truly Mobile First Native App Replacement
- 40. The Crew Aakash KeshavSiddharth Visweshwaran Nisheed Shafeeq Anup Bhumika
- 41. जनहित में जारी BeNice! to people
- 42. जनहित में जारी Embrace Diversity InOpinions Ways of working Frameworks
- 43.
Editor's Notes
- #2 Stand up Universal technques No need for NG2 knowledge
- #4 Give me some love Put things behind us Love Meta refresh feedbaack
- #5 The first question that arises after having a quick look at Angular2.. Is you’ve changed so much !!!
- #6 Back in the days, expectations from JS fameworks were rather simple… All we wanted was avoiding round trips to the server and a more desktop like experience people wanted SPAs and they were ready to wait for a few extra seconds for the browser to load the framework library to enjoy that experience. Life was a lot easy for developers too.. Load the library file via a script tag and start writing code.
- #7 What has also changed a lot is also the tools we use. In those good old days most of us relied on these basic tools Today not only a lot more tools have been added tool our toolkit, we have have more choices of the tools.
- #8 Speed and performance matters Relevant to today’s time
- #10 This 3 min clip from the truly funny talk at NG-Conf should give an idea of why its taking so long
- #11 I’m sure many of you are thinking that’s the problem… they are jumping into too many things.. They should just focus on one single thing and get it right.. And if you asked me.. I too thought the same.. And many other frameworks are doing that… But then we as engineers or architects we need to worry about the whole solution, our consumers are not going to be satisfied with we doing that that one thing perfectly. And this is actually what makes Angular stand out. Angular2 has evolved into from being a framework to a platform that will allow us as developers to build entire solutions that will give our consumers a great user experience.
- #16 Need to Update the numbers based on the default out of box deployment of the app
- #28 The reason we do Universal rendering is because we would like Faster Views for first time Users Better Indexing by Search engines Image previews on Social Shares
- #29 The decoupling of the application layer form the Renderr allows us to easily render our app for the server and browser and also switch between them
- #30 Paul Lewis tweeted about the Uncanny Valley, where the user is lost/confused during the time the server side view has been generated and the user is able to see the page but is unable to interact with the page because the client side code hasn’t downloaded and taken control
- #31 Preboot a small library form Universal tries to solve the problem. It injects itself into the head of the server side rendered page and records the user actions. Once the client side has been loaded, it relays these actions to the client app which performances the actions.
- #39 The mobile toolkit at mobile.angular.io makes it very easy to get started with building PWAs with Angular.
- #42 In our quest for being opinionated, we have started becoming cynical. We like to surround ourselves with all the fancy jargons and like to show off all the cool stuff we know. We’ve sort of created an atomosphere that is intimidating for people from other streams to enter our space.
- #43 History has shown the JS community rarely comes to a consensus on things , be is OOPs, Functional programing, reactive programming, static types etc. We need to Embrace Diversity and learn from the good things in others and implement it in our work.