Skip to content

Latest commit

 

History

History
509 lines (412 loc) · 23.3 KB

EmberConf-2015.markdown

File metadata and controls

509 lines (412 loc) · 23.3 KB

EmberConf 2015

Leah Silber and Kait Olson and the volunteers did an incredible job again this year of putting together this conference. Learn how Leah creates memorable conferences in her book: Event Driven.

Summary

The themes of the Ember community are productivity and friendliness. As mentioned by Chris Eppstein in the closing talk, those two goals may often be at odds, especially considering how the drive to compete is most often tightly bound with adversarial behavior. So far though, Ember developers demonstrate strong commitment to both advancing frontend web development as well as curating healthy community.

Health

Themes

  • Design and user experience.
  • Performance.

Companies

  • Good representation from large to small organizations.

Projects targeting beta release on June 12, 2015

  1. Ember 2.0
  2. Ember Inspector 1.0
  3. Ember CLI 1.0
  4. Liquid Fire 1.0
  5. Ember Data 1.0

Status of projects from EmberConf 2014

  1. Ember-CLI is now the default tool for Ember apps.
  2. Broccoli powers the fast builds of Ember CLI.
  3. HTMLBars landed progressively starting in Ember 1.8.
  4. Ember Data 1.0 has an official beta release date!

Links to EmberConf 2015 resources:

Videos

All the videos (Confreaks playlist)

Keynote (YouTube)

Day 1

Day 2

Talks

Tuesday 2015-03-03

Intro

Code of conduct: Don't exclude and make an effort to include.

Opening Keynote

Yehuda Katz and Tom Dale | @wycats and @tomdale | Tilde | Slides | Video

  • 625 attendees, more ember-cli users, more addons
  • Built With Ember: square cash, heroku dashboard, ghost, beatport, intercom.io, consul, customer.io, nest store
  • lots of meetups
  • 3 new core team members
  • @mixonic
  • @ef4
  • @mmun
  • what's new? / report card
  • Rapid release worked great. Easier upgrade path for developers as a consequence.
  • getrwjblueabeer.com
  • New RFC process
  • Features landed:
    • HTMLBars landed in 1.10+
    • Ember Inspector (@teddyzeenny)
    • Ember CLI
    • Testing is way better
    • Query Params
    • JavaScript modules
  • Ember Data (@terzicigor)
  • ES6 Early Adopter
  • what's next?
  • Versioned guides
  • Ember CLI is the starting point for beginners
  • Engines
  • List View
  • <angle-bracket> Components
  • Liquid Fire animation library
  • Async & Routable Components
  • Ember 2.0 just removes support for deprecations
  • Ember Data
    • jsonapi.org
    • Pagination & Filtering
  • shipping it: June 12
  • Ember FastBoot
    • curl your ember app
    • Works with disabled JS
  • Performance

“Your antidote to the hype fatigue”

Ember.js Performance

Stefan Penner | @stefanpenner | Yahoo! | Slides | Video

  • Promises performance improvements
    • Look inside the black box of browser performance
    • Bluebird library
      • Align with language primitives
  • Idempotent rerender branch
  • JS performance cargo-cult problem
    • Better question: When is X slow? When is X reasonable?
    • Shapes
  • “Mechanical sympathy” from F1 driver
    • Look inside browser runtime implementations such as V8.
    • Code that is understandable and predictable (from both human and computer POV) is fast.
  • Misalignments in Ember
    • Do less work
      • Explicit data-flow: Actions up, bindings down
      • Explicit life-cycle: RIP Singleton Controllers
    • init/super
      • Problems
        • Hard to learn
        • Misaligned with ES2015
      • Solution
        • Implicit defaults in init
        • Pass args
    • Ember.Object.reopen
      • Problems
        • Buggy
        • Complex
        • Meta is live inheriting
        • actionsFor from Meta.listeners
      • Solution
        • Working on a spike for this to reform Ember.Object.reopen

Designing for Ember Apps

