On Another Level

December 17, 2018

Shameless Love Fest

This post is meant to be a shameless love fest about React. I will outline a set of features, patterns, approaches, mindsets that have come from the React ecosystem that I think are really great. Some of them are great from a technical perspective, some are just cool. My hope is to simply shine some light on why I (and others) really like React.

It’s Javascript

On the front page. This sentence continually blows my mind every second that I work with React. Here it is. Bam!

Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.

Hyper Text Markup Language (HTML) tells the browser how to render the view. HTML is a markup language, not a programming language and it should never be treated or thought of as such. Competing application frameworks like to treat HTML as a first class citizen, designing their templating engines around it. But HTML isn’t built to be a programming language. React uses HTML for its truest purpose, to tell the browser how to render a view.

State should not be in the DOM. I’ve worked in codebases that put a ton of state in the DOM. Engineers often put state in the DOM when programming forms. If you have an input field, that input field’s data should live in the input field itself. Right? Wrong. This leads to confusing situations where some state is in the DOM and some state is in javascript. React solves this by consolidating state to a single language; a single source of truth; javascript.

CSS’s tells the browser how to style the view. Again, React treats CSS as a render tool. CSS has done heavy lifting for a long time and it’s time that comes to an end. Case in point, “cascading” CSS is one of the worst features to have in an application. Cascading styles are the source of CSS lock in and fear. Large codebases inevitably have cascading styles that become impossible to modify. Refactoring becomes hell and nothing is explicit. Everything confusingly inherits from a collection of independent styles. React moves styling to scoped components and brings the power of Javascript to bear. In code, cascading styles fall away in favor of style libraries explicitly applied.

Javascript is king. Modern applications need a programming language to run and that language is javascript. Why? Because Javascript is the only real programming language in the browser. Luckily Javascript has a simple object model and functional characteristics that make it badass. We should be grateful it’s not Java. Object oriented programming be damned. React is great because it’s just Javascript. In the React world, data is in javascript, rendering is in javascript, styling is in javascript.

By moving data, markup and styling to javascript, the view becomes swappable. A React application can be Javascript plus native iOS code or native Android code. How can this be? Well React got the abstraction right. It appears that React’s virtual DOM implementation was designed from the start to support different render engines. Web, iOS, and Android have different rendering engines; bridge adaptors are used to map React’s render calls to native ones. This has played out in the release of React Native; a framework for developing native React applications. React is a learn once, write anywhere framework. Write anywhere meaning: write and render to any engine.

JSX

JSX brings markup to javascript, eliminating the need to consider HTML at all. HTML has been with web development from the beginning. HTML tells the browser how to render the view and CSS tells the browser how to style the view. Later on, Javascript entered the picture to allow for more complex interactions. Today, in some frameworks, HTML is a core part of application development. The beauty of JSX though, is that it abstracts away HTML into a generic XML-like syntax, releasing developers from the shackles of the past.

Eliminating language burden saves time. Abstracting HTML into JSX and Javascript allows engineers to think more about their application written in Javascript. JSX feels integrated with code in a way that templates cannot match because JSX compiles down to Javascript. With JSX, engineers pay a lower cognitive cost when switching over the language barrier. Ultimately, technologies that require less cognitive load will lead to faster, more enjoyable development.

JSX feels like Javascript. Web applications today are powered by Javascript. Even web components require Javascript to function. Javascript is the most familiar language to engineers outside web development as well. When a back end engineer is tasked to make a change to front end code, the barrier to entry is lower when the only language in play is Javascript.

It's Functional Bro

Functional programming is easier to test, scale, and refactor. Stateless functions can be separated out into portable libraries, tested and reused across applications. This allows applications to scale as engineers can reuse logic and components simply by moving functions around. Functions are clear; it’s easy to see connections and refactor those connections.

React’s setState is functional. setState can take a function that accepts state and returns a newState. In other frameworks, this is a common way of accessing state and mutating state; Vue works this way for instance. This kind of state management often leads to functions with side-effects; everything accesses the same this. Refactoring is possible in those codebases, but bind, call and apply usage becomes prevalent, making code harder to follow.

React’s components are functional. Elements in React are immutable; once created, children and attributes cannot be changed. This ensures that the UI will not change without explicitly being told to by React. A typical DOM element can be accessed by any number of scripts which can create conflicting side-effects and make code harder to refactor. React constrains access to elements, making connections clearer and easier to refactor.

React starts simpler. React’s most basic component is functional. A React application that simply displays data can be written with functional components only. Class components are available for local state management and lifecycle hooks, but at every component in the application tree, the functional component fallback is there. This leads to simpler, more readable codebases with less boilerplate.

Component properties can be functions, even the children property.