Nodevember Orchestrating Apps by Composing Angular Directives

Nodevember Orchestrating Apps by Composing Angular Directives

94bd558238b69c45d3d3e15797ae94f7?s=128

Jeremy Fairbank

November 15, 2015
Tweet

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