Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

AngularJS 2.0 Jumpstart

1.623 visualizaciones

Publicado el

Jumpstart about the upcoming version of the most important JavaScript framework

Publicado en: Software
  • Sé el primero en comentar

AngularJS 2.0 Jumpstart

  1. 1. ANGULARJS 2.0 JUMPSTART
  2. 2. About me Filipe Falcão Computer Science, JavaScript, Python +FilipeFalcaoBatista @FilipeFalcaoS
  3. 3. Topics 1. Motivation 2. Old vs new concepts
  4. 4. Motivation 1. Performance “Today,Angular 2 is 5 times faster than Angular 1” –Misko Hevery
  5. 5. Motivation 2.Web standards Shadow DOM replaces transclusion ES6 Modules replaces Angular ones
  6. 6. Old vs new concepts 1. Components 2.AtScript and ES6 3. Bootstraping 4. Syntax changes and uniformity 5. Change detection
  7. 7. Before we get started… AngularJS 2.0 is currently in Alpha Preview, so things might/can/ definitely will change
  8. 8. Components @Component ({ selector: 'my-component' }) @View ({ inline: '<div>Hi from Angular 2</div>' }) export class MyComponent { constructor () { this.name = 'Filipe' } sayMyName () { console.log(‘'My name is ‘ + this.name) } }
  9. 9. AtScript Syntax sugar on top of ES6 for meta-data annotations @Component ({ selector: 'my-component' }) @View ({ inline: '<div>Hi from Angular 2</div>' })
  10. 10. ES6 Represents the “controller" export class MyComponent { constructor () { this.name = 'Filipe' } sayMyName () { console.log(‘'My name is ‘ + this.name) } }
  11. 11. Bootstraping in 1.x 1. Create module 2. Declare ng-app 3. Create controller 4. Manage $scope 5. Declare ng-controller 6. Create template
  12. 12. Bootstraping in 2.0 1. Create component 2. Create template 3. Bootstrap 4.Transpilation import bootstrap from 'angular2' bootstrap(MyComponent)
  13. 13. Syntax changes 1. Local variables <input #name type=“text”> {{ name.value }}
  14. 14. Syntax changes 2. Event handlers <input #name type=“text”> <button (click)=“addName($event, name.value)”>Add</button> <button (dbclick)=“editName($event, name.value)”>Edit</button>
  15. 15. Syntax changes 3. Property bindings <input #name type=“text”> <span [textContent]=“name.value”></span>
  16. 16. Syntax uniformity 1. (event) - for HTML DOM events 2. [property] - for HTML properties
  17. 17. Change detection 1.Tree of components 2. Reactive system 3. Directed tree 4. Detection system walks the whole tree 5. Immutable/Observable objects - O(n) to O(log n) 6. Zone.js
  18. 18. More resources 2. ng-conf and ng-vegas 1. angular.io 3. learnangular2.com 4. 2do app by David East
  19. 19. THANKS! Any questions? You can find me at: +FilipeFalcaoBatista @FilipeFalcaoS

×