How Docker helped me love writing CSS again

How boot2docker has changed our workflow

Docker has long been appreciated in the sysops-land, but perhaps its biggest impact is on reducing environment instability for designers who work with code. This is an overview of why our designers are happy to be working with Boot2Docker, which brings better Docker support to the Mac.

The web is a more expressive design medium than ever, but front-end web development is becoming a mess. You have to npm your bower and yeoman your gulp. Not to mention the same old complexity of the lower-level stack, your apt-getting things and your httpd.conf hell (did you remember to reboot Apache?) On some projects the complexity of managing the development environment setup can require more time than the actual work!

In shops like ours we try for development environments that can be set up more easily as aspects of an inclusionary process. Since the emergence of Amazon EC2- and S3-style cloud computing in 2006, it’s become possible to perform incredible acts of computation, launching entire fleets of servers at once.

The cloud is not only about sysops turning on servers anymore.

Now is an exiting time because the industry is finally applying these cloud-type tools to local environments. It seems the lessons learned by sysadmins over the last 10 years are finally being applied to the rest of the team.

If you’ve ever spent days trying to configure a database just so you can patch some HTML this can be a very significant indeed.

So, with the help of a sysop who groks containers, we can solve a big class of problems that have prevented so many designers from working directly on the codebase. For managers of inclusive, cross-disciplinary teams, this is great news.

We want to minimize the separation between designers, developers and operations and bring new members in as easily as possible.

Here is a sketch of the old way (not to scale!). It starts on the left with someone building a full stack networked app with a big README file.

This leads to a lot of wasted time. A better approach is to build a reusable environment. The graph should look more like this, so to speak:

Note that containerization doesn’t remove the complexity of developer environment setup problems; that was never the goal. The first spike in energy is still just as big. The savings in time comes over the longer term.

When it is easier to install and maintain your team’s software — especially when more members of the team participate in a hands-on way with the code — it gets much easier to make a quality product. A new designer can start work and make their first commit on a feature branch their first day. That both efficient and inclusive.

So perhaps the most practical benefit of this type of automation is not only simpler developer experience but also improved workplace collaboration between web application developers.

Even if you are comfortable enough with the command line to use git (as Meedan designers are), the effort needed to configure the full stack can be a punishing prerequisite for making your first commit. There’s no good reason for this anymore.

This is the spirit of #DevOps. To take it a bit farther, it feels like #DesignDevOps is now possible. The maturation of web-software packaging and distribution systems means that anyone on a team can get a functional build of the project on their laptop in no time. This gives everyone access to broader understanding of the technology we are building.

Kitematic takes it even farther. Maybe too far?

For a glimpse of the future you can try Kitematic, which wants to take all this to its extreme, the “OMG it’s actually one click” experience. (Kitematic is now bundled with other Docker tools in the Docker Toolbox.)

In practice we found it a little too much magic. The design goal of Kitematic is perhaps an unrealistic level of abstraction. Kitematic does not make it transparent what is happening underneath all the layers. Where it’s possible to get started so quickly, the danger is you might end up with no idea what you have done.

Our design goal is slightly different than Kitematic’s. We leave container setup and maintenance to a trained system administrator and prefer to work with the slightly “lower-level” tools. As the illustrations above show, the underlying complexity of the environment doesn’t change and anyone using Docker still gets to learn what’s underneath. Our goal at Meedan is not to find total-one-click magic, we just want to solve the problem once, up front, rather than pushing the complexity down to the other members of the team. We still invest in secure, stable environment. We still enjoy learning about the guts of what we are building. But now we configure an environment in a stable, readable, repeatable way. And designers can learn at their own pace as they get deeper into the app.

So now we’re convinced: Boot2Docker is a beautiful thing for our design team at Meedan. Docker is a great designer and developer experience for composing complete web applications in a stable, collaborative way. The implications of what is possible now are significant.

If you’re interested in following more of Meedan’s technical work, check out our github page.