Category: ES2015

The Anatomy of a Modern JavaScript Application

There’s no doubt that the JavaScript ecosystem changes fast. Not only are new tools and frameworks introduced and developed at a rapid rate, the language itself has undergone big changes with the introduction of ES2015 (aka ES6). Understandably, many articles have been written complaining about how difficult it is to...

Modern JavaScript Development Is Hard

It’s not uncommon these days to see people complaining about just how complex JavaScript development seems to have become. I can have some sympathy with that view when it’s coming from someone new to the language. If you’re learning JS, it won’t take long for you to be exposed to the enormity of...

Patterns for Object Inheritance in JavaScript ES2015

With the long-awaited arrival of ES2015 (formerly known as ES6), JavaScript is equipped with syntax specifically to define classes. In this article, I’m going to explore if we can leverage the class syntax to compose classes out of smaller parts. Keeping the hierarchy depth to a minimum is important to keep your code...

Editorial: Are You Writing ES6 JavaScript Yet?

When was the last time you wrote some ES6 code? A recent developer survey called The State of JavaScript reported that 74% of respondents have already used the new syntax and intend to do so again. A further 21% have heard of it and are interested in learning. The ES2015 version of JavaScript (referred to as ES6 from h...

Template Literals

The Template Literal, introduced in ES6, is a new way to create a string. With it comes new features that allow us more control over dynamic strings in our programs. Gone will be the days of long string concatenation! To create a template literal, instead of single quotes (') or double quotes (") quotes we use the back...

Transpiling ES6

While support for ES6 is always increasing, we can’t always assume that users will be using a browser that supports all its features. So, in order to utilize ES6 features now and make sure we won’t run into cross-browser compatibility issues, we need to transpile our code. Let’s look at two possible w...

A Live Lesson in Diving into ES2015, with Darin Haener

SitePoint Premium’s first ever Live Lesson was held this month with Darin Haener, walking you through several sections of his Premium course, Diving into ES2015. Viewers were able to ask Darin questions while he went through parts of his own course, and provided the most accurate answers possible. Hop over to the rec...

Build a Music Streaming App with Electron, React & ES6

Developed by GitHub, Electron is a framework that allows you to leverage your web design skills to build slick, cross-platform desktop apps. In this tutorial, I’ll demonstrate how to combine the power of Electron with React, ES6 and the Soundcloud API to create a stylish music streaming app that will stream your ...

Clean Code with ES6 Default Parameters & Property Shorthands

Creating a method also means writing an API — whether it’s for yourself, another developer on your team, or other developers using your project. Depending on the size, complexity, and purpose of your function, you have to think of default settings and the API of your input/output. Default function parameters and p...

A Round up of Online Code Playgrounds

Nowadays, there are a variety of code playgrounds available online. Some (such as JSFiddle or JSBin) are designed with sharing in mind, which is useful for building a reduced test case to demonstrate a bug or problem you are having. Some (such as ES6 Fiddle, or D3.js Playground) allow you to experiment with a specific ...