React Round Up

*/ ?>

Latest Episodes:

RRU 079: State Machines and State Charts with Farzad Yousef Zadeh Sep 17, 2019

Show notes

Episode Summary Today’s guest is Farzad Yousef Zadeh, a developer from Iran with a unique path into computer programming. He started by studying astrophysics and aerospace engineering in college, then dropped out in his last semester because it wasn’t the right path. He then taught himself to code, working mostly in web programming and frontend development. Despite his change in course, Farzad remains passionate about observing the night sky. Farzad is here today to talk about the ideas in his talk Explicitness and Consistency in UI, where he talks about the difficulties of developing a user interface and how the experience can be improved by using state machines and state charts. He talks about his inspiration for the talk and how he has implemented state machines and state charts into his work. The panel backtracks and talks about the definition of state machines and state charts. A state machine, from an academic background, is a model for computing something. It's for managing and controlling, taking over branching and managing a finite amount of state declaratively. State machines are not so much about sharing or reusing, but about how your communicate a certain behavior. Despite the fact that event driven programming permeates the programming consciousness, thinking about state charts and state machines is actually more natural than it first appears. The panel explains how it’s the same principle as whiteboarding to solve a problem. Lucas asks how state charts are different from pure React. Farzad talks about how it’s important not to just treat your static states as first class, but also the transitions between them. Otherwise, you would end up with something that looks like a map with cities and towns, but no roads. Using statecharts and state machines makes testing an application much easier, and in some ways you let the machine test itself. The machine will know what to do with your states because you define the path, and the machine will take the path for you. They again talk about the difference between state machines and state charts. A state machine defines a finite set of states and defining the events that the machine can take and respond to when transitioning from state A to B. If you use only this, you will encounter a snag called ‘state explosion’ because not non-concrete things cannot be modeled. So, state charts were invented to compensate for this. A state chart brings the idea of an extended state, or the context and data you need to hold and reason from. Farzad talks about other types of machines and supports that exist for branching, entry actions, and exit actions. This is similar to the use effect hook in React. He gives examples of where you would use this logic and how it would be worked into frameworks. Farzad talks about how your machine is just a definition, a declarative model of how something is supposed to behave, and how having that separation between the definition of the logic and behavior vs the implementation of API has given us so much more freedom and portability The panel talks about how using state machines and charts is an investment in the long term maintainability of your code. They agree that using state machines and charts makes it easier to communicate with other developers, new team members, and even non developers. They talk about Cerebral.js and its contributions and model. As with everything in programming, state machines are not a silver bullet and don’t work in every situation. Farzad talks about situations where state machines can be unhelpful. It is still valuable to consider state machines and charts because it forces you to dedicate time thinking and organizing your thoughts so that you can build something maintainable that won’t just be thrown away. The panel discusses how thinking things out before starting to code can be beneficial. They finish by talking about how React Hooks has started them on the path to implement state machines and charts into their code. Panelists

David Ceddia
Lucas Reis
Leslie Cohn-Wein
Thomas Aylott

With special guest: Farzad Yousef Zadeh Sponsors

Sustain Our Software
Sentry use the code “devchat” for 2 months free on Sentry’s small plan
My Angular Story

Links

Follow DevChatTV on Facebook and Twitter Picks David Ceddia:

Reverse Interview

Thomas Aylott:

Lucas Reis:

How to Learn D3.js

Leslie Cohn-Wein:

Write Fewer Tests! From Automation to Autogeneration by David Khourshid

Farzad Yousef Zadeh:

Don’t Let Architecture Astronauts Scare You

Special Guest: Farzad Yousef Zadeh.
Advertising Inquiries: https://redcircle.com/brands
Privacy & Opt-Out: https://redcircle.com/privacy
Become a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

RRU 078: The Uncanny Valley with Håkon Krogh Sep 10, 2019

Show notes

