A better way to organize your front-end code

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. …to this

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

18. Source

19. Source
Templates

20. Source
Templates
Styles

21. Source
Templates
Styles
Documentation

22. Source
Templates
Styles
Documentation
Tests (with fixtures)

23. Source
Templates
Styles
Documentation
Tests (with fixtures)
Demo

24. Source
Templates
Styles
Documentation
Tests (with fixtures)
Demo
variations

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

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

27. 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

28. Not just for UI components

29. Models
still get a test file, docs, and a demo (no
styles,templates)

30. Utility Functions
still get a test file, docs (no demo,
styles,templates)

31. ???
still get a test file…?

32. The Benefits

34. Realize:
Each Modlet is in fact a
mini-application

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

36. It encourages good
maintenance behaviour
Because it’s right there

37. It reinforces best practices
…and helps with code reviews

38. Defines a domain concept
boundary
Changing the domain concept would actually enforce changing the
file structure…

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

40. 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.

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

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

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

44. Aids in debugging
Is it broken on the demo page?

45. Simplifies your mental
models
Black box thinking…

50. The Benefits
Enforces good API design and separation of concerns
Encourages good maintenance behaviour
Reinforces best practices

51. Defines a domain concept boundary
Helps with on-boarding new developers
Eases concurrent evolution of parts within the system
The Benefits

52. Streamlines development
Aids in debugging
Simplifies your mental models
The Benefits

53. The Challenges

54. Files are all over the place!

55. Files are all over the place!
Solution: use StealJS

56. Styles and Template files

57. Styles and Template files
Solution: Use StealJS

58. Documentation spread
around the app?

59. Documentation spread
around the app?
…a feature?

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

61. Tests all over the place

62. Tests all over the place
Solution: Use Testee

63. Going a little bit further…

64. Why not make an NPM
package?

65. You should!
Look how easy it is…

66. Convert Modlet to npm package

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

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

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

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

71. 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

72. Boom!

73. Change from this…

74. …to this

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