Tweet
Tweet

Slide 1

Slide 1 text

Orchestrating Apps by Composing Angular Directives github.com/jfairbank/orchestrating-apps-angular Jeremy Fairbank jeremyfairbank.com @elpapapollo

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Building applications is hard

Slide 4

Slide 4 text

Who is software for?

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

Competing Goals

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Patterns make it “easier”

Slide 10

Slide 10 text

Why not use them with JavaScript frameworks?

Slide 11

Slide 11 text

Composition

Slide 12

Slide 12 text

What is composition?

Slide 13

Slide 13 text

What is composition?

Slide 14

Slide 14 text

What is composition?

Slide 15

Slide 15 text

– 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?

Slide 16

Slide 16 text

– Wikipedia “The way in which something is put together or arranged. The combination of parts or elements that make up something.” What is composition?

Slide 17

Slide 17 text

Composition Create with small independent pieces.

Slide 18

Slide 18 text

Composition Embodiment of many design principles.

Slide 19

Slide 19 text

Design Principles

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

Composition and Angular

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

But how do we fit directives together?

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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)

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

Composition is a critical tool in software development.

Slide 31

Slide 31 text

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