Creating beautiful dynamic Web apps has been the Holy Grail of our industry for as long I can remember. I first saw a “web app” when Steve Jobs introduced WebObjects at the Moscone Center in 1995, which he claimed was the first dynamic HTML app server to go to market (followed by a few others like Kiva, WebLogic…). It was quite something to see for the first time a Web page dynamically constructed from a database query . If I remember correctly it was a list of cars (Chrysler may have been a client of NeXT). The HTML was crude, the performance was ok, but as always, Steve was at the bleeding edge of our industry.
I don’t know about you, but that twenty year journey has been frustrating, from JSP/Struts to ASP.Net, or your average MVC framework like Angular or even React.js which is in itself an incredible piece of engineering. The bottom line is that nothing I have tried in these twenty years would allow me to claim the “Full Stack Developer” status, not even close.
When I see Web templates like that one, I gasp and think, some day I’ll have enough time to write an Angular or React app that looks exactly like that. Over the last few years, it even felt that jQuery, HTML5 and CSS3 made it even more inaccessible for server-side developers like me to create a decent Web app.
For instance, if you look at the markup of the Brando template, you’ll see that there is some bad ass CSS/JS work behind it:
Writing some decent HTML5 and CSS is hard enough, now try to programmatically generate that kind of code. That… is hopeless.
It’s hopeless until you turn the problem around and you start with the template (fat fingers guys like me can even create decent looking HTML templates with ImCreator).
This is what a wrapper function looks like:
These functions are trivial to write, just a simple parameterization of the HTML template with some default values to make calling them elegant. That simple task should integrate readily with any designer-developer workflow. I bet most Web designers could actually deliver those “theme wrappers” without a sweat.
Last step, you serve the pages of your application directly from node, for instance, using express.js. Ideally, you would describe the content of your pages in json structures, as metadata:
Creating a page is merely a set of simple function calls:
Which you can finally wire onto an Express route:
A natural extension of that pattern would be to create standard Web apps/Website components (wrapper function) such that you could replace the underlying “theme” as needed, as the interface would remain the same. For instance, after changing the template’s metadata (the home json), the site just looks like what I needed. You feel like changing the template? as long as the theme’s functions are roughly the same, your site will continue to look pretty good. Compare that to a wordpress template change …
This pattern feels like a great way to modernize any kind of web app or web site.
I know, it sounds like one of these “duh! moments”, but
I can’t think of an instance where I saw this pattern explained in some article, that kind of functional pattern is not common at all. I would also expect if it was widely used, there would already be a collection of interchangeable themes with standard wrapper functions/interfaces.