EmberConf 2015 - March 3rd (day 1)

Test-Driven Development by Example: Toran Billups, 5:30 - 6:00 PM

Maybe there are other people at the conference who build Web apps like I do, this is for you - Pro Tips about TDD…

Your tests should still pass between design iterations!

Let's build a Kanban board, TDD style

Live coding building a mini app from scratch using Ember CLI, and using test-driven development.

• Using an ember-cli app, start by generating an acceptance test, assignment
• visiting /assignment use ember test --server start with failing test 3 unassigned items
• Define a route 'todos'
• Red -> Green -> Refactor; it's OK to keep using Red for immediate feedback
• Add a "todos" controller with the ember generator
• Create the unassigned property, return an array with 3 items in it
• Test result is green
• In the acceptance test add a specific assertion for a seletector you'll use in your template
• Add some sample data in the controller, 3 objects each with a projects property
• Oops the tests were dependent on the HTML markup, instead remove any specific assertions about the layout (elements), use classes instead
• Add the assigned property to the controller to iterate on the acceptance tests
• Fixup the template to include the property that was in the test/assertion
• Add a new property to the model object for the status
• Rip out the mock model objects from the controller and paste into the Route's model hook
• Add the status property to the template
• Acceptance testing is great to show the happy path flow from your route to controller
• Time to break out of acceptance testing and into unit testing so explore the transition between a status of 'unassigned' to 'assigned'
• Unit test run in isolation, you can run just one test, ember test --filter='todo'
• Create a Todo model and a computed property for status, match up the lingo your template to a boolean property of the status_code
• Every piece of test code is code you maintain, it is ok to delete a test, if another test already tests the same behavior
• Write another acceptance test for toggling the status from unassigned to assigned
• Test code documents your app, so it's a good idea to tell the before and after story
  • Create some assertions for the state before (in the arrangement) you act, then assert.
• Figure out how to mock the XHR and move out the hardcoded model from the route's model hook
• In the route hook add the code to make the XHR request
• Mock the XHR and in your test simulate the response
• Add a new acceptance test to show the details for an item, visit, click, andThen
• Add a link-to helper in the template for the details, give it a class that your test can use for a selector
• Add a nested route for /todo/:todo_id
• Oops the test breaks, the data set needs an ID property
• Assume that the details info is hidden, so update the test so assert that the content is hidden
• When the URL is toggled then the details content hides or shows
• Check the current route name to see what the URL is represented by (in your test)
• Go back to the template and add an outlet

Dynamic Graphic Composition in Ember: Chris Henn, 4:45 - 5:15 PM

When is the Grammer of Graphics appropriate?

• You decide how much of this abstraction you would like to apply
• General purpose plotting library vs. App with one visualization

Considerations

• Interactivity?
• Animations and Transitions
  • The how point of the visualization is to convey data, use transitions (D3)

Breaking graphic down into parts allows you to add simple snippets of interactivity or transitions.

What does this look like in Ember

• Data to Aesthetic mappings
• Scales: a constructor / function ( including its inverse)
  • in Ember can use a computed property (macro)
• Layers: each layer as a separate component
  • Generalizable, like playing with Legos
• Geometries: SVG

How to we split a statistical graphic into parts?

• Faceting: How to compose data visualizations
• A coordinate system, e.g. plots, circular plane
• Layers: Geometry / Stat / Optional Data to Aesthetic mapping
• Representing the mappings as points, the Geometry
• For every data to aesthetic mapping there is a scale, a mapping function
• A Simple scatter plot with 3 mappings (data to aesthetic mapping)
• Grammer of Graphics, Hadley Wickham
• Need: a flexible system
• Adding a block param layer and adding multiple layers
• Do heavier cars get worse mileage? (DEMO - scatterplot)
  • Graph: Horizontal:weight / Vertical:mileage
• Encourages custom visualizations
• Suggests the aspects of a plot that are possible to change
• Lets change one feature of the graphic at a time
• Tackle it with composition

Use Ember to take advantage of visualizations

http://chrishenn.net | Twitter: @cwhnn | github: chnn/composing-graphics

