13. Ok. Why does it matter?
80% of internet users own a smartphone. (Smart Insights)
26 April 2017 13
14. …
Over 50% of smartphone users grab their smartphone
immediately after waking up. (ExpressPigeon, 2014)
26 April 2017 14
15. …
Google says 61% of users are unlikely to return to a mobile
site they had trouble accessing and 40% visit a competitor’s
site instead. (MicKinsey & Company)
26 April 2017 15
19. Handling styles
• A variety of Webpack loaders
• Angular CLI supports it by design
26 April 2017 19
20. Handling scripts
• A variety of Webpack loaders
• Angular CLI supports it by design
• … it is still huge. So we need to remove useless code.
26 April 2017 20
21. Tree Shaking
26 April 2017 21
0 500 1000 1500 2000 2500
Application 1
Application 2
Optimization Results
Before Tree Shaking,Kb With Tree Shaking,Kb
27. Tree Shaking
• For the moment Angular CLI has problems with tree
shaking.
• Use the latest version of Angular CLI.
• You need TypeScript 2 and WebPack 2.
26 April 2017 27
29. Compilation
• Just In Time Compilation (JIT)
• Ahead Of Time Compilation (AOT)
26 April 2017 29
30. What is JIT?
• Compiles in the browser.
• No need to build after changes.
• Default compiler in Angular 2 CLI.
26 April 2017 30
31. Why is AOT better?
• You don’t need to load compiler anymore.
• Faster loading.
• Better runtime performance.
• AOT is more secure, because JIT uses eval.
26 April 2017 31
32. AST (Abstract Syntax Tree)
26 April 2017 32
Script
Container
Members Decorators
Container
Members Decorators
Container
Members Decorators
33. AOT (Ahead Of Time Compilation)
26 April 2017 33
0 0.5 1 1.5 2 2.5 3
Bundle size, mb
AngularCLI defaultprojectsize
Compression,tree shaking and AOT
Compression with Tree Shaking
Raw
34.
35. What can we improve?
• Bundle size
• Application performance
26 April 2017 35
38. What we can achieve with good
architecture?
• Better application performance
• Fewer API requests (app drives faster)
• Faster loading speed
26 April 2017 38
39. What architecture features are we
talking about?
• Make sure we’re using events efficiently.
• Make sure our data layer uses data efficiently.
• Control assets loading process.
• Organize correct components composition.
• Reduce DOM overhead.
26 April 2017 39
47. I wanna more!
26 April 2017 H T T P : / / W W W . J V A N D E M O . C O M / H O W - I - O P T I M I Z E D - M I N E S W E E P E R -
U S I N G - A N G U L A R - 2 - A N D - I M M U T A B L E - J S - T O - M A K E - I T - I N S A N E L Y - F A S T /
47
HOW I OPTIMIZED
MINESWEEPER USING
ANGULAR 2 AND
IMMUTABLE.JS TO
MAKE IT INSANELY
FAST
JURGEN VAN DE
MOERE
49. What to do with events?
• Use correct lifecycle hooks in the app.
• Be careful with your own events and use destructors.
• Avoid duplication of events.
• Avoid creation of useless events.
26 April 2017 49
50.
51. What can we do with a data layer?
• Store static data in the browser. (Caching)
• Use pure RESTAPI (With HATEOAS)
• Use debouncing. Really.
• Background services.
26 April 2017 51
53. Why HATEOS?
• You don’t need to handle user roles on Front-End
anymore. At all.
• Server does it anyway during request/response cycle.
26 April 2017 53
54. 26 April 2017
ReactiveX (Rx.js)
• One more way to organize the
asynchronous actions using JavaScript
• Leads to a new way of the components’
composition.
56. Rx.js + A2
PROS
- Allows us to remove HTTP logic from the components.
- Absolutely simple
CONS
- Leads to a new way of the components’ composition.
- It isn’t a fastest solution.
26 April 2017 56
57. What Can We Do With Component’s
Composition?
26 April 2017 57
60. Solution: Zone.js, ngZones, Data
Composition
• Dying zone will remove the subscriptions for local
streams, but won’t do it to current ones in service, upper-
level components.
• Use ngOnDestroy lifecycle hook for removing such
subscriptions.
26 April 2017 60
61. Zone.js, ngZones, Data Composition
26 April 2017 H T T P S : / / G I T H U B . C O M / A N G U L A R / Z O N E . J S / 61
62. Problem: Binding Overhead
• A simple rule: don’t use two-way binding when you don’t
need it.
• ‘Singular’ binding isn’t shipped out of the box, but there
are several ways to implement it.
26 April 2017 62
67. What to with the DOM?
• Remove and add the elements back instead of hiding /
displaying.
• Don’t call DOM directly if it’s possible.
• When it isn’t possible use ElementRef,
@ViewChild/@ViewChildren.
26 April 2017 67