Episode Summary Today’s guest is Håkon Krogh, and the panel is discussing his talk on lightning fast SSR React apps given at React Amsterdam. He gives a brief overview and defines his use of the Uncanny Valley (called the Valley of Lies in his talk). In this instance, the Uncanny Valley in programming occurs when everything in a website or application looks great, but none of the buttons work or users simply can’t connect. This is especially common when users try to connect to a site or app with their cell phone rather than a computer. The panel discusses what can be done. It’s important to begin by measuring the lag in your applications. Designing the progressive loading experience first is suggested as a solution, as well as organizing what loads first and using React and HTML for different parts of the app. It’s important to realize that some tools don’t work in every situation. The panel talks about the merits of Next.js. Next they talk about what kinds of applications require SSR that make the loading slow. They discuss the importance of SEO ratings and how it can affect your rank in a Google search. Services like Lighthouse can give you an SEO rating so that you can improve. Håkon and the panel talk about other ways to improve on the Uncanny Valley. It’s important to make sure that users have a way to use your site even if they’re stuck in the Uncanny Valley. One way to do this is to provide fallbacks so that if your React isn’t working, the site is still usable. They discuss the merits of micro frontends, using SSR for only part of the app, and reducing bundle size. Unfortunately there is no silver bullet, so solutions will vary by what you’re building. In spite of these setbacks, one of the great features of React is you don’t have to do everything in React. They discuss the emerging idea of shipping different JavaScript for different things and talk about some of the React-like alternatives available. Bridging the Uncanny Valley is vital because it is the reason many people are afraid of their computers, and a good user experience can make people gravitate towards your product. The show concludes with Håkon talking about things in the React community that are piquing his interest. Panelists

David Ceddia
Thomas Aylott

With special guest: Håkon Krogh Sponsors

Sustain Our Software
Sentry use the code “devchat” for 2 months free on Sentry’s small plan
GitLab | Get 30% off tickets with the promo code: DEVCHATCOMMIT

Links

Follow DevChatTV on Facebook and Twitter Picks David Ceddia:

Thomas Aylott:

Mindset by Carol Dwek

Håkon Krogh:

Bundlephobia

Special Guest: Håkon Krogh.
Advertising Inquiries: https://redcircle.com/brands
Privacy & Opt-Out: https://redcircle.com/privacy
Become a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

RRU 077: Reusing Code Responsibly with Andrey Okonetchnikov Sep 03, 2019

Show notes

Episode Summary Andrey Okonetchnikov is a specialist in frontend architecture and design systems. He runs his own consultancy and made the package lint-staged. Andrey has been in programming for 20 years and talks about his background, how he got into React, and why he started component-driven.io. Andrey has always been interested in design tools and design systems, it just wasn’t the right time because the right tools weren’t available. Since Andrey has been working in frameworks for 20 years and has watched them come and go, Lucas asks Andrey how he has seen the communication between developers and business owners evolve over that time. Andrey reflects on his first conference talk and believes that not much has changed, even if the tools have. His perfect interaction between developers and business owners would be codeless, and would instead draw his design on a napkin. This idea ties into Andrey’s ideas of creating things in primitives instead of wireframes. He relates his idea to the pattern philosophy of the building architect Christopher Alexander, the idea that specific design problems require specific solutions. He talks about since everything in React is a component, we can encapsulate a design decision into a component. Since the power of components is redistributing knowledge, the panel discusses how components promotes reusability, accessibility, and sustainability in code. However, Frankenstein components are the dark side of reusability. Andrey talks about the dynamic view of a design system that does reuse and how to make sure that it evolves cleanly. They discuss how much of can be planned in advance the first time you’re creating a component versus how much should you not try to think too far ahead and fix it when it comes up. They all agree that early abstraction can be almost as destructive as early optimization Panelists

Leslie Cohn-Wein
Thomas Aylott
Lucas Reis

With special guest: Andrey Okonetchnikov Sponsors

Sustain Our Software
Sentry use the code “devchat” for 2 months free on Sentry’s small plan
GitLab | Get 30% off tickets with the promo code: DEVCHATCOMMIT

Links

Follow DevChat on Facebook and Twitter Picks Leslie Cohn Wein:

Thomas Aylott:

Designing Web Interfaces by Bill Scott

Lucas Reis:

Andrey Okonetchnikov:

Components.ai

Special Guest: Andrey Okonetchnikov.
Advertising Inquiries: https://redcircle.com/brands
Privacy & Opt-Out: https://redcircle.com/privacy
Become a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

RRU 076: Ignite and the React Community with Jamon Holmgren Aug 27, 2019

Show notes

Sponsors

React Native Radio
Sentry use the code “devchat” for 2 months free on Sentry’s small plan
GitLab | Get 30% off tickets with the promo code: DEVCHATCOMMIT

Panel

David Ceddia
Lucas Reis

With special guest: Jamon Holmgren Episode Summary Today’s guest is Jamon Holmgren from Oregon. Jamon is the the CTO for Infinite Red, a consultancy that designs and builds mobile apps. The show starts with Jamon talking about his background in coding, which goes all the way back to when he was 12 years old. The panel brings up his React Finland presentation on building a community around Ignite. Ignite is a plugins and boilerplate maker for React that can speed up app creation. Jamon talks about how it works and how it came about. The panel believes this to be an excellent product that will contribute to code quality and doesn’t contribute to the jumble of boilerplates out there. Since Infinite Red engineers work on both web and mobile applications, Jamon talks about how they navigate the differences between the two platforms. Their primary tool for doing this is MobX, and Jamon expounds on how it works. The panel discusses situations where using React Hooks and React Context are too low level for a state management solution for a big application, and thus where tools like MobX become necessary. The conversation turns to the React Core team and how they view the community coming up with their own solutions. The panel discusses the lack of executive decisions in React and compare it to other languages like Ruby, and how it affects the longevity of a language. They weigh the benefits of a core team that makes executive decisions and causes conflict versus one that doesn’t and the chaos that ensues. They discuss the benefits of standardization, but ultimately agree that collaboration almost always comes up with the best solution. Links

Follow DevChat on Facebook and Twitter Picks David Ceddia:

Lucas Reis:

CSS Grid like you are Jan Tschichold

Jamon Holmgren:

React Node GUI

Special Guest: Jamon Holmgren.
Advertising Inquiries: https://redcircle.com/brands
Privacy & Opt-Out: https://redcircle.com/privacy
Become a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

RRU 075: Animations and React Morphe with Bruno Lorenco Aug 20, 2019

Show notes

Sponsors

Adventures in Devops
Sentry use the code “devchat” for 2 months free on Sentry’s small plan
My JavaScript Story

Panel

David Ceddia
Thomas Aylott
Leslie Cohn-Wein
Lucas Reis

With special guest: Bruno Lourenco Episode Summary Bruno is a developer specializing in multimedia. He is currently building websites with React and the creator of React Morph, an animation library. Bruno talks about what React Morph is, how it originated, and the flip animation technique. React Morph is uniquely designed to be compatible with many platforms. Bruno talks about his goal to make everything simpler, from having animations on your website, to making things easier for users of the application. The panel discusses the importance of animation and how it relates to user accessibility. They discuss how animation is interpreted in the brain to create meaning and purpose. On the other hand, it can be easy to go overboard with animation and can even make people feel sick. Since animation is important, Bruno outlines ways to avoid causing motion sickness in users. They discuss the difficulty of communicating animation intention between designers and developers. Animation should not be the last thing a team thinks about and should be given the same kind of considerations as for color and typography. They discuss the difficulties of adding animation to a project and whether or not animations should be included in the design system. They talk about the differences between mobile apps and web apps in how animations are used, and what the different expectations users have for them. React as a framework emphasizes static states, so Bruno and the panel discuss whether or not React is an animation friendly framework. Bruno talks about ways to get animations to fit the React paradigm so that they can be added. His hope is that React Morph will take care of a lot of animations automatically without CSS. He talks about other animation libraries that have influenced React Morph. The show finishes with Bruno talking about what he would like to accomplish next, which is to bring the design world and developer world closer together. Links

Follow DevChat on Facebook and Twitter Picks David Ceddia:

DevJoy

Thomas Aylott:

Lucas Reis:

Information Theory for Intelligent People

Leslie Cohn-Wein:

Bruno Lourenco:

Special Guest: Bruno Lourenço.
Advertising Inquiries: https://redcircle.com/brands
Privacy & Opt-Out: https://redcircle.com/privacy
Become a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

RRU 074: Learning React and TypeScript in Public with Shawn "swyx" Wang Aug 13, 2019

Show notes

Sponsors

Netlify
Sentry use the code “devchat” for 2 months free on Sentry’s small plan

