Codepunk Logo


Rebuilding Metron from the Ground Up

by Michael Szul on

Get posts from Codepunk directly in your inbox.

No ads, no tracking, and no data collection. Enjoy this article? Buy us a ☕.

On GitHub, you might find a small little JavaScript project called metron. This library has a long and storied history dating all the way back to Windows Vista, during a time when I was consulting with Peirce College in Philadelphia. Peirce had several administrative needs that called for some lightweight applications. Eager to experiment, I took it upon myself to explore creating sidebar gadgets (off hours). The Windows sidebar gadgets were quirky, and were required to be small in size, so utilizing a third-party library like jQuery wasn't an option. As a result, I started to build out some convenience functions for cross-browser compatibility, including AJAX calls. Some of these functions were covered by libraries like jQuery and Scriptaculous, but again, the need was for something small and custom. It was from this that metron was born.

In the process of building out this lightweight library for working with the DOM, several other convenience methods were added to the String, Number, Array, and Object types in JavaScript by extending their prototypes. I know that currently, developers frown upon extending the prototypes, but this was a library for my usage, and I'd much rather call variableString.capWords() than metron.capWords(variableString).

Windows 7 kept the gadget sidebar, but it never took off. Furthermore, the experiment at Peirce never came to fruition, as other items took precedence. Eventually, the contract with Peirce was over, but I was still working hard at Barbella Digital with the BDi framework. Over time, the convenience methods being layered on top of the JavaScript types grew, while some of the methods that duplicated jQuery functionality was stripped out.

When I left BDi, metron came with me, and I had placed it on GitHub, making it Open Source. I used the library in several University of Virginia projects, and it became a solid component of the online testing system that my team rebuilt. During this time, ECMAScript began to flourish with browsers not just supporting more functionality, but many quality components being incorporated natively (such as document.querySelector()). I also became a heavy user of TypeScript.

The metron library had become small, but very useful. Furthermore, I started to become influenced by Chris Love's ideas of "use only what you need even if it means rolling your own." Love has a small jQuery replacement for DOM selection called Dollar Bill. I realized that in metron I had a very lightweight library that carried only what I needed, and was a good tool for both mobile and desktop browser development. I also realized that I could do more with it.

Meanwhile, I built a generator off hours that output TypeScript in a pattern-based format. This too was used at UVA. I had abstracted enough into a base library that it dawned on me that a lightweight HTML5 library was forming. Once again influenced by Chris Love's recent, err… love, for "HTML native," I decided that I could improve upon my patterns a great deal to create a flexible framework for CRUD operations.

So as of this past week, I deprecated the old metron library, and created a new library called metron v2. This new metron library is being built with TypeScript, and is using Grunt to process the files down to a combined JavaScript file. Furthermore, QUnit is being used to unit test the prototype extensions, while Type Driven Development (or Type First Development) is going to be the primary driver in the framework code.

I'm really excited for this turn of events, as metron has been with me for a while, and has been a very useful tool when I program with JavaScript. It's going to be a lot of fun making that tool useful for more people than just me.