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

Modules, components, micro-services… all the modern trends in web development are about breaking things up into encapsulated, self-contained units of functionality, and there are great reasons for this: it helps simplify your mental models, makes things easier to maintain and eases future evolution of the system.

Yet when it comes to our code organization, many projects still organize their files and directories based on file type. What about “componentizing” our source files? Learn about The Modlet Pattern, a dead simple idea about co-locating related files, that has huge benefits, along with tools that support the pattern.

Transcript

1. The Modlet Pattern A better way to organize your front-end code
2. 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
3. Modlets?
4. Who am I Adam L Barrett @adamlbarrett BigAB
5. Modlets…?
6. How do you organize your code files…
7. How do you organize your code files…
8. How do you organize your code files…
9. How do you organize your code files…
10. How do you organize your code files…
11. Change from this…
12. …to this
13. …to this
14. The Modlet Pattern A better way to organize your front-end code http:/ /donejs.com http:/ /github.com/donejs/ donejs @donejs Questions? @adamlbarrett BigAB
17. Source
18. Source Templates
19. Source Templates Styles
20. Source Templates Styles Documentation
21. Source Templates Styles Documentation Tests (with fixtures)
22. Source Templates Styles Documentation Tests (with fixtures) Demo
23. Source Templates Styles Documentation Tests (with fixtures) Demo variations
24. We just needed a name, so we could talk about it…
25. A lot of people hate this hat.
 It angers a lot of people, just the sight of it.
26. You’re starting to see the idea of 
 “co-locating files” 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
27. Not just for UI components
28. Models still get a test file, docs, and a demo (no styles,templates)
29. Utility Functions still get a test file, docs (no demo, styles,templates)
30. ??? still get a test file…?
31. The Benefits
33. Realize:
 Each Modlet is in fact a mini-application
34. It enforces good API design and separation of concerns Orthangonality, loose-coupling…
35. It encourages good maintenance behaviour Because it’s right there
36. It reinforces best practices …and helps with code reviews
37. Defines a domain concept boundary Changing the domain concept would actually enforce changing the file structure…
38. 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
39. 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.
40. Helps with on-boarding new developers The only need to understand the part they are working on
41. Eases concurrent evolution of parts within the system Things can change or be swapped out without affecting systems as a whole
42. Streamlines development Isolation and Encapsulation means you don’t need to load the whole app…
43. Aids in debugging Is it broken on the demo page?
44. Simplifies your mental models Black box thinking…
49. The Benefits Enforces good API design and separation of concerns Encourages good maintenance behaviour Reinforces best practices
50. Defines a domain concept boundary Helps with on-boarding new developers Eases concurrent evolution of parts within the system The Benefits
51. Streamlines development Aids in debugging Simplifies your mental models The Benefits
52. The Challenges
53. Files are all over the place!
54. Files are all over the place! Solution: use StealJS
55. Styles and Template files
56. Styles and Template files Solution: Use StealJS
57. Documentation spread around the app?
58. Documentation spread around the app? …a feature?
59. Documentation spread around the app? …a feature? Solution: Use DocumentJS
60. Tests all over the place
61. Tests all over the place Solution: Use Testee
62. Going a little bit further…
63. Why not make an NPM package?
64. You should! Look how easy it is…
65. Convert Modlet to npm package
66. Convert Modlet to npm package Use the DoneJS plugin generator (optional but awesome!)
67. Convert Modlet to npm package Use the DoneJS plugin generator (optional but awesome!) Change docs.md to README.md
68. 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
69. 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
70. 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
71. Boom!
72. Change from this…
73. …to this
74. The Modlet Pattern A better way to organize your front-end code http:/ /bitovi.com https:/ /github.com/bitovi @bitovi Questions? @adamlbarrett BigAB