The Future of JavaScript

Patrick Arlt

Experience Developer - ArcGIS for Developers

@patrickarlt - http://arcg.is/18GQw5E

A Brief History of JavaScript

Dark Ages (ES 3)

• Browser Wars
• No Standards
• Wild West

Our Savior JQuery!

The Community Standards & The Framework Wars

The Community Standards (ES 5)

The Framework Wars

Backbone

Angular

Ember

Knockout

React

MarionetteJS

Thorax

Batman

Dojo

Meteor

Aurelia

Kendo UI

Montage

ExtJS

Vue.js

Flight

Riot.js

Mithril

...

JavaScript Today

Awesome. Fragmented. Wild West.

Our Savior ES 6 ES 2015!

Key ES 2015 (ES 6) Features

Modules

Classes

Promises

Arrow Functions

Template Strings

Default/Rest/Spread Params

let and const

Maps and Sets

Loads more…

//layer.js
import FeatureLayer from 'esri/layers/FeatureLayer';
import HeatmapRenderer from 'esri/renderers/HeatmapRenderer';

var layer = new FeatureLayer(...);
var renderer = new HeatmapRenderer(...);

layer.setRenderer(renderer);

export renderer;
export layer;

//map.js
import Map from 'esri/map';
import layer as earthquakes from './layer';

var map = new Map(...);

map.addLayer(earthquakes);

export default map;

class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }

  get name() {
    return this.firstName + ' ' + this.lastName;
  }

  set name(name) {
    var parts = name.split(' ');
    this.firstName = parts[0];
    this.lastName = parts[1];
  }
}

import Person from './Person';

class Developer extends Person {
	constructor(name, caffine){
		super(name);
		this.caffine = caffine
	}
	code(){
		if(this.caffine > 1){
			console.log("&#!^&*#%^*($%)!*");
			this.caffine = this.caffine - 2;
		} else {
			console.log('Not enough caffine. Use coffee() or tea()');
		}
	}
	coffee(){ this.caffine = this.caffine + 2; }
	set caffine(value){ console.log(`caffine now ${this.caffine}`) }
}

var MyApp = {
	items: [],
	getItems: function(){
		getPortalItems().then(function(items){
			this.items = items; // this is actually window :(
		});
	}
}

var MyApp = {
	items: [],
	getItems: function(){
		getPortalItems().then(hitch(this, function(items){
			this.items = items; // now this now MyApp :)
		}));
	}
}

var MyApp = {
	items: [],
	getItems: function(){
		getPortalItems().then(_.bind(function(items){
			this.items = items; // now this now MyApp :)
		}, this));
	}
}

var MyApp = {
	items: [],
	getItems: function(){
		getPortalItems().then(function(items){
			this.items = items;  // now this now MyApp :)
		}.bind(this));
	}
}

var MyApp = {
	items: [],
	getItems: function(){
		getPortalItems().then( (items) => {
			this.items = items;  // now this now MyApp :)
		});
	}
}

Experiance the Future!

6to5 Babel and Traceur compile ES 2015 (tomorrows standard) to ES 5 (todays standard).

IE 9+

Demos

• JS API + Babel
• Esri Leaflet + Babel

Wait don't we still have a problem

JQuery

Dijits

Polymer

OpenUI

Kendo UI

Ember.Component

Angular Directives

ExtJS

Sencha Touch

Webix UI

Widjmo

Chocolate Chip UI

Material Design

…

Our Savior Web Components!

Web Componets

A set of (4) new standards for creating custom HTML elements. Lays the ground work for reusable UI Components.

The Web Component Specs

• Templates
• HTML Imports
• Shadow DOM
• Custom Elements

I'm going to focus on custom elements.

• Templates are a little boring
• Firefox isn't supporting HTML Imports
• Shadow DOM is difficult to polyfill
• Custom Elements are awesome just on their own

class MyElement extends HTMLElement {
	createdCallback(){
		// what do yo do when your element is created?
	}
};

// name must have a hypen, now you can create <my-element> anywhere
document.registerElement('my-element', MyElement);

<esri-map id="map" lat="45.528" lng="-122.680" zoom="15" basemap="Streets">
  <esri-feature-layer id="parks" url="http://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/Portland_Parks/FeatureServer/0"><esri-feature-layer>
</esri-map>

<esri-infographic id="age" variables="AGE.*" type="AgePyramid">
  <p>Click to query age ranges.</p>
</esri-infographic>

<script>
  var infographic = documnet.getElementById("age");

  map.on(click, function (e) {
    infographic.setLocation(e.mapPoint);
  });
</script>

<esri-search id="search" map="map">
  <esri-search-source name="Congressional Districts" displayField="DISTRICTID" searchField="DISTRICTID" url="http://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/CongressionalDistricts/FeatureServer/0"><esri-search-source>
</esri-search>

Demo

Web Components Today

Everything usable today with support in IE 9+ with a polyfill from http://webcomponents.org/

Angular Directives and Ember Components will be compatable with each other!

Summary

• New language features coming to JavaScript with ES 6
• Real reusable UI componetns with Web Components
• IE 9+ with compilers and polyfills

Resources

• Babel: https://babeljs.io/docs/learn-es6/
• Web Components: http://webcomponents.org/resources

Thanks!

www.esri.com/RateMyDevSummitSession

Twitter: @patrickarlt

Slides: http://arcg.is/18GQw5E