Modular Front-end Development

Created: 07.08.2014 (work discussion)

Modular = "composed of software or hardware modules that can be altered or replaced without affecting the remainder of the system."

No more code soup: Smaller blocks of code to understand, test and document - 'What can/can't/could this thing do?'
Quality control: Not just 'It seems to work but I'm not sure why'
Understand and manage dependencies: 'What else do I need to get this thing working? How do I link it all together?'
Share solutions across projects, 'What solution did I use on project X?', 'Why does feature Y work on this project but not on that project?', 'What was that fix I applied to get this working on project Z?'
Code is a living thing - bugs are unavoidable with tight deadlines and changing technology: fix bugs and roll out fixes as you have time, share code between developers to benefit from their perspectives/strengths, 'How could I best spend today given that I have no paid work booked?', 'How can I contribute and help someone else out?'
Reusable code justifies a greater time investment = more considered, less bugs and hacks
Have an easy way to see what versions of shared code are being used, and whether updates are available
A standard interface for developers dealing with Chrometoaster code
Prototype features using new technologies to reduce R+D time when considering options for a project
Share the work between the team and collaborate on new tools and solutions rather than writing the same code over and over
Code is more predictable
Discoverability - search a repo or directory for code, rather than multiple projects using different naming conventions

many more folders and files, need to decide on and stick with a standard approach to reduce maintenance, need automation to stitch the files together, more complex systems to understand
if using 3rd party solutions, these may become unmaintained or be deleted altogether
Quality Control only works well when we can filter out non-critical warnings from error logs

Sass, Compass etc: code reuse, skinnable layouts
SMACSS, SMURF, BEM etc: modular layout architecture
Mustache + JSON: data-driven reusable templating
AMD (Asynchronous Module Definition): modular JavaScript with dependency management and no set order of inclusion
TDD & BDD eg Qunit: unit tests for module script functions, so you know how well the code has been tested ('coverage')
Selenium: interactive tests of common usage patterns, so you can test whether modules act as expected when integrated
Bower, NPM: Package management, to understand where code is sourced from, to avoid unexpected surprises by locking down sub/versions, to manage dependencies, and to roll out updates and bug fixes
Grunt, CI (Continuous Integration): combining modular assets, optimising for efficient delivery, automating build scripts and tests, timely error reporting to ensure that code updates do not compromise quality
Git/Github/Bitbucket: version control, sharing and collaboration with other developers, learning from each other, tagged releases, pre-releases, Markdown documentation
KSS: a central source of documentation for themed modules as they're relevant to a project
Terminal: many technologies require understanding of the commandline and Unix file system

Consider a site to be a collection of parts rather than a 'whole'
Agile/XP methodology: small blocks of development on distinct 'features', iterative improvements, distributed team can work on different files
Software engineering: building things properly so they're robust and reusable, good inline documentation, peer coding to reduce tunnel vision, not afraid to refactor to improve and learn
DRY: Don't repeat yourself vs WET: Write everything twice. Don't keep writing the same code.
Open Source: Share your code to benefit from others' knowledge

Github is the main way that developers collaborate on and publish open source code
Common Web Platform uses Git (Gitlab) and encourages development of shared backend modules
Web Components - "snapping together Lego blocks"
NPM is an established package management system for finding and managing Node dependencies
Experiments like PatternLab
Modular CSS systems like Compass
CSS Architectures like BEM
Natural evolution from products like Dreamweaver + Library items

Pick a component that you often use on projects, eg your column/height-match script, set up a Bitbucket repo for it, 'consume' this repository via Bower
Troubleshoot some bugs in one of the existing Github repos
Think about what tools/plugins/solutions we need, that we don't currently have, or technologies that you'd like to play with

dotherightthing/modular-fed-development.md