Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

The Modlet Pattern

226 views

Published on

A better way to organize your front-end code

Published in: Technology
  • Be the first to comment

The Modlet Pattern

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

×