Challenge Accepted: Rapid Prototyping with Ractive

Because modern tooling is overrated

December 27, 2015

Yesterday, I had a little discussion with Mattias Johansson on Twitter where I "hijacked" his tweet regarding Java vs JavaScript learning. He said when learning Java, code examples often contain everything including the kitchen sink. On my end, I said JS code examples only include snippets and leaves everything else for you to find. He disagreed (totally fine I promise :D) but I wasn't really on the same train. On the same day, Pete Hunt wondered why it's so hard to board the React train and Eric Clemmons generalized it as a JS issue. Then Vjeux issued a challenge on getting a very simple JS setup that requires little to no tooling. Challenge accepted.

The quick and dirty

Just put this in an HTML file.

Make sure you have internet connection (because it uses a CDN'ed resource) or download the library.

 <html>
   <head>
     <title>Hello World</title>
   </head>
   <body>
     <div id="root"></div>

     <script src='http://cdn.ractivejs.org/latest/ractive.js'></script>
     <script>
       ;(function(){

         var HelloWorldComponent = Ractive.extend({
           template: `
             <div>
               <h1>Hello {{ world }}</h1>
               <input type="text" value="{{ world }}" />
             </div>
           `,
           css: `
             h1 { color: red }
           `,
           data: {
             world: 'WORLD!!!'
           },
         });

         new HelloWorldComponent({ el: '#root' });

       }());
     </script>
   </body>
 </html>

Share the HTML
There's no more step 3

Here's a living, breathing CodePen for it. Note that I am using template strings but not transpiling them, so you'd need either Firefox or Chrome for this to work. We're looking forward to template strings to make our lives easier anyways so whatever.

So let's review Vjeux's checklist:

✓ No setup - All you need is modern browser and an HTML file with the above code.
✓ One file - The above is one file, or two if you include the library.
✓ Shareable - You can share the file(s) above.
✓ Keeps working - If you fear the latest release, use one of the older releases.
✓ Not Generic - The above is just vanilla JS.
✓ Not prod-ready - Definitely not prod, but prod will look more or less the same (add in a few imports, tooling, separate files, custom directory structure etc.)

A bit of history

When I worked for a former employer where we had a small, cross-functional team (JS, Python, Java, Go) with rapidly changing priorities and flux of developers, we had to keep the system as close to vanilla as possible for faster onboarding. We needed to prototype features in a couple of days, easily replace libraries when they don't provide what we wanted, and rapidly test stuff without the traditional ceremonies found in established setups.

I personally put Ractive in the frontlines despite being a sub-1.0 framework because similarity to vanilla has always been a deciding factor when including features. In a gist, Ractive just provides just the right sugar and structure to your code. Other than that, it's just vanilla JS, CSS, and a super-set of Mustache (more like Handlebars recently).

It's become a personal goal to look for the simplest setup and process to rapidly onboard someone into a project, aside from documentation. I'm not a firm believer of "tooling solves everything". While it does solve a lot of things for me (I personally use NPM + Gobble + Rollup recently), the overhead that comes with tooling nullifies its benefits in the short term where the real action happens (deadlines, prototypes, POCs, hotfixes etc.) and time is a luxury.