Glitch Brings ‘View Source’ Philosophy to React, Node.js

What does it mean to be a developer in 2021? If you use a no-code tool and build an app entirely by drag and drop, does that make you a developer? What if you “remix” (i.e. copy) an existing web app on Glitch and change a few bits of code in it — does that mean you can call yourself a developer?

Those developers who live and breathe C++, or who spend their days manipulating the DOM with JavaScript, may well look down their noses at no-coders and Glitch remixers. And it’s true that being a developer does not necessarily mean you’re a software programmer. But there’s also no denying the ever-increasing power of both no-code tools and Glitch, when it comes to developing web applications.

Glitch, a browser-based app creation tool, recently announced that it now enables users to create a full-stack web application “in under a minute.” As Glitch CEO Anil Dash informed me, this is “faster than you could build it using no-code tools or site builders.”

The speed is due to new, ready-to-go templates for a React app, a Node server-based app, or an Eleventy website (one of the more popular static site generator tools). Granted, the templates are all very basic — the Node app template, for instance, is for a simple color-picking app. But they are a starting point for developers, professional or amateur, to create websites or apps using the popular web development frameworks we hear about every day: React, Node.js, Eleventy.

“Glitch has had the ability to build apps in the browser for years,” said Dash, “but what’s new is the huge leap in performance to be able to build these sites in under a minute, and what’s unique is that they’re using totally standard frameworks, with the ability to customize the build process or even create a full-stack app.”

Lowering the Barriers to Coding

Glitch is kind of a mix between a traditional website builder tool (like Squarespace or Wix) and a low-code or no-code tool (like OutSystems, which I profiled last September). Its main point of difference with both is that with Glitch, you are encouraged to get your hands dirty doing coding. “Code, collaborate, & ship in seconds” is Glitch’s marketing tagline. Whereas with website builders and low/no-code tools, the emphasis is on making it easy to build a website or app via a user-friendly interface that mostly hides the code.

Last May, Dash came up with a clever term for what Glitch does relative to low/no-code tools: it’s a Yes Code tool, he claimed. One of the points he made was that “being able to code is a superpower, and we should enable more people to tap into that ability, by lowering the barriers.” Key to enabling this is the remixing functionality of Glitch, whereby users can duplicate an existing app on the platform and tweak that code to their own purposes.

If you’re old enough to remember the web of the 1990s, you’ll recognize this as an update of the “view source” philosophy of creating websites. Back then, it was common to view the source code of a website you admired and copy and paste it into a tool like Dreamweaver or Microsoft Frontpage. You might even browse to a CGI script or JavaScript directory and copy and paste some code from there (e.g. to create a form, or to add some scrolling text). Even if you weren’t a programmer, many of us from the 1990s web became familiar with HTML code, CSS, JavaScript and even the likes of Perl or Python — simply because we looked at the source code regularly.

That’s basically what Glitch is attempting to enable now, except in 2021 there are more sophisticated development frameworks to use. React, for instance, is an extremely popular JavaScript library that was used to create many of the single-page applications (SPAs) we see on today’s web.

Another way Glitch is trying to lower the barriers of coding is by automating much of the backend work. This is similar to the serverless approach of companies like Vercel or Netlify.

“Things that were formerly separate manual steps,” said Dash, “like configuring a build script, installing a secure certificate, or even making commits to git as you modify your code, are all just handled automatically on Glitch.”

Also worth highlighting is that the technologies Glitch is tapping into — like React, Node.js and Eleventy — are all open frameworks. Dash says this is a point of difference between Glitch and the site builder tools, in particular.

“On Glitch,” said Dash, “apps built with these new starters use totally standard, popular open frameworks like React or Eleventy, so there’s no lock-in to the platform since it’s just regular code (unlike templated site builders) and the site goes live at a secure URL that’s instantly sharable. Devs can even add their own domains with a couple of clicks.”

Looking Past ‘The Matrix’ Code

Part of Glitch’s appeal is that it brings that 1990s “view source” spirit to today’s web. It lets you see what’s really happening in the code, while also keeping things simple by abstracting away other complexities. This is a surprisingly rare thing nowadays. Have you looked at the source code of an SPA lately? Much of it is impenetrable, very much against the “view source” spirit.

Take Gmail, for example — if you view its source code in your browser, it’s like looking at the code of “The Matrix”. That’s because, as a developer named Jim Nielsen explained, the source code you’re able to view is “likely the result of some tooling stitching together content and markup through a series of templates then munging/minifying it for delivery over the network.”

On the other hand, when I played around with the React and Node.js templates on Glitch, all of the code is nicely laid out and easily navigated. Indeed, I was sorely tempted to “remix” the Node.js template, tweak a few lines, and announce on Twitter that I’m now a full-stack developer. I didn’t go that far, but it was nice to be able to view (and understand) source code once again.