Présentation réalisée pour notre Matinée Pour Comprendre sur Angular : Angular v2 et plus : le futur du développement d'applications en entreprise.

1. Angular
Morning to understand
1

2. Hello!
I am Maxime ROBERT
Web developper
Javascript & Angular lover
Working at Linagora on an Angular project since 8+ months
You can find me at maxime1992 on
2

3. It’s just Angular
1 . x . y : AngularJs
2+ . x . y : Angular
3
https://angular.io/presskit.html

4. Table of content
1. What’s new in Angular ?
￭ Semantic versioning
￭ Typescript
￭ Web components
￭ Focus on performance
2. More than a framework, a platform
￭ Cli
￭ Material
￭ Mobile kit
￭ Universal
￭ Protractor
3. State management and data flow
￭ RxJs
￭ Redux
4

5. What’s new in Angular1
5

6. Semantic Versioning
Breaking
Major : 4.0.0
◇ New features
◇ Potential breaking
changes
Feature
Minor : 4.1.0
◇ New features
◇ No breaking
changes
Fix
Patch : 4.0.1
◇ No features
◇ No breaking
changes
6

7. 2.x.y
7

8. 4.0.0Wait … What ?
8

9. Why v3 has been
skipped ?
@angular/core 2.x.y
@angular/compiler 2.x.y
@angular/http 2.x.y
@angular/router 3.x.y
Misalignment of the router package version
9

10. Why v3 has been
skipped ?
@angular/core 4.x.y
@angular/compiler 4.x.y
@angular/http 4.x.y
@angular/router 4.x.y
10

11. Predictable, transparent &
incremental evolutions
● Patch version every week
● Minor version every month
● Major version every 6 months
11

12. Typescript
◇ Typed Javascript
12
ES6
ES5
Compatibility
◇ Syntax similar to Java
Classes, inheritance, decorators, interfaces, etc
◇ Avoid runtime errors as much as possible
◇ ES6 features compiled into ES5
◇ Documentation

13. Web components
13
◇ A component has it’s own :
App
Comp 1 Comp 2
Comp 3 Comp 4
- Style (.css | .less | .sass)
◇ Angular app → component tree
- Template (.html)
- Logic (.ts)
Comp 4
◇ Reuse components

14. Focus on performance
14
HTMLJavascript
Component
Compile HTML
x30, x50, x100, + ?
Render
Javascript
Component
Compile HTML
Render
JIT AOT
Ahead Of Time compilation

15. 15
JIT 625 kB AOT 300 kB
Core (118 kB)
Core (112 kB)Compiler (318 kB)
Tree
Shaking

16. Focus on performance
16
◇ Split your code by modules
(good practice)
◇ Load only the modules you need
when you need them
◇ Nice on desktop
Must have for tablets and mobiles
Lazy loading made easy !

17. 17
Chunk size : 56.8 KB Chunks size : 574.6 KB
Do not preload lazy loaded routes
Preload lazy loaded routes

18. More than a framework
a platform2
18
Prelude

19. Javascript ecosystem, 2014 to 2016
19
Tired …I’m just tired

20. 20

21. I HAVE A DREAM
THAT ONE DAY I’LL BE ABLE
TO FOCUS ON CODE
21

22. 22
New project

23. Time spent on a project
Find the appropriate
tool(s)
Setup
Code
Bug fix
Deliver
23

24. Code
Deliver
Other project
...
...
Time spent on a project
24

25. Code
Tests
Bug fix
Opti°
Deliver
Time spent on a project
25

26. Find the appropriate
tool(s)
Setup
Code
Bug fix
Deliver
Time spent on a project
26

27. More than a framework
a Platform2
27

28. Angular ecosystem
◇ Cli
◇ Material
◇ Mobile kit
◇ Universal
◇ Protractor
https://cli.angular.io
https://material.angular.io
https://mobile.angular.io
https://universal.angular.io
https://protractor.angular.io
28

29. Angular Cli
◇ Start a new project < 3mn
◇ Same footprint, easier to operate on ≠ projects
◇ Webpack : Import, export, build for production
◇ Generate components, services, modules, etc
◇ Livereload, Sass, Less
29

30. Angular Material
◇ Material components ready to use
◇ API to interact with them (in and out)
◇ Ready for production but not every
components available yet
30

31. Angular Mobile
◇ Keep the discoverability of the web
◇ Automatic Progressive Web Apps
◇ App Shell, Service Worker, Application Manifest
Ex : https://ng2-weather-pwa2.firebaseapp.com
◇ Not ready yet with the CLI but integration on
the way
31

32. Angular Universal
◇ Better performance
◇ Render HTML at first paint
◇ Optimized SEO (Search Engine Optimization)
32

33. Angular Protractor
◇ Write actions to do in a browser like a user
would
◇ Make sure your final product is working well at
anytime
◇ Continuous integration : Check on every commit
33

34. State management
and
Data flow
3
34

35. RxJs Reactive Programming
Why you’ll love it !
◇ Think of your data as an event or
a stream :
They evolve over time
◇ Functional programming
◇ Great documentation
◇ More than 60 operators, just look
for what you need
What could go wrong ?
◇ Big learning curve
◇ Potential memory leaks if devs
don’t fully understand what
they’re doing
35
cc Rob Wormald’s slides

36. http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html 36
Stream 2
a
b
c
d
e
f
Street
Secure building
Stream 1 Stream 2
Stream 1

37. 37
When the input changes
Debounce 400ms
T = 400ms T = 400ms
T < 400ms
Continue only if input has changed
Fetch Wikipedia with the text to search
Display values over time
cc Thoughtram article and the demo

38. {
firstname : 'Maxime' ,
lastname : 'Robert' ,
age: 24
}
Redux
{
firstname : 'Maxime' ,
lastname : 'Robert' ,
age: 25
}
Why you’ll love it !
◇ Centralized store
◇ Plays well with asynchronous
◇ API to introduce middlewares
◇ Nice documentation
◇ Pure functions, easy to test
◇ Huge community
◇ Powerful debugging tools
{
firstname : 'Maxime' ,
lastname : 'Robert' ,
age: 25
}
Handle application state
38
Birthday (mutable)
Birthday (immutable)
#1
#1 #2
{
firstname : 'Maxime' ,
lastname : 'Robert' ,
age: 24
}
#1
Immutability
debugging tools

39. Let’s eat
Pizza Sync
The absolute tool at Linagora Toulouse
maxime1992/pizza-sync
39
demo, shall we ?

40. How it feels to use
Time travelling to debug
40

41. Conclusion
◇ It’s just Angular
◇ Typescript is a perfect replacement for Javascript
◇ Angular has better performance than AngularJs
especially on small devices
◇ Components for clarity and reusability
◇ Angular doesn’t come alone
Platform offers a huge boost for devs
Focus on business code
◇ Angular is stable and can be used in production
◇ Developers will the syntax, the architecture &
the ecosystem
◇ Lot of things to learn, lot of things to get in return
41

42. Thanks!
Any questions?
42