AngularJS 2.0: A natural evolvement or a new beginning - Boyan Mihaylov - Codemotion Rome 2015

ROME 27-28 March 2015

AngularJS 2.0:A natural evolvement or a new beginningBoyan Mihaylov@bmihaylov


Agenda

• How It All Started• The Changing Web• JavaScript Evolution• Angular 2.0• What Is The Future• Q&A


About me

• 7+ years professional experience• Find-the-right-tool mindset• Conference & university speaker

• Like sharing and discussions

• Improv actor


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 Hevery Adam Abrons


Google Takes Over

• Miško started working on a project in Google

GoogleWeb

Toolkit6

months

17 000lines of code

AngularJS3

weeks

1 500lines of code


Google Trends 2011-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


Key Principles

D.R.Y.Structure Testability


Model-View-Something

• Model-View-*• Controller, Presenter, ViewModel, …

Controller

ServiceServiceService

Modelmanipulate

fetchdata

View

data bindinteract

update


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


Example #1: Controllers

…

<ul ng-controller="WelcomeCtrl">

<li ng-repeat="attendee in attendees">

{{attendee.name}}, {{attendee.company}}

</li>

</ul>

…

index.html


Scopes

$rootScope

$isolatedScopeA $isolatedScopeB $scopeA

$scopeA1 $scopeA2

$scopeA11 $scopeA12


Components

• Are called directives• Hardcoded vs. external template• Isolated vs. child scope• Can be rendered in 4 ways

• Custom HTML tag• Attribute• Class• Comment


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


The Changing Web

Change is the law of life. And those wholook only to the past or present arecertain to miss the future.

John F. Kennedy


The Changing Web

http://solutions.wolterskluwer.com/blog/2011/09/call-my-agent-evolution-in-information-retrieval/webtimeline/


The Changing Web

Mobile, mobile, mobile Evergreen browsers


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 better encapsulation


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 noun2. Google "[noun].js"3. If a library with that name exists – drink


JavaScript Evolution

• Current version is ECMAScript 5• Coding trends

• Pass callbacks around• Create classes• Encapsulate in modules


JavaScript.next

• Next version is ECMAScript 6• What you wished is what you get

• Classes• Arrow functions (lambdas)• Module system• …and many, many others


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}`);});}}

ES6function 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();


ES6 Today

• Expected date of ES6 – the end of 2015• By evergreen browsers

BUT, you can use it today!


AngularJS 2.0

AngularJS 1.x is built for currentbrowsers while AngularJS 2.0 is beingbuilt for the browsers of the future.

Igor Minaz, AngularJS Team


http://angular.io


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


The New Script

• ES6 + Annotations + Types = AtScript• Microsoft + Google = TypeScript + AtScript

Annotations

Types

ES6

ES5


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)


Change Detection

Conference App Components

ConferenceApp

SearchBarSpeakerList

Speaker

Pager

Speaker Speaker


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


Change Detection

Any performance benefits?

3-10x


Templating

• Simpler definition of directives• Decorator• Template• Component

• Integration with other component frameworks via WebComponents.org

• Allow IDEs to identify and validate templates


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


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

Propertybinding

Eventbinding


Play Today

http://bit.ly/angular2-play


Providers, factories, services, …?

• They are all gone!• Replaced by (ES6) classes

• Simpler definition• Dependency injection is still available


The New Direction

ES6(TypeScript)

Web Components

IDE Support

Better Performance

Modularity


What Is The Future

[…] we also know that Angular can besignificantly simpler […]

Igor Minaz, AngularJS Team


Angular Evolution

• From a side project• To an internal tool at Google• To a tool for everyone• To a …


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


Grazie!

http://bit.ly/cdm-angular2

Rate meGet in touch

[email protected]

@bmihaylov

Software

AngularJS 2.0: A natural evolvement or a new beginning - Boyan Mihaylov - Codemotion Rome 2015