Slides of the talk about Angular, at the "Matinée Pour Comprendre" organized by Linagora the 22/03/17. Discover what's new in Angular, why is it more than just a framework (platform) and how to manage your data with RxJs and Redux.

1. Angular
Morning to understand

2. About LINAGORA
Services Software Assurance Software Editor

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

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

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

6. What’s new in Angular1

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

8. 2.x.y

9. 4.0.0Wait … What ?

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

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

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

13. Typescript
◇ Typed Javascript

14. Typescript
◇ Typed Javascript
◇ Avoid runtime errors as much as possible

15. Typescript
◇ Typed Javascript
ES6
ES5
Compatibility
◇ Avoid runtime errors as much as possible
◇ ES6 features compiled into ES5

16. Typescript
◇ Typed Javascript
ES6
ES5
◇ Avoid runtime errors as much as possible
◇ ES6 features compiled into ES5
◇ Documentation

17. Typescript
◇ Typed Javascript
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

18. Web components
◇ 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

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

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

21. Focus on performance
◇ 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 !

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

23. More than a framework
a platform2
Prelude

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

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

27. New project

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

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

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

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

32. More than a framework
a Platform2

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

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

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

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

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

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

39. Before we take a break
◇ It’s just Angular
◇ Typescript is a perfect replacement for Javascript
◇ Angular has better performance than AngularJs
◇ Components for clarity and reusability
◇ Angular doesn’t come alone
Platform offers a huge boost for devs
Focus on business code
What you should keep in mind from part 1 & 2
What’s coming next ?
◇ How to handle our data ?
◇ How to create sustainable web apps ?
◇ How to de like ?

40. State management
and
Data flow
3

41. 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
cc Rob Wormald’s slides

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

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

44. {
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
Birthday (mutable)
Birthday (immutable)
#1
#1 #2
{
firstname : 'Maxime' ,
lastname : 'Robert' ,
age: 24
}
#1
Immutability
debugging tools

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

46. How it feels to use
Time travelling to debug

47. ◇ Angular is stable and can be used in production
◇ Angular platform allows us to focus on business code and
final product
◇ Better performances especially on small devices
◇ Developers will the syntax, the architecture, the ecosystem
◇ Lot of things to learn, lot of things to get in return
Conclusion

48. Thanks!
Any questions?

49. Internal project:
PetalsCockpit
Customer project

50. PetalsCockpit
A WebApp that manages
● Configuration
● Operation
● Monitoring
of Petals Enterprise Service Bus
Petals ESB is a middleware solution for Service
Oriented Integration
- Multi-servers architecture
- Configuration on the fly - XML files
- Command line - SSH
- API Jmx

51. Objectives:
- A Rich Internet Application
-
- Responsive
( PC / Tablet / mobile )
Technical Architecture:
- Full Stack JS
- Web component
- Lazy Loading
- NoSql
Starting with a POC (end-2015)

52. - Rich Client
- Single Page Application
- Material Design
- Responsive
- Quick prototyping
- testing
Results
Pros Cons
- Hard to define file structure
- $scope easy to use but hard to
debug
- Business logic in controller hard
to maintain
- Complexity of some features ( DI,
Factories / Services)
- Router is limited
- Need to adopt good style guide
(JohnPapa)
Server-Side: NodeJS were not easy to
plug with back-end Java / JMX
Back-end Java team rejection

53. Project re-start (sept-2016)
PIVOTE { Lean Startup }
Redux
- Reactive
programming
- functional
programming
Syntax, programming patterns similar to Java
- Typed Javascript
- Compiled : less runtime error
- Classes, inheritance,
decorators, interfaces, etc
- Web Component
- Reuse Components
- Performance
- CLI, Material, Protoactor
- dev, demo, prod
- Application State
- Centralize Store
- Debug tools

54. Back-end focus
Front-end
team
/index.html
/main.js
/assets/..
/api
/users
/workspaces
/etc..
REST
Quasar
JMX
Dropwizard
Back-end
team
Similar syntax and programming patterns
empower collaborations

55. Customer project
◇ Interface for disruptive IoT product
◇ Multi-platform
◇ Modern fancy design
◇ Evolutive and maintainable
◇ Connected to Django backend :
REST and websocket

56. Challenge 1 :
industrialisation
A template to activate the framework
◇ Project automation : Angular CLI
◇ Tree for pages, components, assets,
environments, styles, etc.
◇ Reactive mechanisms : reducers
◇ Mapping app structure with Angular
features: side panels, menus, etc

57. Challenge 2 :
skills staffing
◇ Skills development
◇ Embracing reactive way of thinking
◇ Embracing the framework

58. Challenge 3 :
easy deployment
◇ Environments : dev, demo, prod
◇ Easy mock-up implementation
for development environment
◇ Electron for packaging Windows app
frontend frontend
backend

59. Questions ?