Bring Sanity to Frontend Infrastructure with Ember: Sam Selikoff, 4:00 - 4:30 PM

(latest updates flow in at the top)

Develop successful solutions for solid primitives is found in iteration and innovation

1. Give developers the tools to tinker
2. Deliberately fold in shared solutions
3. Innovate and Share!

Acme was right to start with a monolith, but over time they would identify the right abstractions and solutions for their framework and tooling.

Ember CLI - future freshness baked in

• The Ember community is relentless about finding and promoting best practices as they emerge as standards
• Trust: new standards and best practices from the Web community will eventually land in the APIs found in Ember CLI
• Overall architecture is more flexible so sub-sets of the system can be swapped out
• semver + CLI conventions

Process

Identify Redundancies and Abstractions

It's important to have a process around discovering the right abstractions

Testing

• ember generate factory
• Addon for data concerns, e.g. http mocks; more consistency in the ecosystem
• More similarities emerged, mocking data, proxies
• ember test provides a test harness that is common

Solutions Ember CLI brought for deployment concerns

1. manual
2. shared script
3. deploy addon
4. deploy server

Deployments

• ember-deploy was all they needed to ship applications to production, various components were created as addons (pluggable)
• Push an index.html and JS/CSS, backend can work with that consistency
• Wrote a script for CI (continuous integration)
• Conventions for building clarified how to distribute the application

Ember and Ember CLI

• Ember brings in solid conventions for frontend application development
• Command line tools: ember new, build, generate
• Reduce boilerplate, eliminate trivial differences that hold us back

A story about the growth of a codebase, from monolith to various services, data layers and frontend interfaces (UI)

• One day the frontend teams adopted Ember CLI and immediately had common solutions
• Frontends interfaces each had resulting choices/adoptions with variations and incompatibilities
• Every time they needed a new interface the programs had to make a lot of decisions about libraries, architecture, build pipeline, testing solutions and delivery systems
• The Frontend didn't just split up and scale
• Backend systems grew and spawned independent services, smaller and focused; developer were productive and happy

Ambitious UX for Ambitious Apps: Lauren Tan, 3:00 - 3:30 PM

Good Design is Reactive, Playful, Informative and Intuitive…

Design is not how it looks and feels its about how it works

• Slides

Drag and Drop

• Ember.js and HTML5 Drag and Drop

Design of a Messaging Service

• ember-cli-flash
• Ember Flash Message Demo ember-cli-flash
• Can use a lifecycle for a message instance using .destroy()
• Ember.Object for the message model - can have methods for the supported macros
• Messages can be wrapped in a component and queued in a service object for application notifications
• Flash messages or growl messages
• Visibility of system status, Jacob Nielsen

Using Services

• demo of inserting a clever shower thought in to a loading message
• Inject macro that is not cached and randomized

Think about good UX

• If your shirt isn't tucked into your pants then your pants are tucked into your shirt
• Reddit - shower thoughts
• Clever loading messages

FRP in Ember

• Observers invoked when dependent properties change
• Ember.computed.X see the api docs
• Computed properties and Observers, write macros too
• Bacon.js - FRP, but Ember is different - the observer pattern
• Functional Reactive Programming (FRP) - event streams and properties
  • A sequence (stream) of events and properties, consider the mouse movements, and it's properties for it's physical position on the screen

What is Good Design

• Ember enables reactivity via observers
• Reative programming: continous flow of data and maintaining the relationships between the data
• It's reactive

Design is how it works

• It doesn't matter what we think as developers, we need to consider what our users think. Design is really important
• Give clear answers to your users, don't mess with their experience
• But I'm not a designer

About Lauren

• Lauren - Designer and Front end developer at Homely ( in Austalia ) @sugarpirate

The Art of Ember Deployment: Luke Melia, 1:25 - 2:45 PM

Awesome new story for deploying an Ember application: ember-cli/ember-cli-deploy

Real Artist Deploy

We still need some collaberation

• Let's talk… how will this work with FastBoot?
• What is the relationship between the FastBoot server and your application server

Roadmap for ember-cli-deploy

