Angular Evolution

Let’s understand about AngularJS and Angular, see some important points behind of all Angular ecosystem evolution that goes beyond of just a “JS Framework”, check the goals of Angular team had to make and improve the new version of this ecosystem.

Transcript

1. EvOlUTioN -- Rodolfo Dias
2. Recife
3. Recife
4. Recife
5. Recife
9. @r_mdias !
10. @r_mdias Front End Engineer @CrossEngage !
11. WHAT DOES 3VOLUT1ON MEAN?
12. EvOlUTioN 3VOLUT1ON? "It’s a process where it has continuous and progressive modification, changing the element state." Dicio
13. EvOlUTioN 3VOLUT1ON? "Evolution is change in the heritable characteristics of biological populations over successive generations. Evolutionary processes give rise to biodiversity at every level of biological organization, including the levels of species, individual organisms, and molecules." wikipedia
14. EvOlUTioN
15. EvOlUTioN 3VOLUT1ON?
16. EvOlUTioN 3VOLUT1ON? - Mutation
18. EvOlUTioN 3VOLUT1ON? - Mutation - Recombination
19. EvOlUTioN 3VOLUT1ON? - Mutation - Recombination - Gene flow
20. EvOlUTioN 3VOLUT1ON? - Mutation - Recombination - Gene flow - Adaptation more…
21. "Adaptation is the process that makes organisms better suited to their habitat. Also, the term adaptation may refer to a trait that is important for an organism's survival." wikipedia AD4PTAT10N
22. EvOlUTioN
23. EvOlUTioN
24. EvOlUTioN
25. EvOlUTioN
26. EvOlUTioN
27. EvOlUTioN
28. ANGUL4R 3VOLUT1ON…
29. The Angular purpose is to be an application platform which is easy to learn and meets all the needs established. ANGUL4R EVOLUTION…
30. EvOlUTioN 3VOLUT1ON? - Mutation - Recombination - Gene flow - Adaptation
31. MAIN GOALS TO 3VOLUT1ON
32. EvOlUTioN MAIN GOALS TO 3VOLUT1ON - Performance
33. EvOlUTioN - Performance - Learning Curve MAIN GOALS TO 3VOLUT1ON
34. EvOlUTioN - Performance - Learning Curve - Web Components friendly MAIN GOALS TO 3VOLUT1ON
35. EvOlUTioN - Performance - Learning Curve - Web Components friendly - Support for native mobile - iOS and Android MAIN GOALS TO 3VOLUT1ON
36. EvOlUTioN - Performance - Learning Curve - Web Components friendly - Support for native mobile - iOS and Android
 - Server side rendering MAIN GOALS TO 3VOLUT1ON
37. EvOlUTioN - Performance - Learning Curve - Web Components friendly - Support for native mobile - iOS and Android
 - Server side rendering - Angular migration MORE… MAIN GOALS TO 3VOLUT1ON
38. EvOlUTioN - Performance - Learning Curve - Web Components friendly - Support for native mobile - iOS and Android
 - Server side rendering - Angular migration MORE… MAIN GOALS TO 3VOLUT1ON
