Nodevember Orchestrating Apps by Composing Angular Directives

Transcript

1. Orchestrating Apps by Composing Angular Directives github.com/jfairbank/orchestrating-apps-angular Jeremy Fairbank jeremyfairbank.com @elpapapollo
2. Hi, I’m Jeremy jfairbank @elpapapollo pushagency.io blog.jeremyfairbank.com simplybuilt.com
3. Building applications is hard
4. Who is software for?
5. Who is software for? • Computers • Users • Programmers • Me • You
6. Competing Goals
7. Competing Goals • Performance • Maintainability • Shipping code • Readability • Scalability
8. Competing Goals • Performance • Maintainability • Shipping code • Readability • Scalability
9. Patterns make it “easier”
10. Why not use them with JavaScript frameworks?
11. Composition
12. What is composition?
13. What is composition?
14. What is composition?
15. – Wikipedia “The various visual elements, known as elements of design, formal elements, or elements of art, are the vocabulary with which the visual artist composes. These elements in the overall design usually relate to each other and to the whole art work.” What is composition?
16. – Wikipedia “The way in which something is put together or arranged. The combination of parts or elements that make up something.” What is composition?
17. Composition Create with small independent pieces.
18. Composition Embodiment of many design principles.
19. Design Principles
20. Design Principles • Modularity • Separation of concerns (SOC) • Loose coupling • High cohesion • Composition over inheritance • Ad nauseam…
21. Composition and Angular
22. Composition and Angular • Focus on smaller problems to solve a large problem • Apply design principles to directives • Build app in terms of directives • Decompose large directives into small reusable directives • Refactoring and adding new features becomes more manageable
23. But how do we fit directives together?
24. Data Flow • Connecting directives to build an “app” through the flow of data • Handling model data among directives • Many approaches with pros and cons App Directive Directive Directive Directive Directive Directive Directive Directive Directive
25. Data Flow 1.Isolate scope bindings and callbacks 2.controllerAs and bindToController 3.Event broadcasting and emitting App Directive Directive Directive Directive Directive Directive Directive Directive Directive
26. Image Gallery Demo github.com/jfairbank/orchestrating-apps-angular
27. Isolate Scope and Controller Binding • Black box a directive to be self-contained and reusable • Think in terms of small pieces • Establish well-defined interface/API through HTML attributes • Eliminate $scope soup (with controller binding) • Juggle multiple points of state • A lot of markup
28. Events • Decouple directives • Isolate state more easily • Cleaner markup • Indirection of data flow (who responds to an event?) • Have to remember and duplicate event names (may hurt directive reuse)
29. Refactoring • Easier to change or update app • Don’t have to touch entire app, just an individual directive – Touching multiple pieces may mean better SOC needed – SOC is evolutionary for the lifetime of the app
30. Composition is a critical tool in software development.
31. Thanks! Demo and code: github.com/jfairbank/orchestrating-apps-angular Slides: bit.ly/20UQvSf Jeremy Fairbank jeremyfairbank.com @elpapapollo