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 fra...

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 in...

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 incl...

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 bu...

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 mo...

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...

Topics include: 5:30 - Gatsby, six months later 8:10 - Mirage REPL 11:50 - Next Link 15:10 - Render props vs. Hooks 24:05 - Vercel 27:47 - Twin.macro 38:50 - Learning CSS grid through Tailwind 48:59 - Node deps, devDeps, and peerDeps Links: Mirage REPL Next Link API docs Vercel Twin.macro Tailwind CSS grid

Topics include: 6:00 – Adding Cypress tests to the Mirage Inspector 14:00 – Lazy page generation, incremental rebuilds and cache stampedes with Next.js 24:51 – CDNs & surrogate keys 38:00 – Will global databases obviate the need for CDNs? 42:23 – Gatsby Cloud's ability to build surrogate keys from GraphQL queries 48:48 – Gatsby Cloud's Preview Mode 50:30 – Will hosting-only platforms like Netlify...

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 h...

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...

Topics include: 0:44 - Tailwind UI 4:27 - Framework-agnostic tools 11:44 - Logux 33:31 - Next, code on the edge, static websites, and caching Links: Software Engineering Daily Tailwind UI Logux Next.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 inter...

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 serverles...

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/ra...

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)...

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](h...

Topics include: 3:17 - Refactoring to Tailwind defaults 11:17 - What exactly are Container components? 17:35 - Marginless components 23:40 - Grids 25:50 - What you can learn by using Tailwind defaults 41:00 - Using Mirage tests to re-create development scenarios 50:45 - Frontend First Links: Tailwind CSS ReactiveConf 2019 - Mark Dalgleish: Rethinking Design Practices Frontend 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!  ...

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)...

Topics include: 0:00 – Livable code with Ember 3:09 – Speeding up Ember builds, and bugs with React rebuilds 7:09 – Undoing bad abstractions 11:30 – Building a mobile nav with React Spring + Reach Modal 18:48 – Documentation: Guides vs. How-tos vs. Examples 34:40 – Composability, and awareness of React's children vs. Ember's yield 38:30 – Structural vs. reusable components 54:54 – UI Testing 1:03:...

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:1...

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://...

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 B...