Panel

David Ceddia
Thomas Aylott
Leslie Cohn-Wein
Lucas Reis

With special guest: Shawn Wang Episode Summary Today’s guest Shawn Wang is a career changer starts off the show about how he got from finance to programming. The panel talks about how they each got started in programming. Shawn explains his Learn In Public manifesto. They discuss the benefits of learning in public and how concepts like Cunninham’s Law and lampshading can be a good thing. Shawn talks about the differences between inbound and outbound marketing. The two biggest benefits of learning in public is that people will come to help you, it helps you to build capital, and it os the fastest way to learn. They discuss the balance between sharing too little and oversharing. Leslie brings up some possible safety concerns, and the panel discusses ways to stay safe while learning in public. Ultimately, it’s ok to learn in public and maintain anonymity. They discuss ways to adjust public learning to your comfort zone and how to know when you’ve done well with your public learning. Shawn talks about why he started doing TypeScript and React and the importance of saying thank you to your teachers, which also comes with some unexpected perks. They finish by discussing how to know if people care about what you’re producing. Links

Follow DevChat on Facebook and Twitter Picks David Ceddia:

Why React Hooks

Thomas Aylott:

Atomic Habits by James Clear

Lucas Reis:

Tweet from James Clear

Leslie Cohn-Wein:

Storybook Accessibility Add-on

Shawn Wang:

Special Guest: Shawn Wang.
Advertising Inquiries: https://redcircle.com/brands
Privacy & Opt-Out: https://redcircle.com/privacy
Become a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

RRU 073: TypeScript and ReasonML Christoffer Niska Aug 06, 2019

Show notes

Sponsors

Netlify
Sentry use the code “devchat” for 2 months free on Sentry’s small plan

Panel

Thomas Aylott
David Ceddia
Lucas Reis

With special guest: Christoffer Niska Episode Summary Christoffer Niska has been in web development for over a decade and works with mainly PHP and JavaScript, but knows about 8 different languages, often working in multiple languages simultaneously. The panel discusses the affect learning another language has on how you write the code you’re working on. They talk about TypeScript and Christoffer shares how he got into it. They discuss the prevalence of TypeScript and some of the tools available for it, like Fable.io. TypeScript is a very beneficial language because it can help with refactoring and automation. Christoffer believes that it is better to write libraries in TypeScript. He shares how to release an NPM package with Typescript. They talk about more tools that work with TypeScript. The panel talks about Reason ML, which is an alternative syntax on top of OCaml.They discuss how the success of ReasonML is evaluated. ReasonML has been found to dramatically reduce bugs and has many features, such as a pattern matching feature. The panel talks about the availability of ReasonML to those who are not on the Facebook team. ReasonML and Typescript can also be compiled into WebAssembly and other languages. They finish by talking about some of the many tools that Reason ML has built in. Links

Follow DevChat on Facebook and Twitter Picks David Ceddia:

Smashtest

Thomas Aylott:

Brian Vaughn’s React Tools rewrite

Lucas Reis:

Complexity Explained

Christoffer Niska:

Special Guest: Christoffer Niska.
Advertising Inquiries: https://redcircle.com/brands
Privacy & Opt-Out: https://redcircle.com/privacy
Become a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

RRU 072: React Hooks for Global State and More Custom Hooks with Daishi Kato Jul 30, 2019

Show notes

Sponsors

Netlify
Sentry use the code “devchat” for 2 months free on Sentry’s small plan
Triplebyte offers a $1000 signing bonus

Panel

Thomas Aylott
David Ceddia
Lucas Reis

