Everyone has seen basic AngularJS examples, but what happens when you want to expand beyond those to create something more full featured? In this talk I will share lessons we've learned at Dorsata over the last 40k lines of javascript, as well as ways to make your Angular development life easier.

1. KEEPING THINGS SIMPLE
IN A GROWING
ANGULARJS APPLICATION
5 LESSONS LEARNED FROM 40K LINES OF JAVASCRIPT

2. Brandon Boswell
@BRANDONKBOSWELL
BRANDONKBOSWELL@GMAIL.COM

4. An authoring tool that enables doctors and clinical staff to illustrate
the optimal way to treat any illness and share that knowledge with
those involved in care.

5. How Do You Do That?

6. Diagramming Tool
+
Document Processor
+
Collaboration, Workflow and Review Tools

9. What's the stack?

10. Stack
Rails API
+
AngularJS Client Application
+
Sometimes a NodeWebkit Wrapper 1
1
IE8 Is Still Very Much Alive In Hospitals

11. ALRIGHT BACK TO THE TIPS

12. How To Stay Sane As An [Angular Developer | Developer | Human]?

13. KEEP IT SIMPLE

14. CLIENT APPS != SIMPLE

15. UX != SIMPLE

16. KEEP IT SIMPLE

17. KEEP IT SIMPLEAt Least In Your Controllers

18. LESSON 1:DON’T STORE ANYTHING USEFUL IN YOUR CONTROLLERS
Because You Will Probably Need Access To That Stuff

19. Javascript
angular.module('dorsata')
.controller('pathwayCtrl', [
function(){
$scope.pathway = {};
}
]);
HTML
<input type="html"
ng-model="pathway.title">

20. INJECT Data Objects USING SERVICES*
*SERVICES == FACTORIES == PROVIDERS.
Put Them All Together In Your App

21. A REALLY SIMPLE DATA OBJECT
angular.module('dorsata')
.factory('currentPathway', [
function(){
return {
"pathway": {}
}
}
]);

22. Javascript
angular.module('dorsata')
.controller('pathwayCtrl', [
'currentPathway',
function(currentPathway){ // <--- Inject Object
$scope.currentPathway = currentPathway; // <--- Bind It To Scope
}
]);
HTML
<input type="html"
ng-model="currentPathway.pathway.title">

23. LESSON 2:SIMPLE CONTROLLERS, COMPLEX SERVICES.
Because You Will Probably Need To Handle Multiple Interactions

24. CONTROLLERS ARE ONLY FOR
handling user interaction.

25. THINGS CONTROLLERS DO:
1. HANDLE USER EVENT
2. DELEGATE TO SERVICE
3. INDICATE STATE TO USER

26. Business Logic should live in services.

27. EXAMPLE
(Building On Previous Example)

28. angular.module('dorsata')
.controller('pathwayCtrl', [
'currentPathway',
'pathwayRepo',
function(currentPathway, pathwayRepo){
$scope.currentPathway = currentPathway;
// Handling The Event
$scope.save = function(pathway){
//Setting Loading States
$scope.loading = true;
//Calling Service Code
pathwayRepo.save(pathway) // Trigger Analytics, $http.put, Notify Collections Of Change
.finally(function(){
$scope.loading = false;
});
};
}
]);

29. LESSON 3:LEVERAGE PATTERNS THAT EMERGE
See Them, Use Them

30. IF YOU FIND YOURSELF WRITING SIMILAR
CODE MULTIPLE TIMES
Give it a name, and a folder.

31. ▸ Collections
▸ Helpers
▸ Listeners
▸ ModelHelpers
▸ Repositories
▸ ViewModels

32. LESSON 4:APPS CHANGE, UX CHANGES, CONTROLLERS CHANGE
Knowing What You Don't Know

33. UX / DEVELOPMENT ARE ITERATIVE.

34. We do not know what we want
&
we especially don't know what the user/client wants
at the beginning.

35. COMMON MISCONCEPTION:
Everything should be a directive

36. NOT EVERYTHING HAS TO BE A DIRECTIVE,
especially initially

37. Build more complex implementations
as your understanding of your user's needs increases.

38. Why do you hate on directives?

39. THINGS TO MAKE INTO DIRECTIVES
▸ Shared UI Components
▸ Behavior/Interaction Patterns (Utility Directives)

40. SHARED UI COMPONENTS AT DORSATA:
▸ Sidebars
▸ Menus
▸ Menu-items
▸ Comment Boxes (Autocomplete)
▸ User Avatars

41. USER INTERACTION/UTILITY DIRECTIVES
When the Page Loads,
I Want The Search Field Already Highlighted

42. Let's Build That One.

43. Javascript
angular.module('dorsata')
.directive('focusOnLoad', function() {
return function(scope, elem, attr) {
elem[0].focus();
};
});
HTML
<form>
<input type="text"
focus-on-load></input>
</form>

44. EXAMPLES
▸ Tab => onTab
▸ Shift+Tab => onShiftTab
▸ Escape Key => onEscape
▸ Ctrl+Enter => onCtrlEnter
▸ Focusing/Blurring Inputs => focusOn
▸ Confirm-Clicks => confirmClick

45. LESSON 5:TREAT YOUR ANGULAR CODE LIKE YOUR BACKEND CODE
It's Just As Important.

46. AngularJS Production App Checklist:
[ ✓ ] - Error Tracking (Bugsnag)
[ ✓ ] - Continuous Integration (Codeship)
[ ✓ ] - User Analytics (Mixpanel)

47. QUESTIONS?