Adventures in tooling

Here lately I’ve been writing a lot of tooling in preparation for upcoming projects. This tooling is meant to lessen the amount of work to start up a new project. A while back I watched this video. That video inspired me to come up with a repository in which a front-end developer could clone, run a couple of commands and be ready to write code for the new project. Going down this route has been quite the eye opener to the complexity of what a modern progressive web app is today. So, here are the requirements for this project:

  • Provides a Polymer 2.0 progressive web app shell which follows the PRPL pattern and has the following features:
    • Offline Support
    • Internationalization Support
    • Authentication to various systems (AD, Domino, etc.)
    • Routing
    • Lazy-Loading resources
    • Inclusion of our base custom elements (now-core, now-context, now-domino-auth, etc)
    • Customizable theme which starts with the Red Pill colors, images and branding
    • Should utilize TypeScript
    • Most important: Should implement Red Pill Now’s opinions, requirements and “Best Practice” techniques for developing a web app
  • A testing system
    • Should be setup to utilize TypeScript
    • Should include complete, passing tests for the base web app
  • A build system should be included that performs the following
    • Configurable via polymer.json and sw-precache-config.js
    • Should minify all css, html, js, json and image files
    • Should bundle application views appropriately
    • Should generate a service worker
    • Should allow customization of tasks to run before/after the build step
    • Should provide Source Maps for easier troubleshooting of production code
  • Include a demo site built using the tooling project
    • Documents Red Pill Now’s code style guidelines
    • Gives examples of using the now-* elements included with the project
    • Should be removable
  • Provides local development environment tools
    • Local web server configurations for serving files from the src, dist, demo and test directories
    • Watching the appropriate files for change and reloading the browser
    • Misc. tools for cleaning up the dev environment
    • Typescript compiler
    • Version bumping (major, minor, patch)

Now, implementing all of those requirements has been quite the undertaking. It’s taken right at a month (started right before Christmas) to implement all of the above features. One of the things to come out of this is 5 open source projects (now-context, polymerts-doc-generator, now-richtext, now-avatar and now-standalone-picker). These are mostly Polymer elements with one node.js project in there. Also I got to learn about node.js. This being my first real undertaking with node it of course came with it’s own learning curve.

The biggest piece of creating this project was to understand how to use the node Readable/Writable streams. It’s a difficult thing to understand if you’ve never worked with streams before (which I haven’t) but they are very cool to work with and powerful. Also included in that learning curve is that everything should be asynchronous as it runs, so all of your tools should be returning Promises just to ensure everything is processing exactly what it should be processing.

So, what was the outcome of all this work? Well, a project that will cut Red Pill Now’s new front-end project start-up time from about 1 to 2 weeks down to a few minutes. Those 1 to 2 weeks would would have been spent writing the elements to come up with an application shell, defining the theme, setting up offline configurations, writing a build system (this could easily consume a week), ensuring the TypeScript compilation was working, setting up internationalization support, implementing authentication, implementing a pub-sub system, etc.

So what’s the process now?

  • You start with cloning the redpill-zion project to your local machine.
  • Jump out to a command line and run: npm run start:
    • this runs npm install and bower install
    • asks a series of questions to which the developer provides answers
    • configures the local server options
    • configures package.json, manifest.json, tsconfig.json, polymer.json, manifest.json
    • and does some other misc work based on answers given to questions asked
  • Once setup has finished the developer will run npm run start:
    • this will start a local server serving files from the src directory which includes a watch of all the .ts, .html, .css and .json files. Once any of those types of files change, compilation of TypeScript will occur (if needed) and the server will reload.
  • The developer is ready to start writing code
  • Once a build is required, the developer will run npm run build and the application will be optimized, minified and dumped into the dist directory ready for distribution
  • Once the build is complete, run npm run dist and a local server serving files from the dist directory will be started in order to do manual testing
  • To run automated tests, run npm run tests and a local server serving files from the test directory will be started with the same watch criteria as the src server

And that’s it. Everything a developer might need to work on/develop a project is included. The most important part of this whole thing is that the provided code matches Red Pill Now’s coding guidelines, includes all of the tools we recommend a front-end developer use, creates a web app that follows Red Pill Now’s opinions on what should be included in every application and provides a standard interface for all Red Pill Now projects.

The redpill-zion project I think should radically improve the productivity of our dev team and keep things very consistent. It should also save our customers money (and who doesn’t like to save money?). Not to mention it takes out the need to go through all the questions required to start a new project (what framework? what build tools? what compilation tools? Use TypeScript or not? etc, and on and on). In the future more tools and functionality should be able to easily be implemented which, everyone likes.

I hope this article has inspired you to seek your own solution to this problem. Until next time…. Happy Coding.

Share This: