Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
433 lines (272 sloc) 19.4 KB

EmberConf 2014

The first EmberConf was a rousing success. Presenters ranged from experienced speakers to first-time speakers and from core team members to app developers. All of these perspectives were essential to represent the complete Ember community. Huge thanks to Leah Silber and the rest of the conference organizers for working so hard to make this event a reflection of all the aspects we love about Ember.

While I took fewer notes for some talks than others, the correct interpretation is not that those presentations were less interesting, but rather than those speakers were engaging and their slides were detailed.

Summary

The high level takeways:

  • The community is very healthy: There were 430 attendees of the conference and there are 330 committers to the core Ember.js project on Github.
  • The biggest themes of the conference were scaling developer productivity and improved performance.
  • A growing number large companies are releasing ambitious single-page web apps built with Ember: Yahoo!, Netflix, Square
  • 4 major Ember projects are landing in the next few months that will provide significant productivity and performance improvements:
    1. Ember-CLI is a command line utility for managing Ember projects. Link
    2. Broccoli provides very fast builds. Link
    3. HTMLBars replaces Handlebars with a much faster (and smarter) templating engine. Link
    4. Ember Data 1.0 provides a data persistence framework. Link

Blog writeups:

Videos

All videos on Confreaks

Extra Sessions:

2014-03-25


Intro

  • Inclusivity

Keynote

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

Productivity

Screens and Flows

This is basically a description of the UX challenge for developers. Lots of logic and many paths through the application. All pages are full of links that interconnect the entire app. It's easy to add links (they're lightweight) so we do. Design is going to require lots of iteration and lots of interconnectivity. Productivity in this case means handling the complexity of common patterns and simplifying common patterns that in other cases would create spaghetti.

The philosophy of Ember is inspired by the philosophy of Rails. DHH: "I think the conclusion is that we're not as special as unique as we would like to believe. That fact is that the flexibility we think we need, that we want - we really don't." Opt-in versus opt-out of the "good" behavior, the example here is organ donation.

The story of why you became an Ember developer is that Ember made you a more productive developer. To build more complex flows in long-lived applications.

Using Ember to Make the Seemingly Impossible Easy

Andre Malan and Heyjin Kim | @ramcio and @heyjinkim | Simple Reach | Slides | Video

Migration

Visualization

Infinitely scrolling list of video elements. Performance challenge. Many post views handled by the controller, switching in the <video> element for the one post that's on the screen. DOM swapping. Ember-list-view.

Further reading:

Contributing to Ember

Robert Jackson | @rwjblue | Slides | Video

Why is Ember Awesome?

Community

  • Fix / cleanup documentation
  • Report and/or fix bugs
  • Submit new features

Docs

  • [DOC] Fixed typo in blah.
  • [DOC beta]
  • [DOC release]

