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
   

   View Slide

2. Hi, I’m Jeremy
   jfairbank
   @elpapapollo
   pushagency.io
   blog.jeremyfairbank.com
   simplybuilt.com
   

   View Slide

3. Building applications is hard
   

   View Slide

4. Who is software for?
   

   View Slide

5. Who is software for?
   • Computers
   • Users
   • Programmers
   • Me
   • You
   

   View Slide

6. Competing Goals
   

   View Slide

7. Competing Goals
   • Performance
   • Maintainability
   • Shipping code
   • Readability
   • Scalability
   

   View Slide

8. Competing Goals
   • Performance
   • Maintainability
   • Shipping code
   • Readability
   • Scalability
   

   View Slide

9. Patterns make it “easier”
   

   View Slide

10. Why not use them with
    JavaScript frameworks?
    

    View Slide

11. Composition
    

    View Slide

12. What is composition?
    

    View Slide

13. What is composition?
    

    View Slide

14. What is composition?
    

    View Slide

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?
    

    View Slide

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?
    

    View Slide

17. Composition
    Create with small independent pieces.
    

    View Slide

18. Composition
    Embodiment of many design principles.
    

    View Slide

19. Design Principles
    

    View Slide

20. Design Principles
    • Modularity
    • Separation of concerns (SOC)
    • Loose coupling
    • High cohesion
    • Composition over inheritance
    • Ad nauseam…
    

    View Slide

21. Composition and Angular
    

    View Slide

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
    

    View Slide

23. But how do we fit directives
    together?
    

    View Slide

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
    

    View Slide

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
    

    View Slide

26. Image Gallery
    Demo
    github.com/jfairbank/orchestrating-apps-angular
    

    View Slide

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
    

    View Slide

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)
    

    View Slide

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
    

    View Slide

30. Composition is a critical tool
    in software development.
    

    View Slide

31. Thanks!
    Demo and code:
    github.com/jfairbank/orchestrating-apps-angular
    Slides:
    bit.ly/20UQvSf
    Jeremy Fairbank
    jeremyfairbank.com
    @elpapapollo
    

    View Slide