Upload
codemotion
View
247
Download
0
Tags:
Embed Size (px)
Citation preview
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 Hevery Adam Abrons
ROME 27-28 March 2015
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
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
Model-View-Something
• Model-View-*• Controller, Presenter, ViewModel, …
Controller
ServiceServiceService
Modelmanipulate
fetchdata
View
data bindinteract
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 wholook only to the past or present arecertain 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
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
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 noun2. 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}`);});}}
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();
ROME 27-28 March 2015
ES6 Today
• Expected date of ES6 – the end of 2015• By evergreen browsers
BUT, you can use it today!
ROME 27-28 March 2015
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
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
SearchBarSpeakerList
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
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
Propertybinding
Eventbinding
ROME 27-28 March 2015
Providers, factories, services, …?
• They are all gone!• Replaced by (ES6) classes
• Simpler definition• Dependency injection 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 besignificantly 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
@bmihaylov