Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

A Front End Development Review of 2016

DZone's Guide to

A Front End Development Review of 2016

What are the most significant updates to the front end ecosystem that you can learn from in 2016, and what does this mean going forward?

· Web Dev Zone
Free Resource

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

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

We’ll take a look in this front end development review of 2016.

2016 was a strong year for front end developers. We take a look at why in this 2016 front end development review

Front End Development Review: Significant Updates in 2016

We can sum up 2016 as being a year for ecosystem improvements as frameworks become more and more ‘developer friendly.’ With 34.9% of developers feeling there are more unrealistic expectations placed upon them at work, any improvements that make the developer’s job easier are going to play a big part in 2017’s developer environment.

JavaScript has added new updates that focus on improving the developer’s coding experience, with one of the leading factors being NodeJS allows it to work on servers. Paired with browser support on the front end, developers can use the language with ease across environments. This explains why JavaScript remains the most popular web development language:

Image title


JavaScript continues as the most popular language in web development, with PHP falling slightly behind Node and Angular emerge. SOURCE : Stackoverflow

For front end development, HTML and CSS have seen improvements around major areas such as image size and layout.

For the sake of our yearly front end development review, let’s take a look at the major updates for JavaScript, CSS, and HTML:

css and html also received some significant updates in 2016 which we have highlighted int this 2016 review

HTML / CSS

HTML 5.1

HTML 5 was released about two years ago now and has seen great improvements over that time. With a list of the impressive new features, HTML5 gave us the means of removing nasty browser plugins from our websites. Since then, HTML 5.1 has been in development and introduces a few improvements to current implementations.

One such improvement is the addition of new month, week and datetime-local input types. Using these input types, Chrome provides a dropdown calendar meaning one day we might be able to remove all that custom calendar JavaScript we have to generate. Of course browser support with these features can vary, but using progressive enhancement/graceful degradation techniques you just might be able to utilize them today.

Picture Element

Images are one of the most important pieces of content used on the internet, which is why ‘picture element’ made it’s way into this front end development review. Graphics are a huge topic since they can easily be large in size thus degrading performance, and for a while, there were no good options for displaying mobile vs. desktop images. This is why having the picture tag in the HTML 5.1 specification is a great addition.

With decent browser support and having a good fallback (using a regular image tag like normal) there is no reason you can’t make the most out of this latest element today. (We wrote an article on website performance killers here.)

CSS Flexbox

Flexbox is one of the latest specifications for laying out elements on websites. This wonderful piece of api enables developers to arrange elements in any direction. The order they are displayed is independent of the order they appear in the source.

And we can start using it very soon! Browser support for Flexbox is pretty good with caniuse reporting 97% of browsers supporting at least a prefixed version and 85% unprefixed.

If you are one of the lucky individuals who don’t need to support clients using IE 9, then you can get to work today!

CSS Grids

A more experimental CSS feature, CSS grids looks to be another great tool for layouts.  

Grids are similar to tables in the fact that they allow users to align elements in columns and rows, but unlike tables, this definition isn’t based on the content’s structure. This means more complex layouts – for example where a cell spans multiple rows/columns – can be easily achieved.

Unfortunately browser support for this particular feature isn’t good at all. We will just have to eagerly wait for this feature to become available before we can make use of it.

JavaScript had many updates which Raygun have highlighted in this front end development review

JavaScript

ECMAScript 6 Starting to Be Used

With the specification being finalized back in 2015, development of new applications using ECMAScript 6 has started to become a more common occurrence. Since this version brings along many quality of life features to JavaScript (some of which are mentioned below) it is no wonder people want to make the most of this feature asap. 

Sadly browser support for ES6 isn’t good enough for regular web developers (those who target more than the users of the latest browsers). Luckily enough, because the specification is nailed down, polyfills and compilers (generating the ES5 equivalent code) allow us to use this latest version without having to worry about backward compatibility.

Variables Scope

A common trip-up I see developers new to programming in JavaScript make is generally to do with variable scope. I’ve been there before – Attempting to reuse a variable I declared in a loop inside of a function, because I thought it would save me time. When I ended up spending more time debugging it, I realized I should have done otherwise.

Two new variable declarations which can help prevent you from the same pain in similar situations is the const and let. Const is pretty straight forward and declares a read-only named constant.

Let is the more interesting version and declares a variable in block scope, meaning it will only ever have a value inside of the block and sub-block it was defined.

let x = 1;
 if (true) {
   let x = 2;  // different variable
   console.log(x);  // 2
 }
 console.log(x);  // 1

7. JavaScript Modules

Creating modular JavaScript is important when creating large applications.

Not being able to separate your application into reusable chunks means you will have more code to create, you will then also have more to maintain, and then namespacing also becomes an issue. Now AMD, SystemJS and Webpack are a few libraries out there to assist you in this task and as of ES6, modules will become something built-into JavaScript. Which is exciting as the proposed syntax is extremely small and is easy to understand. Currently, without much browser support, modules aren’t something we can start using natively today. But that doesn’t mean we can’t read up and get ready for when it does.  

8. ECMAScript 2016

With the seventh edition of ECMAScript being finalized in 2016, soon browsers will start to implement the two new features that have been introduced. Now you might be like me, and wonder why there are only two new features in this spec. Well, that’s because this spec demonstrates the new release process they are starting to follow where new features are only included after they are completely ready. Which is important for two major reasons. Firstly, features will be completely ready once they are released. Secondly, releases will happen much more frequently because of this. Allowing us to see more quality improvements quicker.

9. AngularJS 2.0

Currently one the most popular JavaScript frameworks, AngularJS saw the release of AngularJS 2.0. The most notable update is the switch to use TypeScript as the primary language to create applications. If TypeScript isn’t your thing, have no fear. Applications can still be created using JavaScript but you will be dealing with sporadic documentation since it hasn’t been fully documented at the time of writing.

10. Offline Support With Service Workers

One of the most exciting pieces of tech that appeared on my radar in 2016 is Service Workers, and is worth a mention in this front end development review.

Service Workers is an experimental technology with the goal of providing a better experience to users when connectivity is low or non-existent. This is kind of ‘re-incarnation’ of the AppCache, which – whilst a good idea  – was hard to implement in practice.  

A warning before you go charging in and implementing this in your current application, support for Service Workers is still experimental. The specification hasn’t stabilized, so you any work you do might become invalid in the future. Even with that in mind, I am still looking forward to using it in my applications.

What Does This All Mean for Front End Development in 2017?

2016 has been another fast paced year in the web world. With JavaScript remaining the most popular language, it is no surprise that a number of updates this year increase the quality of life when creating large scale applications. If 2016 was all about making it easier for the developer, 2017 will surely build on that. I’d like to see a focus on ease of use and updates that make development processes more efficient.

Are there any other updates you feel are significant and could impact the way we work in 2017? Let us know in the comments below and we will add them to our front end development review.

Read More

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

Topics:
web dev ,front end ,review ,html ,javascript

Published at DZone with permission of Freyja Spaven, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}