blocka

Background

Recently I noticed that Safari 10 for Mac/iOS had achieved 100% support for ES6. With that in mind, I began to look at the browser landscape and see how thorough the support in the other browsers. Also, how does that compare to Babel and its core-js runtime. According to an ES6 compatability table, Chrome, Firefox, and IE Edge have all surpassed what the Babel transpiler can generate in conjunction with runtime polyfills. The Babel/core-js combination achieves 71% support for ES6, which is quite a bit lower than the latest browsers provide.

It made me ask the question, "Do we need to run the babel es2015 preset anymore?", at least if our target audience is using Chrome, Firefox, or Safari.

It's clear that, for now, we can't create a site or application that only serves ES6. That will exclude users of Internet Explorer and various older browsers running on older iOS and Android devices. For example, Safari on iOS 9 has pretty mediocre ES6 support.

	<!-- Usage -->

	<template>
	<Tabs>
	<Tab name="Foo">Content of tab Foo</Tab>
	<Tab name="Bar">Content of tab Bar</Tab>
	</Tabs>
	</template>

	<script>

	const compose = (f, g) => x => f(g(x))

	const Id = x =>
	({
	fold: f => f(x),
	map: f => Id(f(x))
	})
	Id.of = Id

	const Tuple = (_1, _2) =>

	const MODULE_DIR = /(.([\/\\]node_modules\|\.\.)[\/\\](@[^\/\\]+[\/\\])?[^\/\\]+)([\/\\].)?$/g;

	{
	loader: 'babel-loader',
	test: /\.jsx?$/,
	include(filepath) {
	if (filepath.split(/[/\\]/).indexOf('node_modules')===-1) return true;
	let pkg, manifest = path.resolve(filepath.replace(MODULE_DIR, '$1'), 'package.json');
	try { pkg = JSON.parse(fs.readFileSync(manifest)); } catch (e) {}
	return !!(pkg.module \|\| pkg['jsnext:main']);

	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://unpkg.com/redux@^3.5.2/dist/redux.min.js"></script>
	<script src="https://unpkg.com/@reactivex/rxjs/dist/global/Rx.js"></script>
	<script src="https://unpkg.com/redux-observable/dist/redux-observable.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.5/vue.min.js"></script>
	<script src="https://unpkg.com/[email protected]/vue-rx.js"></script>
	<meta charset="utf-8">
	<title>JS Bin</title>

	#!/bin/bash
	if [[ $EUID -ne 0 ]]; then
	echo "This script must be run as root" 1>&2
	exit 1
	fi
	apt-get update
	apt-get install -y git-core autoconf bison libxml2-dev libbz2-dev libmcrypt-dev libcurl4-openssl-dev libltdl-dev libpng-dev libpspell-dev libreadline-dev make
	mkdir -p /etc/php7/conf.d
	mkdir -p /etc/php7/cli/conf.d
	mkdir /usr/local/php7

	var gulp = require('gulp');
	var $ = require('gulp-load-plugins')();
	var config = require('../config.json');
	var bundler = require('./bundler');

	process.env.APP_ID = config.Client.AppId;
	process.env.JS_KEY = config.Client.jsKey;

	gulp.task('scripts', function() {
	gulp.src('./src/js/init.js', {read: false})

	/**
	* Monkey patch `Backbone.Model.extend()` with ES5 getters/setters for each
	* attribute defined in the defaults. Gives you the added bonus of being
	* to pass your backbone models directly to your Mustache.js views.
	*
	* Example:
	*
	* var User = Backbone.Model.extend({
	* defaults: {
	* username: undefined,