Bleeding Edge Web

edgeATX.github.io/slides

Bleeding Edge Web: September 2015

Announcements

News from the Bleeding Edge

— Brian Moeskau (@bmoeskau)

An Overview of Ember

— Jeffrey Biles (@jeffreybiles)

Lightning Talks

Thanks to our venue sponsor:

Thanks to our food sponsor:

Thanks to our swag sponsor:

News from the
Bleeding Edge

Browser
Update

Browser Pop Quiz

Last version check — August 2015:


44	40	31	1 (?)	8

Browser Pop Quiz

As of September 22, 2015:


44 45	40 41	31 32	1 (?) 13 *	8

Chrome 45

Release notes

ES2015: "Fat arrow" functions

// Concise syntax
let square = x => x * x;
console.log(square(10)); // 100

// Auto binding of `this` to lexical scope
let counter_es6 = function() {
  this.seconds = 0;
  setInterval(() => this.seconds++, 1000);
};

Chrome 45

ES2015: Array methods (and TypedArray)

Array.from('hello'); // ["h", "e", "l", "l", "o"]
Array.of('hello'); // ["hello"]

[0, 1, 2, 3, 4].fill(5); // [5, 5, 5, 5, 5]

['brian', 'corey'].find(function(item, index, array) {
  return item.startsWith('b') ? item : null;
}); // 'brian'

Chrome 45

ES2015: Object.assign

Copies the values (of all enumerable own properties) from one or more source objects to a target object.

// Merge multiple objects
Object.assign({foo: 0}, {bar: 1}); // {foo: 0, bar: 1}

// Ovrewrite equal keys
Object.assign({hello: 0}, {hello: 1}); // {hello: 1}

// Clone an object
let obj = { person: 'Brian'};
let clone = Object.assign({}, obj); // {person: 'Brian'}

Chrome 45

Additional changes:

General performance improvements
Service worker improvments
Push API updates
Lots of minor additions and fixes

Firefox 41

Release notes

Shipped yesterday!
Tons of mostly minor changes
A few interesting highlights...

Firefox 41

Firefox 41

Opera 32

Release notes

Based on Chromium 45
Added arrow functions, Array methods, Object.assign
Other minor CSS, DOM, ServiceWorker updates

Safari 8

(Safari 9 is coming soon...)

Edge 13

Edge versioning overview

User-agent at launch was "Edge/12.10240"
On Monday they updated to "Edge/13.*" (major.build) ✩
Build number tracks the Windows build it ships with

✩ To be precise:

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2486.0 Safari/537.36 Edge/13.10547

Edge 13

Already working with third parties to reflect v.13

Edge 13

As of today Edge is at 80% ES2015 compatibility. This is amazing.

Edge 13

So what actually changed? Lots of stuff!

A few highlights...

Edge 13

HTML5 <template> element (part of Web Components)

Hidden by default
Inline scripts ignored by default
Templated resources (e.g. <img>) not fetched until template render

<div id="items_list"></div>

<template id="items">
  <span class="item"></span>
</template>

Edge 13

HTML5 <picture> element & srcset sizes attribute

Enables proper responsive image support
Great overview: Anatomy of responsive images

<picture>
  <source srcset="medium.jpg 1000w, large.jpg 2000w">
  <img src="small.png">
</picture>

Edge 13

HTML5 <a [download]> attribute

Differentiate navigation from download links
Give downloaded files a custom name

<a href="docs/some-doc-v.1.2.txt"
   download="Cool_Doc.txt">Download</a>

Libraries &
Frameworks

Notable Releases

Node 4.0.0 (Sep 8)
Modernizr 3.0 (Sep 11)
React Native for Android (Sep 14)
Typescript 1.6 (Sep 16)

Office UI Fabric

The front-end framework for building experiences for Office and Office 365

Open-sourced (MIT) on Github (whaa?)

Implementation of the Microsoft Design Language (Office look and feel)
Built with LESS, similar to Bootstrap, etc.
Namespaced to play nicely with other frameworks

Node 4.0.0

First official merged iojs + Node release
Node.js Foundation board of directors elected
Official plan for long-term support
Lots of changes (since iojs v3)
A few possibly breaking changes

Node 4.0.0

Contains V8 (JS engine) — same version as current Chrome

Translation: ES2015 out of the box!

block scoping
classes
typed arrays
generators

promises
arrow functions
template strings
Map, Set, etc.

Node 4.0.0

Node is now following semver (sorta)

All x.0 releases stable, but only even releases will get long-term support

Node 4.0.0

Oh yeah, by the way...

Node 4.1.0 was released Sep 17th :)

Node 4.0.0

Is this interesting to you?

Keep an eye out for next month's meetup...

And now for something completely different...

ECMAScript now on Github

This release marks the beginning of ECMAScript's journey toward version 2016.

Current spec (source)
New drafts of ECMAScript via GitHub releases
You now have no excuse not to contribute!

Great rundown of the new ES versioning scheme

ECMAScript now on Github

Uses Ecmarkup (custom HTML superset)

<emu-figure>
  <img src="figure.png">
  <emu-caption>Example figure</emu-caption>
</emu-figure>

Upcoming
Events

Angular Remote Conf

Virtual conference on Angular and other JS/Node topics

September 24-26, 12-4:30pm EST
$100 / person (20% discount with code "meetup")

Camp Grounded

Where Grownups Go to Unplug, Get Away, and Be Kids Again.

"Digital detox" — no phones, computers or clocks
Healthy meals, arts+crafts, yoga, games, sing-a-longs... (50+ activities)
October 9-12 in Marble Falls
$400 / person through *tonight*, then $595 (register)

Thanks!

http://www.meetup.com/bleeding-edge-web/

http://edgeATX.github.io/slides

Brian Moeskau — @bmoeskau

Bleeding Edge Web

edgeATX.github.io/slides