A front-end development review of 2017: JavaScript, Firefox, and more

By Ben | Posted Dec 20, 2017 | 6 min. (1132 words)

2017 was a strong year for front-end development. From improved support to better design functionality, there were some stand out improvements. But what are the most significant updates to the front-end ecosystem that you can learn from in 2018, and what does this mean going forward?

I’ll take a look at what has changed, improved, impacted, (or could impact) front-end development in 2017 so you can better prepare for 2018.

Front-end development review: significant updates in 2017

2016 was a year for ecosystem improvements as frameworks became more and more ‘developer friendly.’ 2017, in contrast, saw lots of small, quality of life improvements. Many providers brought consistent improvements user experience, in particular, load times. Other front-end improvements allow us to make larger applications at scale.

1. Languages: A conflicted view of JavaScript and views on Python

In 2017 59% of developers reported a love for JavaScript. But, 40% also said they dreaded using it. Even though JavaScript does have a reputation for being complicated (not to mention hard to debug), it is still the most commonly used language with popularity rising 8% above what it was in 2016. Perhaps this is due to the momentum of the language.

What is significant though, is Python exceeding JavaScript as the ‘most wanted’ language in technology.

2. Firefox Quantum released

For a few years now, Chrome has dominated the browser market with analytics tools commonly reporting that over 50% of users come from Chrome — but all this could change in 2018. In November 2017, Mozilla released the latest version of the Firefox browser. Named Quantum, this most recent revision is reportedly twice as fast and uses 30% less memory due to its crazy new browser engine.

If you are interested in how Firefox achieved the considerable reduction in memory, then check out the Mozilla hacks website which features articles like this one, describing “how Firefox got fast again.”

3. Rise of Progressive Web Apps

In August 2016, Chrome announced a roadmap to progress away from Chrome apps and instead advocated developers to switch to using Progressive Web Apps. The main reason cited was because the Web now contains power APIs for working offline such as service workers.

In December of 2017 Chrome Apps are to be removed from the Chrome Web Store search and browser functions. Removing apps from the app store is a good thing as it helps progress the web forward, away from apps and towards more functional websites. Users will continue using websites without needing online access, having them launch from mobile devices faster than some native apps.

4. CSS Flexbox and Grids

Last year, I reported that Flexbox support was at a point where you can start using it shortly. In 2017, front-end developers everywhere started using it in websites without fear (but still using PostCSS and vendor prefixes for better browser support, of course).

Grids are another layout technique we are looking forward to using at the end of 2017. While Firefox has a great dev tool for inspecting and debugging grid layouts, sadly the browser support wasn’t enough throughout last year to try it on production websites.

Although looking at the stats now, it looks like all the major browsers now have Grid support and the only thing which might be holding you back is Internet Explorer.

5. Preload assets

When it comes to improving website load times, ensuring your high priority assets are downloaded ASAP is important. The lower in the markup assets like scripts or CSS files are declared, the longer it will take for the browser to find those resources and load the page.

This is why we’ve seen great improvements after using the “preload” version of the humble link tag. Even font rendering is improved, cutting down the amount of FOUT.

6. Generators*

While this update isn’t to 2017, generators are an exciting feature of ES6, bringing strange new functionality to the traditional function.

By definition, generators are a way of creating your own iterative program. This functionality, once you know how it works, makes it a lot easier to read and then maintain asynchronous code.

This post isn’t going to cover how they work (because that would put the length of this post into the next year) but you can read up on them on David Walsh’s blog. I highly recommend you make use of them in 2018.

7. Script Modules

Including JavaScript on a page is part of the fundamentals that every developer learns. You include your script with the type=”text/javascript” and you then run away to create a pipeline processing your ES6 code into ES5.

With the advent of the new type=”module” one awesome side-effect is that you can start using them in production to start shipping less code.

Check out this article by Sam Thorogood details how you can start doing this today.

8. Web Assembly support

Switching to a language which you would not code by hand, Web Assembly now has support in all major browsers.

The use-cases for this language are well documented and inside the browser, meaning you we might see better (in the context of AAA level) games and software which need near-native performance.

9. Framework updates

Last year, everyone was pumped for the Angular 2, and this year it has already gone up a few versions and is now at Version 5.1 (as of writing). Some might be surprised with how they went from Version 2 to Version 5 in what seems like the span of a year, but this is due to them switching to time-based release cycles. Gone are the days you wait months or even years for an update.

On the React side of the Internet, version 16 of the library introduced better error handling but more importantly this was the first version of React with their new core architecture Fiber, which aims to increase its suitability for areas like animation, layout, and gestures.

Predictions for 2018?

With the continuous focus on improving user experiences, I’m hoping to see more of the quality of life improvements. There is space for more flashy functionality, especially if release cycles are going to be as short as they were in 2017.

Is there anything you feel is significant in 2017 which we’ve missed?

Let us know in the comments below.