• After initial release
  • deploy to named buckets, deploy config instead of HTML, e.g. manifest from static build, let server drive what is sent to the client
• Usage: builds, deploys assets, can rollback, deploy targets, e.g. staging, give you a preview URL
  • Activate using an identifier after testing on live
• ember-cli-deploy plugins should use one or more of the hooks, willDeploy, build, updateAssets, updateIndex, activate, didDeploy, list
• New pipeline, hooks and plugins architecture, similar to Ember Addons
  • e.g. Post deploy hooks
• Documentation for plugin developers
• Release the end of this week
• Update existing plugins

Pluggable deployment solutions

• Paving the cow paths…
• Merged the 3 projects, one awesome project ember-cli/ember-cli-deploy with a team of six maintainers
• ember-deploy has the biggest eco-system
• projects: ember-deploy, ember-cli-deploy, front-end-builds, etc

New Possibilities when deploying a JS App independently from server apps

• Notifying connected clients, hey user - it's time to refresh
• How about serving various version of an app simultaneously
• Dynamic HTML Rewriting, e.g. a Rails controller
  • CSRF tokens, dynamic analytics, A/B testing, feature flags
• Add a new level of confidence by going live once the app is tested on production
• Preview the new version of the application

Modern Flow for deploying Web apps…

• How about Redis, deploy the HTML (index page for a single page app) into Redis, Rails server reading out of Redis and assets deployed to S3
• Do we deploy the built JS app to S3, but S3 reads can be slow, need speed
• Deploying JS apps should be decoupled from server application deployments and restarts, basically UI deploys independently from backend
• Caching should be minimal to none, so new users get the latest versions
• HTML apps need fingerprinted assets for JS/CSS, specific config data for that current version of the app
• For connected clients consuming a changing API they need the previous version running. Can we do the same for our Ember Apps?
• During deployment need two apps running concurrently, how about versioning API and client app together? (its a fallacy)
• Long-lived session and API changes
  • in the deployment cycle users may get an incorrect data representation
• Keep static assets working during rolling restarts
  • deploy old assets to a CDN and keep for awhile

Looking back at how we deployed software

• We no longer deploy individual files to the Web, Fetch app
• We no longer use CD ROM duplicators to deploy web software
• So how do we deliver software to the Web?
• Then came the internet
• Managing software over time… cassettes, cartridges, etc.
• Luke organizes NYC Ember meetup and runs @YappLabs.

Hijacking Hacker News with Ember.js: Godfrey Chan, 1:30 - 2:00 PM

if @chancancode so can you…

• New project (joke) CocoaBars, has 0 commits so get to work :)

Chrome Extension: https://chrome.google.com/webstore/detail/hn-reader/emgghjnnkkopedbjfajejpkidaiedhlf

The power of the Adapter pattern in Ember allows you to customize your data mapping needs. You get small libraries to build your custom solutions on top of. Even if the frameworks opinions don't fit your needs the Adapter pattern opens up limitless possibility.

Adapter Patterns

• Used Ember.Observable get, set, addObserver to wrap localStorage API
• use localStorage API to back data in the extension routes
• Ember.History (Location API in the router) has getURL and formatURL hooks
• Extension needed 100% URL compatibility with Hacker News website
• Router API has flexibility on how you name your outlets
• Ran into a problem with URL's as Ember Data is opinionated about how to construct URLs
• Adapter is responsible for talking to server, and Serializer is responsible for transforming data
• Drop in an Adapter to talk to your local store needs in an extension even though the adapter is not talking to an API
• JSON API / Ember Data work together well, but what about a custom data source?
• Today Ember Data is a local object store so can use an Adapter the way you choose
• Now that we can get JSON data on the HN domain, can we store locally?
• Extension is running on the HN domain so no need to cross-domain or API calls, just XHR /get
• In the case of a chrome plugin app there is not necessarily a backend, fetching HTML and parsing from the Hacker news server in json

Demo of HN Reader App

• hn-reader
• Submitting extension to Hacker News in real-time
• Chrome extension to hack the Hacker News website

Canadian Programmers

Had some fun and laughs talking about Canadians talking to Americans…

