Frontend First

Tom Preston-Werner joins Sam and Ryan to talk about some of the architecture decisions behind Redwood JS, a recently released full-stack JS framework he's been working on for more than a year. Tom talks about how Redwood's Services provide a first-class layer of abstraction on top of your backend data models for your application's business logic, why Redwood went all-in on GraphQL, and how the framework is poised to take advantage of future improvements coming to serverless infrastructure. Topics include:- 0:00 – Rails' influence on Redwood- 8:00 – How Redwood Services keep your backend code organized- 12:04 – The decisions driven by the desire to write React on the frontend- 22:57 – Deep dive into Redwood Services- 30:58 – Why Redwood uses GraphQL- 44:37 – Caches & invalidation- 55:52 – Why Cells are more than Hooks- 1:07:02 – How databases can make their way into the JAMStack Links:- [Redwood JS](https://redwoodjs.com/)- [Tom on Twitter](https://twitter.com/mojombo)

Sam and Ryan talk about the unique aspects of ES modules that have driven the recent explosion of innovation in the frontend build tooling space, giving rise to tools like Snowpack and Vite. They also chat about their desire for a more integrated frontend ecosystem that would make adding things like auth to frontend apps easier, as well the impressive web-based drawing tool Excalidraw. Topics include:- 1:16 – ES modules- 14:09 – Why do we bundle?- 20:47 – Modules are stateful singletons, and the benefits of dependency injection- 35:12 – Desire for an integrated JS environment- 50:41 – Excalidraw Links:- [Sam's video on ES modules](https://youtu.be/5F_k9q9HbAc)- [Guillermo Rauch on Static First using Serverless Frontends](https://www.serverlesschats.com/50)- [Excalidraw](https://excalidraw.com)

Sam and Ryan read and discuss Tom MacWright's recent article "Second-guessing the modern web," as well as Rich Harris's response "In defense of the modern web." The articles respectively argue against and for the JavaScript-centric approach to building websites that has taken root over the past ten years and debate issues of performance, architectural complexity, and user experience. Topics include:- 6:30 – "Second-guessing the modern web" by Tom MacWright- 52:27 – Dan Abramov's thoughts on Twitter- 58:50 – "In defense of the modern web" by Rich Harris Links:- ["Second-guessing the modern web" by Tom MacWright](https://macwright.org/2020/05/10/spa-fatigue.html)- [Dan Abramov's thoughts on Twitter](https://twitter.com/dan_abramov/status/1259614150386425858)- ["In defense of the modern web" by Rich Harris](https://dev.to/richharris/in-defense-of-the-modern-web-2nia)

Sam and Ryan grapple with the way useEffect nudges you to build UIs. They discuss whether JavaScript object identity is a good proxy to use for business logic equivalence, whether useEffect leads to more correct code, and then they chat about some of the ways React developers sidestep useEffect when the declarative programming model that Hooks impose upon them is not a good fit with their app's business logic. Topics include:- 11:39 – JavaScript identity vs. business logic identity when working with useEffect

Sam and Ryan chat about how and why framework APIs get used and abused. Ryan also shares his experience working with AWS Amplify on a side project. Topics include:- 3:17 – How useEffect can be confusing in high-level app code- 21:05 – Immediate mode GUIs- 32:40 – Who's responsible when developers misuse framework APIs?- 46:40 – AWS Amplify- 1:14:25 – Our ideal stack Links:- [Immediate mode GUIs - Go Time #128](https://changelog.com/gotime/128)- [AWS Amplify](https://aws.amazon.com/amplify/)- [Begin.com learn](https://learn.begin.com/)

Sam and Ryan try to unpack the meaning of JAMstack. They discuss the constraints of the architecture, why it's confusing to think of it as an application stack, the implications it has for app cachability, and whether the Twelve Factor App that Heroku introduced in the Rails-dominated era of web development might be a better way to think about this new paradigm. Topics include:- 0:00 – Building Optimistic UIs- 13:45 – Immutable assets vs. mutable HTML- 36:05 – JAMstack, Twelve Factor Apps, and leveraging CDNs Links:- [Sam's Free Egghead Collection: Create an Optimistic UI in React with SWR](https://egghead.io/lessons/react-optimistically-update-swr-s-cache-with-client-side-data?pl=create-an-optimistic-ui-in-react-with-swr-1024)- [SWR on GitHub](https://github.com/zeit/swr)- [The Twelve Factor App](https://12factor.net/)

Topics include:5:30 - Gatsby, six months later8:10 - Mirage REPL11:50 - Next Link15:10 - Render props vs. Hooks24:05 - Vercel27:47 - Twin.macro38:50 - Learning CSS grid through Tailwind48:59 - Node deps, devDeps, and peerDepsLinks:Mirage REPLNext Link API docsVercelTwin.macroTailwind CSS grid

Sam and Ryan tell listeners about the upcoming rebrand of the EmberMap Podcast.

Topics include:6:00 – Adding Cypress tests to the Mirage Inspector14:00 – Lazy page generation, incremental rebuilds and cache stampedes with Next.js24:51 – CDNs & surrogate keys38:00 – Will global databases obviate the need for CDNs?42:23 – Gatsby Cloud's ability to build surrogate keys from GraphQL queries48:48 – Gatsby Cloud's Preview Mode50:30 – Will hosting-only platforms like Netlify and Heroku become too generic?53:43 – Is there a tension between Next/Gatsby's per-page model and SPAs?Links:Working on the Mirage Inspector Apr 7, 2020Working on the Mirage Inspector Apr 14, 2020FullStack Radio #137: Tim Neutkens - Continuing to Innovate with Next.js 9.3JS Party #122: What's new and what's Next.js with Guillermo Rauch from ZEITJS Party #117: Catching up with Gatsby with Dustin Schau

Sam and Ryan discuss what has driven JavaScript adoption on the web over the past 5-10 years, and what implications those drivers have had for the tools and frameworks we work with today. They also talk about why it's still so hard to build good SPA experiences on the web. Topics include:- 5:10 – Finding real-world pain points- 8:44 – Mirage Inspector's serverless backend- 15:30 – Not being happy with our stack- 18:38 – Why on SPAs on the web tend to be so awful?- 30:37 – What has driven JS adoption?- 45:42 - GraphQL vs Rails 5 years in- 49:10 – SWR and a useResource hook Links:- [Tailwind CSS Tips, Tricks + Best Practices](https://www.youtube.com/watch?v=nqNIy8HkEQ8)- [JavaScript Deployments with Brian LeRoux](https://softwareengineeringdaily.com/2020/03/04/javascript-deployments-with-brian-leroux/)- [SWR, Zeit's data-fetching library for React](https://github.com/zeit/swr)

Sam and Ryan talk about the tradeoffs between shipping a single bundle of code vs. the route-based code splitting approach used by many tools like Gatsby and Next. They also talk about their recent experiences building with React, and whether web developers should compete with native experiences or embrace what the web has to offer. Topics include:- 2:38 – In React, there are no components- 13:45 – The feeling of momentum in React- 23:33 – SPA bundles vs. per-page code splitting- 45:33 - Conceptual code splitting, and web experiences vs. native experiences- 1:06:30 – React.Children utilities Links:- [Domain Modeling with Mirage JS training](https://www.youtube.com/watch?v=lfDBb0Ar-rc)- [Mirage JS Inspector Livestream 1](https://www.youtube.com/watch?v=WTDj7MXzejc)- [Mirage JS Inspector Livestream 2](https://www.youtube.com/watch?v=odcfQAwYGrc)- [Mirage JS Inspector Livestream 3](https://www.youtube.com/watch?v=knSI60CTZ-U)

Topics include:0:44 - Tailwind UI4:27 - Framework-agnostic tools11:44 - Logux33:31 - Next, code on the edge, static websites, and cachingLinks:Software Engineering DailyTailwind UILoguxNext.js 9.3

Yehuda Katz joins Sam to talk about the strategies Ember's developed to keep the majority of the community on recent versions of the framework for more than 8 years. He talks about lessons learned from the 1.13 upgrade, how the core team thinks about API experimentation vs. community fragmentation, and the approach Octane is taking to enable frontend developers that know HTML and CSS to ship interactive sites with Ember. Topics include:- 5:15 – What experiences led Ember to prioritize bringing the entire community along for upgrades and changes to the programming model- 21:22 – Why open source libraries shouldn't couple breaking changes to conceptual changes- 31:30 – How to think about the tradeoff between fragmentation and experimentation- 40:00 – How Ember is exposing more low-level primitives while still emphasizing its higher-level APIs- 45:01 – What mattered to Yehuda when he became a programmer, and how he's bringing that to the Ember community- 1:02:20 – Why Octane embraces HTML- 1:12:04 – What type of developer Octane targets- 1:24:22 – What the modern version of Rails' blog in 15 minutes could look like Links:- [Together: The Merb Story](https://yehudakatz.com/2020/02/19/together-the-merb-story/), Yehuda Katz- ["We're the Together Framework"](https://yehudakatz.com/2020/03/09/the-together-framework/), Yehuda Katz- [Coronavirus will also cause a loneliness epidemic](https://www.vox.com/2020/3/12/21173938/coronavirus-covid-19-social-distancing-elderly-epidemic-isolation-quarantine)

Topics include:- 0:00 - What is Faktory?- 2:28 – Why might I need a background job?- 13:26 – Why did you make Sidekiq?- 16:15 – What lead to Faktory?- 24:02 – Why'd you use Go to implement Faktory's server?- 25:36 – Who is Faktory for?- 31:58 – What's the most interesting thing you've learned about architecting background job systems?- 36:24 – How do you see job queuing work in a serverless world?- 41:23 – What are some of your thoughts on open source sustainability?- 46:48 – What makes a library productizable?- 48:30 – Were you thinking entrepreneurially when starting Sidekiq?- 53:30 – Could open source sustainability be solved by a marketplace or middleman?- 55:14 – How has your business model and financial incentives affected the development of your open source libraries?- 1:00:30 – How do you think about API additions and feature requests to Sidekiq? Links:- [Faktory](https://github.com/contribsys/faktory)- [Sidekiq](https://sidekiq.org)- [Mike on Twitter](https://twitter.com/getajobmike)- [Mike's blog](https://www.mikeperham.com)- [Building a $1 Million Business Solo with Mike Perham of Sidekiq](https://www.indiehackers.com/podcast/016-mike-perham-of-sidekiq)

Topics include:- 6:00 - Exploring Next.js's architecture- 22:33 - Is runtime SSR an antipattern?- 44:04 - Are there any downsides to this architecture?- 1:11:25 - React's single shot SSR vs. Ember's asynchronous FastBoot rendering Links:- [CAP theorem](https://en.wikipedia.org/wiki/CAP_theorem)- [Tweet from Guillermo: "Most use cases of SSR are better served by SSG"](https://twitter.com/rauchg/status/1226353359759634432)

Topics include:- 3:33 – Is usePrevious a bad hook?- 14:13 – Does declarative code make sense for app logic that's about state transitions, like animations?- 40:04 – Dependabot shifts some of the app maintenance burden from the app developer to the ops team. How might CI providers help solve these new devops issues?- 51:43 – GitHub actions Links:- [React Spring](https://www.react-spring.io)- [Framer Motion](https://www.framer.com/motion/)- [Dependabot](https://dependabot.com)- [GitHub Actions](https://github.com/features/actions)

Topics include:- 2:46 – Launching Mirage JS!- 10:17 – Feeling empowered bringing Mirage to the wider JS ecosystem, and what's next for Mirage- 19:40 – A Mirage tutorial + video series- 19:30 – GraphQL support in Mirage- 30:13 – TypeScript support in Mirage- 37:25 – Node support in Mirage Links:- [Mirage's new homepage](https://miragejs.com)

Topics include:- 4:45 - Building out Mirage's new homepage. SVG positioning.- 15:42 - CSS Grid for layouts- 19:36 - Update on launching Mirage JS. Adding types to Mirage.- 24:09 - Learning about idempotence through React Spring. What to do when UI isn't a function of state.- 52:40 - Sharp tools vs. high-level APIs Links:- [React Spring](https://www.react-spring.io)- [Small, Sharp Tools](https://brandur.org/small-sharp-tools)

Topics include:3:17 - Refactoring to Tailwind defaults11:17 - What exactly are Container components?17:35 - Marginless components23:40 - Grids25:50 - What you can learn by using Tailwind defaults41:00 - Using Mirage tests to re-create development scenarios50:45 - Frontend FirstLinks:Tailwind CSSReactiveConf 2019 - Mark Dalgleish: Rethinking Design PracticesFrontend First Development

Topics include:- 0:40 – Which concepts should a framework be responsible for teaching?- 7:20 – What does it actually take for someone to start using a framework? And Vue's multiparadigm approach.- 16:32 – What if Ember Data wasn't part of Ember?- 29:50 – Functional digression- 37:00 – Back to Ember Data!- 43:34 – When paradigms conflict with each other- 49:46 – Back to Ember Data, again! Links:- [Vue composition API](https://vue-composition-api-rfc.netlify.com)- [MobX](https://mobx.js.org/README.html)

Topics include:- 5:41 – Hasura, React, URQL + Formik = Nutrition app- 44:51 – React to the Future by Jordan Walke Links:- [URQL](https://formidable.com/open-source/urql/)- [Formik](https://jaredpalmer.com/formik)- [Reach Dialog](https://reacttraining.com/reach-ui/dialog)- [Dan Abramov's tweet on controlled/uncontrolled components](https://twitter.com/dan_abramov/status/1200436185426006017)- [React to the Future - Jordan Walke](https://www.youtube.com/watch?v=5fG_lyNuEAw)- [Let's Program Like It's 1999 - Lee Byron](https://www.youtube.com/watch?v=vG8WpLr6y_U)- [Functional Programming in 40 Minutes - Russ Olsen](https://www.youtube.com/watch?v=0if71HOyVjY)- [Reason ML](https://reasonml.github.io)

Topics include:0:00 – Livable code with Ember3:09 – Speeding up Ember builds, and bugs with React rebuilds7:09 – Undoing bad abstractions11:30 – Building a mobile nav with React Spring + Reach Modal18:48 – Documentation: Guides vs. How-tos vs. Examples34:40 – Composability, and awareness of React's children vs. Ember's yield38:30 – Structural vs. reusable components54:54 – UI Testing1:03:04 – Does advice for building good libraries transfer to buiding good apps?Links:What nobody tells you about documentation, by Daniele ProcidaReact SpringUsing Composition in React to Avoid "Prop Drilling", by Michael JacksonMirage and Cypress Quickstart

Topics include:- 1:46 – Exploring the React paradigm- 11:45 – How have your opinions on UI dev changed since starting Ember?- 16:00 – How React's render functions and Ember's templates both solve the same problem: how to restrict the rendering code that users write- 34:03 – JavaScript's multiparadigm approach: OOP + functional- 40:13 - Hooks and the importance of lifecycle entanglement- 46:15 – Do Hooks succeed in bringing the ideas of declarative rendering to our JavaScript code?- 53:58 – The ES module spec, ES imports, and ES modules vs. CJS modules- 1:04:55 – Are TypeScript users at risk of the same kinds of syntax collisions that CoffeeScript users once were?- 1:10:10 – TypeScript now doesn't ship unstable features. (e.g. Optional chaining is stage 3)- 1:15:35 – Yehuda's take on stage 0 through stage 4 ECMAScript proposals- 1:23:39 – What's missing from UI development? And the difference between paradigms and abstractions.- 1:31:00 – Ember's original sin was push-based reactivity. Pull-based is how programs work.- 1:40:30 – Ember needs a new lifecycle entanglement primitive, that borrows concepts from both Hooks and Ember Concurrency tasks- 1:57:07 – How do you feel about UI development in 2019? Links:- [No Silver Bullet](http://worrydream.com/refs/Brooks-NoSilverBullet.pdf), by Fred Books- [React Hook Pitfalls](https://www.youtube.com/watch?v=VIRcX2X7EUk), by Kent C. Dodds

Topics include:- 0:32 – React is hard!- 7:55 – Should we be thinking about render cycles while writing React?- 30:08 – How much objective coding advice is there?- 39:23 – The Dark language + platform, and how concurrent languages can work against serverless architecture- 57:57 – Deployless architecture- 1:02:25 – Auth in Hasura Links:- [Dark Lang with Ellen Chisa and Paul Biggar](https://softwareengineeringdaily.com/2019/10/21/dark-lang-with-ellen-chisa-and-paul-biggar/), on the Software Engineering Daily podcast- [The Dark language + editor](https://darklang.com/)

Topics include:- 0:57 – Wanting to learn more about GraphQL- 14:41 – Constraints, theory and reality in GraphQL and REST APIs- 21:54 – What matters when choosing technology?- 35:06 – Can GraphQL queries and types replace traditional ORMs?- 48:47 – Why did Rails and other technologies become popular? Does it matter?- 1:00:48 – Is there objectively true advice in programming? Links:- [The Bike Shed # 215: Start With People](https://bikeshed.fm/episodes/215)

Topics include:- 2:31 – Tailwind, PostCSS, and low-level vs. high-level tools- 13:12 – Mirage JS and Cypress- 13:55 – Ember 3.13 and Octane- 15:28 – Ryan's experiencing upgrading EmberMap from 3.4 to 3.12- 20:19 - ES Modules, and learning that imports are not code- 42:12 – React and useEffect, and the difference between reads and writes vs. rendering and event handlers- 1:00:50 – Object-oriented vs. functional programming in JavaScript Links:- [Ember 3.13 Release (Octane Preview)](https://blog.emberjs.com/2019/09/25/ember-3-13-released.html)- [How to upgrade an Ember App or Addon](https://embermap.com/video/how-to-upgrade-an-ember-app-or-addon)- [Rich Harris and Edward Faulkner Twitter thread about ES module design](https://twitter.com/Rich_Harris/status/1176509180951322624)- [Twitter thread about ES module execution order](https://twitter.com/samselikoff/status/1182485014815993856)- [Sam Selikoff on Twitter](https://twitter.com/samselikoff)- [Ryan Toronto on Twitter](https://twitter.com/ryantotweets)

Topics include:- 0:00 – Dealing with asynchrony and persistence in Vue- 8:56 – Thoughts on Vue's APIs, and how they compare with React and Ember- 22:20 – "Magic" in UI frameworks vs. server-side frameworks- 27:17 – Build work in Mirage JS, and a new passthrough API- 38:26 - How opinionated should project documentation be?- 50:40 - Edward Faulkner's talk on compilers, abstractions, ES modules, and Embroider Sponsors:- [Next Release](https://www.nextrelease.io/ember/), mention EmberMap when you sign up for a trial and get 10% off Links:- [Mirage JS at ReactNYC S3:E8, Nov 7](https://www.meetup.com/ReactNYC/events/264933125/)- [Mirage JS](https://miragejs.com)- [Ember NYC September 2019 - Octane, Blockchain & Concurrency, Compiling Ember](https://www.youtube.com/watch?v=QClGEoHdQKk)- [Sam Selikoff on Twitter](https://twitter.com/samselikoff)- [Ryan Toronto on Twitter](https://twitter.com/ryantotweets)

Topics include:- 0:39 – The "Weekend Warrior" technology adoption hypothesis- 6:55 – Gatsby as a soft intro to GraphQL- 8:55 – Building a GraphQL backend with Hasura- 18:08 – GraphQL mutations- 21:47 – Mocking out GraphQL in Mirage- 45:03 – Gotchas when using backends as a service- 49:47 – DX and user success vs. "correct" technology choices Sponsors:- [Next Release](https://www.nextrelease.io/ember/), mention EmberMap when you sign up for a trial and get 10% off Links:- [Hasura](https://hasura.io)- [graphql-js](https://graphql.org/graphql-js/)- [darklang](https://darklang.com)

Topics include: 0:53 – Metaphysics and JavaScript by Rich Harris, and declarative side effects 15:26 – An Ember example that would be improved by hooks and declarative side effects 23:46 – Pitfalls and escape hatches when using hooks 35:40 – Rich's argument that rendering isn't even a declarative function of state, let alone side effects 41:42 – Deeper dive into useEffect docs 1:01:41 – Thought experiment on effects that sync with different data stores Sponsors: Next Release, mention EmberMap when you sign up for a trial and get 10% off Links: Metaphysics and JavaScript, by Rich Harris React's useEffect

Topics include: 2:41 – Playing with Typescript 10:13 – Thoughts on Ember's decision to expose Properties vs. Attributes 32:09 – "How long will this take?" 45:15 – Debugging slow Mirage factories Sponsors: Next Release, mention EmberMap when you sign up for a trial and get 10% off Links: Shape Up Copy, Paste, Repeat Podcast

Topics include: 1:37 – APIs are about Policy, by Steven Wittens 5:47 – Part 1: RESTless API 49:16 – Part 2: Regressive Web Apps 1:08:19 – Part 3: GraftQL Links: APIs are about Policy, by Steven Wittens

Topics include: 0:00 – Unique keys for lists in React and Ember 8:40 – Why Handlebars feels safe 9:34 – Solving a stale state React hooks bug, and how Ember avoids this via object references 24:29 – ESPN's website and self-imposed technical constraints 28:10 – React in Codesandbox 36:53 – Tradeoffs between "magic" in a framework vs. learning how to wire things up yourself - especially in a fast-moving ecosystem like JavaScript 50:35 – Hooks vs. components, and clarity in boundaries 53:29 – Pairing with Tuple experience Listener questions: 55:43 – How can you limit FastBoot from turning user-specific bugs into bugs that take down your entire production app? (@davewasmer) 1:10:47 – What's the future of web components? (selbyk) Sponsors: TrueCoach, check out their engineering culture and hiring pages Links: Sam's tweet on list keys in React Codesandbox StaticKit.com Tuple, an app for remote pairing Stencil.js APIs are about policy

Topics include: 5:26 – Bringing Mirage to a wider JavaScript audience 17:14 – Setting up tests in Gatsby, and why wiring up boilerplate code is not always bad 28:56 – React's children API, MDX, and template imports in Ember 39:17 – How extracting things in React feels compared to extracting things in Ember 42:30 – React's children, and constraints vs. flexibility 1:05:52 – API design, and letting someone feel the pain rather than telling them they can't do something 1:23:16 - Dynamic vs. static children Sponsors: TrueCoach, check out their engineering culture and hiring pages Links: Mirage.js Tom Dale's tweet on web components

Topics include: 2:45 – Using Gatsby to build miragejs.com 12:05 – Tradeoffs between low-level and high-level APIs 30:21 – Writing Gatsby data providers, and using GraphQL to query Gatsby's content mesh 41:33 – GraphQL vs. REST is wrong 44:16 – API design 58:45 – What's the best architecture for building modern UIs on the web? Sponsors: TrueCoach, check out their engineering culture and hiring pages Links: Mirage.js Gatsby GraphQL

Topics include: 1:35 – The benefit of no staging environments 10:14 – Using FastBoot without a runtime dependency, and pre-rendered SPAs 17:30 – Sponsor: TrueCoach is hiring! 23:02 – UI feedback, and Designing Fluid Interfaces by Apple 39:24 – Working with custom fonts, and typography lessons learned Sponsors: TrueCoach, check out their engineering culture and hiring pages Links: Percy Visual Regression Testing Launch Darkly Designing Fluid Interfaces, from Apple, WWDC 2018 The Inter typeface Refactoring UI

Topics include: 2:44 – What to do if your app depends on an unmaintained addon 26:15 – The workflow of designers who are also coders 32:31 – Why the status quo of web tooling is insufficient for multi-app workflows 41:46 – Side effects in React and Ember, and how Hooks help authors avoid making API mistakes Links: Ember CLI Deprecation Workflow Adopted Ember Addons Matthew Beale's tweet on improving library APIs

Topics include: 0:00 – Playing with React JS Using React after working with Ember for 5 years React's onboarding experience Why early success matters for OSS adoption 15:44 – Micro Frontends Comparison with service-oriented architecture Our experience using micro frontends at TED The tradeoffs that matter most to us 47:56 – Call for conversation: Ember-turned-React dev Links: Micro Frontends, by Cam Jackson

Topics include: 3:50 – Opinions on DHH's 2019 RailsConf keynote about sustainable open source 23:28 – Keeping tests dumb, dynamic tests, and TDD workflow tradeoffs 36:31 – Octane is not ready, and our conservative approach to adopting new tech 47:50 – Tailwind 1.0 53:23 – New series: Ember Animated Links: DHH's 2019 RailsConf keynote Crash Log podcast Robert Jackson's #EmberJS2019 blog post EmberMap's new series on Ember Animated series

Topics include: 2:26 - Ember's 2019 Call for Blog Posts, and a retro on last year's call 7:50 - Why Katie's looking forward to Embroider, Ember Data, and updates to the Router 10:52 - What the process is for "finishing" Octane 14:37 - Katie's experience on the Steering Committee 18:02 - The infrastructure behind Ember Try and Ember Observer 34:18 - Common anti-patterns in apps, like deeply nested components 39:18 - Katie's preference for acceptance tests over unit tests in UI development 42:50 - Katie's stack of choice for a brand new app 44:58 - A look into Ember Observer's Code Search feature 58:06 - How much test coverage there is across Ember's OSS Addons Links: Katie on Twitter Code All Day, Katie's consultancy Ember's 2019 Roadmap: Call for Blog Posts Ember Observer Ember Observer's Code Search by Michelle Santarsiero google/codesearch

Topics include: 4:25 – Causes of burnout other than overwork 9:02 – Finalizing Mirage 1.0 10:42 – Keeping your development environment stateless 21:00 - Unified APIs for backend and frontend data queries 42:28 – Tailwind 1.0 Links: Copy Paste Repeat Ep. 18 Twitter conversation between Trek and Sam on shared UI models Sam on Twitter Ryan on Twitter

Topics include: 4:23 – Overview of Omnimodal's tech stack 6:38 – Omnimodal's mission: to help cities manage transportation demand 16:10 – How to ingest open transportation data and present it in real time 21:43 – How graphics-heavy OpenGL and C++ apps can benefit from web tooling 31:06 – Why state machines are used in both video game and web development 34:55 – How JavaScript UI development compares to other paradigms 38:46 – Why Ember and Rails were chosen for Omnimodal's technology needs 42:09 – Using a prediction engine to improve on transportation schedules 44:56 - How Omnimodal gets data from its hardware trackers to the Rails server 50:55 – How services like Heroku and PubNub, custom AWS code, and the concept of a Data Lake help address scalability issues 56:40 – How deploys are coordinated across multiple services 59:47 - What the development process looks like for a multi-service tech stack 1:02:10 – What the complexity breakdown is between Omnimodal's frontend and backend 1:04:07 – Lessons learned on authentication while using Auth0 1:09:31 - Lessons learned on data modeling 1:12:21 – Tech choices, escape hatches, what's worked, and what hasn't 1:20:15 – Things Nathan loves about Ember, and things that are challenging Links: Nathan on Twitter Omnimodal.io PubNub GTFS feed specification Amazon Kinesis Amazon ElastiCache AWS AppSync Auth0

Topics include: 3:12 – Getting Mirage 1.0 out the door, Mirage's roadmap, and how other communities treat domain modeling 15:18 – Seth Godin's blog post on tribal marketing 27:08 – Sustainability and project management in open source 48:06 – What benefits do products actually unlock? Links: Ember CLI v1.0.0-beta.1 released "People like us do things like this" by Seth Godin Justin Jackson on Full Stack Radio Transistor.fm

Topics include: 0:00 – Letting your yes be yes, following through on your commitments, and paying attention to opportunity cost 6:40 – When Ember releases actually become LTS versions 9:13 – Why we need "test apps" when developing Addons 16:50 – How to use newer syntax when authoring Addons that support older Ember versions 22:07 – How angle brackets change our component implementations 31:46 – How to make the APIs of our domain components more portable 38:45 – How to reuse code that has implicit data dependencies, and the Halting problem Links: Mirage's example test apps Ember CLI Tailwind's example test apps Nested Angle Bracket video Ember Collapsible Panel

Edward Faulkner joins Sam and Ryan to chat about his work on Embroider, a new three-stage architecture that will power the next generation of the Ember CLI ecosystem. They also talk about myriad other topics, including Yarn Plug'n'Play, the benefits of debugging other people's code, how Ember is embracing the larger JavaScript ecosystem, and more. Topics include: 0:00 – What's hard about programming, why schools are bad at teaching math, and more 10:47 – Why computers should empower ordinary people, and how we can close the gap that exists between the technologically skilled and unskilled 22:12 – How the experience level of the median JavaScript developer affects tech choices made by the community 27:54 - The npm dependency graph and Yarn plug-n-play 36:24 – How to avoid making too big of a leap when improving software 41:58 – What Embroider is, and what problems it's focused on solving 46:10 – The three stages of Embroider and the V2 Addon format 1:00:15 – What Embroider enables, like tree-shaking unused Addon modules and route-level code splitting 1:21:08 – How to try Embroider out in your projects today 1:34:39 – How Ember is embracing the larger JavaScript ecosystem 1:39:35 - Why debugging other people's code is a great way to level up as a developer 1:48:28 - What Embroider's next steps are Links: Ed on Twitter Embroider Yarn Plug'n'Play

Derrick Reimer joins Sam and Ryan to chat about building his new real-time chat product Level as an SPA using Elm, Phoenix and GraphQL. He covers domain modeling in Phoenix, his experience building his first GraphQL API, type safety in Elm, and the data fetching patterns he's using to support his application's real-time functionality. Topics include: 2:01 – What is Level? What tech stack are you using to build it? 14:34 – Building the GraphQL API with Phoenix and Absinthe 37:40 – Building the frontend with Elm Links: Derrick on Twitter Level The Phoenix framework GraphQL Absinthe, GraphQL for Elixir The Elm language

Sam and Ryan continue their discussion from the end of Episode 54 about how much we actually rely on our test suites versus how much implicit trust we place in semver. They also talk about some new Ember Octane features as well as a data-fetching issue. Topics include: 2:00 – Do we trust our test suites? 10:00 – Breaking APIs in a changelog vs. in code 20:27 – Modifiers – they're kinda like mixins 37:17 – Named blocks 38:29 – Ember Octane & EmberConf trainings 43:15 – Fetching user-specific data in EmberMap's Video Views series Links: Chris Garrett's post on Modifiers Yehuda's Yieldable named blocks RFC Our Real-world Animations training repo Our Robust Data Fetching training repo

Chris Garrett joins Sam and Ryan to chat about what's coming to Ember in Octane, its first edition. Chris talks about how module unification, decorators, ES6 classes, named args, angle-bracket components, template imports, modifiers, and Glimmer components offer a cohesive new programming model for Ember.js developers. Topics include: 1:18 – De-scoping Module Unification from Octane 2:25 – Run-time APIs are coming to Octane, build-time APIs are being worked on 5:04 – What's the vision behind Ember Editions, and Octane in particular? 9:41 – What's the state of decorators? 15:43 – What can't you do with static decorators that you can with dynamic decorators? 19:18 – Why do we need decorators to use ES6 classes in Ember? 20:50 – Is it possible to lint for correct usage of named args and this-dot property access? 29:30 – How did Modifiers come about, and how do they obviate the need for lifecycle methods? 38:00 – Are you concerned that a player as big as React has abandoned ES6 Classes in favor of functions? Do you think there's anything to their argument that classes are fundamentally confusing? 43:49 – What's the thinking behind the Modifier Manager API that just landed? 52:04 - Could you expand on a point you made in your blog post about how Ember.set leaks state management all across your app? 58:50 – What's the status of Glimmer components? Links: Chris Garrett on Twitter Chris's blog Modifier managers RFC Decorators for JavaScript TC39 proposal ember-on-modifier

Topics include: 0:00 - Module unification 1:20 - Component resolution 5:45 - Why we don't use angle brackets 9:35 - SPAs should do everything a server app can do 10:15 - Ember's Router 11:00 - Replicating the server's "fresh data" behavior 17:15 - Reloading stale data 23:50 - Fetching data 23:50 - Getting Mirage working with React and Vue 26:10 - Data loading components 29:41 - Knowing what queries are currently rendered 32:15 - Using cache keys to track what data is loaded 35:00 - Pushing data into the client with web sockets 39:00 - Describing Twitter's UI in queries 44:00 - When will data loading be abstracted away? 49:45 - Dependabot workflow 50:20 - Can you merge a PR from a bot if all the tests pass? 53:20 - Trust, but verify Links: Ember Community Survey ember-template-component-import Sam Selikoff on Twitter Ryan Toronto on Twitter

Topics include: 0:00 - Refreshing an Ember app when a new version is deployed 11:05 - When SPAs become too difficult 14:50 - Building an SPA never got as quick as we'd hoped 19:20 - You're now responsible for two applications 28:00 - Integration costs 32:00 - Architecture is easier within a single monolith 40:20 - Beginners should use the same tools as experts 40:50 - Rolling advanced solutions back into the framework 47:41 - Services that are used by both beginners and experts 52:32 - Can you start an SPA without making an API server decision? Links: Rails PR for multi database support Sam Selikoff on Twitter Ryan Toronto on Twitter

Topics include: 01:15 - Implementing Mirage's AddonDocs blog with GitHub issues 15:30 - Discussion forum vs. GitHub issues vs. blog comments 18:18 - Moving the blog post source to a GitHub issue 23:30 - Dynamic vs. static data, and implications for changing build-time data to run-time data. 27:40 - Downsides of run-time data 37:00 - SPA architecture and distributed systems. How does React/Vue "happy path" architecture differ from Ember's? 41:45 - Testing is the only true way to know if your dependencies work. 43:31 - Where does Ember pass the Celery Test, and where does it fail? Links: Artsy Engineering's blog post on using GitHub issues for blog post comments Utterances Tailwind's discussion forum Basecamp's vocabulary doc, from their handbook