Beyond AngularJS: Best practices and more

WHO AM I?
ARI LERNER, FULLSTACK.IO
Author of and
Author of afew others (
,
)
Teacher at ,
Co-founder of ,
Background in distributed computingand infrastructure
ng-book (https://ng-book.com) ng-newsletter
(http://ng-newsletter.com)
D3 on Angular
(http://leanpub/d3angularjs) RidingRails with AngularJS
(https://leanpub.com/angularjs-rails)
HackReactor (http://hackreactor.com) General
Assembly(http://generalassemb.ly)
Fullstack.io (http://fullstack.io) FullstackEdu
(https://fullstackedu.com)

CORPORATE TRAINING
Allsized companies, large and small
1k+ totalparticipants
Refined for more than ayear
From DevOps to front-end

CORPORATE TRAINING
Contactus atus@fullstack.io
@auser

HACK REACTOR
Fantastic JavaScript-based course
Fantastic Angular curriculum
The harvard of programmingschools

AGENDA
1. HTML today
2. WhyAngular?

AGENDA
4. Community
5. Bestpractices

HTML IS OLD
OLDER THAN SOME OF US
<html>
<head>
<title>Reallybasichtml</title>
</head>
<body>
<h1id="headline">Helloworld</h1>
<spanclass="notice"></span>
<buttonid="buyBtn">Clickme</button>
</body>
</html>

WHAT ABOUT WRITING WEB APPLICATIONS?

WHAT ABOUT WRITING WEB APPLICATIONS?
Interactivity?
Immediate response
Desktop, powerful

HOW DO WE ADD INTERACTION TODAY?
varcontent=document.findElementById('headline'),
newDiv =document.createElement('div');
//Dosomeinterestingthingshere
//withournewdivelements
content.appendChild(newDiv);

JQUERY
<divclass="notice"></div>
<buttonid="exampleBuyBtn">Clickme</button>
$("button#buyBtn").on('click',function(event){
$('div.notice').html('Youclickedthebutton');
});
Click me

IMPERATIVE WRAPPER AROUND DOM
MANIPULATION

When all you have is ahammer everything looks
like aDOM to manipulate

WHAT'S WRONG WITH THIS PICTURE?

WHAT'S WRONG WITH THIS PICTURE?
tightcoupling
structureless code base
low-levelinteraction

BUILDING ACCESS TO DOM, NOT WEB
APPLICATION CODE

HTML IS DECLARATIVE
SHOULDN'T OUR INTERACTION BE AS WELL?

A MVW FRONT-END FRAMEWORK
MODEL-VIEW-WHATEVER

SUPER FAST
IN DEVELOPMENT AND PRODUCTION

SPONSORED BY GOOGLE
AND IN PRODUCTION ALL-OVER-THE-INTERNET

COST EFFICIENT
FOR DEVELOPMENT AND PRODUCTION

BUILT WITH TESTING IN MIND
WITH FANTASTIC TOOLING

HIGHLY ACTIVE COMMUNITY
AND MANY OPEN-SOURCE COMPONENTS

COMPLETELY FREE
SERIOUSLY, MIT LICENSED

WHY BEST PRACTICES?
Cruftycode
Productlongevity
Optimization
Extensibility
Shareability
Maintainability
...

NEVER PREPEND MODULES WITH NG
Don'twantto collide with ngpackages

NEVER PREPEND MODULES WITH NG
angular.module('ngApp',[])
//...

INSTEAD
angular.module('inApp',[])
//...

MODULARIZE YOUR CODE
angular.module('inApp',[
'in.login',
'in.typeahead',
//...
]);

Write once

Write once, useoften

USE BROWSERIFY
//login/index.js
module.exports=
angular.module('inApp.login',[])
//main.js
angular.module('inApp',[
require('./login').name
]);

USE BROWSERIFY
Module-based dependencies allow our app to be highly
extensible and force us to develop with modules

USE UIROUTER
module.exports=
angular.module('inApp.root',[
'ui.router'
]);

USE UIROUTER
module.exports=angular.module('inApp.root',['ui.router'])
.config(function($stateProvider){
$stateProvider
.state('root',{
abstract:true,
url:'/'
})
.state('root.home',{
url:'',
views:{
'@':{
templateUrl:'/scripts/root/home.html'
}
}
})
//...

USE UIROUTER
State-based routingis far more powerfulthan simple URL-based.
It's extensible and gives us far-greater flexibility.

OPTIMIZE LATE
<divclass='profile'ng-repeat='userinusers'>
<spanclass="name">{{user.name}}</span>
<spanclass="email">{{user.email}}</span>
</div>

OPTIMIZE LATE
Preoptimization stunts growth and over-complicates an existing
code.

OPTIMIZE LATE
We can always optimize to infinity

USE .PROVIDER()WHEN
POSSIBLE
Providers make iteasyto distribute module-based services

USE .PROVIDER()WHEN
POSSIBLE
module.exports=angular.module('inApp',['ui.router'])
.provider('User',function(){
varbackendUrl='http://default.url;
this.setBackendUrl=function(url){
backendUrl=url;
};
this.$get=function($http){
returnthis;
};
})

USE .PROVIDER()WHEN
POSSIBLE
angular.module('inApp',['ui.router'])
.config(function(UserProvider){
UserProvider.setBackendUrl('http://intuit.com/api/v1');
});

SEARCH FIRST, WRITE LAST
Chances are someone has written somethingto do the thingyou
are wantingto do. Search for it, then write it.

USE GULP/GRUNT
//...
gulp.task('jshint',function(){
returngulp.src(path.join(config.src.scriptDir,config.src.scriptF
iles))
.pipe($.jshint(config.src.jshint))
.pipe($.jshint.reporter(stylish));
});
//...

USE GULP/GRUNT
Usingabuild-system provides consistantlycorrect, production-
readycode.

DON'T USE []NOTATION, USE A PRE-
MINIFIER
Save your fingers

MINIFIER
.controller(['UserService',function(UserService){
}]);

MINIFIER
.controller(function(UserService){
});

USE XSRF/CSRF TOKENS/COOKIES
Cross-Site RequestForgerytokens allow the backend to ensure
arequestcomingin matches apreviouslyknown request

USE XSRF/CSRF TOKENS/COOKIES
module.exports=angular.module('inApp.login',[])
.config(function($httpProvider){
$httpProvider.defaults.xsrfHeaderName='X-INT-XSRF';
$httpProvider.defaults.xsrfCookieName='int-xsrftoken';
$httpProvider.defaults.headers.common['X-Requested-With']='XMLHt
tpRequest';
});

TEST TEST TEST
Testingensures we know what's goingon with our app

TEST TEST TEST
Unittest(as much as possible)
E2E test(for CI servers, mostly)

TEST TEST TEST
Use zones.js(or Angular 2.0) for better stacktraces

COMMUNITY
Angular's power comes from the highly-engaged community

TRAINING
Contactus atus@fullstack.io
@auser

WHAT CAN WE IMPLEMENT FOR OURSELVES?

NG-BOOK.COM
630+ page book with allthis information and much much more.
The onlyconstantlyupdatingbook available for Angular today.

Beyond AngularJS: Best practices and more

More Related Content

What's hot

Similar to Beyond AngularJS: Best practices and more

Recently uploaded

Beyond AngularJS: Best practices and more