Hey, I just met AngularJS, and this is crazy, so here’s my JavaScript, let’s use it maybe

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