• gem install canada
• isEmpty.eh()?

Designing for Ember Apps: Steve Trevathan, 11:30 - 12:00 PM

Coming soon… Tools of the Trade - a free design pattern library - http://toolsofthetrade.dockyard.com

Create Repeatable Design Methods & Patterns

• Offline Mode - "Goliath mode"
  • When a lost connection is restored then make doable updates (patches)
  • Responding Optimistically
  • Connection lost, but you can still use the app
  • Disallow editing? NO!
• Micro > Macro - Core interactions become a symbol of your app
  • iPhone thumbprint scanner, standard authorization step, repeated
  • The game "THREES" has one way to interact with the app
• Reuse Core interactions, e.g. card formats with common interfaces
• Carry Context - don't leave me waiting at the bus stop
  • Can be a major save, imagine an online trade (investment) and your computer fails, so you pick up your phone and complete the transaction
• Skeleton UI - thinning out the spinners (e.g. gridlines where a map is loading tiles)
  • Draw an empty card format then fill in the details
• Gradual engagement - reducing the perceived risk

Mental Models: Use them explicitly and break them when you must

• Remember the original iPod interface, a micro interaction on the wheel

Digital Experiences

• Borrowing metal models is different that copying an application
• Build a framework for understanding some applications have a difficult learning path
• Take from existing models and meet expectations, both macro and micro, e.g. chat apps have been around for a while
• The past: Razor phone, Instant Messanger app, chat app

Micro Models

• How I think it works

Mental Models:

• Can challenge or reinterpret incorrectly, be careful about pushing the limits of UX/design
• What is "home" ? - Match peoples idea of what a home is and what you are building
• Can be changed / updated
• Influenced by experiences from my past

How to we stop our users from spitting all over us? we don't marry them, but we do try to understand their mental models.

I'll be your "pain in the ass user" - I'm gonna hate the front door you build me

Metaphor We're designing a house - as we build an application with Ember. We're dealing with a large perhaps infinite number of use cases.

… loading presentation …

Ember.js Performance: Stefan Penner, 10:45 - 11:15 AM

Mis-alignments to fix…

• Combine approaches
• Benchmarks can trick you
• Premature optimization is not a good idea
• Ember.Object.reopen - slowly augment objects; solution: limit reopen to only work until the constructor has it's first instance
  • actionsFor, need to optimize the instances for meta - listeners (subscription)
  • Meta is 'live' inheriting - this is a problem
  • Meta, every class and every instance has a meta, it's the meta for the instances that kill performance
• init/super - need to embrace super
  • pass in args to init(args), this._super(args); use arg.prop || 'default';
• Actions Up, bindings down
• improved clarity makes the app faster

About the runtime and your code

• Reasonable code should have reasonable cost
• Allocation === cost, closures, unoptimized code allocates more objects
• If the runtime believes the code is stable and predictable then it can optimize speed
• Mad Science: Types + Stabiltiy
• Need to understand the runtime, e.g. V8 or others
  • E.g. specialize type, specialized compiler methods - efficient native code
• "Mechanical Sympathy" - Jackie Stewart, align the car with the driver
• "Only a sith uses abosolutes" - what are the performance questions that need to be answered?
• Guided evolution
  • We have some choices to make.. productive for developers vs performance
• Why? we confuse ourselves and the runtime, we should understand the runtime
• We still have work to do, the ceiling is still high
• Bluebird, Promises made faster
  • Done without external API change or breakage
  • Did less work, allocate less objects, align with the underlining primitive
  • Promises using normal for loops is fast

Myth? performance is about enumerating arrays

Opening Keynote: Yehuda Katz & Tom Dale, 9:45 - 10:30 AM

Your Antidote to Hype Fatigue

Introduction

• 625+ people in attendance and about 24 countries represented.
• Ember is really growing this year, new apps built in Ember… Ghost, Beatport, Intercom.io, Customer.io, The Nest Store and more
• The number of meetups has grown around the world
• Special guest in the house an a Tomster mascott
• Epic meetup video showing with a super long intro. <3
• The core team is represented my many companies, 3 new people added today… Martin, Mixonic, & Edward

