Tools for fast Angular applications (Chrome Dev Summit 2019)
Tools for fast Angular applications (Chrome Dev Summit 2019)
Angular grew significantly in the past few years from both a tooling and developer experience standpoint. This talk will explore many of the features and newer improvements in the pipeline that allow anyone to build and deploy performant apps with very little overhead.
Through real demos and examples, we’ll cover bundle budgeting, differential serving, automatic code-splitting, and more! In the second part of the talk, we’ll focus on how to efficiently prefetch and preload different modules and components.
Presented by: Minko Gechev
#ChromeDevSummit All Sessions → https://goo.gle/CDS19
Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs
Event photos → https://goo.gle/CDS19Photos
event: Chrome Dev Summit 2019; re_ty: Publish; product: Chrome - General; fullname: Minko Gechev;
Content
0.03 -> hello everyone my name is mukacheve I am
3.149 -> a senior developer programs engineer in
5.43 -> the angular team at Google
6.69 -> today I'm going to show you a couple of
8.97 -> tools that we have been working on to
10.95 -> help you build fast and your
12.78 -> applications in the presentation today
15.45 -> we're going to look into an existing cap
17.85 -> and optimize it by going through three
19.949 -> steps first we'll introduce code
22.98 -> splitting
23.449 -> after that bundle pre-loading and
26.099 -> finally we will deploy the app to
28.47 -> production with a single command
30.17 -> following best serving practices first
34.41 -> things first
35.309 -> let us look at our existing app as any
39.03 -> angular application we can run it by
41.16 -> using the ng serve command now we can
44.94 -> open the app and chrome dev tools into
47.25 -> the browser
47.94 -> let us navigate to all the pages in the
50.7 -> app where our dev tools tracks the
52.77 -> network activity that's the next step we
55.829 -> can open the network tap of chrome dev
57.78 -> tools notice that the only network
60.719 -> requests there is triggered by the image
63.09 -> from the first page we navigated to this
66.54 -> means that during the initial app lost
68.939 -> time we're downloading the JavaScript
71.61 -> associated with all pages
73.53 -> although the user needs only a subset of
75.659 -> it this is a good opportunity to
78.21 -> introduce code splitting in angular CLI
81.32 -> 8.1 we added a lazy module generator it
86.549 -> accepts a module name a routes name and
90.03 -> a parent module name let us use it to
94.259 -> move the about page into its own channel
97.11 -> script check all we need to do is run ng
100.049 -> G for generate M for module with the
104.67 -> name about route name about and parent
108.78 -> module app this command generated a
112.259 -> definition of an ng module declaration
115.92 -> of a lazy route declaration of a default
118.89 -> route in the lazy module and a component
121.95 -> that the fault route will render now let
126.329 -> us go to obvious code to remove the
128.91 -> eager route and switch to the newly
130.77 -> generated lazy one
132.72 -> first let us remove the eager route
135.19 -> itself next we can delete the eager
138.91 -> component import and declaration as a
142.51 -> next step let us move the definition of
145.57 -> the eagerly rendered component to the
148.21 -> lazily rendered one finally let us
151.87 -> remove the files we're not going to use
153.79 -> for this particular example as well as
156.7 -> the eagerly rendered about component now
160.84 -> we can preview the result in the browser
163.14 -> notice that the navigation to the about
165.46 -> page triggered a network request which
168.1 -> downloaded the about module we improved
171.97 -> the initial app wall sign by delaying
174.1 -> scripts which are not immediately needed
176.35 -> by the user this however may introduce
178.78 -> latency when navigating across pages a
181.53 -> technique that can help us to fix this
184.27 -> is bundle pre-loading as a next step we
187.9 -> can install the NZXT quick link module
190.12 -> and save it into our dependencies njx
193.57 -> quick link is a pre loading strategy
195.79 -> that will detect when a router link is
198.16 -> visible in the viewport it will wait
200.47 -> until the browser is idle and prefetch
203.62 -> it unless the user's browser is in data
206.68 -> saving mode to introduce quick link to
210.04 -> our app we first need to import the
212.739 -> quick link module and add it to the list
214.959 -> of imports in the App Engine module
217.65 -> after that we need to import the quick
221.11 -> link strategy and add it as the pre
223.87 -> loading strategy of the angular router
227.22 -> to observe the result let's go back to
230.53 -> Chrome notice that when we open the site
233.77 -> navigation in the background and your
236.32 -> downloads the about module finally let
239.739 -> us deploy the after production following
241.54 -> best serving practices in the console we
245.38 -> can type ng add and your slash fire this
248.86 -> command will install firebase tools and
251.11 -> perform a couple of transformations on
253.78 -> top of our project if we're
256.18 -> authenticated to firebase it will also
258.669 -> fetch our project list and allow us to
261.01 -> select one by using fuzzy search with
264.4 -> the latest deployment capabilities in
266.2 -> the
266.47 -> angular CLI 8.3 we can add a package
270.04 -> from a cloud provider and run the
272.32 -> command ng deploy to push our project to
275.23 -> the clouds now let us run ng deploy in
278.5 -> the terminal it will first build our app
281.65 -> performing the most optimal build
283.75 -> possible after that upload the
286.51 -> production assets to firebase hosting
289.17 -> finally it will output a URL that we can
292.54 -> use to directly preview the deployment
294.31 -> the cloud platforms with direct support
297.73 -> for angular CLI are Google cloud and
300.55 -> firebase Asia and Zeit community
304.57 -> partners also implemented support for
306.91 -> github pages notify and directly
309.85 -> publishing climber is to NPM in this
313.33 -> video we looked into three simple
315.1 -> optimization techniques first we
317.77 -> introduced call splitting to our app
320.169 -> body using the anchor sea lion
321.79 -> schematics after that with ngx quick
324.82 -> link we added efficient prefetching of
327.13 -> chunks associated with visible links in
329.41 -> the viewport finally we deployed the app
332.47 -> to firebase hosting enabling best
334.93 -> serving practices such as CDN and
337.66 -> content compression you can learn more
340.21 -> about all of these techniques at web dev
342.669 -> slash angular thank you for watching
345.63 -> [Music]
Source: https://www.youtube.com/watch?v=l8mCutUMh78