Slide 1

Slide 1 text

EvOlUTioN -- Rodolfo Dias

Slide 2

Slide 2 text

Recife

Slide 3

Slide 3 text

Recife

Slide 4

Slide 4 text

Recife

Slide 5

Slide 5 text

Recife

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

@r_mdias !

Slide 10

Slide 10 text

@r_mdias Front End Engineer @CrossEngage !

Slide 11

Slide 11 text

WHAT DOES 3VOLUT1ON MEAN?

Slide 12

Slide 12 text

EvOlUTioN 3VOLUT1ON? "It’s a process where it has continuous and progressive modiﬁcation, changing the element state." Dicio

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

EvOlUTioN

Slide 15

Slide 15 text

EvOlUTioN 3VOLUT1ON?

Slide 16

Slide 16 text

EvOlUTioN 3VOLUT1ON? - Mutation

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

EvOlUTioN 3VOLUT1ON? - Mutation - Recombination

Slide 19

Slide 19 text

EvOlUTioN 3VOLUT1ON? - Mutation - Recombination - Gene ﬂow

Slide 20

Slide 20 text

EvOlUTioN 3VOLUT1ON? - Mutation - Recombination - Gene ﬂow - Adaptation more…

Slide 21

Slide 21 text

"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

Slide 22

Slide 22 text

EvOlUTioN

Slide 23

Slide 23 text

EvOlUTioN

Slide 24

Slide 24 text

EvOlUTioN

Slide 25

Slide 25 text

EvOlUTioN

Slide 26

Slide 26 text

EvOlUTioN

Slide 27

Slide 27 text

EvOlUTioN

Slide 28

Slide 28 text

ANGUL4R 3VOLUT1ON…

Slide 29

Slide 29 text

The Angular purpose is to be an application platform which is easy to learn and meets all the needs established. ANGUL4R EVOLUTION…

Slide 30

Slide 30 text

EvOlUTioN 3VOLUT1ON? - Mutation - Recombination - Gene ﬂow - Adaptation

Slide 31

Slide 31 text

MAIN GOALS TO 3VOLUT1ON

Slide 32

Slide 32 text

EvOlUTioN MAIN GOALS TO 3VOLUT1ON - Performance

Slide 33

Slide 33 text

EvOlUTioN - Performance - Learning Curve MAIN GOALS TO 3VOLUT1ON

Slide 34

Slide 34 text

EvOlUTioN - Performance - Learning Curve - Web Components friendly MAIN GOALS TO 3VOLUT1ON

Slide 35

Slide 35 text

EvOlUTioN - Performance - Learning Curve - Web Components friendly - Support for native mobile - iOS and Android MAIN GOALS TO 3VOLUT1ON

Slide 36

Slide 36 text

EvOlUTioN - Performance - Learning Curve - Web Components friendly - Support for native mobile - iOS and Android  - Server side rendering MAIN GOALS TO 3VOLUT1ON

Slide 37

Slide 37 text

EvOlUTioN - Performance - Learning Curve - Web Components friendly - Support for native mobile - iOS and Android  - Server side rendering - Angular migration MORE… MAIN GOALS TO 3VOLUT1ON

Slide 38

Slide 38 text

EvOlUTioN - Performance - Learning Curve - Web Components friendly - Support for native mobile - iOS and Android  - Server side rendering - Angular migration MORE… MAIN GOALS TO 3VOLUT1ON

Slide 39

Slide 39 text

GOAL: PERFORMANCE

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

GOAL: LEARNing CURVE & WEB COMPONENTs FRIENDLY

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

HOW TO IMPROVE IT?

Slide 46

Slide 46 text

- START USE PURE ES SYNTAX HOW TO IMPROVE IT?

Slide 47

Slide 47 text

- START USE PURE ES SYNTAX - IMPROVE STACK TRACES HOW TO IMPROVE IT?

Slide 48

Slide 48 text

- START USE PURE ES SYNTAX - IMPROVE STACK TRACES - LESS “ANGULARJS WAY" HOW TO IMPROVE IT?

Slide 49

Slide 49 text

HOW TO IMPROVE IT?

Slide 50

Slide 50 text

HOW TO IMPROVE IT?

Slide 51

Slide 51 text

HOW TO IMPROVE IT?

Slide 52

Slide 52 text

