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!
See photos here. Pictures were taken around 1 PM PST on Wednesday March 14.
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/awaitin tests- JS module api
- Computed properties, use es5 getters
- ES6 classes
- Decorators
- Editor integration
- Fragment components, empty tagName
@trackedproperties, autotracking dependencies@argssyntax 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
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/clidownload 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
- Rapidly growing
ember-cli-typescriptadoption - Email newsletters
- 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()vsasync/awaitember-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
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
keyboardClicktest say-moreapp 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-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
- 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
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
- 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 ofliquid-fire- ef4/living-animation
The Future of Data in Ember by Dan Gebhardt
No summary 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
- 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
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/
...
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".
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-deployember-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.
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
- 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
- "If I don't see them,
they must not exist"
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent