The Future of JavaScript – Patrick Arlt



The Future of JavaScript – Patrick Arlt

1 4


dev-summit-2015-the-future-of-javascript

Talk about ES6, Web Components and the future of JavaScript at the Esri Dev Summit 2015

On Github patrickarlt / dev-summit-2015-the-future-of-javascript

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)

Modules - AMD, Common JS Flow Control - Promises Utilities - Underscore, Async

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

Thanks!

www.esri.com/RateMyDevSummitSession

Twitter: @patrickarlt

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