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 beginning Boyan Mihaylov @bmihaylov

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

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

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

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

ROME 27-28 March 2015 Google Trends 2011-2015

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

More Related Content

What's hot

Viewers also liked

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

More from Codemotion

Recently uploaded

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