With special guest: Daishi Kato Episode Summary Todays guest Daishi Kato is a freelance programmer and has many open source libraries. He starts off by talking about how he got from tail call optimization to Redux and global state. Daishi talks about his definition of global state, how it differs from a regular state, and why it is a problem with the current context implementation. Thomas talks about his work with Android and how React has helped solved some of the problems they encountered. They talk about when different rendering issues they’ve encountered. Daishi shares his unique approach to solving rendering issues and how it applies to his libraries. His solution is to combine the system in React with proxy based tracking to solve issues with rendering. Daishi explains why this works and the importance of benchmarking. Daishi’s solution is designed as a same use state API, so someone can drop this in and see if it works. Daishi talks about his definition of proxies and how it triggers the rerender. He also talks about how it handles conditional reads. This tracking happens every render and it doesn’t have the same limitations as hooks. The panel talks about the new version of React Redux library implementation and how it compares to Daishi’s. Daishi’s approach is useful for people earning Redux because the used tracked state gives you all the benefits without a lot of the complexity. Daishi talks about how it deals with deeply nested pieces of code. The panel discusses the delicate balance of optimizing, but not doing it too soon, but to also remember how vital it is to maintain the performance of your app. Daishi’s work with Reactive React Redux to make sure things perform from the beginning is really important. It’s also important to understand how your product works so that when things do go wrong, you know how to fix it. Daisho talks about his other library React Tract for people who don’t like to use Redux. Links

Follow DevChat on Facebook and Twitter Picks David Ceddia:

Thomas Aylott:

The Making of a Manager by Julie Zhou
Thomas’ Youtube channel

Lucas Reis:

Shun knives

Daishi Kato:

Remote Faces

Special Guest: Daishi Kato.
Advertising Inquiries: https://redcircle.com/brands
Privacy & Opt-Out: https://redcircle.com/privacy
Become a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

RRU 071: The Importance of Moderation and Chaos Jul 23, 2019

Show notes

Sponsors

Netlify
Sentry use the code “devchat” for 2 months free on Sentry’s small plan

Panel

Lucas Reis
Thomas Aylott

Episode Summary Today, Lucas and Thomas discuss how companies enforce what technology gets used, especially when companies get really large. Thomas talks about his experience with Facebook’s an ‘all carrots, no sticks’ approach, and says that if Facebook hadn’t given its employees the freedom to use whatever technology they needed, React would have never come about. Thomas talks about how he built his 2018 React Conference talk. He says that the hard part of being a programmer is not the technical aspect, it’s the social aspect and balancing the old and new. Lucas talks about his experience as a consultant, the path from analyst to manager, and how things change. Thomas brings up Facebook’s philosophy of “abstraction through extraction”. Thomas and Lucas agree that in the real world, it’s really difficult to have linear/boolean things, and as a result there is no one cure for everything. The great challenge is of solving problems is moderation in solutions and avoiding extremes. They agree that a lot of engineering is just moving complexity around, and it’s important to be aware of where you are storing the complexity and how it affects your workers, especially those who are just starting. This shifting is kind of where react came from. Ultimately, it’s important to leave a little room for chaos so that your project can evolve. Links

Follow DevChat on Facebook and Twitter
Advertising Inquiries: https://redcircle.com/brands
Privacy & Opt-Out: https://redcircle.com/privacy
Become a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

RRU 070: Drawing the Line Between 3rd Party and Custom Code with Glenn Reyes Jul 16, 2019

Show notes

Sponsors

Netlify
Sentry use the code “devchat” for 2 months free on Sentry’s small plan
Triplebyte offers a $1000 signing bonus

Panel

Lucas Reis
David Ceddia
Leslie Cohn-Wein

With special guest: Glenn Reyes Episode Summary Special guest Glenn is a software programmer based in Vienna, Austria and has been working in programming since 2013. He is the creator of the Graphpack library. Today the panel discusses how to choose between picking a 3rd party or handcraft component in React. They discuss the popular notion to avoid “reinventing the wheel” and always using 3rd party components. Glenn gives advice on approaching the decision between 3rd party components or making it yourself, including considering time constraints, risks of using premade components, and the popularity of the library and how up-to-date it is. It is also important to understand the big picture of your project and know what already exists that could be of use. The panel discusses different indicators of how well kept up a library is. Glenn talks about situations when his library Graphpack would come in handy. He advises listeners to always test software before purchasing it. The panel talks about the issue of being able to change a component later if it doesn’t work. They agree that it’s important to consider the end goal and what other people on the team need when choosing whether to use 3rd party or custom make your code. Some decision will be your companion for years and years, like what language your project is written in. Glenn suggests that when you are trying something new, try it out in a clear and isolated experiment, something React is very useful for. Last, it is important to leave notes for future developers as to why you made the decision you did
Links

Follow DevChat on Facebook and Twitter Picks David Ceddia: