I saw this little web app (live demo) by Das Surma going around the other day. It's funny, but it's also a really compelling demo app for a bunch of modern technologies. I'm sure that's the whole point of it.
- Minimal build process. Just Gulp to use Babel and PostCSS. It's heavy on ES6+ and CSS custom properties.
- Loads of custom elements, like
<tinderforbananas-item>, with the Polymer polyfill for those.
- Icons are super tiny SVG, they look hand-golfed.
- ServiceWorker for offline cache.
- Mobile and performance-first design and interactions.
Maybe it'll be like the HTML5 Boilerplate of the future.
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 backtick (
`) character. This will produce a new string, and we can use it in any way we want.
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 ways we can perform the task of transpiling our code. First, we will use npm scripts and Babel. For the second, we will look at using Gulp with Babel.
Like a lot of other developers, I’m working through my continued education learning what I can about ES6. One of the ways I’m doing this is to attend workshops by smart people. I went to Kyle Simpson’s ES6: The Good Parts course and found myself particularly interested in the practical applications of a piece of ES6 I had previously not noticed: Destructured Objects as Parameters.
Have you ever been working with those sweet new ES6 arrow functions, run into a problem, and noticed that now your stack trace is all anonymous functions? Yeah, that's not so great. That's why this Babel plugin is so useful. You can add names to your ES6 arrow functions, and it makes debugging a lot more simple.