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
Other Blogs & Highlights
Photos / Videos of Event
Job board
See photos here. Pictures were taken around 1 PM PST on Wednesday March 14.
Day 1
Talks
Tom Dale and Yehuda Katz
Keynote byOverall, 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
- Decorators
- Editor integration
- 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
Percy.io by Mike Fotinakis
Brief interlude from sponsorPercy.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
Melanie Sumner
Ambitious for All: Accessibility in Ember byBe 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
Jessica Jordan
Everything they didn't tell you about the Ember Community byJessica 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
:troll:- 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
- Rapidly growing
ember-cli-typescript
adoption - Email newsletters
- Offline
- EmberConf
- EmberFest
- EmberCamp
- Meetups
- Ember Women Helping Women program
- (not part of talk, related essay) Melancholy of Subculture Society
Tobias Bieniek
The Next Generation of Testing byTobias introduces new, elegant testing APIs in Ember.
- Video
- Slides
.andThen()
vsasync
/await
ember-native-dom-helpers
@ember/test-helpers
- Grand Testing Unification RFC
- Codemods
- Test loading states:
await waitFor('.loading-spinner');
ember-test-selectors
- DOM assertion library:
qunit-dom
Jamie White
Say More byJamie 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
Matthew Beale
Who Moved My Cheese? Ember's New Filesystem Layout byNo 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-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
Danielle Adams
Mastering the Art of Forms byDanielle 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
- Retries with
ember-cp-validations
- Concerns
- Built-in validation in HTML5 inputs
- Tab navigation order that makes sense
- Blue Apron - form examples on the site
Taylor Jones
How To Build A Bonfire: On Training and Hiring New Devs byNo summary yet. Open a PR!
- Video
- Slides
- Mythical Man Month
- Can't throw people at a problem... or can you
- 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
Edward Faulkner
Living Animation bymind 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 ofliquid-fire
- ef4/living-animation
Day 2
Talks
Dan Gebhardt
The Future of Data in Ember byNo summary yet. Open a PR!
Gavin Joyce
Smartphone Symphony byNo summary yet. Open a PR!
- Video
- Slides - Not uploaded yet. Submit a PR if you find it!
- ember-present
Sarah Bostwick
Reuse, Recycle: One Team's Journey From Projects to Products byNo 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
Marie Chatfield
Deep Dive on Ember Events byMarie 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
- DOM event listener (notice
- Deep Dive on Ember Events blog post from Marie
event_dispatcher.js
- Pick one and stick with it
- DOM event listeners fire before Ember event listeners
Andrew Louis
Building a Memex in Ember byAndrew 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
...
Godfrey Chan
Prying Open the Black Box byGodfrey 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
Sean Massa
Minitalk: Contributor Rally bySean 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)
Tony Ward
Minitalk: Toyota's Shared Component Library byTony presents Toyota's shared component library, named "Loom".
Christina Kung
Minitalk: Lightning Thoughts on Lightning Deploy byChristine 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
Sam Selikoff
Minitalk: Ember CLI Addon Docs bySam 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
Serena Fritsch
Minitalk: Let Me Ember This for You bySerena presents on her experience rewriting the Ember.js deprecation page in Ember.
Nick Schot
Creating Fluid App-Like Experiences With Ember byNo summary yet. Open a PR!
- Video
- Slides - Not uploaded yet. Submit a PR if you find it!
- Addons
- Mobile approaches
- PWA
- Corber/Cordova: hybrid approach, load Ember app into WebView
- Demo app
Saron Yitbarek and Vaidehi Joshi
Shining a Light (closing keynote) bySaron 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
- "If I don't see them,
they must not exist"