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

1. Boyan Mihaylov
@bmihaylov
linkedin.com/id/bmihaylov
AngularJS 2.0

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. Agenda
/ The status quo
/ Governing principles
/ The changing Web
/ AngularJS 2.0
/ ECMAScript 6
/ Changes

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. Governing principles
D.R.Y. Structure Testability

6. The changing Web
Mobile, mobile, mobile WebComponents.org
ECMAScript 6 Evergreen browsers

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. 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. 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. 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. 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. 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. Changes: templating (2)
Binding to
properties instead
of attributes
Event handlers
Interpolations

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. 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. 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. DEMO
https://github.com/omeganet/Employee-Register-POC

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