WHAT CHANGES WITH THOSE CHOICES??

Slide 53

Slide 53 text

WHAT CHANGES WITH THOSE CHOICES?? DIRECTIVE -> COMPONENT & DIRECTIVE

Slide 54

Slide 54 text

DIRECTIVE -> COMPONENT & DIRECTIVE SERVICE & FACTORY -> INJECTABLE WHAT CHANGES WITH THOSE CHOICES??

Slide 55

Slide 55 text

DIRECTIVE -> COMPONENT & DIRECTIVE SERVICE & FACTORY -> INJECTABLE FILTER -> PIPE WHAT CHANGES WITH THOSE CHOICES??

Slide 56

Slide 56 text

DIRECTIVE -> COMPONENT & DIRECTIVE SERVICE & FACTORY -> INJECTABLE FILTER -> PIPE APP -> MODULE/COMPONENT MORE… WHAT CHANGES WITH THOSE CHOICES??

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

DIRECTIVE -> COMPONENT import { myComponentController } from './my-component.controller'; export const myComponent: angular.IComponentOptions = { bindings: { ... }, controller: myComponentController, template: `...` } 1.5.X + TS

Slide 59

Slide 59 text

DIRECTIVE -> COMPONENT import { myComponent } from ‘./my-component.component'; export const myComponentModule = angular .module('app.myComponent', []) .component('myComponent', myComponent) .name; 1.5.X + TS

Slide 60

Slide 60 text

DIRECTIVE -> COMPONENT import { Component } from '@angular/core'; @Component({ selector: 'my-element', template: `

My Element

`, styles: ['./my-element.css'] }) export class MyElementComponent { constructor() { } }

Slide 61

Slide 61 text

DIRECTIVE -> COMPONENT import { Component } from '@angular/core'; @Component({ selector: 'my-element', template: `

My Element

`, styles: ['./my-element.css'] }) export class MyElementComponent { constructor() { } }

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

DIRECTIVE -> DIRECTIVE import { Directive, ElementRef, Input } from '@angular/core'; @Directive({ selector: '[myDirective]'}) export class myDirective { constructor(private el: ElementRef ) { } @Input('myDirective') myDirective: string; }

Slide 64

Slide 64 text

...

Slide 65

Slide 65 text

SERVICE & FACTORY -> INJECTABLE angular .module('app') .factory('storage', storage); storage.$inject = ['myModule']; function storage(myModule) { } 1.4.X

Slide 66

Slide 66 text

SERVICE & FACTORY -> INJECTABLE angular .module('app') .service('zipCodes', zipCodes); zipCodes.$inject = ['myModule']; function zipCodes(myModule) { } 1.4.X

Slide 67

Slide 67 text

SERVICE & FACTORY -> INJECTABLE export class myService { static $inject = ['$http']; constructor( private $http ) { } } 1.5.X + TS

Slide 68

Slide 68 text

SERVICE & FACTORY -> INJECTABLE import { myService } from './my-service.service' angular .module('app') .service('myService', myService) .name; 1.5.X + TS

Slide 69

Slide 69 text

SERVICE & FACTORY -> INJECTABLE import { Injectable } from '@angular/core'; import { Http } from '@angular/http'; @Injectable() export class MyService { constructor( private http : Http ) { } }

Slide 70

Slide 70 text

angular .module('app') .filter('myFilter', myFilter); function myFilter() { return { // something } } FILTER -> PIPE 1.4.X

Slide 71

Slide 71 text

import { Pipe, PipeTransform } from '@angular/core'; @Pipe({name: 'myCustomPipe'}) export class MyCustomPipe implements PipeTransform { transform(value: string): any { return { // something } } } FILTER -> PIPE

Slide 72

Slide 72 text

angular .module('app') .controller('myAppController', myAppController); myAppController.$inject = ['myModule']; function myAppController(myModule) { } 1.4.X APP -> MODULE/COMPONENT

Slide 73

Slide 73 text

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() {} }

Slide 74

Slide 74 text

APP -> MODULE/COMPONENT import { Component } from '@angular/core'; import { myDirective } from './my-directive.directive'; @Component({ selector: 'my-app', directives: [myDirective], template: ` ` }) export class AppComponent { constructor() { } }

Slide 75

Slide 75 text

Slide 76

Slide 76 text

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…