The Most Powerful Computing Platform on Planet Earth: The Humble Browser
Ask ChatGPT its opinion regarding Earth's most powerful computing platform, and you'll get the usual answers. Is it a Cray with 8.7M cores? The Cloud, with its many millions of servers? A Quantum Computer, perhaps? Possibly Google or Facebook, with their many data centers?
The answer is, none of the above. It's the humble browser, which you are using as you read this article. Today, there are roughly 2 billion personal computers in the world, each running a browser and interconnected via the Internet. With its highly optimized Javascript engine and nearly unfettered access to your computer's resources, the browser is a powerful computing platform in its own right. It's not even a fair fight.
In this article, we'll touch on the browser's modest beginnings and then look at some of the lesser-known, yet powerful browser features available to every software developer.
A Brief History
Which came first, HTML or the Browser? In roughly 1990, Tim Berners-Lee, while at CERN (European Organization for Nuclear Research), conceived the idea of linking research documents via a markup language and sharing them across a computer network. His genius was to realize that, with the proper markup language, readers could navigate across content just like a spider traversing a web. The result — HTML — became a cornerstone of the Web, and the CERN "computer network" became the Internet. He also built the world's first browser on a NeXT computer, shown below, which also allowed for composing and editing HTML.
The browser became a true "computing platform" in 1995 with the advent of Javascript, which was invented by Brendan Eich in 1995 for the Netscape 2 browser. CSS, equally important, was created in 1996. By 1997 Dynamic HTML (DHTML) was all the rage. DHTML, driven largely by Microsoft, was the combination of Javascript, HTML, and CSS working together. Any software engineer old enough to remember will recall DHTML was practically the only thing anyone talked about then, along with "client-server" computing. You were a golden prospect if you had both of those buzzwords on your resume.
Over 20 years have passed since then and the browser has come a very long way. While engineers knock out millions of lines of code using popular frameworks like React, supported by countless libraries on NPM, there are some compelling features built right into the browser that you might not know about. Let's take a look at some of the more interesting, lesser-known features to get your journey started.
#10. Developer Tools
Dev Tools hardly qualifies as a "lesser-known" feature. But, the fact that such a full-featured debugging environment exists right in the browser is so mind-blowing I think we need to include it in homage to its awesomeness. In the early days, debugging in any language meant plenty of print statements. I can't remember using a commercial debugger before the early 90s — they existed, but they seemed to be more trouble than they were worth. Things have sure improved. The first version of "Dev Tools" surfaced in 2012 in Firefox as a plugin. It's since come a long way and is now a critical part of every front-end developer's toolbox.
#9. Web Components
Web Components is possibly the coolest browser technology that never was — meaning, it hasn't gained much traction despite the fact it's been around for nearly 10 years. I'm often surprised to learn that many software engineers have never heard of them. Web Components provide a means to fully encapsulate MVC functionality into well-defined "custom elements" that are isolated from other elements in the DOM. Your CSS for example, isn't impacted by cascading styles in other parts of the DOM. You create elements that have markup like <mikes-custom-element></mikes-custom-element>, and they are just as feature-rich as any built-in DOM element.
When I first discovered Web Components I was sure they'd be the next big thing. That hasn't happened, largely because of the success of powerful frameworks like React, VueJS, and Angular which are very easy to use. React 19, due out in 2024, has support for Web Components, so perhaps the future for Web Components is still bright.
#8. IndexedDB
IndexedDB might be my favorite of all browser developer tools. While most developers know about it, Local Storage and Cookies get a lot more attention because they are so easy to use. IndexedDB requires a bit more effort. But IndexedDB outshines them both because it is a full-featured key-value database with very few limitations. Chrome, for example, will let IndexedDB consume up to 80% of the computer's storage. That's a lot of storage. And because it's a key-value database well adapted to Javascript, it is as flexible as they come. While direct use of IndexedDB can be somewhat daunting, there are some great libraries that make it very easy to use. Dexie is a favorite of mine, which I use extensively in GizmoCMS.
#7. Web Audio API
If there were a contest for unsung developer tool heroes, the Web Audio API would win it. As a full-featured signal processing platform, it's as powerful as just about any audio library out there. As a developer/musician with an unfettered interest in browser technologies, it's one of my favorites. At one point I had four Cordova applications deployed to several App Stores that were based almost entirely on the Web Audio API. (I also learned the unfortunate lesson that there are not a lot of people interested in apps focused on jazz improvisation.)
#6. Web Assembly
I give Web Assembly the award for "most promising" newish technology. It's been around for about 5 years, but it's not well-known or widely used in mainstream apps. Yet. Why is that?
Remember Java Applets? Once upon a time, adventurous developers could run Java (not just Javascript) in the browser via Java Applets, which were small Java apps that ran in the browser's sandboxed JVM. While Applets had a lot of promise, they were killed off by Flash, implementation inconsistencies across browsers, security issues, and ultimately, improvements in Javascript and CSS. Whereas Applet technology was haphazardly bolted onto browsers, Web Assembly — which runs on a bare-bones virtual machine (unlike the heavyweight JVM) — was designed from the ground up to run in the browser.
When you begin to investigate Web Assembly, you'll come across claims that it runs at "near-native speeds". Further investigation will prove that those claims, at least today, are somewhat overstated. But the real power of Web Assembly is that it provides language freedom. You can write in AssemblyScript (like Typescript), Rust (the up-and-comer), Java, C++, and more, and compile the source down to Web Assembly. There are also bridges to send data between the Web Assembly and Javascript VMs. It also has a well-designed sandbox security model, meaning that like with NodeJS, you'll be able to run code that works both in the browser and on the server. It's not mainstream yet, but definitely keep an eye on this one.
#5. WebGL
If you enjoy super-high resolution apps like Figma and Google's Terrain View, then you have used apps incorporating WebGL (Web Graphics Language). It's the 3D counterpart to canvas and SVG. WebGL itself can be daunting, but if you'd like to dip your toes into 3D programming, Three.js and Babylon.js are good places to start. In my coding adventures, I had a go at creating a 3D guitar fretboard using Babylon.js for one of my improvisation apps. In the end, I bailed out and limped back to <canvas> because, honestly, it was tough to get things to work well. A nice 2D fretboard was just fine and was much easier to get working.
#4. WebRTC
WebRTC (Web Real-Time Communication) is the technology I most want to try next. Real-time peer-to-peer communication for video, audio, and text all via the browser — how cool is that? The trick with WebRTC is that it's "peer-to-peer-ish". You'll still need a signaling server to let your browser peers find each other. You'll also need to wrestle with browsers that are behind a NAT (Network Address Translation) proxy firewall. There are TURN servers for that, but suddenly our project is seeming less peer-to-peer and more client-server. And, for a frugal guy like me, anytime I hear the word "server" I see red dollar signs. Moreover, to have a successful peer-to-peer app, you have to have a lot of peers. And that is a very tough road, too.
#3. Typescript
For many years I swore I would never code a line of Javascript, and I still hate it. Coding with a dynamically typed language is, for me, like jumping out of an airplane without a parachute. Typescript was a gift from Microsoft that eliminated most of the headaches of Javascript. I still marvel at its genius and elegance. It adds a rich typing system, is familiar to hordes of Javascript programmers and compiles to Javascript. Nicely done, Microsoft!
#2. Electron, Cordova, and NodeJS
Of course, you probably already know about Electron, Cordova, and NodeJS, the frameworks that bring Javascript, CSS, and browser technology to desktop, mobile, and server-side applications. Each of these frameworks sprang from two sources — the browser engine and open source. Who could imagine that so many smart people (and companies) would donate so much of their time just for the sheer joy of building something neat.
#1. Progressive Web Apps
Progressive Web Apps (PWA) are browser-based apps that can be "installed" right from the browser, and they appear to the user as a desktop app. They are the kind of cool technology you've probably used without knowing it. If you've ever ordered Starbucks on your phone from their website, you've used a PWA. Same for Uber, Twitter Lite, and plenty of others. Even better, as a developer, there's not much work for you to do to incorporate it into your web app. If you use Webpack, you can use Google's Workbox PWA framework with very little effort. Best of all, you'll still be using your favorite frameworks, like React, AngularJS, and so on.
Both Chrome and Edge have great support for PWAs, and Safari and Firefox have some support.
The Mighty Browser, a Tribute
And there you have it — a tribute to the Mighty Browser — the most powerful computing platform on Planet Earth.