Session from GIDS 2014, showing tips and tricks for using AngularJS for creating production-ready JavaScript applications

1. AdvancedTipsand
Tricks using
AngularJS
SimonGuest,DistinguishedEngineer.
Neudesic,LLC

2. The lastdecade ofserver-side HTML...

4. What'swrongwiththis model?

5. What's wrongwiththis model?
» Most UI actions require round trip
» Poor mobile experience
» Devices are getting more powerful
» Servers need to scale
» Any offline scenario is near impossible

6. The nextdecade ofclient-sideJavaScript

8. How doesthis help?
» UI actions handled locally
» Vasly improved mobile experience
» Taking advantage of the power of the device
» Server can handle more clients
» Offline becomes more manageable

9. Too manychoices...

12. Audience Poll

13. Who knowswhatAngularJS is?

14. Who has builtAngularJS sample apps?

15. Who is usingAngularJS for an ongoing project?

16. Angular's ups and downs...

18. Goalofthis session
Share10tipsandtricksthatwe've
learnedfromrealworldAngularJS
projects

19. Goalofthis session
Compiledifferenttipsandtricksfrom
aroundtheWeb

20. Goalofthis session
Shareasmuchcodeaspossible

21. 10. Structure
Howshould I structure my
AngularJS project?

22. 10. Structure
» Roll your own
» Angular Seed (https://github.com/angular/angular-
seed)
» Yeoman Angular Generator (http://yeoman.io)

24. 10. Structure
» Roll your own
» Angular Seed (https://github.com/angular/angular-
seed)
» Yeoman Angular Generator (http://yeoman.io)

25. 10. Structure
» Come back to pivoting on functionality when the
project gets large

26. 10. Structure
> app
-> controllers
--> todoController.js
-> services
--> todoService.js
-> directives
--> todoItemDirective.js

27. 10. Structure
> app
-> todo
--> controller.js
--> service.js
--> itemDirective.js

28. 9. Minification
Should I minifymy
AngularJS project?

29. 9. Minification
» Due to the "DI" way that Angular works,
minification is hard

30. 9. Minification
» Due to the "DI" way that Angular works,
minification is hard
» Do you really need to minify?

31. 9. Minification
» Due to the "DI" way that Angular works,
minification is hard
» Do you really need to minify?
-- AngularJS includes are already compiled JS
-- Yeoman template includes as much minification
as you need
-- Disable property renaming, and manually change
constructors

32. 8. Directives
Whatarethey?

33. 8. Directives
» They make AngularJS unique
» They make your markup more declarative
» They support templates nicely
» They promote re-use
» They prevent lots of JavaScript!

34. 7. Page Loading
Howdo I createagood user
experience?

35. 7. Page Loading
» Flash of {{your.stuff}} when you load the page

36. 7. Page Loading
» Flash of {{your.stuff}} when you load the page
» Use ng-cloak directive in order to hide
declarations until they are initialized
» Use ng-bind instead of {{}} in your index.html

37. 6. InternetExplorer
DoesAngularJSworkwith
IE?

39. 6. InternetExplorer
» Support for IE8 is being removed from Angular 1.3
onwards
» If you are going to keep supporting IE8 with
Angular 1.2...
-- Never use <custom-directive>
-- Use <div custom-directive> instead
» Ensure that IE is part of test plan (if you are
using Selenium)

40. 5. Development
Environment
Whattools should I be
using?

41. 5. DevelopmentEnvironment
» Angular Support in IDEs
-- WebStorm 8
-- Sublime
-- Use data-ng-* in non-supported environments
» Install Angular via Bower

42. 5. DevelopmentEnvironment
» Logging
-- Avoid using console.log in your controllers
» Use $log instead
-- $log can be extended to provide additional
logging capabilities

43. 5. DevelopmentEnvironment
» Batarang
-- Chrome extension of AngularJS debugging

45. 5. DevelopmentEnvironment
» Batarang
-- Chrome extension to enable AngularJS debugging
» AngularJS tab in Chrome dev tools
-- Enables scope inspection
-- Performance to identify trouble spots
-- Service dependency graph

46. 5. DevelopmentEnvironment
» Javascript Debugging
-- Use 'debugger' in any controller to add
breakpoint
-- Very useful combined with Batarang

47. 4.Angular-
Supported
Frameworks
Howdo I dealwith non-
AngularJS stuff?

48. 4. Non-Angular Stuff
» Bootstrap
-- UI Bootstrap
-- Components written by the AngularJS team
» Examples
-- AngularJS version of Alert
-- $modal for invoking modals
-- Date/time pickers
» http://angular-ui.github.io/bootstrap/

50. 4. Non-Angular Stuff
» jQuery
-- Use angular.element instead of $() selector
-- Search for a jQuery-equivalent instead
» Examples
-- html(), text(), val()
» Ask whether you can use directives instead

51. 4. Non-Angular Stuff
» Other JavaScript methods
-- angular.fromJson, angular.toJson, angular.copy,
angular.extend
-- $timeout, $log, $window, $q, $document
-- Third party libraries for date formatting
» Why?
-- Angular methods better observe the scope
lifecycle
-- More predictable results

52. 3. Separation of
Concerns
Howdo I makethe right
choices?

53. 3. Separation ofConcerns
» Three golden rules
-- Controllers should never refer to any DOM
elements
-- Controllers should call services vs. holding
too much business logic
-- "How do I pass things between controllers?"
--- ...probably means that you are doing things
wrong

54. 3. Separation ofConcerns
» Controller inheritence
-- Is possible to use angular.extend to provide
some kind of inheritence on controllers

55. 2. Scope
Whatdo I needto know
about$scope?

56. 2. Scope
» Scope is not your model
-- Even though many of the samples show it this
way
-- Scope should be the glue between your
controller and your model (accessed through
services)
-- Remember, services are singletons

57. 2. Scope
» Scope inheritence
-- Avoid $rootScope, try to use services instead
-- Create subscopes when invoking subcontroller
from controller
--- Can be a little confusing, especially with
frameworks (e.g. Bootstrap modal)
-- Batarang can be your friend

58. 1. Performance
Howdo I prevent
performance bottlenecks?

59. 1. Performance
» You are not in control of when Angular invokes
functions based on changes to $scope
» A single change in scope (e.g keypress) can call
multiple functions

60. 1. Performance
» Most changes to $scope are processed in fractions
of a second
-- Faster than the human eye can detect on a page
-- However, once you start reaching 1500+ function
calls on a scope change, thing's deteriorate
-- Deteriorate really quickly

61. 1. Performance
» Using ng-repeat or ng-switch can compound this

62. 1. Performance
<tr ng-repeat="item in items">
<td>{{item.name}}</td>
<td>{{item.description}}</td>
<td>{{getPrice(item.id)}}</td>
</tr>
» How many times will getPrice function be called?

63. 1. Performance
» Overcoming this bottleneck
-- Never call $scope functions from within ng-
repeat or ng-switch statements
-- Use watch collection to calculate everyting
when the controller is first invoked

64. 1. Performance
$scope.$watchCollection('items', function (newItems) {
for (var i = 0; i < newItems.length; i++) {
newItems[i].price = getPrice(newItems.id);
}
$scope.items = newItems;
});

65. 1. Performance
<tr ng-repeat="item in items">
<td>{{item.name}}</td>
<td>{{item.description}}</td>
<td>{{item.price}}</td>
</tr>

66. TheTenAgain

67. TheTenAgain
-- 10. Structure
-- 9. Minification
-- 8. Directives
-- 7. Page Loading
-- 6. Internet Explorer
-- 5. Development Environment
-- 4. Non-Angular Stuff
-- 3. Separation of Concerns
-- 2. Scope
-- 1. Performance

68. Thankyou!

69. Q&A
» Simon Guest, Distinguished Engineer, Neudesic LLC
» simonguest.com (@simonguest)
» http://github.com/simonguest/gids
» http://slideshare.net/simonguest

70. -- http://www.amazon.com/
File-New-Presentation-
Developers-Professionals/dp/
0615910459