Front-end Web Development in 2017

Web development appears to have a furious rate of change so keeping up can be overwhelming. In reality, though, stable changes don’t happen that often. To put things into perspective: the hottest JavaScript framework right now, React.js, was created four years ago. jQuery is ten years old and is still on 70% of the top 10k websites. One sane approach is to avoid the hype train and stay on firm ground. Sometimes it’s a good idea to watch the framework jostling from a distance. That said, front-end web development has reached an unprecedented level of maturity, and there’s a lot of warranted excitement.

Mobile First

jQuery was created in 2006 to address cross-browser incompatibilities. For example, Internet Explorer has been a huge issue for a long time because of its lack of support for many critical JavaScript and CSS features. Microsoft has dropped support for I.E. 8, 9 and 10. Today these old browsers, combined, have less than 1% of the browser market share. All of the top JavaScript frameworks (React, Angular, Ember) still support I.E. 9. 1% of two billion active Facebook users is a lot. For the rest of us, it’s safe to drop support and not look back.

More interestingly, mobile has overtaken desktops in browser share. Google is doing mobile first indexing. Ethan Marcotte’s article about responsive web design from 2010 is still very relevant.

The internet is fragmented. We are always going to have to build our websites and apps for different platforms and browsers. Integrating manual and automated browser testing into our process is an excellent idea. It’s also prudent to use caniuse.com to find out what we can safely use across browsers.

JavaScript Like It’s 2015

JavaScript is the most commonly used programming language. I firmly believe that learning it is the best thing a web developer can do for their career. I highly recommend the book You Don’t Know JS for learning the language. The language itself is an implementation of a standardized specification called ECMAScript (ES). Nearly all of web browsers (~98%) have full support for 2009’s ECMAScript specification (ES5).

ECMAScript 2015 has a lot of great features, but the browser support is patchy. Not to worry though because you can write in ES2015 and then use Babel.js to compile the code to ES5. Learning to use these new features is easy thanks to the Babel.js guide.

JavaScript runs outside of the browser using Node.js. Node is extremely popular and its package ecosystem, npm, claims to be the “largest ecosystem of open source libraries in the world.” There are many versions of Node, and they have partial support for features from ES2015, ES2016, ES2017, etc.

Writing ES5 is acceptable, but ideally, we write in ES2015 and let Babel.js take care of the rest. Airbnb has an excellent JavaScript style guide that can help you write good code. I recommend running your JS code through a linter like ESLint to catch common errors. Flow is another useful tool; it’ll type-check your JS code to find bugs early on.

Components

I thought of objects being like biological cells and/or individual computers on a network, only able to communicate with messages. – Alan Kay

Writing software is relatively easy, maintaining it is hard. That is why most programmers have converged on the idea of writing small components (objects, functions, etc.) and carefully composing them. The complexity of the software decreases because each component “can fit in your head,” and you can reason about it. These loosely coupled components can be replaced more quickly, with more confidence, and with fewer side-effects.

The front-end JavaScript frameworks have all embraced the same, decades-old, idea. You write components for UI elements and then loosely combine them together to build an application.

Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. – React.js

Everybody loves React

Today, Angular is the JavaScript framework that has the biggest adoption, although React.js has the greatest momentum. Developer surveys in 2017 show that React.js is the highest rated library as developers seem to enjoy using it. If you are interested in learning a library/framework this year, then I highly recommend React, especially because the hiring trends are strongly in its favor.

React.js leverages ES2015, components and powerful build-tools to help you develop dynamic web applications. It is conceptually simple. You create components, and then when there are state changes, React will redraw the component. This is in contrast to the more bug-prone manual changing of specific elements on the page that we had to do with jQuery.

If you want to learn React then I highly recommend doing the following:

  1. Learn JavaScript well.
  2. Learn ES2015, especially arrow functions, classes, and modules.
  3. Build simple components with React.
  4. Make a full app with React.