What are web components – and why are they awesome?
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.
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.
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.