Wicked Good Ember (2015)

• Cristen Jones
• Andrew Schreiber
• Michael O'Keefe
• Evana Gizzi

What

• Single Track Conference
• 8 Speakers
• Open Air Venue
• Sponsored by Dockyard

Overall

• Brought to you by Rails/Ember Consultancies
• There's a lot of excitment about Ember
  • But also other things (like React)
• Members of core team are excited
• Change is will keep coming.

Overall 2.0

• Reusability, Encapsulation, Composability were king
• Even acknowledged the rapid pace of breaking our stuff
  • And proposed a tool (ember-watson, check it out)
• Ember Data released (see previous bullet)
• "Single Page Apps Suck, we've made 100 [expletive] TODO MVC apps"

Build Better Desktop Apps with Ember

Estelle DeBlois

NW.js

the package formerly known as node-webkit

• Web browser shell built on Chromium
• Allows you to use Node.js along with the DOM API!
• Do things with the Native UI with npm modules

Do it in Ember

ember install ember-cli-node-webkit

• Installs the NPM package
• Adds the blueprint files
• Installs the nw NPM package locally

Don't forget to config

Code things!

NW.js has APIs for native UI controls.

const fileMenu = new gui.MenuItem({
  label: 'Save',
  key: 's',
  modifiers: env.ctrlKey,

  click() {
    this.sendAction('fileSave');
  }
});

Run it

ember nw

• Runs ember build --watch and then starts up NW.js

Caveat

Google Chrome's Ember Inspector won't work

Test it

ember nw:test --server

Package it

• desktop icons in build/icons
• can specify optional configuration; see build options for node-webkit-builder

ember nw:package

• build/app/<app name> now has folders for each platform with the appropriate app for shipping!

Caveat

BIG FILE SIZES (40-50 MB for simple apps) because it has to pack in webkit, node, etc.

Other things

Kiosk mode

\\ in package.json
{
  "window": {
    "kiosk": true
  }
}

Some examples

Ember Observers

Literally the devil?

What Are Observers?

They let us react to something changing

Fiddle

How's That Bad?

Observers are synchronous

They aren't cached either

No idea why they are called

Contrived Example (model)

name: DS.attr('string')
company: DS.attr('string')
# Fancy String Interpolation thank ES6
sui: ( -> `${this.get('company')}\${this.get('name')}`).property('name', 'company')
drawUserPicture: (->
  # My REALLY complicated function that takes a couple seconds to run
).observes('sui', 'name', 'company')

What Happens

We're going to type "Andrew" into the name field:

> "A"
(drawUserPicture is run)
(sui recomputes)
(drawUserPicture is run)
> "n"
(drawUserPicture is run)
(sui recomputes)
(drawUserPicture is run)
> "d"
(drawUserPicture is run)
(sui recomputes)
(drawUserPicture is run)

The Derek Zoolander School for Kids Who Can't Ember Good and Want to Do Other Stuff Good Too

But My Application is Special

• (No, it's not)
• Be mindful of unexpected side effects
• Ember 2 allows opt in 2 way binding
  • Means you aren't screaming about your changes

Things to Remember

Designing For Accessibility

Or, How To Make Apps For Everyone

Nathan Hammond

First off...

Just the beginning

bit.ly/rfc66 bit.ly/outletfocusing

Taking Ember Offline

Where did this all start?

• Student at Harvard Medical School wanted to do a study on Hydrocephalus
• Needed to work in places like Africa where internet connectivity is questionable
• Hospital Run was born (2015)

Why should I care about offline web dev?

• Internet outages happen all the time
• Performance gains
• Server downtime becomes irrelevant
• Treat offline as the baseline for your app
• offlinefirst.org
• "Stop treating OFFLINE as an error condition"

So how do we do it?

1. Need a way to store app offline

• Application Cache
• Create a manifest file, gives you all the resources you need
• Need to keep track of version number
• Ember CLI, just download (broccoli-manifest)
• Small amount of boilerplate HTML

npm install -- save-dev broccoli-manifest

2. Need a way to store data offline

• 3 mechanisms for offline storage:
  • localStorage, Web SQL, indexedDB
• Using Ember CLI there's a couple adapters:
  • localStorage, localForage, PouchDB

HospitalRun uses PouchDB

• Things they learned:
  • Need to think about how much data you are storing on client
  • Need to consider infrastructure
  • Think about syncing... do you need it? What about conflicts?

3. Service Workers

• Takes what is automated by application cache and puts the controller in your hands
• Can think of it as a proxy in the browser
• You can have control over network requests
• Can cache API calls
• Hitting same data end point

Broccoli Service Workers

• Googled "broccoli service workers"
• Tom Dale tweeted he wants a way for ember aps to get service workers for free
• So he built it:

npm install --save-dev broccoli-serviceworker

Ship It