Report Card

Last year we made lots of big promises, and guest what we shipped them.

• Early adopter of ES6 (ES2015) features… plan to be an early adopter of ES2016
• Ember Data
  • Adapter Ecosystem
  • Relationships are always Async, build with async loading in mind
  • Data can come at any time and people really expect that data relationships are updated
  • On client get relationships on demand
  • Relationship Syncing, easy on the server not easy on the client (browser)
  • SSOT branch landed
• ES6 Modules, drive making the spec awesome but early adoption, helps out TC-39
• Testing
  • At the end of 2014 and into 2015 has an awesome testing story
  • Out of the box with Ember CLI, functional and unit with great async support
• Ember CLI
  • Add whatever test harness you like
  • Scaffold new app instantly, and use various tooling to your liking, e.g. Coffeescript
  • Ember Addons - 663+ and growing, a single install command
  • testing, performance, stubbing, server proxy, content security policy, transpile with Babel, source maps,
• Ember Inspector
  • Thanks Teddy Zeenny
  • Firefox support, nav bar, bookmarklet
  • Performance pane
  • Promises pain has decreased
  • Ember Data pain has decreased
• RIP script tags as metamorphs
• HTMLBars: At compile time your templates are validated and error feedback is reported; full compliant HTML parser
• <calendar-day> can remove {{…}} mustache syntax; TLDR - rebuild the render engine
• Context of blocks, component scope… use block parameters today
• HTMLBars <a href={{url}}>
• Rapid Release has worked really great, please run the beta release channel and report bugs
  • Robert Jackson http://getrwjblueabeer.com
  • RFC process, a couple dozen submitted

Ember FastBoot

• Bend the load time curve and front load the HTML
• Can curl a Ember.js app, fastboot can be installed as middleware in an Express app
• Ember is running as expected, but on the server
• Lynx user now can user your Ember Apps, JavaScript disabled in the browser
• Live demo of FastBoot, woot! "Musing of a Thoughtleader"
• Boot up your app in a node process, hit the API server and render, just running on a different computer, not the browser
• Run your app on the server and extract, abandon progressive enhancement

Performance

• Ember release 1.13 will include Glimmer and will be compatible with your current apps
• Is Ember Fast Yet? http://is-ember-fast-yet.firebaseapp.com
• Glimmer, the new rendering engine built with HTMLBars
• Confirm Ryan Floreance's complaint, stress test
• Alternative Approach to Virtual DOM
  • Dirty checking for dynamic properties in the declarative syntax, we can know what parts will be changing
  • Only check for diff sets in the the changing pieces of the template
  • Handlebars, render the template, emit the DOM; while rendering track all the dynamic content (curlies {{…}})
• Virtual DOM
  • Batch changes, since DOM is the bottleneck, smart refreshes
  • Manages rendering only the change sets, done in memory
• Render Virtual DOM and compare the DOM, diff then draw (ReactJS)
• You can do a lot in JavaScript and less in DOM
• Never say no to a feature, giving a reason of performance is not there

What's next in 2016

• Ember FastBoot
• Release Dates, beta candidates
  • ListView June 12th
  • Ember Data 1.0 is June 12th
  • Ember Inspector is June 12th
  • Ember 2.0 release is June 12th
  • concrete dates
• Ember Data
  • Ship It! we need a 1.0
  • Pagination & Filtering need first class support in JSON API transport
  • JSON API out of the box
  • JSON API designed from the ground up for what Ember Data needs
  • [json:api] spec, Steve K and Dan G. working hard on the spec
• Ember 2.0, the release plan is the Feature, rolling out in 1x release and under way
  • Keep up the rapid release pace, notify of deprecations often, remove on major releases
• Async & Routable Components
• Liquid Fire @ef4 working closely so that HTMLBars is compatible
• <angle-bracket> Components, already in Canary
• ListView (emberjs/list-view on github)
• RFC: Engines, encapsulate application code for larger teams
• Next Version: Ember CLI included in the guides
• Versioned guides, live today, http://guides.emberjs.com