Image courtesy- 99Designs

Hyperscript

The world so far

The web has seen the rise, fall and rise again of text on its wires. Nearly for a decade or so binary plugin runtimes shipped over wire which promised to offer same experience as desktop was a craze. People were falling head over toes for building and showing off their flashy flash application, java applets. Fast forward we are back to text and no-binary runtime for experience. Web has evolved. We anticipate that at any time if you monitor the usage of apps in a computer or mobile device for the past decade or so you will undoubtedly notice browser as the most used app. Bending over the last statement standards have evolved and made it possible for simple text to reign in with superiority and for dynamic behaviors and interactivity world moved away from binary plugins to something that was there all along – The humble javascript runtime. For a decade now frameworks and accelerators for developers have been built which basically helped scale constructing software targeting javascript runtime. Attaining its true glory such runtime and apps stand tall till this day.

Fancy word which yields an aura of relaxation – “SPA” signifies the way modern apps are built. Standing for Single Page Architecture such apps have dominated marketplace. So much so any software built using anything different from SPA sounds blasphemous.

From the humble TODO app to now enterprise applications we can notice SPA everywhere.

The challenge enterprises face

In the dim lit corridors leading to the room that had door with label IT the echoes of the word SPA caught on. Though, not immediate given SPA might have been afraid for the dim lit corridors for some time, the apps transformed to be SPA. Then eventually it became a rat race between departments those sponsor IT teams to build them this new shiny SPA. Anything that was not SPA was considered legacy, monolith. Anything SPA was decorated with adjectives like digitalization, modern, light-weight and so on.

Enterprise is a cut throat game and technology to have made across the dim lit corridors to the center place is worth recognition. It solved many problems that plagued enterprise, delivery velocity, decoupling, granular, separate UI team and Backend team etc. might have made news and done rounds in multiple meetups.

Then came along full stack that integrates the separation guess what caused it, cost again. Cost to hire and retain different developers. Eventually CIOs and CTOs from the 45th floor of the building started worrying about how many floors should they give for these IT folks.

In the present time the decision is not very simple and clear as day and night. Right now, enterprises at least feel the twilight to the romance they had with SPA. There are whispers which might eventually make enterprise re-evaluate their standing on SPA. Give yourselves a read by spinning your favorite search engine for content published on SPA fatigue or javascript framework fatigue.

It is not something that you should carry with ominous reading in your mind. You must be like water on the lotus leaf; read it as a change that is coming along. The best you can do is prepare yourselves with alternatives without losing the SPA out of sight. Because, SPA is still a thing and that absolutely solves the right problems and is a viable solution everywhere.

Is it the rise of phoenix?

Server-side technologies and template-based web applications were fancied at least 2-decades back. Is this chatter about javascript fatigue setting in a platform for the phoenix to rise?

We stop you right there and advise you right away – Do not follow the trends. They are good water cooler gossip, conversation starters but they are just that nothing more. As developer use the right tool for right problem. Technology stack is the tool for you.

Always seek to carry a wider toolbox to work. You can just solve so many different kinds of problems and be successful.

So, coming back to trend, yes, it is possible that people might fall back but the server-side technologies haven’t yet given enough attention to solve the problems that SPA solved elegantly. Beyond server-side technology there is a family of alternative approaches that are built on client side but not with SPA. Yes, we are on the client but no Single Page Architecture.

Hyperscript

Enter the world of Hyperscript, or more aptly how the developer likes to brand it today _hyperscript. It does a simple thing – handle events on client side and do simple DOM manipulation that is directly present in the web page.

We noticed a subtle yet profound change in perspective. The author uses the word web page not web app. As much as nostalgia strikes us thinking with feet touching the floor, we feel it has some substance. What you ask – The concept of web, internet is a page a document. Not an app.

We circle back to a point which we mentioned earlier, use the right tool to solve a problem. Not every aspect of a problem can be solved by building an SPA app or a web app. You can always throw a mix of server and client to complete a valuable transaction.

In case you felt we drifted too far to call SPA does not need server or more aptly API; stop there. We are not saying SPA does not need server or API’s. What we say in the previous paragraph is for handling interactions, behaviors and delivering experience we can always blend server and client both to deliver value.

Let us take this thing for a spin from archaism to modern world.

Let us take it for spin

We have already talked a lot about philosophy behind considering hyperscript. Let us just take it to spin.

Fire up your favourite browser and open the file. Yes, just say file:///<Path to the HTML file>. No server, no runtime, no compiler. You will must see a white page with the text that reads – “Introductory message appears here once you click me”. Click on it. Uuggh nothing happens.

Well, there is nothing of sort as dark arts with the hyperscript. You still need to include it in the web page. It is vanilla javascript still. You do that by including script tag with the following source –

Now hit F5 on your browser. Click again the text, tres bien… You have seen the phoenix rise. We will park our thoughts on syntax and the curious “_” attribute added to the markup. We will rush to three main pillars to make any client-side experience great – events, DOM interaction and modification, make remote calls.

The appeal of hyperscript is the elegance with which we have already demonstrated the two main aspects for client-side experience – events and DOM interaction and modification. We draw your attention towards the on click text in the HTML above. That is event handling. Basic yet so natural that you did not even notice it. Then, DOM interaction and modification is happening in set my innerHTML. Again, so natural that you did not notice it. Interested!!! Let us throw in an example for make remote calls –

If you are not lost in the English and fluency there the focus lamp has been on fetch /greet that makes the remote call. But modern browser works with promises so for that we have put the result intothen you have a bit of advanced DOM interaction and manipulation.

If you have been flattered with simplicity, elegance and kept wondering what next or if you have been hit are in the midst of a tempest of yet another javascript framework, we will console you with one phrase – Software is all about taming complexity and a magical yet nostalgic word hypertalk.

See you around folks.