Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Prochain SlideShare
Single Page Applications with AngularJS 2.0
Suivant

4

Partager

AngularJS 2.0

My presentation about the future of AngularJS at the monthly meeting of CopenhagenJS user group.

Livres associés

Gratuit avec un essai de 30 jours de Scribd

Tout voir

AngularJS 2.0

  1. 1. Boyan Mihaylov @bmihaylov linkedin.com/id/bmihaylov AngularJS 2.0
  2. 2. / M.Sc. in Computer Science @ The University of Copenhagen / 7+ years professional experience / 3 years in Ebita / Conference speaker & university lecturer / Interests / Software architecture / Design patterns & architecture tactics / API development / Web 2 Boyan Mihaylov
  3. 3. Agenda / The status quo / Governing principles / The changing Web / AngularJS 2.0 / ECMAScript 6 / Changes
  4. 4. The status quo / Current stable version is 1.3 / 1100+ contributors to the project on GitHub / Companies like Google, Amazon, HBO, Netflix are slowly switching to AngularJS Google Trends for the term ‘angularjs’
  5. 5. Governing principles D.R.Y. Structure Testability
  6. 6. The changing Web Mobile, mobile, mobile WebComponents.org ECMAScript 6 Evergreen browsers
  7. 7. AngularJS 2.0 AngularJS 1.X is built for current browsers while AngularJS 2.0 is being built for the browsers of the future. Igor Minaz, AngularJS Team
  8. 8. AngularJS 2.0 / In process of research and define the version / Design documents are public and everyone can contribute / Mobile-first, performance, modularity / Browsers of the future = evergreen browsers = always up-to-date browsers / More declarative by the use of annotations / Based on ECMAScript 6 + additional markup / Annotations / Types
  9. 9. ECMAScript 6 / Still in draft / JavaScript.next-to-JavaScript-of-today compiler: Traceur https://github.com/google/traceur-compiler / Module-first design / Classes / Lambdas / …
  10. 10. Changes: change detection / Ultimate goal: Object.observe() / Asynchronously observing changes to JavaScript objects without the need for a separate library / Part of ECMAScript 7 specifications / Works already in Chrome 36+ and Opera 26+ / Watchtower.js / https://github.com/angular/watchtower.js / Performs faster than the current solution / Can be used today 
  11. 11. Changes: dependency injection / No more a global module repository / Calls to angular.module() will always return a new module / Based on ES6 + annotations ← Before After →
  12. 12. Changes: templating (1) / Simpler definition of directives / Integration with other component frameworks via WebComponents.org / Allow IDEs to identify and validate templates / Three types of directives / Decorator directive – decorates existing elements (e.g., ng-show) / Template directive – turns the element they are on into a template (e.g., ng-repeat, ng-include, ng-view) / Component directive – encapsulates logic (JavaScript, HTML, CSS) into a reusable component
  13. 13. Changes: templating (2) Binding to properties instead of attributes Event handlers Interpolations
  14. 14. Changes: templating (3) / Another proposition for syntax / [attribute] – one way binding / [attribute|name] – same as above but also specifies a local variable name to be used by the template / (event) – attach an event handler / (^event) – attach a bubbling event handler / ${expression} – interpolations (always convert to a string)
  15. 15. Changes: persistence (1) As a gamer, I want to play board games with my friends in multiplayer over the web. As I play the game, I want to be able to chat with my friends, as well as make sure my moves are propagated in real time to other players in the game. I want to be notified if the game goes offline and I shouldn’t be able to make any moves until the game state has caught up to the current state again.
  16. 16. Changes: persistence (2) / Right now we have only $http and $resource / Mobile apps need to work in an “always offline” mode / Access to network state / Easier communication with RESTful services Model IAdapter ChangeEvent $localDB $sessionStorage$localStorage $indexedDB$http $webSocket $appCache $serviceWorker $connection Module ngData Module ngOffline Module ngWebSocket Module ngHttp Module ngStore Phase 1 Phase 2 Phase 3
  17. 17. DEMO https://github.com/omeganet/Employee-Register-POC
  18. 18. References / AngularJS 2.0 http://angularjs.blogspot.dk/2014/03/angular-20.html / AngularJS 2.0 Status and Preview http://ng-learn.org/2014/03/AngularJS-2-Status-Preview/ / AngularJS 2.0 Design Docs https://drive.google.com/?pli=1#folders/0B7Ovm8bUYiUDR29iSkEyMk5pVUk / ECMAScript 6 Draft http://people.mozilla.org/~jorendorff/es6-draft.html
  • PeterHan3

    May. 30, 2016
  • ewey27

    Jan. 9, 2016
  • baagiizuna

    Jun. 30, 2015
  • shinichitomita

    Feb. 15, 2015

My presentation about the future of AngularJS at the monthly meeting of CopenhagenJS user group.

Vues

Nombre de vues

2 864

Sur Slideshare

0

À partir des intégrations

0

Nombre d'intégrations

40

Actions

Téléchargements

0

Partages

0

Commentaires

0

Mentions J'aime

4

×