Beyond AngularJS: Best practices and more

ANGULARJS

ANGULARJS

AND BEYOND

WHO AM I?

ARI LERNER, FULLSTACK.IOAuthor of and

Author of a few others (,

)Teacher at ,

Co-founder of ,

Background in distributed computing and infrastructure

ng-book (https://ng-book.com) ng-newsletter(http://ng-newsletter.com)

D3 on Angular(http://leanpub/d3angularjs) Riding Rails with AngularJS(https://leanpub.com/angularjs-rails)

HackReactor (http://hackreactor.com) GeneralAssembly (http://generalassemb.ly)

Fullstack.io (http://fullstack.io) FullstackEdu(https://fullstackedu.com)

https://ng-book.com/

http://ng-newsletter.com/

http://leanpub/d3angularjs

https://leanpub.com/angularjs-rails

http://hackreactor.com/

http://generalassemb.ly/

http://fullstack.io/

https://fullstackedu.com/

NG-BOOK.COM

FULLSTACKEDU

CORPORATE TRAININGAll sized companies, large and small1k+ total participantsRefined for more than a yearFrom DevOps to front-end

CORPORATE TRAININGContact us at [email protected]@auser

HACK REACTORFantastic JavaScript-based courseFantastic Angular curriculumThe harvard of programming schools

AGENDA1. HTML today2. Why Angular?

AGENDA4. Community5. Best practices

AGENDA6. Town hall

HTML IS OLD

HTML IS OLD

OLDER THAN SOME OF US<html> <head> <title>Really basic html</title> </head> <body> <h1 id="headline">Hello world</h1> <span class="notice"></span> <button id="buyBtn">Click me</button> </body></html>

STATIC MARKUP

WHAT ABOUT WRITING WEB APPLICATIONS?

WHAT ABOUT WRITING WEB APPLICATIONS?Interactivity?Immediate responseDesktop, powerful

HOW DO WE ADD INTERACTION TODAY?var content = document.findElementById('headline'), newDiv = document.createElement('div');// Do some interesting things here// with our new div elementscontent.appendChild(newDiv);

OR

JQUERY<div class="notice"></div><button id="exampleBuyBtn">Click me</button>

$("button#buyBtn").on('click', function(event) { $('div.notice').html('You clicked the button');});

Click me

IMPERATIVE WRAPPER AROUND DOMMANIPULATION

NOT A WEB APPLICATION MAKER

When all you have is a hammer everything lookslike a DOM to manipulate

WHAT'S WRONG WITH THIS PICTURE?

WHAT'S WRONG WITH THIS PICTURE?tight couplingstructureless code baselow-level interaction

BUILDING ACCESS TO DOM, NOT WEBAPPLICATION CODE

HOW RUDIMENTARY

OKAY, THEN WHAT SHOULD WE DO?

WHAT IF WE REINVENTED HTML?

HTML IS DECLARATIVE

SHOULDN'T OUR INTERACTION BE AS WELL?

ENTER ANGULARJS

A MVW FRONT-END FRAMEWORK

A MVW FRONT-END FRAMEWORK

MODEL-VIEW-WHATEVER

SUPER FAST

IN DEVELOPMENT AND PRODUCTION

SPONSORED BY GOOGLE

AND IN PRODUCTION ALL-OVER-THE-INTERNET

AND MANY MORE

COST EFFICIENT

FOR DEVELOPMENT AND PRODUCTION

BUILT WITH TESTING IN MIND

BUILT WITH TESTING IN MIND

WITH FANTASTIC TOOLING

HIGHLY ACTIVE COMMUNITY

AND MANY OPEN-SOURCE COMPONENTS

COMPLETELY FREE

COMPLETELY FREE

SERIOUSLY, MIT LICENSED

BEST PRACTICES

WHY BEST PRACTICES?Crufty codeProduct longevityOptimizationExtensibilityShareabilityMaintainability...

TEST TEST TEST

NEVER PREPEND MODULES WITH NGDon't want to collide with ng packages

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

INSTEADangular.module('inApp', [])// ...

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

MODULARIZE YOUR CODEWrite once

MODULARIZE YOUR CODEWrite once, use often

USE BROWSERIFY// login/index.jsmodule.exports = angular.module('inApp.login', [])

// main.jsangular.module('inApp', [ require('./login').name]);

USE BROWSERIFYModule-based dependencies allow our app to be highly

extensible and force us to develop with modules

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

USE UIROUTERmodule.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 UIROUTERState-based routing is far more powerful than simple URL-based.

It's extensible and gives us far-greater flexibility.

OPTIMIZE LATE<div class='profile' ng-repeat='user in users'> <span class="name">{{ user.name }}</span> <span class="email">{{ user.email }}</span></div>

OPTIMIZE LATEPreoptimization stunts growth and over-complicates an existing

code.

OPTIMIZE LATEWe can always optimize to infinity

USE .PROVIDER() WHENPOSSIBLE

Providers make it easy to distribute module-based services


module.exports = angular.module('inApp', ['ui.router']).provider('User', function() { var backendUrl = 'http://default.url;

this.setBackendUrl = function(url) { backendUrl = url; };

this.$get = function($http) { return this; };})


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

SEARCH FIRST, WRITE LASTChances are someone has written something to do the thing you

are wanting to do. Search for it, then write it.

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

USE GULP/GRUNTUsing a build-system provides consistantly correct, production-

ready code.

PAIR PROGRAM

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

Save your fingers


.controller(['UserService', function(UserService) {

}]);


.controller(function(UserService) {

});

USE XSRF/CSRF TOKENS/COOKIESCross-Site Request Forgery tokens allow the backend to ensure

a request coming in matches a previously known request

USE XSRF/CSRF TOKENS/COOKIESmodule.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'] = 'XMLHttpRequest';});

TEST TEST TESTTesting ensures we know what's going on with our app

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

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

COMMUNITY

COMMUNITYAngular's power comes from the highly-engaged community

BOOKS

TUTORIALS

TRAININGContact us at [email protected]@auser

COMMUNITY PLUGINS

WHAT CAN WE DO TO CONTRIBUTE?

WHAT CAN WE IMPLEMENT FOR OURSELVES?

I18N

I18NUse angular-translate

ASK ME ANYTHING

THANK YOU

NG-BOOK.COM

630+ page book with all this information and much much more.

The only constantly updating book available for Angular today.

Technology

Beyond AngularJS: Best practices and more