React Round Up

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

• Elm
• Flow
• Typescript
• Fable.io
• F#
• Rollup.js
• Node.js
• Next.js
• Apollo
• The Platform
• React Restricted
• TSDX
• Clojure spec
• Article on why you should look into ReasonML
• ReasonML
• OCaml
• BuckleScript
• Prettier

  Follow DevChat on Facebook and Twitter Picks David Ceddia:

• Smashtest 

Thomas Aylott:

• Brian Vaughn’s React Tools rewrite

Lucas Reis:

• Complexity Explained

Christoffer Niska:

• Exploring ReasonML
• Diagonal Line

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.

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

• Mobex
• GraphQL
• Proc SQL
• React-Tracked
• Immer
• Reactive React Redux
• React Redux

  Follow DevChat on Facebook and Twitter Picks David Ceddia:

• A Compiler From Scratch video
• Verbal Expressions

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.

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

• Hooks
• CSS

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.

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

• Lodash
• Moment library
• Graphpack
• Elm

  Follow DevChat on Facebook and Twitter Picks David Ceddia:

• boringtechnology.club

Leslie Cohn-Wein:

• The Ladybug Podcast
• Big Green Egg

Lucas Reis:

• Top 20 CSS Navigation Menus

Glenn Reyes:

• Lydia Hallie Instagram

Special Guest: Glenn Reyes.

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.

Sponsors

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

Panel

• David Ceddia
• Lucas Reis
• Thomas Aylott

With special guest: David Khourshid Episode Summary David Khourshid is the author of a library called Xstate, He has been a developer for 7 years, currently works for Microsoft, his passion is frontendTalks a. In college, he actually studied piano performance, and so he talks about how he got into programming and where he started. The panel discusses his unique husky animation and how he came up with the idea for it and went about programming it. The panel discusses what a state is in React. David defines a state as a moment in time. States can change, when they do, that’s a state transition. They talk about the utility of states and thinking about your app as a state machine. They agree that describing your code as a state machine makes it easier to communicate and connect with non developers. The panel discusses the importance of learning from other industries, such as approaching programming the same way construction workers build a house. They debate the Waterfall versus the Agile mindset.  They talk about the advantages of programming in React and focusing on the state machine, especially because it is important to be intentional about dealing with concepts separate from other concepts. They share different ways to switch to state machine thinking, one of which is to look at your event handlers and make sure they are doing anything besides dispatching events. David talks about his library called Xstate and the basics of his library and his inspiration, and who else is working in state machines. The finish by discussing industry standards.  Links

• Xstate
• Keyframers
• Bootstrap
• David’s husky animation
• The Checklist Manifesto
• Sion SCXML
• QT
• Elm
• Thunk
• Observable
• NoFlo
• Sketch Systems
• State Charts 

Follow DevChat on Facebook and Twitter Picks David Ceddia:

• Atomic Habits by James Clear 
• Bullet Journal

Thomas Aylott:

• The Checklist Manifesto
• Thomas’ Youtube Channel

David Khourshid:

• Constructing The User Interface with State Charts (check the library first)
• Follow David @davidkpiano

Special Guest: David Khourshid.

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.

Sponsors

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

Panel

• David Ceddia
• Lucas Reis
• Leslie Cohn-Wein

With special guest: Varya Stepanova Episode Summary Today’s guest is Varya Stepanova, who started her career in programming as a front end developer in Russia for Yandex. Now she is an independent consultant specializing in design systems. For Varya, a design system is a systematic approach to providing coherent products under the same brand. The necessity of a design system for a company is dependent upon how large it is and how quickly it is developing. Varya talks about how a component library turns into a design system and shares some of her experience. She talks about how the concepts in a design system are influenced and created by the existing interface. The panel discusses the importance of design system ownership. They all agree that the design system should be owned by either a team or a single person in order to avoid problems. Varya talks about dealing with breaking changes in a design system and the importance of working visual regression tests into a system. She shares a story about a time where broken code was released which ultimately lead her to find a way to automate visual regression tests. The panel discusses some solutions for dealing with the fact that the library is going to be used for multiple different projects and infrastructure technology tools available for a design system.  Links

• CSS
• Visual regression test
• Cypress
• Storybook
• Styleguidist
• Percy
• Gatsby
• Metalsmith

Follow DevChat on Facebook and Twitter Picks Lucas Reis:

• Webpagetest.org
• SpeedCurve

David Ceddia:

• Captain Marvel

Leslie Cohn-Wein:

• Design Systems by Allah Kholmatova

Varya Stepanova:

• Learn about service design and design thinking
• Follow Varya on Twitter 

     
 Special Guest: Varya Stepanova.

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.

Sponsors

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

Panel

• Nader Dabbit
• Dave Ceddia
• Lucas Reis

