EmberConf 2018

A collection of links (and notes) that summarize the events of EmberConf 2018. Please submit a PR if you'd like!

Inspired by @poteto's past EmberConf repos. See 2017, 2016, and 2015 for previous years!

Livestream

• Official live stream
  • Day 1
  • Day 2

Other Blogs & Highlights

• Alex's Talk Highlights
• Chris Ng's Recap

Photos / Videos of Event

• Jeremy Green
  • Day 1 Gallery
  • Day 2 Gallery
• Twitter Search: #EmberConf (videos)
• Twitter Search: #EmberConf (photos)

Job board

See photos here. Pictures were taken around 1 PM PST on Wednesday March 14.

Day 1

Talks

Keynote by Tom Dale and Yehuda Katz

Overall, lots of API improvements, as well as exciting advances in Glimmer.js.

• Video
• Slides
• New filesystem layout
• Optional jQuery
• Codemods
  • async/await in tests
  • JS module api
  • Computed properties, use es5 getters
  • ES6 classes
    • TypeScript
  • Decorators
• Editor integration
  • VSCode
• Fragment components, empty tagName
• @tracked properties, autotracking dependencies
• @args syntax in templates
• Experimental
  • Angle bracket syntax
  • Single word component names
  • Named blocks RFC
• LinkedIn feed in Preact and Glimmer
• https://schedule.emberconf.com - uses rehydration
• https://schedule-wasm.emberconf.com - uses WASM
  • Glimmer written in Rust

Brief interlude from sponsor Percy.io by Mike Fotinakis

Percy.io is "Solving visual testing across design, development, and deployment." "Stop doing QA in the dark. See every pixel changed on every pull request."

• percy.io
• percy-web, open source front-end
• Example of PR integration

Ambitious for All: Accessibility in Ember by Melanie Sumner

Be magnanimous.

• Video
• Slides
• WAI-ARIA
• WCAG 2.0
• Color-blind glasses
• https://include.ai
  • Add alt text to images on the web
• ember-a11y
• Problems
  • Route transitions
  • Modal focus
  • aria-* support
  • Clicks
  • Passwords
• Easy wins
  • Use HTML5 elements
  • Link for routing, button for everything else
  • Keyboard nav, arrow keys
  • Color contrast
  • Image alt text
    • <img src="elmo.png" alt="" role="presentation" />
• ember-component-attributes
• #topic-a11y

Everything they didn't tell you about the Ember Community by Jessica Jordan

Jessica provides an exhaustive overview of the Ember.js ecosystem and Emberista subculture.

• Video
• Slides
• Subculture
  • Emberistas, subset/subculture of JavaScript community
• Growth in @angular/cli download counts
• Top addons on Ember Observer
• ember-rickroll 🧌
• Ember Request For Comments (RFC) process
• Quest issues concept
  • Example: Ember Data
• Ember.js status board
• Adoption of RFC process by React
• Ember.js Slack Community
  • #give-wrjblue-a-beer
• Rapidly growing ember-cli-typescript adoption
• Email newsletters
  • Ember Weekly
  • Ember.js Times
• Offline
  • EmberConf
  • EmberFest
  • EmberCamp
  • Meetups
• Ember Women Helping Women program
• (not part of talk, related essay) Melancholy of Subculture Society

The Next Generation of Testing by Tobias Bieniek

Tobias introduces new, elegant testing APIs in Ember.

• Video
• Slides
• .andThen() vs async/await
• ember-native-dom-helpers
• @ember/test-helpers
• Grand Testing Unification RFC
• Codemods
  • ember-native-dom-helpers-codemod
  • ember-qunit-codemod
  • ember-test-helpers-codemod
• Test loading states: await waitFor('.loading-spinner');
• ember-test-selectors
• DOM assertion library: qunit-dom

Say More by Jamie White

Jamie examines test abstractions, and how one might hide details and edge cases behind a less powerful test language.

• Video
• Slides
• Access via accessibility
• Rule of Least Power
• Babel plugin for generating keyboardClick test
• say-more app demonstrating concepts from talk

Who Moved My Cheese? Ember's New Filesystem Layout by Matthew Beale

No summary yet. Open a PR!

• Video
• Slides - Not uploaded yet. Submit a PR if you find it!
• Ember.js Community Survey
• Module Unification RFC
• Codemods
  • ember-cli/ember-modules-codemod
• ember-optional-features
• Concepts
  • Colocation
  • Local lookup / isolation
  • Addon namespaces
    • {{gadget-tools::list}}
  • Compatibility between Module Unification layout and classic layout
• schedule.emberconf.com module unification app
• Quest issue, module unification: final cut

Mastering the Art of Forms by Danielle Adams

Danielle dives into component and data design for use in form UI and UX.

• Video
• Slides - https://slides.com/danielleadams/art-of-forms-ec18
• Design questions
  • Field type
  • Required
  • Dependency between inputs
• Data-loading component using willRender
  • Retries with ember-concurrency
• ember-cp-validations
• Concerns
  • Built-in validation in HTML5 inputs
  • Tab navigation order that makes sense
• Blue Apron - form examples on the site

How To Build A Bonfire: On Training and Hiring New Devs by Taylor Jones

No summary yet. Open a PR!

• Video
• Slides
• Mythical Man Month
  • Can't throw people at a problem... or can you
• Help your team become skilled at Ember
• "...context of a developer's past affects how they understand the future..."
  • Example: React vs. Angular background
• Have a style guide
  • Not just syntax, but how to do things

