Keeping Things Simple In A Growing AngularJS App.

KEEPING THINGS SIMPLEIN A GROWING

ANGULARJS APPLICATION5 LESSONS LEARNED FROM 40K LINES OF JAVASCRIPT

Brandon Boswell@BRANDONKBOSWELL

[email protected]

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.

How Do You Do That?

Diagramming Tool+

Document Processor+

Collaboration, Workflow and Review Tools

What's the stack?

StackRails API

+AngularJS Client Application

+Sometimes a NodeWebkit Wrapper 1

1 IE8 Is Still Very Much Alive In Hospitals

ALRIGHT BACK TO THE TIPS

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

KEEP IT SIMPLE

CLIENT APPS != SIMPLE

UX != SIMPLE

KEEP IT SIMPLE

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 OBJECTangular.module('dorsata') .factory('currentPathway', [ function(){ return { "pathway": {} } }]);

Javascriptangular.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">

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)

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

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 implementationsas 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 DIRECTIVESWhen the Page Loads,

I Want The Search Field Already Highlighted

Let's Build That One.

Javascriptangular.module('dorsata') .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)

QUESTIONS?