Bug fixes

  • Add a test showing regression. (If you can't do this, open an issue and attach a jsbin.)
  • Fix issue.
  • Prefix commit.
    • [FEATURE ember-metal-zomg] Fix blah
    • [BUGFIX beta] Fix dummy
    • Only severe regression will be pulled into release channel.
  • Security: security @emberjs.com and work with the core team emberjs.com/security

Features

Feature Flags

  • defeaturify processes builds

  • Check the features.json file.

  • Only enable features in canary builds. (You can enable them in beta/release but you don't want to because bug fixes are not pulled in.)

    EmberENV = { FEATURES: { } }

  • Flag name: Package name + short feature name = ember-metal-zomg

  • Add to features.json as last line

  • Set value to null

  • Rebase on every change.

  • Add to FEATURES.md with description and include PR link for further reading.

  • Hide changes behind flags: if (Ember.FEATURES.isEnabled('ember-metal-zomg')) { ... } else { ... }

  • Check the "Enable Opt Features" checkbox in QUnit UI.

  • Commit Prefix - Features: [FEATURE ember-metal-zomg]

  • Project svelt is trying to keep the core slim so that file sizes don't bloat.

DOC, BUGFIX, FEATURE, SECURITY

Ember Data

Igor Terzic | @terzicigor | Slides | Video

Framework: "Way of reasoning about problems abstractions."

Data Persistence Framework

  • data transformation ("easy")

  • asynchronicity ("medium")

  • caching ("medium")

  • adapter/serializer ("easy", so it's more flexible)

  • store/models (hard, so it's locked down)

  • locality is the hard part and is the current focus of Ember Data 1.0

Broccoli

Jo Liss | @jo_liss | Slides | Video

Motivations

Ember tooling

  • Package management: Bower
  • Build tool: ???

What about grunt watch?

  • Complex
  • Slowness as the app grows in size. Waiting 10 seconds is unnacebptable because you're doing it hundreds of times a day.

Part 1, build definitions: Brocfile.js

  • conact()

  • filterCoffeeScript()

  • minify:

    if (process.env.BROCCOLI_ENV === 'production') {appJs = uglifyJavaScript(appJs) };

  • compileSass()

  • mergeTrees()

Part 2, plugin API

Broccoli only knows trees. Tiny API. Big helper packages.

  • .read()

  • .read()

  • .read()

  • .cleanup()

  • broccoli-transform: (srcDir, destDir)

  • broccoli-filter: processString. broccoli-filter has cache.

Integration

Broccoli is a small library. Just builds. Grunt is a good task-runner for generating, running test, deploying.

Broccoli Announcement

Fingerprinting discussion. Has to be done by Broccoli or EmberCLI. There is a grunt plugin that might serve as an interim solution.

Animations and Transitions

Edward Faulkner | @eaf4 | Slides | Video

Follow along with the demo

  • Translate 0 hack to give all elements the same rendering context.
  • Observe height with computed property to use with CSS. "Growing box" for example: adding and subtracting form fields.
  • willTransition action handler on route.
  • slide-demo-source has a lot of detail about delaying transitions for animations.
  • modal-launcher using query parameters and name outlet.
  • Ember attaches event handlers at the top of the DOM for events you're not using, such as scroll events, which causes "jank" because it blocks the native scroll acceleration. The solution is to wrap part of the DOM where you do care about scroll events in a component.

Angular

John K. Paul | @johnkpaul | Slides | Video

Component Lists from Paul and @coderberry. The goal is to make these reusable and shared.

"Transclusion" is a real thing and pretty useful: Wikipedia explanation

Modeling the App Store and iTunes with Ember Data

Jeremy Mack | @mutewinter | Slides | Video

  • "I create with Ember" on his business card.
  • Tapas with Ember
  • Coffeescript

"Everyone knows their name" slide with code" from this tweet

Launching fnd.io today

Macstories article on launch

Really amazing high level use of Ember and Ember Data to wrap the iTunes store search APIs.

Using fast click for really fast touch events.

HTMLBars

Erik Bryn and Kris Selden | @krisselden and @ebryn | Slides | Video

Ha! Almost ready. But it's going to be awesome and fast.

2014-03-26


The {{x-foo}} In You

Ryan Florence | @ryanflorence | Instructure | Slides | Video

Components are:

  • An optional template

  • Isolated Ember.View controlling it

  • The view is the context (it is its own controller, sorta kinda)

  • Binding demo {{ic-tabs}} for tabs inside a page with query params.

  • Actions demo {{ic-menu}} for sending actions from a select menu (whose events do not normally bubble up to the top as expected.)

  • "Composite components" are components built out of smaller components.

  • "Convenience components" for certain configurations of the component that are commonly used.

Child components tell parent components that they exist rather than parent look for child. Do that on willInsertElement().

Ember CLI

Stefan Penner | @stefanpenner | Yapp | Slides | Video

Yapp does consulting work.

"Abstractions enable cost sharing" across the entire open source community contributions.

Ember CLI Github

Ember is for the children

DeVaris Brown | @devarisbrown | Zendesk | Slides | Video

  • 38% unemployment rate African American ages 16-19.
  • Tough to be a teacher because of the surrounding context outside the class.
  • Need to teach typing.io

Get involved.

Code combat for teaching kids programming with games.

The one where Mr. Router embraces the controller

Alex Matchneer | @machty | Slides | Video

Query parameters are still coming. The holdup is the missing primitive for state and the right defaults so that the behavior matches the most common use cases. There is a general state serialization that the controller will provide that can be targeted at query params or localStorage (or maybe something else like serializing the state to the server).

Model del state demo

The Unofficial Ember Testing Guide

Eric Berry | @coderberry | Slides | Video

  • qunit is the happy path. but mocha and jasmine should be supported too.
  • Ember.test provides helpers, Qunit provides assertions.

Convergent Divergent Faits Precis

Chris Meiklejohn | @cmeik | chrisophermeiklejohn.com | Slides | Video

  • Basho, Georgia Tech grad student, Podcast Think Distributed

  • Syncfree project

  • Distributed computing. That's what Ember Data is!

  • Ricon 2013 conference put on by Basho on dist computing.

When you push state to the client, that data is going to become stale.

  • Strict linearizable, eventual consistency, causal consistency

  • Safety vs liveness

  • Consensus: termination, agreement, validity

  • Two generals, byzantine generals

  • Raft is a simplified Paxos

  • Time clocks and the ordering of events in a distributed system, Leslie Lamport, 1973

  • Dotted version vectors

  • CFRDT: Conflict free replicated data types.

  • Avoid coordination. Want the system to make progress when clients are offline.

  • Eventual consistency.

  • PAPEC 2014

Controlling Route Traversal With Flows

Nathan Hammond | @nathanhammond | Slides | Video

Categories of URLs:

  • Resources - Available at any point in time. Pluralized nouns if array controller or singular if object controller. Such as /accounts.
  • Actions - REST API such as /login. Always contain a verb.
  • Flows - Third type. Changing state across multiple routes. login -> otp. authenticate -> accounts

Directed graph with an attached state machine.

Designing a flow.

  1. Router.map
  2. List linear paths
  3. Convert to a node graph (each node is a route)
  4. Edge traversal
  5. Figure out backwards traversal because users will hit the back button.
  6. Done! (Except for the routes that you forgot.) The diagram will communicate the flow to everyone.

Google's libphonenumber to recognize and format phone numbers!

Change state and get route traversal for free. How did we do this?

  • Naive approach on github (don't use).

  • Tanget: replaceWith is awesome. Use it. Prevents pollution of the browser history. Alternative to transitionTo.

  • An Improved Approach.

  • Definitions of Edge Lists

  • Get flow in beforeModel

  • Demo app

  • (Eventual) Github

Snappy Means Happy

Performance in Ember Apps

Matthew Beale | @mixonic | Slides | Video

Web performance is a bigger topic than just Ember performance.

How fast do we need to be?

  • Jakob Nielsen: 100ms, 1 second, 10 seconds
  • Ilya Grigorik: 100, 300, 1000, 1 second +, 10 seconds +
  • 16ms for 60fps animation

Methodology:

  1. gather facts

  2. analyze and theorize

  3. change a single thing

  4. confirm theory

  5. Reproduce mobile latency reliably - http://slowyapp.com/

  6. Create a clean browser environment

  7. Measurement and analysis. Create a clean browser environment

  8. Solutions

  • script at bottom
  • script async/defer
  1. Make changes

Recommend Ilya's Browser Networking book: High Performance Browser Networking

Janky animation

  1. Understand how browsers work
  2. Measure in the Timeline
  • How long does it take to get something on screen?
  • Open the Render Console in Timeline to get a special console.

Ember debugging a slow list obsever

  1. Understanding observers
  • Observers are synchronous
  • .set() -> .setProperties() to coalesce
  • Ember.run.once to do the expensive thing once
  1. Profiler in Dev Tools
  • Flame Chart

Evolution Is Awesome

David Herman | @littlecalculist | Slides | Video

Evolution versus Revolution

Code Rush (Movie)

  • Revolution is necessary for survival, but comes at great cost so use carefully.
  • Evolution is necessary for progress, but can carry a lot of baggage forward.

Choose wisely between evolution and revolution.

  • "use strict"; // Opt-in to good behavior is the wrong approach.
  • Modules automatically turn on "use strict";

Extensible Web

Need the primitives so that browser vendors and web developers can iterate rather than try and perfect a standard.