Living Animation by Edward Faulkner

mind blown

• Video
• Slides
• Animation approaches
  • Tweening
  • Procedural animation: rules and physics models in games
• liquid-fire
  • Separation between app logic and animation
  • Establish rules (like in games) and let motions emerge
• ember-animated, "Glimmer"-ization of liquid-fire
• ef4/living-animation

Day 2

Talks

The Future of Data in Ember by Dan Gebhardt

No summary yet. Open a PR!

• Video
• Slides
• Links and notes:
  • None yet. Open a PR!

Smartphone Symphony by Gavin Joyce

No summary yet. Open a PR!

• Video
• Slides - Not uploaded yet. Submit a PR if you find it!
• ember-present

Reuse, Recycle: One Team's Journey From Projects to Products by Sarah Bostwick

No summary yet. Open a PR!

• Video
• Slides - Not uploaded yet. Submit a PR if you find it!
• http://www.animalancestry.com/
• Write the Docs
• Sarah Mei's "refactor without permission" talk

Deep Dive on Ember Events by Marie Chatfield

Marie offers a lucid explanation of the subtle differences between DOM event and Ember event handling.

• Video
• Slides
• Distinguish between DOM event listeners and Ember event listeners
  • DOM event listener (notice on* event syntax): <div onclick={{action 'handleClick'}}>click me</div>
  • Ember event listener: <div {{action 'handleClick'}}>click me</div>
    • Ember event listeners don't receive the native DOM event
• Deep Dive on Ember Events blog post from Marie
  • interactive event demo
• event_dispatcher.js
• Pick one and stick with it
• DOM event listeners fire before Ember event listeners

Building a Memex in Ember by Andrew Louis

Andrew demos his impressive life events database and graph query language and UI. Also his history of eclectic burrito consumption.

• Video
• Slides
• Vannevar Bush
• As We May Think essay
• Memex
  • Human brain creates associations, memex creates associations mechanically
• "...brain gets the same stack that you had when you were solving this problem..."
• Quantified Self
• ember-d3
• Mapbox GL JS
• Addons used
  • ember-in-viewport
  • ember-electron
• Douglas Engelbert
• @darkpatterns for inefficient time usage
• "Keep your side projects weird"
• https://hyfen.net/memex/

Brief interlude from sponsor LinkedIn

...

Prying Open the Black Box by Godfrey Chan

Godfrey explains debugging techniques by making analogies to the Hawaii missile false alarm and Columbia disaster. He also gives an overview of Chrome Devtools tricks for debugging Ember apps.

• Video
• Slides
• Read stack traces from top to bottom
• Use debugger to freeze time, then go up and down stack
• Blackboxing stack frames to hide frames you don't want
• Chrome DevTools tricks
  • Conditional breakpoints in chrome devtools
  • Breakpoint on Ajax request
  • Right click & continue to here
  • import { assert, debug } from '@ember/debug';
  • "Continue to end" to escape breakpoints in for loop
  • Ember Inspector
  • Right click -> Show function definition
  • Break on DOM subtree modifications

Minitalk: Contributor Rally by Sean Massa

Sean rallies the crowd and lists the various ways people contribute to the Ember.js community.

• Video
• Slides
• all-contributors
• Let's All Build a Hat Rack
• 12 Reasons I Still Choose Ember.js by Ryan Tablada (rtablada)

Minitalk: Toyota's Shared Component Library by Tony Ward

Tony presents Toyota's shared component library, named "Loom".

• Video
• Slides
• Toyota Production System

Minitalk: Lightning Thoughts on Lightning Deploy by Christina Kung

Christine presents on how ember-cli-deploy helps with deployment on Conde Nast's built-in-Ember CMS "Copilot".

• Video
• Slides - Not uploaded yet. Submit a PR if you find it!
• Addons
  • ember-cli-deploy
  • ember-cli-deploy-lightning-pack

Minitalk: Ember CLI Addon Docs by Sam Selikoff

Sam Selikoff presents ember-cli-addon-docs, a standard documentation solution for Ember addons.

• Video
• Slides
• Similar documentation sites
  • ember-cli-mirage (original)
  • ember-power-select
  • ember-cli-deploy
• Docs sites that are more animated
  • liquid-fire
  • ember-concurrency
• Examples of ember-cli-addon-docs sites
  • ember-data-storefront

Minitalk: Let Me Ember This for You by Serena Fritsch

Serena presents on her experience rewriting the Ember.js deprecation page in Ember.

• Video
• Slides
• broccoli-static-site-json
• ember-learn/deprecation-app

Creating Fluid App-Like Experiences With Ember by Nick Schot

No summary yet. Open a PR!

• Video
• Slides - Not uploaded yet. Submit a PR if you find it!
• Addons
  • ember-mobile-core
  • ember-mobile-menu
  • ember-mobile-bar
  • ember-mobile-pane
• Mobile approaches
  • PWA
  • Corber/Cordova: hybrid approach, load Ember app into WebView
• Demo app

Shining a Light (closing keynote) by Saron Yitbarek and Vaidehi Joshi

Saron and Vaidehi discuss community building, and how to build inclusive commmunities (without the jerks). More pink, 3 exclamation points minimum!!!

• Video
• Slides
• Weekly #codenewbie Twitter chats
• basecs Medium publication
• "No community is truly inclusive"
• Codeland conference
• Code Newbie podcast
• basecs podcast
• Lending Privilege talk by @anjuan at RubyConf
  • @anjuan
• "If I don't see them, they must not exist"