I’ve been building web apps since… well, since before anybody called them web apps. I wrote my first web page in 1992, I was building data-driven dynamic websites in ASP and PHP way back in the 1990s. I’ve seen countless trends and technologies rise, and sometimes fall – from cgi-bin scripts to templating languages, to static site generators and serverless cloud microservices.

But the common denominator across all these apps has always been the browser. Browsers are how the rest of the world consumes our content, uses our services, and interacts with all the wonderful things that we create. And, just like the rest of the web, browsers have evolved and innovated beyond recognition, and JavaScript, the de facto programming language of the web, has evolved with them. A modern web browser is an incredibly powerful, flexible programming platform. We have native APIs for working with events, animation, timing, touchscreens… we can play video and music, we can capture images from your camera, sound from your microphone; we even have APIs for detecting your location and which way up you’re holding your phone. And alongside these rich APIs, browsers now give us some extremely powerful patterns for building responsive, scalable web applications.

When I first started writing HTML way back in the 1990s, one of my first questions was “ok, we have H1, we have IMG, we have A… how can I write my own tags? What if I want an HTML tag that draws a chart? Or a special kind of button? Or something like a three-way toggle switch?” And for a long, long time, the answer was “you can’t.” Sure, we could use PHP or ASP.NET or Java to write server-side controls and components. Many sites used to rely on third-party plugins to run applets or Flash animations, until iOS came along with the launch of the first iPhone in 2007 and, thanks to Apple’s strict policy of not allowing any browser plugins on their iOS platform, sounded the death knell for a whole raft of proprietary browser extensions.

But developers still wanted a way to create reusable components; to combine appearance, logic, and behaviour into a widget that they could easily deploy across their site. And now, with web components, we can.

Web components describe a set of native browser APIs and technologies that we can use to create modular, reusable controls and deploy them as part of our web applications. Custom elements allow us to extend the DOM and define our own HTML tags, which we can then use, nest, style, and customise on our pages just like any other HTML tag. JavaScript Modules and classes provide a powerful mechanism for reusing scripts and client-side code, solving many of the frustrations of client-side JavaScript development and allowing us to use cool new development paradigms like hot module replacement.

Alongside these new technologies are tried and tested patterns for handling events and user interaction, solutions like SASS making it easier than ever before to manage the stylesheets and appearance of your applications, and all the richness of the NodeJS ecosystem providing tools like Jest which we can use to test and validate our components before they go live.

And the best part is that because it’s all targeting native browser APIs, there are no libraries or frameworks involved. The only code you ship to production is the code that’s actually part of your solution – which makes for lightning-fast, lightweight, responsive sites that work great on desktop and mobile devices alike.

If this all sounds like something you want to know more about, then join my online workshop with ITkonekt coming up later this month. Two days of hands-on, online learning, presented live using Zoom and Slack, covering custom elements, events and event handling, JS classes and modules, tooling, testing, and much, much more. See you there!

You can find more details about this workshop on the following LINK.