Beyond AngularJS: Best practices and more
Upcoming SlideShare
Loading in...5
×
 

Beyond AngularJS: Best practices and more

on

  • 356 views

Given at the Intuit front-end conference, Ari Lerner demonstrates best-practices for AngularJS applications and demonstrates how to best build your web application.

Given at the Intuit front-end conference, Ari Lerner demonstrates best-practices for AngularJS applications and demonstrates how to best build your web application.

Statistics

Views

Total Views
356
Views on SlideShare
346
Embed Views
10

Actions

Likes
0
Downloads
8
Comments
0

1 Embed 10

http://www.slideee.com 10

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Beyond AngularJS: Best practices and more Beyond AngularJS: Best practices and more Presentation Transcript

  • ANGULARJS
  • ANGULARJS AND BEYOND
  • 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)
  • NG-BOOK.COM
  • FULLSTACKEDU
  • 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
  • AGENDA 6. Town hall
  • HTML IS OLD
  • 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>
  • STATIC MARKUP
  • 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);
  • OR
  • 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
  • NOT A WEB APPLICATION MAKER
  • 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
  • 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? Cruftycode Productlongevity Optimization Extensibility Shareability Maintainability ...
  • TEST TEST TEST
  • 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', //... ]);
  • MODULARIZE YOUR CODE Write once
  • MODULARIZE YOUR CODE 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.
  • 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/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
  • COMMUNITY Angular's power comes from the highly-engaged community
  • BOOKS
  • TUTORIALS
  • TRAINING Contactus atus@fullstack.io @auser
  • COMMUNITY PLUGINS
  • WHAT CAN WE DO TO CONTRIBUTE?
  • WHAT CAN WE IMPLEMENT FOR OURSELVES?
  • I18N
  • I18N Use angular-translate
  • ASK ME ANYTHING
  • THANK YOU
  • NG-BOOK.COM 630+ page book with allthis information and much much more. The onlyconstantlyupdatingbook available for Angular today.