More and more websites are made by assembling back-end libraries and front-end components provided by third parties, rather than built in house. Web developers typically spend less time coding than integrating code from others, among other tasks. Face it, most organizations don’t have the resources to compete with the collective work put into a WordPress or Bootstrap, and even if they do, in most cases it wouldn’t be a good use of said resources.
Think of it as a supply chain, like how car “manufacturers” are actually assembling components more than they are “building” products from raw materials. They focus their actual component manufacturing on a few critical parts like engines – and even then often in collaboration with competitors – but they get parts from a whole ecosystem of suppliers. Aircraft makers are not even in the business of making engines! How we go about making websites is going through a rapid and exciting phase of maturation. To the “build or buy” question, the answer is increasingly “buy”, though money is not even necessarily involved.
If you cannot “touch” any bit of your website without risking breaking it all, and if even minor functional improvements turn into slow, long projects then you’re doing it wrong. And if you’re only going through a major big “redesign” every two or three years, well you’re losing opportunities to capture a bigger audience and increase revenue. A key to a more nimble approach to making websites is the ability to tap the booming quantity of reusable web bits.
Savvy sourcing and rapid integration become more critical skills than the ability to code from the ground up, but organizations also need to adopt new technology in a way that is maintainable and sustainable. Boeing for instance has found that you can go too far with outsourcing, and likewise there’s an art and science to the use of off-the-shelf code and design.
Conveyor Belts for Today’s Web Factory
It is great that so many building bricks are available these days, often for free. Look at how many plugins can be found in the WordPress world, or how Bootstrap has spawned a whole crowd of tools and resources. But the web is a fast moving environment, and things change quickly: before you know it WordPress is close to version 4.0 while Bootstrap is already past its 3rd major release. And they all have dependencies to libraries such as the also ubiquitous JQuery, or among themselves. How are you going to keep up? You don’t want to just spin your wheels because of third-party updates, not to speak of components that become outdated and are no longer maintained.
Luckily, to keep track of all these files in their various specific versions, a vast toolbox has grown in just the last couple of years, including:
- Git and the essential Github to manage source code
- Composer for PHP backend libraries (and WordPress plugins)
- Bower for Javascript and CSS frontend components
- Grunt for task automation
Don’t let your tools own you
Note that there are usually several competing products to complete the same type of task, the above being just a few of the most popular ones. There is a tendency for some developers to chase the latest fad, but be wary of diminishing returns at the bleeding edge. In my opinion what really matters is selecting components and tools that have a high critical mass so that the community, whether on Github, StackOverflow, or elsewhere, has already solved many of your future technical problems before you even face them.
There are endless ways to skin a cat. But what you really want is to find efficient ways to meet your functional goals, so keep in mind cost/benefit considerations before going after yet another tool because it sounds marginally more elegant. It matters much more to use any task automation tool than use the “very best one”, which someone will invariably tell you is not the one you’re using right after you’ve invested time in adopting it.
It sounds complicated
These tools had been on my radar for a long time, but I have to admit I felt intimidated, and it’s only after seeing firsthand how site maintenance, let alone new development, were a chore when done the old way (i.e. manually) that I decided to bite the bullet and fully catch up with modern web development practices. The good news is that these tools follow similar philosophies, so once you’re comfortable with one, adopting the others is significantly easier. Now that I’ve conquered that learning curve, I can say it was well worth it.
If this all sounds arcane, keep reading, I have gathered great learning resources below:
- Install and manage WordPress with Git
- Easy Package Management With Composer
- Meet Bower: A Package Manager for the Web
- Grunt for People Who Think Things Like Grunt are Weird and Hard
- Get Up and Running with Grunt
- Roots.io blog
- Grunt your way to frontend performance optimization
- Frontend Workflows with Grunt and Lineman (long, clear video)
- FT: (Re)simplifying front-end build process with a build service
- Why You Want to Develop in Production-Like Conditions, and How to Do it with Vagrant
Updates
- Breaking up with Sass: it’s not you, it’s me. PostCSS transforms using Javascript so you don’t have to learn the syntax of a CSS preprocessor like SASS or LESS.