When beginning a new project at Moov2 we always kick off with a meeting to discuss tasks to be done for the first phase. The first task added to our task management process is always "Create a Walking Skeleton". I came across the term "Walking Skeleton" when reading a book I highly recommend, Growing Object Orientated Software Guided By Tests. Creation of a walking skeleton involves getting architecture in place to build, deploy and test a product so focus can shift quickly to implementing features. The majority of time when creating a walking skeleton is spent setting up an automated build process. The automated build process carries out tasks orchestrated by a build script to configure and optimize source files to output a product ready to be deployed into a production environment. Because a walking skeleton doesn't contain features it can be used as a starting point for any web application project. With this being the case I have open sourced the walking skeleton on Github for others and others to contribute and use when starting web applications.
What is a web application?
The Walking Skeleton
As I said earlier in this blog post all the code for the walking skeleton is available on Github. Even though it doesn't contain any features that can contribute to features in the end product, it is packed full of features that aid the development and deployment process.
Build Process using Ant
The big picture of the build process is that source files are copied to an intermediate directory where they're configured and optimised then the files that contribute to the end product are copied to a publish directory. The detail is in what is done during the configuration and optimisation stages of the build process.
CSS Reset & Sass
The skeleton comes with a CSS reset courtesy of normalize.css by Nicolas Gallacher and that's all seeing as there is nothing to style. Even though there isn't any CSS the skeleton is geared up to use the Sass CSS preprocesser. By choosing Sass it makes it easy to only have a single CSS file for the web application and have Sass produce a compressed output, this reduces the file size of the CSS file.
AMD via RequireJS
data-main attribute used in the development environment (as shown in the code sample below).
<!-- development version --> <script data-main="app/js/config" src="vendor/require.js"></script> <!-- production version --> <script src="app/js/fcb2dc81.js"></script>
I will discuss the odd file name in the production version shortly.
One of the biggest things that affects page load time is images. Images take up the majority of HTTP requests and also weigh the most KB. In order to trim a bit of the load time off the build script in the skeleton has a target dedicated to compressing
.png images (plans in the future to include
.jpg). The compression is done using OptiPNG. To kick off the optimisation process open up a command prompt and change the current directory to the build folder and run the command as shown below.
The time it takes for the command to complete is linked to how many images are in the directory. The command will run each image in the images directory (located in the
src/app/images directory) through OptiPNG placing the optimised image in an
optimised-images directory in the root. This directory is ignored by Git to ensure the optimised images aren't included in the source code repository.
Instead of including the image optimisation in the default build target it has a target of its own where the responsibility for running lies with the developer. This was done because once the image has been optimised the output won't be different when run again. Also if there is a considerable amount of images it can really impact the speed of the build process. So once the command shown above has completed you should copy the optimised images to the images directory overwriting the original images.
When developing on anything nowadays I put extra effort to make sure the code I'm writing is easily understood by others and myself when I return to the code at a later date. An effective way to do this is to use comments to show my intentions with a piece of code. This is a principle that I have applied through out the entire codebase in the skeleton. Not only have I included explanations but also links to useful resources that offer a deeper understanding in what is happening in the code.
Still to Come
.png images, so it would be good to at least handle
The last thing that will hopefully come in the future is contributions from others. There is already many boilerplate type repositories available on the web and this skeleton is not trying to be a replacement. It is primarily an aid for myself when starting a web application project, but if it is useful to others then that's a bonus. So please feel free to contribute, point out problems or offer suggestions on things that could be added or done better. Once again the project can be found on Github, or alternatively you can contact me via email or twitter.