Big LEGO blocks in LEGOLAND Billund, Denmark. Photo by Aki Kärkkäinen.
Over the last year or so, I've been thinking more and more about how frontend web development processes should be structured in small and large teams. Web projects often have tight deadlines so it’s important to have a structured approach to writing reusable code and testing modular code snippets in an optimized build environment, before deploying code to a testing or staging server.
Modular build framework
So, with all that in mind, I've put together a One Web Frontend Boilerplate, a modular framework for building responsive (mobile first) websites with Apache ssi. It's still a work in progress, but stable enough to be used in real-world projects (it has been used already!).
It draws code from many other projects, combining best practices and various solutions into a custom frontend build framework. Think of Responsive web design, HTML5 Boilerplate, Mobile Boilerplate and 320 and up merged together, with code being written once and run anywhere on your pages with Apache ssi.
Apache Ant build script
The project also includes Ant build script with the following tasks:
- Check JavaScript and CSS code quality,
- Optimize CSS, JavaScript and HTML files,
- Use RegEx to swap the CSS and JavaScript references in HTML header and footer during the build, to link to optimized assets instead of individual ones used during development,
- Merge ssi into single web pages (changing .shtml file extensions to .html),
- Generate JSDoc documentation,
- Optimize PNG and JPG images (public target, not included in default build),
- Create a new directory where all the optimised assets and markup are placed for deployment.
More info is available in the project README file. The framework can easily be plugged into Continuous Integration solutions, such as Jenkins, to handle the deployment process after a successful Ant build.
Check out the One Web Boilerplate on GitHub. And remember to check the Credits section too. I hope you'll find the framework useful in managing your source code and deployment process, while increasing productivity in large and small web teams.
If you have any thoughts or suggestions on how to make the framework better I'd love to hear them.
UPDATE 20 November, 2011
Included my GitHub fork of Jeremy Keith's Pattern Primer, to include common markup snippets (or atomic units of content as Jeremy calls them). The idea is to build elements from the content out, outside any layout context and external dependencies.