Bleeding Edge Web

September 2013

News from the Bleeding Edge

— Brian Moeskau (@bmoeskau)

10 Months with Meteor.js

— Phillip Jacobs (@phillyqueso) & Jason Griffin (@haircuttedfreak)

Meteor Slides

Drinks

Google Developer Group (GDG Austin)

Organized by Daniel Parker

Thanks for sponsoring tonight's meetup!

http://www.meetup.com/gdgaustin/

Industry

Amazon HTML5 App Support

Starting [August 7], you can submit your web apps and mobile optimized web sites and have them merchandised alongside native apps on Amazon and Kindle Fire in nearly 200 countries worldwide, without any third-party software or doing any native app development.

Kindle Fire runtime is based on Chromium, GPU-accelerated

Free web app tester available

Amazon in-app purchasing API for JavaScript available

ECMAScript 6 (Harmony)

Proxies: Objects with virtualized properties, i.e. detect changes to an object attribute.

let: scope to a block as opposed to fn()

let x = 1;

const: like var, but cannot be changed once it's set.

const pi = 3.141593;

Defaults: Define default arg values

function(a, b=1, c='test'){...}

ES6: Generators

function* values() {
  for (var i = 0; i > arguments.length; i++) {
    yield arguments[i];
  }
}

var o = values(1,2,3); // Obj. Generator

o.next(); // => { value: 1, done: false }
o.next(); // => { value: 2, done: false }
o.next(); // => { value: 3, done: false }
o.next(); // => { value: undefined, done: true }

Alternative to callbacks & promises!

ES6: Classes

class Point extends Base {
  constructor(x,y) {
    super();
    this[px] = x, this[py] = y;
    this.r = function() { return Math.sqrt(x*x + y*y); }
  }
  get x() { return this[px]; }
  get y() { return this[py]; }
  proto_r() { return Math.sqrt(this[px] * this[px] + this[py] * this[py]); }
  equals(p) { return this[px] === p[px] && this[py] === p[py]; }
}

Mostly syntactic sugar

ES6: Modules

module math {
  export function sum(x, y) {
    return x + y;
  }
  export var pi = 3.141593;
}

import {sum, pi} from math;

alert(sum(pi, pi));

ES6: Summary

Many more upcoming features

Several features supported in Node.js

node --harmony myfile.js

Many polyfills work but aren't complete

Spec isn't complete

ES7 work has already started

Platforms

Browser Pop Quiz

Name the latest versions of:

Browser Pop Quiz

Name the latest versions of:

Chrome 29

Released August 20

Opera 16

Released August 27

Firebug 1.12

Released August 21

Libraries

Ember 1.0

Released Sept 1

Ember Data beta 1: "a reboot of the data layer"

Focus on performance, docs and testing

Includes Ember Inspector Chrome plugin

Yeoman 1.0

Released Aug 23

Generators for common frameworks (Backbone, Angular, jQuery, etc.)

Helpful grunt config (LiveReload, Sass, Uglify, CoffeeScript, etc.)

SlimerJS

"PhantomJS for Gecko"

Works with Firefox 20+, renders in browser (not headless)

Supports Flash, WebGL, audio/video

Nifty Stuff

Hopscotch

Easy product tours for web pages

Developed by LinkedIn

var tour = {
    id: "hello-hopscotch",
    steps: [
      { title: "Step 1", ... },
      { title: "Step 2", ... }
    ]
};
hopscotch.startTour(tour);
Try a tour

Tessel

An Internet-connected microcontroller, programmable by JavaScript

Sensors, RFID, Audio, Bluetooth, Micro SD, etc.

Supports Node packages via npm

$ npm install hardware -g
$ tessel shell
> var tessel = require('tessel')
> tessel.led(1).blink()
http://technical.io/

Local Happenings

September Events

Battle Hack: Austin

Sept 28-29, free

On the Radar

ATX Startup Crawl

Oct 10, 5-10pm (free, register now)

Hack TX

Nov 15-16 ($??, not open yet) — more info

Austin Comic Con

Nov 22-24 ($80 advance)

Tips & Tricks

Did You Know

...that the Chrome and Firebug consoles have a handy monitorEvents() command line utility?

Complete details here. A few examples:

// Named target:
monitorEvents(document.body, ['click', 'mousemove']);

// Target selected in dom:
monitorEvents($0, ['mousemove']);

// Stop monitoring
unmonitorEvents($0, ['mousemove']);

Q & A

Brian Moeskau — @bmoeskau

Thanks!

/

#