hey, i just met angularjs, and this is crazy, so here’s my javascript, let’s use it maybe
TRANSCRIPT
Hey, I just metAngularJS!
Alessandro Nadalin, NAMSHI.com - Madrid, November 2014
small, internal tools
mobile
checkout.namshi.com
Killer Features
Killer Features2-way data binding
Model changes the View
View changes the Model
http://jsfiddle.net/okL0e297/
function Ctrl($scope) { $scope.title = 'Lorem Ipsum';}
<div ng-app="myModule"> <div ng-controller="Ctrl"> Title: <input ng-model="title"> <hr> Title again: <input ng-model="title"> </div></div>
<div ng-app="myModule"> <div ng-controller="Ctrl"> Title: <input ng-model="title"> <hr> Title again: <input ng-model="title"> </div></div>
<div ng-app="myModule"> <div ng-controller="Ctrl"> Title: <input ng-model="title"> <hr> Title again: <input ng-model="title"> </div></div>
function Ctrl($scope) { $scope.title = 'Lorem Ipsum';}
<div ng-app="myModule"> <div ng-controller="Ctrl"> Title: <input ng-model="title"> <hr> Title again: <input ng-model="title"> </div></div>
function Ctrl($scope) { $scope.title = 'Lorem Ipsum';}
Title: <input ng-model="title">
function Ctrl($scope) { $scope.title = 'Lorem Ipsum';}
Title: <input ng-model="title">
http://docs.angularjs.org/guide/databinding
Killer FeaturesDependency Injection
function Ctrl($scope) { // WHAT THE HECK SHALL I DO HERE???}
function Ctrl($scope, $location) { // WHAT THE HECK SHALL I DO HERE???}
function Ctrl($scope, $location) { // WHAT THE HECK SHALL I DO HERE???}
function Ctrl($scope, $location) { $scope.whereAmI = $location.host();}
http://jsfiddle.net/9J7u5/2/
Killer FeaturesSupport
https://github.com/angular/protractor
Killer FeaturesDirectives
<div ng-app="sf-con"> <div ng-controller="Ctrl"> <menu /> </div></div>
<div ng-app="sf-con"> <div ng-controller="Ctrl"> <menu /> </div></div>
<div ng-app="sf-con"> <div ng-controller="Ctrl"> <div menu></div> </div></div>
<div ng-app="sf-con"> <div ng-controller="Ctrl"> <div data-menu></div> </div></div>
var links = { home: { link: 'http://example.com', title: 'Home' }, about: { link: 'http://example.com/about', title: 'About Us' }};
var links = { home: { link: 'http://example.com', title: 'Home' }, about: { link: 'http://example.com/about', title: 'About Us' }};
<ul> <li ng-repeat="item in items"> <a href="{{ item.link }}"> {{ item.title }} </a> </li></ul>
<ul> <li ng-repeat="item in items"> <a href="{{ item.link }}"> {{ item.title }} </a> </li></ul>
<ul> <li ng-repeat="item in items"> <a href="{{ item.link }}"> {{ item.title }} </a> </li></ul>
<ul> <li ng-repeat="item in items"> <a href="{{ item.link }}"> {{ item.title }} </a> </li></ul>
<ul> <li ng-repeat="item in items"> <a href="{{ item.link }}"> {{ item.title }} </a> </li></ul>
angular.module('sf-con', []) .directive('menu', function(){ return { restrict: 'AE', scope: {}, template: ‘path/to/tpl.html’, link: function (scope) { scope.items = links; } } });
angular.module('sf-con', []) .directive('menu', function(){ return { restrict: 'AE', scope: {}, template: ‘path/to/tpl.html’, link: function (scope) { scope.items = links; } } });
<div ng-app="sf-con"> <div ng-controller="Ctrl"> <menu /> </div></div>
angular.module('sf-con', []) .directive('menu', function(){ return { restrict: 'AE', scope: {}, template: ‘path/to/tpl.html’, link: function (scope) { scope.items = links; } } });
angular.module('sf-con', []) .directive('menu', function(){ return { restrict: 'AE', scope: {}, template: ‘path/to/tpl.html’, link: function (scope) { scope.items = links; } } });
<div ng-app="sf-con"> <div ng-controller="Ctrl"> <div data-menu /> </div></div>
angular.module('sf-con', []) .directive('menu', function(){ return { restrict: 'AE', scope: {}, template: ‘path/to/tpl.html’, link: function (scope) { scope.items = links; } } });
<div ng-app="sf-con"> <div ng-controller="Ctrl"> <menu /> </div></div>
angular.module('sf-con', []) .directive('menu', function(){ return { restrict: 'AE', scope: {}, template: ‘path/to/tpl.html’, link: function (scope) { scope.items = links; } } });
angular.module('sf-con', []) .directive('menu', function(){ return { restrict: 'AE', scope: {}, template: ‘path/to/tpl.html’, link: function (scope) { scope.items = links; } } });
<ul> <li ng-repeat="item in items"> <a href="{{ item.link }}"> {{ item.title }} </a> </li></ul>
<ul> <li ng-repeat="item in items"> <a href="{{ item.link }}"> {{ item.title }} </a> </li></ul>
angular.module('confoo', []) .directive('menu', function(){ return { restrict: 'AE', scope: {}, template: ‘path/to/tpl.html’, link: function (scope) { scope.items = links; } } });
<body ng-app="sf-con"><sf-con-header><div><div ng-controller=”MainCtrl”><sf-con-sidebar>
</div><sf-con-footer>
</div>
<body ng-app="sf-con"><sf-con-header><div><div ng-controller=”MainCtrl”><sf-con-sidebar>
</div><sf-con-footer>
</div>
<body ng-app="sf-con"><sf-con-header><div><div ng-controller=”MainCtrl”><sf-con-sidebar>
</div><sf-con-footer>
</div>
<body ng-app="sf-con"><sf-con-header><div><div sf-con-main-content><sf-con-sidebar>
</div><sf-con-footer>
</div>
http://jsfiddle.net/Lj6CH/6/
“Controllers, Directives and Services” http://is.gd/QlGYID
and much much more :)
Why do we like AngularJS?
Solid and clear foundation
Solid and clear foundation
$routeProvider.when(‘/about’, {templateUrl: '/views/about.html',controller: 'AboutController',
});
Solid and clear foundation
$http({ method: 'GET', url: '/milk.html }).success(function(...) {
alert(‘YEAH!’);}).error(function(...) {
alert(‘AWWW, SNAP!’);});
Works well with the JS ecosystem
Works well with the JS ecosystem
.container(data-bindonce).row
#my-whateverp {{ myModel.text }}
Works well with the JS ecosystem
.container(data-bindonce).row
#my-whateverinput(ng-model=”myModel”)
Works well with the JS ecosystem
Modern API-oriented architectures
APIfy everything
Easier to scale
No sessions on the servers
maintain state on the client (LS)
What will you hateabout AngularJS?
ehm...
https://www.destroyallsoftware.com/talks/wat
Watchers
lotsa bindings, lotsa watchers
lotsa watchers, lotsa computation
<ul> <li ng-repeat="item in items"> <a href="{{ item.link }}"> {{ item.title }} </a> </li></ul>
<ul> <li ng-repeat="item in items"> <a href="{{ item.link }}"> {{ item.title }} </a> </li></ul>
prepare for N...
<ul> <li ng-repeat="item in items"> <a href="{{ item.link }}"> {{ item.title }} </a> </li></ul>
N * 1
<ul> <li ng-repeat="item in items"> <a href="{{ item.link }}"> {{ item.title }} </a> </li></ul>
N * 2
<ul> <li ng-repeat="item in items">
<a href="{{ item.link }}">{{ item.title }}<menu
ng-if=”item.links”links=”item.links”
/></a>
</li></ul>
<ul> <li ng-repeat="item in items">
<a href="{{ item.link }}">{{ item.title }}<menu
ng-if=”item.links”links=”item.links”
/></a>
</li></ul>
use 1-way data binding if possible
https://github.com/Pasvaz/bindonce
try to stay under ~800 watchers
UI screws for realat ~2000
;-)
Will probably be able toturn watchers off in
Angular 2.0
ehm...
but also…
memory, rendering, ...
they don’t just render anymore
The browser is your platform
and the VM on whichyour application runs
is implemented in different ways, based on the browsers themselves
What will you need to know about AngularJS?
“Best way to serve AngularJSfrom a Symfony2 app?”
Angular 1.3
Terrific performanceimprovements (at a cost)
Homogeneous VS heterogeneous team
Learning curve might be harder thanwhat you think
The asynchronous trap
Get someone to dive into DevTools
Get someone to dive into DevTools
https://www.igvita.com/slides/2012/devtools-tips-and-tricks/#1
Get someone to dive into DevTools
https://www.igvita.com/slides/2012/devtools-tips-and-tricks/#1
http://devtoolsecrets.com/
Get someone to dive into DevTools
https://www.igvita.com/slides/2012/devtools-tips-and-tricks/#1
http://devtoolsecrets.com/
http://devtoolstips.com/
Get someone to dive into DevTools
https://www.igvita.com/slides/2012/devtools-tips-and-tricks/#1
http://devtoolsecrets.com/
http://devtoolstips.com/
http://addyosmani.com/blog/tag/devtools/
(almost) no question
Testing will always be hard
AngularJS 2.0
Controllers, Directive Definition,$scope, angular.module, jqLite
http://www.infoq.com/news/2014/10/angular-2-atscript
AtScripthttps://docs.google.com/document/d/11YUzC-1d0V1-Q3V0fQ7KSit97HnZoKVygDxpWzEYW0U/edit#heading=h.c5wfaadh5aor
Angular design documentshttps://drive.google.com/drive/u/0/#folders/0BxgtL8yFJbacUnUxc3l5aTZrbVk
Shit’s gonna change
Is AngularJS the future?
Maybe.
Or, I mean...
We will still need backends
Or use WordPress a lot
but
Natural evolution, decoupled apps
Handy solution for some scenarios
It is a future
Isomorphic apps, “same” code on theclient and the server
Feedback?
AngularJS has served as a great introductionto scaling on the client.
A good team will find it easy after a couple weeks.
On a larger scale you might want tolook into something less full-stack.
AngularJS has served as a great introductionto scaling on the client.
A good team will find it easy after a couple weeks.
On a larger scale you might want tolook into something less full-stack.
AngularJS has served as a great introductionto scaling on the client.
A good team will find it easy after a couple weeks.
On a larger scale you might want tolook into something less full-stack.
Without paying too much attention,performances are very decent.
Very easy for a backend / HMVC guyto understand how it works.
Tooling is extremely powerful.
Without paying too much attention,performances are very decent.
Very easy for a backend / HMVC guyto understand how it works.
Tooling is extremely powerful.
Without paying too much attention,performances are very decent.
Very easy for a backend / HMVC guyto understand how it works.
Tooling is extremely powerful.
Write smaller apps without gettingtangled in a single codebase, reuse modules.
Decouple, decouple, decouple.
Decouple again.
Write smaller apps without gettingtangled in a single codebase, reuse modules.
Decouple, decouple, decouple.
Decouple again.
Write smaller apps without gettingtangled in a single codebase, reuse modules.
Decouple, decouple, decouple.
Decouple again.
...yawn...
Alessandro Nadalin
Alessandro Nadalin
@_odino_
Alessandro Nadalin
@_odino_
Namshi
Alessandro Nadalin
@_odino_
Namshi
VP Technology
Alessandro Nadalin
@_odino_
Namshi
VP Technology
odino.org
Thanks!Alessandro Nadalin
@_odino_
Namshi
VP Technology
odino.org
we are hiring!tech.namshi.com/join-us
github.com/namshi
twitter.com/TechNamshi
tech.namshi.com