Steve Trevathan | @strevat | Dockyard | Slides | Video

  • Designing single page apps.
  • Users are difficult.
  • Mental models.
    • Familiarity
    • Assumptions
    • Can be updated.
  • What is “home”?
    • Valuing of thing is based on previous experience.
  • Macro: What is it for?
  • Micro: How does it work?
  • Use patterns explicitly if they directly apply.
  • Methods and patterns:
    1. Gradual engagement - Get started and recognize value with minimal effort
    2. Skeleton UI - Thinning out the spinners and replace with placeholder images, controls, and animation
    3. …don't leave me hanging - Handoffs. Contextually aware UI such as Rdio and Spotify knowing which device music is playing from.
    4. Core Interactions - Become a symbol of your app (product).
    5. Offline Mode - “Goliath Mode”. Respond optimistically, but be careful.
  • Tools of the Trade

Hijacking Hacker News with Ember.js

Godfrey Chan | @chancancode | brewhouse | Slides | Video

Blog post: Adapter Patterns in Ember.js

  • Canada!
  • Adapter pattern
  • HN Reader
  • Scraping from html document to JSON
  • DS.Adapter to fetch data
  • DS.Serializer to transform
  • Preferences stored in local storage
  • Cocoa Bars!!! (kidding)

The Art of Ember Deployment

Luke Melia | @lukemelia | Yapp | Slides | Video

“The future is already here, it's just not very evenly distributed.” -William Gibson

  • Current server app deployment model is not appropriate for Ember apps.
  • How to keep static assets working during the switchover?
    • Push all static assets to a CDN and keep them around.
    • Long lived sessions?
      • We have multiple versions of our Ember apps in use at once.
  • Learn from native mobile apps.
  • Key differences:
    • HTML pages bootstrap Ember apps
      • Points to fingerprinted assets, but is not itself fingerprinted.
      • Contains JS and CSS links to boot JS app and load CSS in the right order.
      • Good place for environment-specific configuration to JavaScript.
  • Use Redis (low latency store) to deploy index.html to app server.
    • Allows
      • Preview before activating.
      • Dynamic HTML rewriting between Redis and app server.
        • Feature flags
        • CSRF tokens
      • A/B testing
      • Notify clients of new version availability
  • Which approach from the projects that currently do this?
    • ember-deploy, front-end-builds, ember-cli-deploy
    • Merge all 3! -> ember-cli-deploy
    • Great example of community desire to coalesce
  • Timeline
    • 0.4.0 This week
    • 0.5.0 Soon
  • :addon ember-cli-deploy

Ambitious UX for Ambitious Apps

Lauren Tan | @sugarpirate_ | Homely | Slides | Video

Self-taught designer, then self-taught developer.

  • “Design is how it works.” -Steve Jobs
    • Salt and pepper shakers. How many holes is the salt shaker?
  • Good Design is Reactive
    • Reactive?
      • Flow of data
      • Maintaining relationships
    • FRP (Function Reactive Programming)
      • Immutability
      • Some side effects
      • Streams are an array of events (Unsure whether I noted this correctly)
      • Look at Bacon.js
    • Computed Property Macros
    • Observers
  • Good Design is Playful
    • Loading messages
    • Shower thoughts reddit
  • Good Design is Informative
  • Good Design is Intuitive
    • Drag and drop

Bring Sanity to Frontend Infrastructure with Ember

Sam Selikoff | @samselikoff | TED | Slides | Video

  • Issues scaling frontend from monolith at the start to multiple APIs and Interfaces.
  • Ember and Ember CLI
  • Process of discovery from manual to script to addon to service
  • Identify redundancies and abstractions
    • Hard to do
    • Need a process
  • This is the philosophy of Ember.

Dynamic Graphic Composition in Ember

Chris Henn | @cwhnn | chrishenn.net | Slides | Video

Test-Driven Development by Example

Toran Billups | @toranb | toranbillups.com | Video

  • Live coding like no one is watching.
  • Building an app and writing tests.
  • tmux + vim + testem all in one view is very nice.
  • fauxjax for mocking JSON API
  • Go back and watch this in slow motion.

Mic drop: Apple Menu > Shut Down…

Wednesday 2015-03-04

Fault Tolerant UX

