How to to choose your next JavaScript Web Framework?

Transcript

1. How to choose your next JavaScript Web Framework
2. WHO’S WHO Emmanuel Demey (@EmmanuelDemey)
5. A HUGE ECOSYSTEM
6. How to choose your next JavaScript Web Framework ?
7. AGENDA • Component approach ◦ What is a component ? ◦ Webcomponents, Polymer. • Popular Frameworks/Librairies ◦ Angular ◦ React ◦ Vue.js • Patterns ◦ Flux, Redux • JS Mobile ◦ Hybrid / Natives / PWA Applications
8. HISTORY
9. HISTORY
10. HISTORY
11. HISTORY → Web Application in a browser - SPA
12. HISTORY
13. Components
14. COMPONENTS Example ElementHTML properties View State
15. ElementHTML properties View State COMPONENTS Example
16. ElementHTML properties View State COMPONENTS Example
17. ElementHTML properties View State COMPONENTS Example
18. ElementHTML properties View State COMPONENTS Example
19. WEBCOMPONENTS.ORG COMPONENTS
20. ATOMIC DESIGN
21. ATOMIC DESIGN
22. ATOMIC DESIGN
23. ATOMIC DESIGN
24. ATOMIC DESIGN
25. ATOMIC DESIGN
26. Popular Frameworks
28. Just
29. DIFFERENCES WITH ANGULAR JS • Completely new framework • Component oriented approach • TypeScript
30. FIRST COMPONENT ElementHTML properties View State
31. FIRST COMPONENT
32. FIRST COMPONENT
33. EVENT BINDING = ()
34. PROPERTY BINDING = []
35. API • Component parameters ◦ @Input() • Component state ◦ private myState: boolean; • Templating ◦ Directives: *ngIf, *ngFor, [ngClass] • Component Lifecycle ◦ ngOnChanges ◦ ngOnInit ◦ ngOnDestroy ◦ etc... ◦ @Injectable() ◦ @Pipe() • Elements ◦ @NgModule() ◦ @Component() export class MyComponent {}
36. DEPENDENCY INJECTION • More powerful than AngularJS • Providers ◦ Global configuration : @NgModule ◦ Local configuration : @Component • Dependency Injection ◦ With constructor parameters in a class ◦ @Injectable inside a Service
37. ANGULAR, A PLATFORM
39. FIRST COMPONENT
40. JSX
41. JSX
42. FIRST COMPONENT
43. FIRST COMPONENT
44. FIRST COMPONENT
45. FIRST COMPONENT
46. VIRTUAL DOM PATCH Set <h1> to “Marcel” <h1> Docker </h1> Virtual DOM Before <h1> Marcel </h1> Virtual DOM After DIFF 1 <h1> Docker </h1> Real DOM Before <h1> Marcel </h1> Real DOM After APPLY 2
47. API • Create a component ◦ createClass ◦ extends Component ◦ pure function • Component parameter ◦ props • Component state ◦ state • Templating ◦ JSX • Component Lifecycle ◦ componentWillMount ◦ componentDidMount ◦ etc...
48. USERS
50. FIRST COMPONENT
51. FIRST COMPONENT
52. FIRST COMPONENT
53. FIRST COMPONENT
54. FIRST COMPONENT
55. API • Create a component ◦ Vue.component() • Component parameters ◦ props: [] • Component state ◦ data: () => {} • Templating ◦ Directives: v-bind, v-on... • Component Lifecycle ◦ beforeCreate ◦ mounted ◦ beforeDestroy ◦ etc...
56. USERS
57. Patterns
58. COMPLEX COMPONENT-ORIENTED ARCHITECTURE C C C C C C C state state state state state state state
59. REDUX Store C connect()
60. REDUX Store C connect() Action dispatch() Reducer
61. REDUX Store C connect() Action dispatch() Reducer newState
62. JS Mobile
63. JS MOBILE
64. HYBRID
65. HYBRID
66. “NATIVE”
67. “NATIVE” VS “HYBRID” do we really need all this stuff ?
68. PROGRESSIVE WEB APP
69. PROGRESSIVE WEB APP
70. How to choose the right JavaScript framework ?
72. Questions ? Thanks !