Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)

0 %
100 %
Information about Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)
Technology

Published on February 27, 2014

Author: odino

Source: slideshare.net

Description

Since bumping into AngularJS a few months ago, we decided to invest more and more time developing with it: coming from a PHP background, the shift of paradigm easy due to the use of patterns and intuitive flows: even though this won’t be a very in-depth technical talk, we are going to see why you should consider working with angular: fast single-page apps, DI, ease of testing, being asynchronous, scaling on the clients.
Welcome to the future.

AngularJS is the future Alessandro Nadalin - Montreal, February 2014

AngularJS

2009

SPA

example.org/#!/about

history.pushState(...)

Killer Features

Killer Features 2-way data binding

Model changes the View

View changes the Model

http://jsfiddle.net/WLUPj/2/

function Ctrl($scope) { $scope.title = 'Lorem Ipsum'; }

<div ng-app="zippyModule"> <div ng-controller="Ctrl"> Title: <input ng-model="title"> <hr> <div data-zippy="title"></div> </div> </div>

<div ng-app="zippyModule"> <div ng-controller="Ctrl"> Title: <input ng-model="title"> <hr> <div data-zippy="title"></div> </div> </div>

<div ng-app="zippyModule"> <div ng-controller="Ctrl"> Title: <input ng-model="title"> <hr> <div data-zippy="title"></div> </div> </div>

function Ctrl($scope) { $scope.title = 'Lorem Ipsum'; }

<div ng-app="zippyModule"> <div ng-controller="Ctrl"> Title: <input ng-model="title"> <hr> <div data-zippy="title"></div> </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">

<div ng-app="zippyModule"> <div ng-controller="Ctrl"> Title: <input ng-model="title"> <hr> <div data-zippy="title"></div> </div> </div>

directive('zippy', function(){ return { restrict: 'A', replace: true, scope: { title:'=zippy' }, template: '<input type="text" ng-model="title" />' } }

directive('zippy', function(){ return { restrict: 'A', replace: true, scope: { title:'=zippy' }, template: '<input type="text" ng-model="title" />' } }

directive('zippy', function(){ return { restrict: 'A', replace: true, scope: { title:'=zippy' }, template: '<input type="text" ng-model="title" />' } }

http://docs.angularjs.org/guide/databinding

Killer Features Dependency 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 Features Support

https://github.com/angular/protractor

Killer Features Directives

<div ng-app="confoo"> <div ng-controller="Ctrl"> <menu /> </div> </div>

<div ng-app="confoo"> <div ng-controller="Ctrl"> <menu /> </div> </div>

<div ng-app="confoo"> <div ng-controller="Ctrl"> <div menu></div> </div> </div>

<div ng-app="confoo"> <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('confoo', []) .directive('menu', function(){ return { restrict: 'AE', scope: {}, template: ‘path/to/tpl.html’, link: function (scope) { scope.items = links; } } });

angular.module('confoo', []) .directive('menu', function(){ return { restrict: 'AE', scope: {}, template: ‘path/to/tpl.html’, link: function (scope) { scope.items = links; } } });

<div ng-app="confoo"> <div ng-controller="Ctrl"> <menu /> </div> </div>

angular.module('confoo', []) .directive('menu', function(){ return { restrict: 'AE', scope: {}, template: ‘path/to/tpl.html’, link: function (scope) { scope.items = links; } } });

angular.module('confoo', []) .directive('menu', function(){ return { restrict: 'AE', scope: {}, template: ‘path/to/tpl.html’, link: function (scope) { scope.items = links; } } });

<div ng-app="confoo"> <div ng-controller="Ctrl"> <div data-menu /> </div> </div>

angular.module('confoo', []) .directive('menu', function(){ return { restrict: 'AE', scope: {}, template: ‘path/to/tpl.html’, link: function (scope) { scope.items = links; } } });

<div ng-app="confoo"> <div ng-controller="Ctrl"> <menu /> </div> </div>

angular.module('confoo', []) .directive('menu', function(){ return { restrict: 'AE', scope: {}, template: ‘path/to/tpl.html’, link: function (scope) { scope.items = links; } } });

angular.module('confoo', []) .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="confoo"> <confoo-header> <div> <div ng-controller=”MainCtrl”> <confoo-sidebar> </div> <confoo-footer> </div>

<body ng-app="confoo"> <confoo-header> <div> <div ng-controller=”MainCtrl”> <confoo-sidebar> </div> <confoo-footer> </div>

<body ng-app="confoo"> <confoo-header> <div> <div ng-controller=”MainCtrl”> <confoo-sidebar> </div> <confoo-footer> </div>

<body ng-app="confoo"> <confoo-header> <div> <div confoo-main-content> <confoo-sidebar> </div> <confoo-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

$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!’); }); Solid and clear foundation

