Codemotion Rome 2015 - For only a couple of years AngularJS has become a standard when talking about single-page applications. Its modularity, testability and structure gives developers a well-defined scope and certain confidence in their projects. As Web changes, so a natural change is expected to happen in the project itself. Version 2.0 however brings a far new world. Although it builds on the existing foundation and governing principles behind the project, it reveals some aspects that have already provoked discussions in the community. In this talk I will go through the new components in AngularJS 2.0: ECMAScrip.

1. ROME 27-28 March 2015
AngularJS 2.0:
A natural evolvement or a new
beginning
Boyan Mihaylov
@bmihaylov

2. ROME 27-28 March 2015
Agenda
• How It All Started
• The Changing Web
• JavaScript Evolution
• Angular 2.0
• What Is The Future
• Q&A

3. ROME 27-28 March 2015
About me
• 7+ years professional experience
• Find-the-right-tool mindset
• Conference & university speaker
• Like sharing and discussions
• Improv actor

4. ROME 27-28 March 2015
How It All Started
• Started by Miško Hevery and Adam Abrons in 2009
• First name was GetAngular
• Intended as an end-to-end tool for web designers
Miško HeveryAdam Abrons

5. ROME 27-28 March 2015
Google Takes Over
• Miško started working on a project in Google
Google
Web
Toolkit
6
months
17 000
lines of code
Angular
JS3
weeks
1 500
lines of code

6. ROME 27-28 March 2015
Google Trends 2011-2015

7. ROME 27-28 March 2015
LinkedIn Skills Search
0
20 000
40 000
60 000
80 000
100 000
120 000
140 000
AngularJS Backbone.js Knockout.js Ember.js

8. ROME 27-28 March 2015
Key Principles
D.R.Y.Structure Testability

9. ROME 27-28 March 2015
Model-View-Something
• Model-View-*
• Controller, Presenter, ViewModel, …
Controller
ServiceServiceService
Model
manipulate
fetch
data
View
data bind
interact
update

10. ROME 27-28 March 2015
Example #1: Controllers
var app = angular.module('Codemotion', []);
app.factory('Attendees', function($http) {
return {
getAll: function() {
return $http.get('/api/attendees');
}
};
});
app.controller('WelcomeCtrl', function($scope, Attendees) {
Attendees.getAll().success(function (attendees) {
$scope.attendees = attendees;
});
});
index.js

11. ROME 27-28 March 2015
Example #1: Controllers
…
<ul ng-controller="WelcomeCtrl">
<li ng-repeat="attendee in attendees">
{{attendee.name}}, {{attendee.company}}
</li>
</ul>
…
index.html

12. ROME 27-28 March 2015
Scopes
$rootScope
$isolatedScopeA $isolatedScopeB $scopeA
$scopeA1 $scopeA2
$scopeA11 $scopeA12

13. ROME 27-28 March 2015
Components
• Are called directives
• Hardcoded vs. external template
• Isolated vs. child scope
• Can be rendered in 4 ways
• Custom HTML tag
• Attribute
• Class
• Comment

14. ROME 27-28 March 2015
Example #2: Directives
index.js
var app = angular.module('Codemotion', []);
app.directive('welcome', function() {
return {
restrict: 'EA',
scope: { to: '@' },
template: '<h1>Welcome to {{to}}!</h1>'
};
});
…
<welcome to="Rome"></welcome>
…
index.html

15. ROME 27-28 March 2015
The Changing Web
Change is the law of life. And those who
look only to the past or present are
certain to miss the future.
John F. Kennedy

16. ROME 27-28 March 2015
The Changing Web
http://solutions.wolterskluwer.com/blog/2011/09/call-my-agent-evolution-in-information-retrieval/webtimeline/

17. ROME 27-28 March 2015
The Changing Web
Mobile, mobile,mobile Evergreen browsers

18. ROME 27-28 March 2015
WebComponents.org
• A standard for web components
• Encapsulation and reusability
• Specifications
• Create custom HTML elements
• Import of one HTML documents into another
• Define templates (HTML fragments)
• Shadow DOM for betterencapsulation

19. ROME 27-28 March 2015
JavaScript Evolution
• Both in the browser and on the server
• Tons of frameworks and libraries
Drinking game for web developers
1. Think of a random noun
2. Google "[noun].js"
3. If a library with that name exists – drink

20. ROME 27-28 March 2015
JavaScript Evolution
• Current version is ECMAScript 5
• Coding trends
• Pass callbacks around
• Create classes
• Encapsulate in modules

21. ROME 27-28 March 2015
JavaScript.next
• Next version is ECMAScript 6
• What you wished is what you get
• Classes
• Arrow functions (lambdas)
• Module system
• …and many, many others

