0
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 di...
NG-BOOK.COM
FULLSTACKEDU
CORPORATE TRAINING
Allsized companies, large and small
1k+ totalparticipants
Refined for more than ayear
From DevOps to fr...
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<...
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');
/...
OR
JQUERY
<divclass="notice"></div>
<buttonid="exampleBuyBtn">Clickme</button>
$("button#buyBtn").on('click',function(event){...
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',[
requir...
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
.s...
USE UIROUTER
State-based routingis far more powerfulthan simple URL-based.
It's extensible and gives us far-greater flexib...
OPTIMIZE LATE
<divclass='profile'ng-repeat='userinusers'>
<spanclass="name">{{user.name}}</span>
<spanclass="email">{{user...
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(){
varbackendU...
USE .PROVIDER()WHEN
POSSIBLE
angular.module('inApp',['ui.router'])
.config(function(UserProvider){
UserProvider.setBackend...
SEARCH FIRST, WRITE LAST
Chances are someone has written somethingto do the thingyou
are wantingto do. Search for it, then...
USE GULP/GRUNT
//...
gulp.task('jshint',function(){
returngulp.src(path.join(config.src.scriptDir,config.src.scriptF
iles)...
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 apreviou...
USE XSRF/CSRF TOKENS/COOKIES
module.exports=angular.module('inApp.login',[])
.config(function($httpProvider){
$httpProvide...
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 Angul...
Beyond AngularJS: Best practices and more
Beyond AngularJS: Best practices and more
Beyond AngularJS: Best practices and more
Beyond AngularJS: Best practices and more
Beyond AngularJS: Best practices and more
Beyond AngularJS: Best practices and more
Beyond AngularJS: Best practices and more
Beyond AngularJS: Best practices and more
Beyond AngularJS: Best practices and more
Beyond AngularJS: Best practices and more
Beyond AngularJS: Best practices and more
Beyond AngularJS: Best practices and more
Beyond AngularJS: Best practices and more
Beyond AngularJS: Best practices and more
Beyond AngularJS: Best practices and more
Upcoming SlideShare
Loading in...5
×

Beyond AngularJS: Best practices and more

614

Published on

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

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
614
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
21
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Beyond AngularJS: Best practices and more"

  1. 1. ANGULARJS
  2. 2. ANGULARJS AND BEYOND
  3. 3. 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)
  4. 4. NG-BOOK.COM
  5. 5. FULLSTACKEDU
  6. 6. CORPORATE TRAINING Allsized companies, large and small 1k+ totalparticipants Refined for more than ayear From DevOps to front-end
  7. 7. CORPORATE TRAINING Contactus atus@fullstack.io @auser
  8. 8. HACK REACTOR Fantastic JavaScript-based course Fantastic Angular curriculum The harvard of programmingschools
  9. 9. AGENDA 1. HTML today 2. WhyAngular?
  10. 10. AGENDA 4. Community 5. Bestpractices
  11. 11. AGENDA 6. Town hall
  12. 12. HTML IS OLD
  13. 13. 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>
  14. 14. STATIC MARKUP
  15. 15. WHAT ABOUT WRITING WEB APPLICATIONS?
  16. 16. WHAT ABOUT WRITING WEB APPLICATIONS? Interactivity? Immediate response Desktop, powerful
  17. 17. HOW DO WE ADD INTERACTION TODAY? varcontent=document.findElementById('headline'), newDiv =document.createElement('div'); //Dosomeinterestingthingshere //withournewdivelements content.appendChild(newDiv);
  18. 18. OR
  19. 19. JQUERY <divclass="notice"></div> <buttonid="exampleBuyBtn">Clickme</button> $("button#buyBtn").on('click',function(event){ $('div.notice').html('Youclickedthebutton'); }); Click me
  20. 20. IMPERATIVE WRAPPER AROUND DOM MANIPULATION
  21. 21. NOT A WEB APPLICATION MAKER
  22. 22. When all you have is ahammer everything looks like aDOM to manipulate
  23. 23. WHAT'S WRONG WITH THIS PICTURE?
  24. 24. WHAT'S WRONG WITH THIS PICTURE? tightcoupling structureless code base low-levelinteraction
  25. 25. BUILDING ACCESS TO DOM, NOT WEB APPLICATION CODE
  26. 26. HOW RUDIMENTARY
  27. 27. OKAY, THEN WHAT SHOULD WE DO?
  28. 28. WHAT IF WE REINVENTED HTML?
  29. 29. HTML IS DECLARATIVE SHOULDN'T OUR INTERACTION BE AS WELL?
  30. 30. ENTER ANGULARJS
  31. 31. A MVW FRONT-END FRAMEWORK
  32. 32. A MVW FRONT-END FRAMEWORK MODEL-VIEW-WHATEVER
  33. 33. SUPER FAST IN DEVELOPMENT AND PRODUCTION
  34. 34. SPONSORED BY GOOGLE AND IN PRODUCTION ALL-OVER-THE-INTERNET
  35. 35. AND MANY MORE
  36. 36. COST EFFICIENT FOR DEVELOPMENT AND PRODUCTION
  37. 37. BUILT WITH TESTING IN MIND
  38. 38. BUILT WITH TESTING IN MIND WITH FANTASTIC TOOLING
  39. 39. HIGHLY ACTIVE COMMUNITY AND MANY OPEN-SOURCE COMPONENTS
  40. 40. COMPLETELY FREE
  41. 41. COMPLETELY FREE SERIOUSLY, MIT LICENSED
  42. 42. BEST PRACTICES
  43. 43. WHY BEST PRACTICES? Cruftycode Productlongevity Optimization Extensibility Shareability Maintainability ...
  44. 44. TEST TEST TEST
  45. 45. NEVER PREPEND MODULES WITH NG Don'twantto collide with ngpackages
  46. 46. NEVER PREPEND MODULES WITH NG angular.module('ngApp',[]) //...
  47. 47. INSTEAD angular.module('inApp',[]) //...
  48. 48. MODULARIZE YOUR CODE angular.module('inApp',[ 'in.login', 'in.typeahead', //... ]);
  49. 49. MODULARIZE YOUR CODE Write once
  50. 50. MODULARIZE YOUR CODE Write once, useoften
  51. 51. USE BROWSERIFY //login/index.js module.exports= angular.module('inApp.login',[]) //main.js angular.module('inApp',[ require('./login').name ]);
  52. 52. USE BROWSERIFY Module-based dependencies allow our app to be highly extensible and force us to develop with modules
  53. 53. USE UIROUTER module.exports= angular.module('inApp.root',[ 'ui.router' ]);
  54. 54. 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' } } }) //...
  55. 55. USE UIROUTER State-based routingis far more powerfulthan simple URL-based. It's extensible and gives us far-greater flexibility.
  56. 56. OPTIMIZE LATE <divclass='profile'ng-repeat='userinusers'> <spanclass="name">{{user.name}}</span> <spanclass="email">{{user.email}}</span> </div>
  57. 57. OPTIMIZE LATE Preoptimization stunts growth and over-complicates an existing code.
  58. 58. OPTIMIZE LATE We can always optimize to infinity
  59. 59. USE .PROVIDER()WHEN POSSIBLE Providers make iteasyto distribute module-based services
  60. 60. 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; }; })
  61. 61. USE .PROVIDER()WHEN POSSIBLE angular.module('inApp',['ui.router']) .config(function(UserProvider){ UserProvider.setBackendUrl('http://intuit.com/api/v1'); });
  62. 62. SEARCH FIRST, WRITE LAST Chances are someone has written somethingto do the thingyou are wantingto do. Search for it, then write it.
  63. 63. 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)); }); //...
  64. 64. USE GULP/GRUNT Usingabuild-system provides consistantlycorrect, production- readycode.
  65. 65. PAIR PROGRAM
  66. 66. DON'T USE []NOTATION, USE A PRE- MINIFIER Save your fingers
  67. 67. DON'T USE []NOTATION, USE A PRE- MINIFIER .controller(['UserService',function(UserService){ }]);
  68. 68. DON'T USE []NOTATION, USE A PRE- MINIFIER .controller(function(UserService){ });
  69. 69. USE XSRF/CSRF TOKENS/COOKIES Cross-Site RequestForgerytokens allow the backend to ensure arequestcomingin matches apreviouslyknown request
  70. 70. 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'; });
  71. 71. TEST TEST TEST Testingensures we know what's goingon with our app
  72. 72. TEST TEST TEST Unittest(as much as possible) E2E test(for CI servers, mostly)
  73. 73. TEST TEST TEST Use zones.js(or Angular 2.0) for better stacktraces
  74. 74. COMMUNITY
  75. 75. COMMUNITY Angular's power comes from the highly-engaged community
  76. 76. BOOKS
  77. 77. TUTORIALS
  78. 78. TRAINING Contactus atus@fullstack.io @auser
  79. 79. COMMUNITY PLUGINS
  80. 80. WHAT CAN WE DO TO CONTRIBUTE?
  81. 81. WHAT CAN WE IMPLEMENT FOR OURSELVES?
  82. 82. I18N
  83. 83. I18N Use angular-translate
  84. 84. ASK ME ANYTHING
  85. 85. THANK YOU
  86. 86. NG-BOOK.COM 630+ page book with allthis information and much much more. The onlyconstantlyupdatingbook available for Angular today.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×