by kperch at HTML5 Texas Conference in Austin, TX
How do you manage a huge web application’s front-end when you have a diverse team of programmers, and javascript is not a strong suit for all of them? How do you handle both new and old code from multiple developers, and make sure only quality code makes it into your repos? Automated tools such as Yeoman and Grunt are not just for packaging your web project in a performant and clean package. They also allow you to enforce code quality and consistency through automated quality checking, testing, and beautification. This talk will go over the case study of a large web application in need of a refactor and test suite, and how tools such as Yeoman and Grunt allow you to implement a plan to bring projects like these back from the brink, without losing your sanity in the process.
gruntjs.com (runs on node) – you just need JSON and grunt commands
works with growl
pulls everything together, combines, concatenates and minifies.
styles.stylus combines css
You can set up watch tasks and it will check for errors as you code, but be careful because it can slow down your system if you’re trying to watch too much.
It has tons of plugins for jade, Markdown, YAML, Browser Refresh, Templates, Handlebar, dot, Compass, LESS, SASS, Stylus, Mocha, Jasmine, Beautifier, JSHint/Lint, Appcache Generation and more. Available on NPM.
How does this help with existing projects? Educate – Automate – Enforce
Educate team members about project standards and patterns
- At a team meeting, set the agenda in advance
- Bring reasons and support for views on standards
- Put it in writing, put it somewhere public to your team
Automate common build steps and quality control
- Even if you don’t use grunt, just automate it!
- It’s important that everyone uses the same process
Use the new automation tools to enforce the standards
- Automated processes = easy commit hooks
- Peer reviews allow for team accountability
Case Study – what we have
- Large legacy project
- multiple js files
what we want
- modular js
Step 1 – Educate
- get the team involved
- JSHint – promote cleaner JS
- Module system/automated build
Step 2 – Automate
- Builds – concatenation, minifications
- Quality Control – JSHint, Unit test runner
Step 3 – Enforce
- Automation – easy commit hooks
- peer reviews
Take it in stages
- Enforce quality assurance on new files at first
- Refactor, then add to JSHint Lint
- Take it one step at a time
Automation is a tool
Automation helps, but it doesn’t substitute for proper planning and framework
grunt is ready and simpler to use than yeoman
You can do automated testing against the dom using browserly
What do YOU think? Let me know...