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
- Google all the acronyms on this page ;-)
- http://requirejs.org/docs/whyamd.html
- http://css-tricks.com/modular-future-web-components/