39. GOAL: PERFORMANCE
41. GOAL: LEARNing CURVE & WEB COMPONENTs FRIENDLY
45. HOW TO IMPROVE IT?
46. - START USE PURE ES SYNTAX HOW TO IMPROVE IT?
47. - START USE PURE ES SYNTAX - IMPROVE STACK TRACES HOW TO IMPROVE IT?
48. - START USE PURE ES SYNTAX - IMPROVE STACK TRACES - LESS “ANGULARJS WAY" HOW TO IMPROVE IT?
49. HOW TO IMPROVE IT?
50. HOW TO IMPROVE IT?
51. HOW TO IMPROVE IT?
52. WHAT CHANGES WITH THOSE CHOICES??
53. WHAT CHANGES WITH THOSE CHOICES?? DIRECTIVE -> COMPONENT & DIRECTIVE
54. DIRECTIVE -> COMPONENT & DIRECTIVE SERVICE & FACTORY -> INJECTABLE WHAT CHANGES WITH THOSE CHOICES??
55. DIRECTIVE -> COMPONENT & DIRECTIVE SERVICE & FACTORY -> INJECTABLE FILTER -> PIPE WHAT CHANGES WITH THOSE CHOICES??
56. DIRECTIVE -> COMPONENT & DIRECTIVE SERVICE & FACTORY -> INJECTABLE FILTER -> PIPE APP -> MODULE/COMPONENT MORE… WHAT CHANGES WITH THOSE CHOICES??
57. DIRECTIVE -> COMPONENT angular .module(‘app.myElement') .directive('myElement', myElement); function myElement() { var directive = { templateUrl: '/my-element.html', controller: myElementController, restrict: 'E' }; return directive; } function myElementController() { /* */ } 1.4.X
58. DIRECTIVE -> COMPONENT import { myComponentController } from './my-component.controller'; export const myComponent: angular.IComponentOptions = { bindings: { ... }, controller: myComponentController, template: `<section id="my-component">...</section>` } 1.5.X + TS
59. DIRECTIVE -> COMPONENT import { myComponent } from ‘./my-component.component'; export const myComponentModule = angular .module('app.myComponent', []) .component('myComponent', myComponent) .name; 1.5.X + TS
60. DIRECTIVE -> COMPONENT import { Component } from '@angular/core'; @Component({ selector: 'my-element', template: `<h1>My Element</h1>`, styles: ['./my-element.css'] }) export class MyElementComponent { constructor() { } }
61. DIRECTIVE -> COMPONENT import { Component } from '@angular/core'; @Component({ selector: 'my-element', template: `<h1>My Element</h1>`, styles: ['./my-element.css'] }) export class MyElementComponent { constructor() { } } <my-element></my-element>
62. DIRECTIVE -> DIRECTIVE angular .module('app.myDirective') .directive('myDirective', myDirective); function myDirective() { var directive = { link: link, restrict: 'A' }; return directive; function link(scope, element, attrs) { /* */ } } 1.4.X
63. DIRECTIVE -> DIRECTIVE import { Directive, ElementRef, Input } from '@angular/core'; @Directive({ selector: '[myDirective]'}) export class myDirective { constructor(private el: ElementRef <any>) { } @Input('myDirective') myDirective: string; }
64. DIRECTIVE -> DIRECTIVE import { Directive, ElementRef, Input } from '@angular/core'; @Directive({ selector: '[myDirective]'}) export class myDirective { constructor(private el: ElementRef <any>) { } @Input('myDirective') myDirective: string; } <div *myDirective=“Angular Meetup Berlin”>...</div>
65. SERVICE & FACTORY -> INJECTABLE angular .module('app') .factory('storage', storage); storage.$inject = ['myModule']; function storage(myModule) { } 1.4.X
66. SERVICE & FACTORY -> INJECTABLE angular .module('app') .service('zipCodes', zipCodes); zipCodes.$inject = ['myModule']; function zipCodes(myModule) { } 1.4.X
67. SERVICE & FACTORY -> INJECTABLE export class myService { static $inject = ['$http']; constructor( private $http ) { } } 1.5.X + TS
68. SERVICE & FACTORY -> INJECTABLE import { myService } from './my-service.service' angular .module('app') .service('myService', myService) .name; 1.5.X + TS
69. SERVICE & FACTORY -> INJECTABLE import { Injectable } from '@angular/core'; import { Http } from '@angular/http'; @Injectable() export class MyService { constructor( private http : Http ) { } }
70. angular .module('app') .filter('myFilter', myFilter); function myFilter() { return { // something } } FILTER -> PIPE 1.4.X
71. import { Pipe, PipeTransform } from '@angular/core'; @Pipe({name: 'myCustomPipe'}) export class MyCustomPipe implements PipeTransform { transform(value: string): any { return { // something } } } FILTER -> PIPE
72. angular .module('app') .controller('myAppController', myAppController); myAppController.$inject = ['myModule']; function myAppController(myModule) { } 1.4.X APP -> MODULE/COMPONENT
73. APP -> MODULE/COMPONENT import { NgModule } from ‘@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from ‘./app.component'; import { appHeader } from ‘./app-header.component'; import { appMain } from ‘./app-main.component’; import { myService } from './my-service.service'; @NgModule({ imports: [BrowserModule, appHeader, appMain], providers: [myService], declarations: [AppComponent], entryComponents: [AppComponent] }) export class AppModule { ngDoBootstrap() {} }
74. APP -> MODULE/COMPONENT import { Component } from '@angular/core'; import { myDirective } from './my-directive.directive'; @Component({ selector: 'my-app', directives: [myDirective], template: ` <app-header></app-header> <app-main></app-main> ` }) export class AppComponent { constructor() { } }
75. APP -> MODULE/COMPONENT import { Component } from '@angular/core'; import { myDirective } from './my-directive.directive'; @Component({ selector: 'my-app', directives: [myDirective], template: ` <app-header></app-header> <app-main></app-main> ` }) export class AppComponent { constructor() { } } <my-app></my-app>
76. EvOlUTioN MAINS GOALS TO 3VOLUT1ON - Performance - Learning Curve - Web Component friendly - Support for native mobile - iOS and Android
 - Server side rendering - Angular 2 migration MORE…
78. speakerdeck.com/rmdias
79. @R_MDIAS THANKS
80. meetup.com/CrossEngage- Academy