Summary The panel shares their first experiences with CSS and compares CSS and CSS-in-JS. The best ways to learn CSS is considered. The panel shares some coding tips; considering when to use libraries and when to use homegrown solutions. Nader Dabbit shares his predictions for the future of frontend technology. The panel discusses these predictions and shares some of their own.  Links

• https://www.facebook.com/React-Round-Up

Picks Nader Dabbit:

• 21 Lessons for the 21st Century

Dave Ceddia:

• CSS Mastery: Advanced Web Standards Solutions
• https://conference.convertkit.com/ 

Lucas Reis:

• https://workflowy.com/ 
• https://www.futureme.org/ 

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.

Sponsors

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

Panel

• Dave Ceddia
• Thomas Aylott

Joined by Special Guest: Leslie Cohn-Wein Summary Leslie Cohn-Wein joins the panel to discuss accessibility. She explains how she got passionate about accessibility. The panel discusses what you have to do to become accessible. Leslie brings up divs and explains how these get in the way of accessibility. The panel discusses roles; Leslie explains what roles does and how to use roles. Accessible testing is discussed and Leslie shares some resources for testing your sites for accessibility. The panel discusses ways to make sites more accessible and how doing something is better than doing nothing. Leslie advises having an accessibility champion on your team whose job it is to think about how to make sites and apps for accessible. The panel discusses the importance of accessibility and how accessibility changes the lives of disabled users. Links

• https://www.w3.org/WAI/standards-guidelines/wcag/
• https://www.npmjs.com/package/eslint-plugin-jsx-a11y
• https://github.com/reakit/reakit
• https://reach.tech/router
• https://reactjs.org/docs/accessibility.html
• https://www.tobii.com/
• https://ofone.co/
• https://twitter.com/lesliecdubs
• https://www.facebook.com/React-Round-Up

Picks Dave Ceddia:

• https://egghead.io/courses/start-building-accessible-web-applications-today
• https://egghead.io/lessons/tools-building-forms-with-accessibility-in-mind \
• Company of One: Why Staying Small Is the Next Big Thing for Business

Thomas Aylott:

• Journey By Starlight: A Time Traveler's Guide to Life, the Universe, and Everything
• Photoviz: Visualizing Information through Photography

Leslie Cohn-Wein:

• https://www.udacity.com/
• https://inclusive-components.design/
• https://www.modsy.com/

Special Guest: Leslie Cohn-Wein.

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.

Sponsors

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

Panel

• Lucas Reis
• David Ceddia
• Thomas Aylott
• Justin Bennett

Summary The panel starts by discussing if useEffect is a good API or a bad API. The problems that useEffect solves are considered. The panel agrees it is a much better abstraction where subscriptions are concerned. Suspense and data fetching is discussed, the panel considers what the react team has in store concerning data fetching. The panel discusses what it was like to be a beginner to React and how using React is not an intuitive language. The panel shares some of their mistakes with useEffect, and try to consider useEffect from a beginners perspective. The panel gives advice for using hooks. Links

• https://twitter.com/ryanflorence/status/1125041041063665666

Picks Lucas Reis:

• https://github.com/kkuchta/css-only-chat

David Ceddia:

• https://twitter.com/kentcdodds/status/1125876615177629696
• https://twitter.com/ryanflorence/status/1125041041063665666
• Fun with React Hooks - Michael Jackson and Ryan Florence

Thomas Aylott:

• The Design of Everyday Things: Revised and Expanded Edition

Justin Bennett:

• https://dusk.now.sh/
• https://developers.facebook.com/videos/2019/building-the-new-facebookcom-with-react-graphql-and-relay/

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.

Sponsor

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

Panel

• Nader DAbit
• Justin Bennett
• David Ceddia

Joined by Special Guest: Aggelos Arvanitakis Summary Aggelos Arvanitakis shares things he has learned from his mistakes in his blog posts. The panel discusses the most common problems in react that causes poor performance. Aggelos gives a lot of advice on how to fix or avoid these problems and how to optimize performance. The panel discusses using CSS to optimize performance. The new React API’s are discussed and their effect on performance. Vue state and vue reducer are compared and Aggelos gives tips for maintain state. The episode ends with Aggelos sharing techniques for using redux. Links

• https://www.orfium.com/
• https://itnext.io/@aggelosarvanitakis

Picks Nader Dabit:

• https://twitter.com/Eli_White
• https://devchat.tv/react-native-radio/react-native-open-source-the-react-native-community-feat-christoph-nakazawa/
• https://dev.to/dabit3/the-complete-guide-to-user-authentication-with-the-amplify-framework-2inh

Justin Bennett:

• https://github.com/vadimdemedes/pastel
• https://github.com/DevExpress/testcafe
• https://www.cypress.io/

David Ceddia:

• https://svelte.dev/

Aggelos Arvanitakis:

• https://vx-demo.now.sh/
• https://technology.riotgames.com/

Special Guest: Aggelos Arvanitakis.

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.