The slides are from my talk on the various tools and tips to improve being productive with Angular

1. Getting Productive & Performant with
Angular
Vinci Rufus
@areai51

2. Why Angular?
… because DX matters..
¯_(ツ)_/¯

3. 3
PS: Preact, Polymer[official], and Vuejs[official] submissions have better scores.
Performance at par [ www.hnpwa.com]

4. 4
Know your Angular
AngularJS
[www.angularjs.org]
Angular 1.x
Angular
[www.angular.io]
Angular 2.x.x
…
Angular 6.x.x

5. IMHO Angular is Awesome!!!
…because…

6. WELCOMING
COMMUNITY

8. Developed in Open
Source

9. Choosing between React and Angular

10. 10
There are 2 types of people in this world!!
Thali A La Carte

11. Getting Productive !!

12. 12
Future Ready
Type System Observables AoTDecorators

13. 13
TypeScript
TSES7ES6ES5

14. 14
Observables

15. 15
Ahead of Time (AOT)
Develop in
TypeScript
Compile
using tsc
Bundle &
Minify
Deploy
Download JS
Assets
Angular
Bootstraps
JIT
Compilation
Render App
App Development
App Rendering

16. 16
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

17. 17
Developer eXperience
Zen modeTypeScript Angular CLI
VSCode
+
Angular Essentials
+ + =
Angular IDE

18. 18
Prettier
Catching Bugs
LOT faster

19. Import Cost
Payload that’s getting added to every
import

20. Angular TypeScript Snippets
Code Snippets for every possible task

21. What’s new in Angular 6.x.x

22. 22
@angular/core
@angular/common
@angular/compiler
Angular CLI
Angular Material + CDK
Synchronized major version numbers
6.0.0

23. 23
New Commands in CLI !!
ng update
ng add @angular/pwa

24. 24
Angular Update Guide
https://angular-update-guide.firebaseapp.com/

25. 25
Angular Elements
ng add @angular/elements
Convert an Angular Component into Custom Element

26. 26
Angular PWA
ng add @angular/pwa
ng build --prod

27. 27
Component Development Kit (CDK)
“The goal of the CDK is to give developers more tools to build awesome
components for the web. This will be especially useful for projects that want to
take advantage of the features of Angular Material without adopting the Material
Design visual language. ” – Angular Team
• Separation of concerns: You can now develop your features using Material CDK
without being bothered by UI constraints along the way.
• Low-imprint UI library: You will not have to apply the Material UI components
anymore to use the features provided. This means no more endless CSS
overriding!

28. 28
Route Animations

29. 29
Angular Ivy
https://ng-ivy-
demo.firebaseapp.com/
enableIvy: true
3.7 KB

30. Microfrontends

31. 31
Microfrontends
Monolithic Frontend Micro frontendMonolithic

32. 32
Polyglot Frontend

33. What’s next in the frontend world?

34. Web Components
Progressive Web Apps
Micro frontend
Micro frontend
Web VR

35. © COPYRIGHT 2015 SAPIENT CORPORATION | CONFIDENTIAL
THANK YOU