Frontend First

Sam and Ryan chat (on new mics!) about Ryan's recent video on declarative keyboard events, changes to EmberMap's FastBoot architecture, and some of Ryan's recent work on FastBoot testing. Topics: 0:00 – Ryan's video on declarative keyboard events; other declarative components that haven't been discovered 9:52 – Our evolving FastBoot architecture; which parts can be generalized; a high Lighthouse score; a long uncanny valley 29:11 – Sam's Mirage work, fixing bugs, approaching 1.0; Mirage as a tool to show off work; question for listeners, how do you show your work to your team? 34:51 – Ryan's work on FastBoot testing; how Mirage could work with FastBoot testing; the joy of ES6 classes and async/await in Node Links: Ryan's video on Declarative keyboard navigation: https://embermap.com/video/declarative-keyboard-navigation Ryan's WIP FastBoot testing addon: https://github.com/embermap/ember-cli-fastboot-testing

Jon joins Sam and Ryan to talk about his recent work on rehydration in FastBoot and all the creative ways we can use Codemods to automate the routine parts of our jobs. Topics: 0:00 – How Jon got into Ember at HashRocket 4:45 – Jon and Chase starting the EmberWeekend podcast 7:30 – Greenfield vs. brownfield projects at a consultancy 13:30 – Infrastructure complexities in Ember's ecosystem 18:07 – Jon's work on FastBoot rehydration 41:29 – Jon's work on Codemods & the new testing APIs Links: Jon on Twitter https://twitter.com/rondale_sc Jon's podcast Ember Weekend https://emberweekend.com/episodes Codemod CLI https://github.com/rwjblue/codemod-cli

Sam and Ryan chat about provider components in Ember, including the first renderless components they wrote, the different types of data components can provide, and the patterns of template composition that providers unlock. They also talk about the need for a unified API for styling Ember components. Topics: 0:40 – Our first provider components 10:12 – Using providers to isolate the business logic for a form 27:35 – Patterns of composition in templates 34:35 – How to constrain more flexible interfaces 39:55 – APIs for styling components

Jen talks to Sam and Ryan about her journey learning from and giving back to Ember, and how she keeps her community contributions sustainable by tying them back to personal goals and rewards. Topics: 7:00 – Learning Ember at General Assembly 9:00 – How did you go from learner to contributor? 13:25 – Thoughts on Slack, Stack Overflow and Discourse 18:12 – What advice do you have for folks looking to contribute back to Ember? 24:66 – What are some things you'd like to see change about Ember? 30:39 – What personal projects are you working on right now? 35:10 – Why do you think someone should start using Ember today? Links: Jen on Twitter: @jwwweber(https://twitter.com/jwwweber) The Ember Times: site

Sam and Ryan talk about their initial attempts to get Mirage running in Node, the benefits and workflows that it will unlock, some different approaches for using code in both the browser and Node, and how we might test FastBoot apps in the future. Topics: 4:28 – Getting Mirage to run in Express 21:58 – How to use addons like Mirage work in Node 42:53 – Testing FastBoot apps

Sam and Ryan talk about how to deal with building non-optimistic UIs using Ember and Ember Data, and how constrained visual design tools might help us build better UIs. They also answer some questions and talk about their current series on Functional CSS and Rendering tests. Topics: 0:00 – What's new on EmberMap 8:06 – Options for non-optimistic UI in Ember Data 22:34 – Visual programming Questions: 34:08 – What techniques do you have for authorization (not authentication)? 40:42 - How might you improve the developer experience of working with Ember Data? 50:14 – When can we get TypeScript in Mirage?

Sam and Ryan talk about bringing the ideas of declarative rendering over to our data layers, how easy it is for data to become stale in SPAs, and more stories from their recent adventures in FastBoot land. Topics: 0:00 – Declarative data fetching 18:50 – Stale data in SPAs 30:46 – FastBoot

Sam and Ryan chat about what to do when a node module breaks in FastBoot, how to best wrap 3rd-party libraries in an Ember Addon, and how to test the filesystem. They also answer some listener questions. Topics: 0:00 – Node modules in FastBoot 13:55 – Ember Addons that wrap 3rd-party libraries 19:07 – Testing the filesystem with Broccoli Test Helpers Q&A: 32:11 – How can I speed up my Ember CLI build times? 38:31 – What do you think about the Angle Bracket Polyfill? Would you use it? 42:08 – I'm building an app and I need to build it with skeleton screens. Do I use a model hook with loading states, do I use Ember Concurrency tasks? What approach should I take? 46:44 – I'm building a table, and each row has a bunch of CRUD actions – edit, delete, view. What are the best UI patterns for this? A few I'm considering: a cog that you click that exposes a dropdown menu; icons in the row; buttons in the row.

Sam and Ryan chat about some ideas around caching in FastBoot, different ways of prioritizing work, and the difference between easy things and hard things in Ember. Topics 0:00 – Caching & FastBoot 16:18 – Project process, workflow, bugs, features, and issue urgency 37:47 – Easy vs. hard things in Ember. Ember focusing on its strengths.

Toran talks to Sam and Ryan about his project Ember CLI Hot Loader, which is an implementation of component-based hot module reloading for Ember apps. Topics: 0:00 – Losing hot reloading when moving from handwritten CSS to functional css 2:16 – Why Toran wrote the Hot Reloader 4:45 – How the hot reloader leverages Ember CLI to reload components 8:31 – The need for hot reloading 14:56 – Are there situations where you don’t want to use the hot reloader? 19:05 – What’s the easiest way to try using the hot reloader today? 21:05 – Design vs. build mindset 22:30 – Engines aren’t currently supported 23:53 – How local state affects hot reloading 27:50 – Fast feedback is the primary motivation 34:05 – What are the next steps for Ember CLI Hot Reloader? 37:51 – What happens to a component’s transient state if it’s hot reloaded? 39:44 – How to help if you’re interested in hot reloading in Ember Links: Ember CLI Hot Loader Toran’s side-by-side hot reloading demo Bret Victor, Inventing on Principle