React, etc. Tech Stack

React, Flux, GraphQL, Hack, HHVM...? All of this and more!

React.js is like DHTML

DHTML is a term that was used in the late 90s and early 2000s to describe any kind of functionality that were somehow out of the realm of regular web site browsing. This went from dropdown navigations to snow flakes falling from the top of the screen to birds flying out of a banner to follow your cursor. It was really just a hard-to-define buzzword like Web 2.0 was later on.

The textbook definition for Dynamic HTML (DHTML) could be that it is "HTML that can change even after a page has been loaded into a browser". In the golden ages of DHTML Netscape and Internet Explorer were the major browsers and had various levels of support for CSS and JavaScript.

This lead to a lot of effort in creating, at worst, completely separate implementations for each of these. In some cases you even needed tweaks for MacOS and Windows versions of the same browsers, because the codebases were separate. Truly horrible times.

All of the above may seem like a nice warm breeze of winds of nostalgia, but the latest trends in web application development are aking more to DHTML than the web standards era that came after it. During this time div layouts were new and JavaScript became almost a curse word. It was imperative that the site remained usable without JavaScript.

Since that time there have been multiple waves of improvements in front end web technologies, such as CSS3, HTML5, jQuery. In 2004 Gmail and AJAX ushered in a new level of expectation for web applications to the mainstream, followed by Google Maps a year later. All of this lead to the rich web applications we have today.

Browser implementations of HTML and CSS rendering is nowadays very good and browser vendors take great pride in provinding the maximum JavaScript execution oomph. The thing that stuck from the web standards era was the separation of content, design and logic with HTML, CSS and JavaScript.

React + Webpack merge all

In 2013 Facebook introduced their Open Source library React. It focused only on creating user interfaces, instead of being a complete front end framework. It introduced many new ideas, including a virtual DOM and and a rather novel JSX syntax.

Through 2014 and 2015 React gathered more momentum and is now a common word echoing through established web design agencies as well as startups. Together with the module bundler Webpack React is being used to create code that resembles DHTML code from 1999 more than jQuery based code from 2009.

Why? A mixed bag of CSS, Markup and JavaScript was an abomination in 2006, but looks to be the hottest thing in 2016. Standard web components themselves are taking their time, but React + Webpack already allow you to work with HTML, JS, CSS and images all in in the same environment. In DHTML you did everything with JavaScript, because you could - today it's done because it makes sense.

There is also a trend of discouraging the use of CSS in React components. This does not mean that you would drop styling, but dropping the use of cascading stylesheets with classes and identifiers. This sounds like a pretty stark departure from the de-facto anti-inline practises we've had since the popularisation of CSS.

Instead of toggling the view of your React components with classes (defined in a CSS built with SASS/LESS), you'll modify the element styles directly. Hover classes and other similar effects will be done through JavaScript events, not pseudo selectors like :hover.

Cascading stylesheets obviously have their uses in site building, but for individual components the likes of Radium, React-JSS and JSXStyle might indeed have their place. Even if getting used to the idea takes a while, computing element styles in the browser is as powerful as it has always been.

Separation of concerns be gone! We all components now, baby!

Back to the future: A DHTML scroller from 2001

Considering all of the above discussing DHTML and React being somewhat similar, it is worth considering a DHTML script from 2001 (kudos to Sumppi):

JS Bin on

By todays standards it might be crude, but it has everything bundled together and is quite a stand alone component in itself. For an added curiosity factor, the Googlebot renders the scroller nowadays:

The circle has closed. Long live DHTML!

Written by Jorgé on Friday November 27, 2015

Permalink - Tags: javascript, dhtml

« WordPress cements React, Flux and Webpack stack for JavaScript - A PHP CMS with Symfony and React.js: eZ Platform »