Building my Development Minisite

Overview

Welcome to the first of my explanatory sites, to help try and give visibility to the effort that I put into my work.

To give myself the chance to try out some technologies, as part of the revamp to my core website, I decided to build a few minisites. This "behind the scenes" site describes what went into making my Development Minisite — which can be found here.

The entire site is powered by RiotJS. Each section of content is built as a modular component allowing them to be switched around, replaced, or altered by configuration easily.

Code

Why RiotJS?

Because out of the similar technologies I looked into, RiotJS had the best perspective in my opinion. Put simply because it keeps things simple, it doesn't:

  • Expect you to learn a new language (or even a reworking of a language)
  • Lock you down into using a particular approach
  • Bend JavaScript in ways that are not beneficial
  • Provide way more code and complexity than you need

It does:

  • Allow you to quickly and easily create bespoke elements, using what you already know
  • Keep ingredients concerned for a particular element together in the same place
  • Give you a nice controllable framework to build on

RiotJS vs React and Angular

I came across RiotJS after reading the "quick" start guides to both Angular and React.

I kept searching because Angular's "quick start" was rather a joke*, and React made me feel uneasy — especially in terms of it being built by Facebook (uurgh**) and involving the worrying JSX.

*  It was detailed, but anything but quick. Not to mention I tend to get wound up when people start talking about JavaScript, Classes and Fixed-types in the same sentence. If you like Classes or Fixed-types, you really shouldn't be coding with JS. (Yes I am aware classes are now part of ES6, but they aren't really classes!)

**  That's not your typical, uurgh I hate social media. I've worked on too many projects involving Facebook only to have the Facebook team change/bug things out-of-the-blue and cause a great many headaches. It's all well and good having the motto "break things", but if you break other dependent developers stuff as well, that's pretty poor.

Implementation

As far as Riot's abilities go, I only implemented a small percentage. Building a minisite isn't really the most complex test. Especially if the framework you are using is designed to handle live changes but your content is essentially static.

I mainly used Riot's ability to create bespoke tags, and yield specific HTML inside those bespoke tags — what they refer to as "HTML transclusion". I also took advantage of its CSS rewriting to keep component CSS sandboxed.

Conclusion

My only issue so far with RiotJS is its lack of ability to include external script tags and style into a tag/element definition. I've found an ok solution to the above however, in that for any shared library I might optionally need, I create an element for it — which then brings in the codebase as part of a mixin/tag — making it available in a modular fashion.

Other than that — compared to both Angular JS and React — I'd far rather pull RiotJS into a project any day.

I did also briefly look into Vue.js, which looked interesting, so perhaps my next change to compare technologies will be between Riot and Vue.

Codelamp Dev Screenshot