Works well with the JS ecosystem

Works well with the JS ecosystem

.container(data-bindonce) .row #my-whatever p {{ myModel.text }} Works well with the JS ecosystem

.container(data-bindonce) .row #my-whatever input(ng-model=”myModel”) Works well with the JS ecosystem

Modern API-oriented architectures

APIfy everything

Easier to scale

No sessions on the servers

mantain state on the client (LS)

What will you hate about 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 real at ~2000 ;-)

ehm...

but also…

memory, rendering, ...

they don’t just render anymore

The browser is your platform

and the VM on which your application runs

is implemented in different ways, based on the browsers themselves

Is AngularJS the future?

Maybe.

Or, I mean...

We will still need backends

or use WP a lot ;-)

but

Natural evolution, decoupled apps

Handy solution for some scenarios

It is a future

Javascript Frameworks And Data Binding http://tunein.yap.tv/javascript/2012/06/11/javascript-frameworks-and-data-binding/ Angular, Backbone, CanJS and Ember http://sporto.github.io/blog/2013/04/12/comparison-angular-backbone-can-ember/

...yawn...

Alessandro Nadalin

Alessandro Nadalin @_odino_

Alessandro Nadalin @_odino_ Namshi | Rocket Internet

Alessandro Nadalin @_odino_ Namshi | Rocket Internet VP Technology

Alessandro Nadalin @_odino_ Namshi | Rocket Internet VP Technology odino.org

Thanks! Alessandro Nadalin @_odino_ Namshi | Rocket Internet VP Technology odino.org

By the way

Wanna join?

We are looking for talented nerds!

We are looking for talented nerds! frontend engineer

We are looking for talented nerds! frontend engineer data engineer

We are looking for talented nerds! lead frontend engineer data engineer

Thanks! Alessandro Nadalin @_odino_ Namshi | Rocket Internet VP Technology odino.org

Image credits https://www.flickr.com/photos/santheo/374630020/sizes/l/ http://www.flickr.com/photos/spunkinator/3050946547/sizes/o/in/photostream/ https://www.flickr.com/photos/savidgefamily/6873109431/sizes/l/ https://www.flickr.com/photos/safari_vacation/7496765660/sizes/o/ https://www.flickr.com/photos/fensterbme/439758782/sizes/l/ https://www.flickr.com/photos/dkrape/5154684383/sizes/l/ https://www.flickr.com/photos/kingstongal/2101194332/sizes/o/ https://www.flickr.com/photos/thescott365/3186150930/sizes/l/

Add a comment

Related presentations

Related pages

AngularJS is the future. Maybe. (2014) | ConFoo.ca

Montreal, Canada. Sign ... Activities; Venue; Propaganda; Contact; Archive; Code of Conduct; Sign In; Français; AngularJS is the future. Maybe. (2014 ...
Read more

AngularJS is the future. Maybe. — Alessandro Nadalin

AngularJS is the future. Maybe. ... Today I gave my 2nd talk here at the ConFoo in Montreal ... , an overview of why Angular could fit your future ...
Read more

What is the current Rocket Internet technology stack? - Quora

What is the current Rocket Internet technology stack? ... Symfony2 @ ConFoo 2014 in Montreal (CA) * Angular js is the future. maybe. @ ConFoo 2014 in ...
Read more

archive | js-montreal : JavaScript User Group in Montreal ...

... blazingly fast automated test runner written by the Google team behind Angular.js. ... uns des cas d 'utilisations de l ... your time to make JS ...
Read more