$30 off During Our Annual Pro Sale. View Details »

Nodevember Orchestrating Apps by Composing Angular Directives

Nodevember Orchestrating Apps by Composing Angular Directives

Jeremy Fairbank

November 15, 2015
Tweet

More Decks by Jeremy Fairbank

Other Decks in Programming

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