Keeping Things Simple In A Growing AngularJS App.
•
2 likes•1,243 views
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.
More Related Content
Viewers also liked
Viewers also liked (9)
Similar to Keeping Things Simple In A Growing AngularJS App.
Similar to Keeping Things Simple In A Growing AngularJS App. (20)
Recently uploaded
Recently uploaded (20)
Keeping Things Simple In A Growing AngularJS App.
- 1. KEEPING THINGS SIMPLE IN A GROWING ANGULARJS APPLICATION 5 LESSONS LEARNED FROM 40K LINES OF JAVASCRIPT
- 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
- 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?