Keeping Things Simple In A Growing AngularJS App.

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

Brandon Boswell
@BRANDONKBOSWELL
BRANDONKBOSWELL@GMAIL.COM

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.

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

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

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

KEEP IT SIMPLEAt Least In Your Controllers

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

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

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

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

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

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

CONTROLLERS ARE ONLY FOR
handling user interaction.

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

Business Logic should live in services.

EXAMPLE
(Building On Previous Example)

'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;
});
};
}
]);

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

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

▸ Collections
▸ Helpers
▸ Listeners
▸ ModelHelpers
▸ Repositories
▸ ViewModels

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

UX / DEVELOPMENT ARE ITERATIVE.

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

COMMON MISCONCEPTION:
Everything should be a directive

NOT EVERYTHING HAS TO BE A DIRECTIVE,
especially initially

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

Why do you hate on directives?

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

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

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

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

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

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

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

Keeping Things Simple In A Growing AngularJS App.

More Related Content

Viewers also liked

Similar to Keeping Things Simple In A Growing AngularJS App.

Recently uploaded

Keeping Things Simple In A Growing AngularJS App.