Skip to content

Why another boilerplate?

addyosmani edited this page Dec 16, 2014 · 2 revisions

Looking over the past two and a bit years, what we achieved with Yeoman was 1) defining a scaffolding tool for modern workflows and 2) an ecosystem that folks could build on for creating new projects. Yeoman works well for those used to tooling who more or less know what they want to use.

Unfortunately, one of the challenges with it is almost no-one is focused on two really important areas: the mobile experience and performance.

Problem 1: Mobile.

Most Yeoman generators don't prescribe to sane mobile defaults for things like meta viewports and configurations specific to popular mobile devices today. This was because we were never able to bake in a way to 'propagate' a better mobile boilerplate to all the generators until very late on and even then, it wasn't very practical because each generator has a different index that gets scaffolded.

Why not generator-mobile? Matt Gaunt and I started that project as a proof of concept. It was useful, but failed somewhat as we basically gave developers options for every possible path. Most people just find that confusing and want to be handed an opinionated solution that just makes the decisions for them. We're aiming at the 90% of folks here rather than the well informed 10%.

Problem 2: Performance

Few generators actually keep performance in mind. Some, like those we've authored (I and Sindre started generator-gulp-webapp, our team created generator-webapp, generator-angular etc) do have support for build-time optimization but they don't do nearly enough.

One example: most generators will give you Twitter Bootstrap off the bat with little to no concern for the fact that most people will use less than 90% of what is there. They won't use tools like UnCSS to get rid of that bloat in their pages, leaving them with something that's still fat and will slow their users down on mobile. Our boilerplate tackles that.

Not only that, but we define baseline styles and responsive boilerplate that doesn't require you to buy in to a CSS library. We actually encourage folks to customize our styles and style guide as in any agency you're more likely to be doing that anyway.

Most generators don't include performance reporting or benchmarking in there. We do. We give you PageSpeed Insights reporting setup so you can easily run a single command to see how well you're doing on mobile and we wrote a module just to help with that: https://github.com/addyosmani/psi.

Problem 3: Cross-device development

Most generators today will give you some form of live-reload support. It's expected at this point. We give you live-reload with cross-device syncronization through BrowserSync, meaning that you sync scrolls, slicks, navigation and so on. Some generators will include BrowserSync but our team actually actively work on seeing how we can make those integration points even smoother. We recently added TLS support to BrowserSync. We're going to keep seeing how we can improve it.

Other problems:

  • Most generators and boilerplates don't include a style guide, we do.
  • Most generators/boilerplates don't try to reflect the best practices Google's 'make the web faster' team suggest. We actively try to. We want our boilerplate to give you the best possible performance scores out of the box so that you're not starting off trying to figure out how to improve an already poor score.

So, I think we have a few good reasons to exist. At least, we hope :)

Clone this wiki locally