View
457
Download
0
Category
Preview:
DESCRIPTION
Given at the Intuit front-end conference, Ari Lerner demonstrates best-practices for AngularJS applications and demonstrates how to best build your web application.
Citation preview
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)
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 us@fullstack.io@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
USE .PROVIDER() WHENPOSSIBLE
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; };})
USE .PROVIDER() WHENPOSSIBLE
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
DON'T USE [] NOTATION, USE A PRE-MINIFIER
.controller(['UserService', function(UserService) {
}]);
DON'T USE [] NOTATION, USE A PRE-MINIFIER
.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 us@fullstack.io@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.
Recommended