Spike, for Roots Users

a guide for our amazing community

Jeff Escalante
Oct 25, 2016 · 8 min read

Plugin-Based Architecture

First I want to discuss a high-level change that runs throughout spike, but was not at all present in roots. Static site generators are all about transforming html, css, and javascript. If you don’t need to transform these languages, you don’t need a static site generator, you can just write your site directly to the files you will use for production. But there are a lot of helpful tools like babel and autoprefixer that make building websites much nicer, and as such many developers like having the ability to transform.

  • The ability to understand and contribute to pieces of their architecture without needing to grok monolithic codebases
  • The ability to build and add their own transformation features quickly and independently without needing to make a pull request to another large project

A Move Towards Standards

When we started building roots a few years ago, IE7 was still on our necessary browser support list, and ES6 was a term nobody had ever heard of. But today, browsers and web-based languages are improving rapidly, which calls for a change in philosophy.

Stylus -> Postcss

While roots is flexible as to which CSS preprocessor you can use, it defaults to stylus, and this is the choice of many of roots’ users. In Spike, we are dropping stylus completely in favor of postcss. That being said, you can build up a set of features very similar to those that stylus has using postcss if you want.

Coffeescript -> Babel

Coffeescript was a fantastic language and paved the way for many of the features that ended up in ES6, but it is now time to move forward. Spike’s default stack is built on babel’s ES2016 transform, meaning any proposals compliant with the ECMA262 javascript spec. This will eventually be supported by all browsers, which is very exciting.

Jade -> Reshape

You probably won’t be surprised at this point to hear about our plans for html. Reshape is, much like babel and postcss, a foundation-level base for plugins to transform html. Reshape is the newest of these three libraries, and was built by the static-dev team, so we will be actively maintaining it (although we also welcome other interested maintainers to join).

Js Pipeline -> Webpack

Javascript bundling is an extremely important feature for developers, and while it is not exactly in line with the other three libraries here in that it’s not a parse, plugins, generate flow, it does merit discussion.

Upgrade Path

Phew, that was a lot. So you might be asking — what is the upgrade path for roots sites to spike? Honestly, there isn’t one. There are so many changes between the two pieces of software that any type of migration would be extremely time-intensive and difficult. Again, this is not a new version of roots, it’s an entirely different project.


If you liked this article, click the little green heart below to show your support. Thank you!

Static Dev

Articles about the spike, roots, and static websites

Jeff Escalante

Written by

lifelong learner

Static Dev

Articles about the spike, roots, and static websites