Bleeding Edge Web

Bleeding Edge Web: July 2014

News from the Bleeding Edge

— Brian Moeskau (@bmoeskau)

Web App by Example: Node.js

— Brian Moeskau (@bmoeskau)
— Corey Butler (@goldglovecb)

News from the Bleeding Edge

Browser Update

Browser Pop Quiz

Last version check — December 2013 (7 months ago):

Chrome Firefox Opera Safari IE
31 25 18 7 11

Browser Pop Quiz

As of July 2014:

Chrome Firefox Opera Safari IE
31
36
25
30
18
22
7
7
11
11

Chrome Highlights

Version 32

Chrome

Chrome Highlights

Version 33

var msg = new SpeechSynthesisUtterance("Bleeding Edge Web Rules!");
window.speechSynthesis.speak(msg);
Chrome

Chrome Highlights

Version 34

Chrome

Chrome Highlights

Version 35

Chrome

Chrome Highlights

Version 36

Chrome

Chrome Highlights

As of Chrome 36:

Firefox Highlights

Version 27

Firefox

Firefox Highlights

Version 29

Firefox

Firefox Highlights

Version 30

[for (i of [ 1, 2, 3 ]) i*i ];
// [ 1, 4, 9 ]

var abc = [ "A", "B", "C" ];
[for (letters of abc) letters.toLowerCase()];
// [ "a", "b", "c" ]
Firefox

Firefox 31

Released yesterday

Continued push toward ES6 API compatibility:

Firefox

Safari Highlights

Basically not much changed. But...

Version 8.0 will be released with OSX 10.10 (Yosemite) "Fall 2014"

Consumer-focused, slow to adopt ES6 / W3C specs

Safari

Opera Highlights

Last one here, please turn out the lights

Opera

Opera Highlights

Browser share, April 2014

IE Highlights

Mostly minor fixes, security patches

Relased first "dev channel" version of IE on June 16th!

IE

IE ES6 / Web Components Status

From http://status.modern.ie/

IE.Next

IE Highlights

So what's actually happening in dev channel?

IE

What was all that about "ES6"?

ES6: What is it?

EcmaScript version 6 ("Harmony")

Language, syntax and core object improvements

Should eventually filter to all JS environments (may be a while...)

Polyfills available today for most useful parts

ES6 Explainers

ES6 in a Nutshell

ES6 Compatibility Today

Source: http://kangax.github.io/compat-table/es6/

ES6 Compat Table

ES6 Compatibility Today

So, if you're keeping score:


Firefox Chrome IE Opera Safari
67% 52% 11% 9% (?) 6%

ES6: Why Should I Care?

ES6: Why Should I Care?

Atwood's Law:

Any application that can be written in JavaScript, will eventually be written in JavaScript.

Web App by Example: Node.js

The Problem

There's no easy way to compare full-stack web app architectures apples-to-apples.

On the client-side there's TodoMVC (http://todomvc.com/):

TodoMVC

The Problem

TodoMVC is cool, and useful, but pretty simple (and client-only)

Todo list

Goals

We wanted to see this concept expanded to include the server-side.

We also wanted to show common real architectural requirements:

Goals

Sample Application

Introducing Groops

Introducing Groops

On-demand virtual group Q&A

http://groops-demo.herokuapp.com

Should work during this presentation, at least... :)

Specs

Design

https://github.com/groops/examples/wiki/Application-Specs

Design

Spec highlights

UI Design

Design

Register / Profile

Design

Register / Profile

Design

Main View

Design

Main View

Design

Group

Design

Group

Technical Details

Architecture

Pretty simple, relatable to any framework

Tools

Basics:

Node modules:

Getting Started

Express quick start (after installing Node and npm):

// Get express set up:
npm install express
npm install -g express-generator

// Generate an app skeleton
express myapp

// Install the app's dependencies:
cd myapp
npm install

// Run it!
npm start

Getting Started

Adding New Libraries

One of the really nice features of Node + npm:

// Install and save dependency info:
npm install socket.io --save

// Install and save as a dev-only dependency:
npm install mocha --save-dev

Server-side Templating

EJS

Other options to consider

Server-side Templating

EJS Syntax Example

<table id="messages" class="table table-striped">
  <tbody>
  <% for (var i=0; i < messages.length; i++) { %>
    <tr>
      <td><%= messages[i].content %></td>
    </tr>
  <% } %>
  </tbody>
</table>

Mongo DB

Deployment

Using Heroku for the demo

// Init Heroku for myapp
cd myapp
heroku login
heroku create

// Deploy it
git commit -m "Deploying to Heroku!"
git push heroku master

// Manage the app
heroku ps:scale web=3
heroku logs
heroku restart

Let's See Some Code

Next Steps

Some things to consider for extending Groops to the next level.

(Translation: Stuff we ran out of time to include...)

Next Steps

Our main goal is being able to compare Node/Express to other frameworks.

In the next week or so:

If all goes well, we'll see a Django version next month!

Anyone interested in porting to Rails or anything else?

Q & A

Brian Moeskau — @bmoeskau

Corey Butler — @goldglovecb

Thanks!

/

#