The Modlet Pattern: A better way to organize your front-end code - Speaker Deck

Tweet

Tweet

Slide 1

Slide 1 text

The Modlet Pattern A better way to organize your front-end code

Slide 2

Slide 2 text

I just have this distaste for certain terms like webinar. Like it’s a horrible word.    And then I recently heard ‘micronar’, and modlet is right up there.    I’m sorry. The name just kind of makes me go ‘Ugh’. - Charles Max Wood of devchat.tv

Slide 3

Slide 3 text

Modlets?

Slide 4

Slide 4 text

Who am I Adam L Barrett @adamlbarrett BigAB

Slide 5

Slide 5 text

Modlets…?

Slide 6

Slide 6 text

How do you organize your code ﬁles…

Slide 7

Slide 7 text

How do you organize your code ﬁles…

Slide 8

Slide 8 text

How do you organize your code ﬁles…

Slide 9

Slide 9 text

How do you organize your code ﬁles…

Slide 10

Slide 10 text

How do you organize your code ﬁles…

Slide 11

Slide 11 text

Change from this…

Slide 12

Slide 12 text

…to this

Slide 13

Slide 13 text

…to this

Slide 14

Slide 14 text

The Modlet Pattern A better way to organize your front-end code http:/ /donejs.com http:/ /github.com/donejs/ donejs @donejs Questions? @adamlbarrett BigAB

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

Source

Slide 18

Slide 18 text

Source Templates

Slide 19

Slide 19 text

Source Templates Styles

Slide 20

Slide 20 text

Source Templates Styles Documentation

Slide 21

Slide 21 text

Source Templates Styles Documentation Tests (with ﬁxtures)

Slide 22

Slide 22 text

Source Templates Styles Documentation Tests (with ﬁxtures) Demo

Slide 23

Slide 23 text

Source Templates Styles Documentation Tests (with ﬁxtures) Demo variations

Slide 24

Slide 24 text

We just needed a name, so we could talk about it…

Slide 25

Slide 25 text

A lot of people hate this hat.  It angers a lot of people, just the sight of it.

Slide 26

Slide 26 text

You’re starting to see the idea of   “co-locating ﬁles” around… Angular Component structure, npm small modules best practice, Pods… http://marmelab.com/blog/2015/12/17/react-directory-structure.html http://engineering.kapost.com/2016/01/organizing-large-react-applications https://scotch.io/tutorials/angularjs-best-practices-directory-structure

Slide 27

Slide 27 text

Not just for UI components

Slide 28

Slide 28 text

Models still get a test ﬁle, docs, and a demo (no styles,templates)

Slide 29

Slide 29 text

Utility Functions still get a test ﬁle, docs (no demo, styles,templates)

Slide 30

Slide 30 text

??? still get a test ﬁle…?

Slide 31

Slide 31 text

The Beneﬁts

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

Realize:  Each Modlet is in fact a mini-application

Slide 34

Slide 34 text

It enforces good API design and separation of concerns Orthangonality, loose-coupling…

Slide 35

Slide 35 text

It encourages good maintenance behaviour Because it’s right there

Slide 36

Slide 36 text

It reinforces best practices …and helps with code reviews

Slide 37

Slide 37 text

Deﬁnes a domain concept boundary Changing the domain concept would actually enforce changing the ﬁle structure…

Slide 38

Slide 38 text

The Modlet Pattern, better exposes the authors intention of domain concept boundaries and when those concept boundaries reveal themselves to be inadequate the process of changing those boundaries is far more explicit

Slide 39

Slide 39 text

The Modlet Pattern, better exposes the authors intention of domain concept boundaries and when those concept boundaries reveal themselves to be inadequate the process of changing those boundaries is far more explicit This guy sounds pretty smart eh? He must, like, know what he is talkin’aboot.

Slide 40

Slide 40 text

Helps with on-boarding new developers The only need to understand the part they are working on

Slide 41

Slide 41 text

Eases concurrent evolution of parts within the system Things can change or be swapped out without affecting systems as a whole

Slide 42

Slide 42 text

Streamlines development Isolation and Encapsulation means you don’t need to load the whole app…

Slide 43

Slide 43 text

Aids in debugging Is it broken on the demo page?

Slide 44

Slide 44 text

Simpliﬁes your mental models Black box thinking…

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

The Beneﬁts Enforces good API design and separation of concerns Encourages good maintenance behaviour Reinforces best practices

Slide 50

Slide 50 text

Deﬁnes a domain concept boundary Helps with on-boarding new developers Eases concurrent evolution of parts within the system The Beneﬁts

Slide 51

Slide 51 text

Streamlines development Aids in debugging Simpliﬁes your mental models The Beneﬁts

Slide 52

Slide 52 text

The Challenges

Slide 53

Slide 53 text

Files are all over the place!

Slide 54

Slide 54 text

Files are all over the place! Solution: use StealJS

Slide 55

Slide 55 text

Styles and Template ﬁles

Slide 56

Slide 56 text

Styles and Template ﬁles Solution: Use StealJS

Slide 57

Slide 57 text

Documentation spread around the app?

Slide 58

Slide 58 text

Documentation spread around the app? …a feature?

Slide 59

Slide 59 text

Documentation spread around the app? …a feature? Solution: Use DocumentJS

Slide 60

Slide 60 text

Tests all over the place

Slide 61

Slide 61 text

Tests all over the place Solution: Use Testee

Slide 62

Slide 62 text

Going a little bit further…

Slide 63

Slide 63 text

Why not make an NPM package?

Slide 64

Slide 64 text

You should! Look how easy it is…

Slide 65

Slide 65 text

Convert Modlet to npm package

Slide 66

Slide 66 text

Convert Modlet to npm package Use the DoneJS plugin generator (optional but awesome!)

Slide 67

Slide 67 text

Convert Modlet to npm package Use the DoneJS plugin generator (optional but awesome!) Change docs.md to README.md

Slide 68

Slide 68 text

Convert Modlet to npm package Use the DoneJS plugin generator (optional but awesome!) Change docs.md to README.md Add a package.json and be explicit about dependencies

Slide 69

Slide 69 text

Convert Modlet to npm package Use the DoneJS plugin generator (optional but awesome!) Change docs.md to README.md Add a package.json and be explicit about dependencies Add versioning

Slide 70

Slide 70 text

Convert Modlet to npm package Use the DoneJS plugin generator (optional but awesome!) Change docs.md to README.md Add a package.json and be explicit about dependencies Add versioning Push it to npm

Slide 71

Slide 71 text

Boom!

Slide 72

Slide 72 text

Change from this…

Slide 73

Slide 73 text

…to this

Slide 74

Slide 74 text

The Modlet Pattern A better way to organize your front-end code http:/ /bitovi.com https:/ /github.com/bitovi @bitovi Questions? @adamlbarrett BigAB