Dan Gebhardt | @dgeb | Cerebris | Slides | Video

  • Fault tolerance in naval ship design.
  • To prevent operator defaults, controls must be laid out as clearly as possible.
  • Transactional UX (ACID)
    • Atomic: All or nothing.
    • Consistent:
    • Isolated: Allow concurrent changes.
    • Durable: Changes persist.
  • Forgiving UX
    • Transitional Persistence: Preserve data that user has entered but not saved.
    • Undo and redo.
    • Offline support (Non-blocking): Even when network connection is down.
    • Asynchronous (Non-blocking) Interface: Don't need to wait for server response.
  • Event subscriber pattern
  • Orbit.js
    • Request
    • Transform
  • Sources
    • Memory
    • Local storage
    • JSON API
    • …more
  • Schema
    • Models
    • Relationships
    • Keys
    • …more
  • ember-orbit
  • github.com/orbitjs
  • orbitjs.com: Future home of the Orbit.js project.

Aligning Ember with Web Standards

Matthew Beale | @mixonic | 201 Created | Slides | Video

Blog post: Aligning Ember.js with Web Standards

  1. JS standardization process is changing -> “Living Standard” like HTML -> ES2015 Standards
  • Portable
  • Best practices
  • Enduring
  • Participants win
  1. Transpilers are here to stay
  • Remy Sharp coined “Polyfill”
  • For stuff that can't be polyfilled, must transpile.
  • Babel (Previously 6to5)
  1. Aligning Ember's object model

Growing Ember One Tomster at a Time

Jamie White | @jgwhite | With Associates | Slides | Video

  • Community is vibrant. How did that come about?
  • Reflections on EmberConf 2014
  • Community does not automatically follow design engineering.
  • Tomster represents productivity and friendliness.
  • Compare Ember release cycle pages to Chrome release cycle pages.
  • “Ambitious” and “Friendly” are hard to combine.
  • Lindsey Wilson: Tomster is adaptable. Wasn't overly done.
  • Use language to coalesce concepts and philosophy.
  • For docs: “If something is difficult to explain it probably means we're exposing the wrong primitives.” -Trek

Interaction Design with Ember 2.0 and Polymer

Bryan Langslet | @blangslet | Envoy | Slides | Video

Demo video

Building Custom Apps with Ember CLI

Brittany Storoz | @brittanystoroz | Mozilla | Slides | Video

  • Firefox OS build tool
  • Rec Room -> Ember CLI
  • Use addons for Firefox OS development requirements.
    • Blueprints to generate the manifest.
    • Addon to install “Gaia” UI components. Lots of steps but all covered in Ember CLI docs.
    • Adding commands for validation and publishing.
      • availableOptions to set flags
  • github.com/mozilla/ember-cli-fxos

Building Real-Time Applications with Ember

Steve Kinney | @stevekinney | Turing School | Slides | Video

  • Real-time applications
  • A story about WebSockets…
  • Fallback libraries: socket.io and Faye
  • Approaches
  1. In a controller
  2. In a service
  3. Socket.io

Minitalks

Leah Silber | @wifelette | Tilde | Video

Bill Heaton | @pixelhandler | Video

Mitch Lloyd | @too_mitch | Video

Liz Baillie | @infinite_math | Video

  • Flatiron School
  • Ember Testing with Chemistry Dog
  • Jumped in with the goal of becoming the Ember testing expert

Michael Nutt | @michaeln3 | Video

Katie Gengler | @katiegengler | Video

Erik Bryn | @ebryn | Video

Physical Design

Edward Faulkner | @eaf4 | braveleaf | Slides (Coming soon… | Video

Closing Keynote: Coming Soon!

Chris Eppstein | @chriseppstein | LinkedIn | Slides | Video

  • Announcing: Sass Eyeglass
  • Eyeglass is the JS equivalent of Compass
  • Libsass is a C++ implementation of the sass compiler
  • “Autoprefixer is awesome. Use that.”
  • “Come for the technology. Stay for the <3 <3 <3.”
  • Pulp Fiction, Marsellus Wallace: Fuck pride.
  • Fight Club, Tyler Durden: You are not your OSS contributions.
  • How to compete without negativity?
  • What does it mean to “win”? Why does it matter?
  • Find a job you love and you'll never work a day in your life.
  • Do what you do because you love it.

Miscellanea

Special thanks to Emanuele Tozzato for showing a few of us around Portland while we discussed Ember.