22. ROME 27-28 March 2015
Example #3: ES6
class Conference {
constructor(name) {
this.name = name;
this.attendees = [];
}
accept(attendee) {
this.attendees.push(attendee);
}
welcomeAll() {
this.attendees.forEach((name) => {
console.log(`${this.name} welcomes
${name}`);
});
}
}
ES6
function Conference(name) {
this.name = name;
this.attendees = [];
}
Conference.prototype.accept =
function(attendee) {
this.attendees.push(attendee);
};
Conference.prototype.welcomeAll =
function() {
this.attendees.forEach(function(name) {
console.log(this.name + ' welcomes ' +
name);
});
};
ES5
var codemotion = new Conference('Codemotion');
codemotion.accept('Andrea');
codemotion.accept('Felipe');
codemotion.welcomeAll();

23. ROME 27-28 March 2015
ES6 Today
• Expected date of ES6 – the end of 2015
• By evergreenbrowsers
BUT, you can use it today!

24. ROME 27-28 March 2015
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

25. ROME 27-28 March 2015
http://angular.io

26. ROME 27-28 March 2015
The New Script
• Angular 2.0 applications are written in ES6
• ES5 is still usable,if one misses it
• New features on top of ES6
• Metadata annotations
• Type system

27. ROME 27-28 March 2015
The New Script
• ES6 + Annotations + Types = AtScript
• Microsoft + Google = TypeScript + AtScript
Annotations
Types
ES6
ES5

28. ROME 27-28 March 2015
Example #4: TypeScript
index.js (ES5)
app.directive('welcome', function() {
return {
scope: { to: '@' },
template: '<h1>Welcome to {{to}}!</h1>'
};
});
…
<welcome to="Rome"></welcome>
…
index.html
@Component({ selector: 'welcome' })
@Template({
inline: '<h1>Welcome to {{to}}</h1>'
})
class WelcomeComponent {
constructor(element: NgElememt) {
this.to = element.getAttribute('to');
}
}
index.js (ES6)

29. ROME 27-28 March 2015
Change Detection
Conference App Components
ConferenceApp
SearchBar
SpeakerList
Speaker
Pager
Speaker Speaker

30. ROME 27-28 March 2015
Change Detection
• A change detector class for every component
• It happens behind the scene
• The change detection graph is a tree
• No more two-way bindings
• Support for immutable objects

31. ROME 27-28 March 2015
Change Detection
Any performance benefits?
3-10x

32. ROME 27-28 March 2015
Templating
• Simpler definition of directives
• Decorator
• Template
• Component
• Integration with other component frameworks via
WebComponents.org
• Allow IDEs to identify and validate templates

33. ROME 27-28 March 2015
Example #5: Templating
@Component({ selector: 'conference' })
@Template({
url: 'conference.html',
directives: [Foreach]
})
class ConferenceApp {
constructor() {
this.speakers = [];
}
addSpeaker(speaker) {
this.speakers.push(speaker);
}
view(speaker) {
console.log(`View ${speaker.name}`);
}
}
conference.js
…
<conference></conference>
…
index.html

34. ROME 27-28 March 2015
Example #5: Templating
conference.html
<ul>
<li *foreach="#speaker of speakers">
<img [src]="speaker.image">
<h3>{{speaker.name}}</h3>
<p>{{speaker.bio}}</p>
<button (click)="view(speaker)">view</button>
</li>
</ul>
ng-repeat
Property
binding
Event
binding

35. ROME 27-28 March 2015
Play Today
http://bit.ly/angular2-play

36. ROME 27-28 March 2015
Providers, factories, services, …?
• They are all gone!
• Replaced by (ES6) classes
• Simpler definition
• Dependencyinjection is still available

37. ROME 27-28 March 2015
The New Direction
ES6
(TypeScript)
Web
Components
IDE
Support
Better
Performance
Modularity

38. ROME 27-28 March 2015
What Is The Future
[…] we also know that Angular can be
significantly simpler […]
Igor Minaz, AngularJS Team

39. ROME 27-28 March 2015
Angular Evolution
• From a side project
• To an internal tool at Google
• To a tool for everyone
• To a …

40. ROME 27-28 March 2015
Final Words
• Angular 2.0 feels like a new framework
• Many of the old concepts are removed
• Once you learn it, you can apply it everywhere
• Integration (web components)
• Community-driven projects should be rewritten

41. ROME 27-28 March 2015
Grazie!
http://bit.ly/cdm-angular2
Rate meGet in touch
hey@boyan.in
@bmihaylov