React Round Up

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 SoftwareSentry use the code “devchat” for 2 months free on Sentry’s small plan My Angular Story Links Explicitness and Consistency in UIDavid Khourshid xstate libraryRRU 069: The State Machines in React with David KhourshidState machineState chartCerebral JSOrigami by FacebookElm  The GaryVee Content ModelOvermind JS Follow DevChatTV on Facebook and Twitter Picks David Ceddia: Reverse Interview Thomas Aylott: Machine Learning Zero to HeroTensorFlow at Google I/O 2019 channel 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 YouSpecial Guest: Farzad Yousef Zadeh. Advertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

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 SoftwareSentry use the code “devchat” for 2 months free on Sentry’s small plan GitLab | Get 30% off tickets with the promo code: DEVCHATCOMMIT Links Håkon Krogh’s React Amsterdam talkNext.jsSEO ratingsGatsbyLighthouse  Apollo GraphQLnpmTypeScriptPreactInferno.js Follow DevChatTV on Facebook and Twitter Picks David Ceddia: FXmicrojs.com Thomas Aylott: Mindset by Carol Dwek Håkon Krogh: Bundlephobia  Special Guest: Håkon Krogh. Advertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

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 SoftwareSentry use the code “devchat” for 2 months free on Sentry’s small plan GitLab | Get 30% off tickets with the promo code: DEVCHATCOMMIT Links Lint-staged  Component-driven.io PrimitiveShape Up bookCreate prototype using AI : Airbnb testMonica Lent twitterWireframe  jQueryCoffeeScript  Backbone.jsChristopher Alexander Follow DevChat on Facebook and Twitter Picks Leslie Cohn Wein: Frontend Masters Intro to Vue courseGatsby.js glossary Thomas Aylott: Designing Web Interfaces by Bill Scott Lucas Reis: Shape Up bookMIT open courseware Andrey Okonetchnikov: Components.aiSpecial Guest: Andrey Okonetchnikov. Advertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

Sponsors React Native RadioSentry 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 Infinite RedBuilding a Community Around IgniteIgniteBoilerplateMobX State TreeMobX ReactMobXEmerReact ReduxReact ContextReact HooksApolloElmPrettier@jevakallio Tweet Follow DevChat on Facebook and Twitter Picks David Ceddia: Devurls.comReducing Motion to Improve Accessibility Lucas Reis: CSS Grid like you are Jan Tschichold Jamon Holmgren: React Node GUISpecial Guest: Jamon Holmgren. Advertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

Sponsors Adventures in DevopsSentry 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 Render PropsReact MorphReact HooksFlip techniqueChange blindnessQartz composerOrigamiKeynotePopmotionPopmotion PopcornNode.JSDesigning Web InterfacesReduced motion preference Follow DevChat on Facebook and Twitter Picks David Ceddia: DevJoy Thomas Aylott: Lecture on Jung’s TypographyThomas’ Youtube channel Lucas Reis: Information Theory for Intelligent People Leslie Cohn-Wein: Resilient Management by Laura HoganSpider-Man: Into the Spiderverse Bruno Lourenco: A-Frame ReactBruno’s React Finland talkSpecial Guest: Bruno Lourenço. Advertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

Sponsors NetlifySentry 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 VBAMicrosoft ExcelHaskellHoogleCunningham’s LawLampshadingNerd snipingJulia Evans cartoonsReact Suspense talk by swyxLin Clark code cartoonsLin Clark - A Cartoon Intro to Fiber - React Conf 2017Samantha MingReact/TypeScript Cheat SheetLearn In Public 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: Lizzo’s Juice  12 Leverage PointsSpecial Guest: Shawn Wang. Advertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

Sponsors NetlifySentry 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 ElmFlowTypescriptFable.ioF#Rollup.jsNode.jsNext.jsApolloThe PlatformReact RestrictedTSDXClojure specArticle on why you should look into ReasonMLReasonMLOCamlBuckleScriptPrettier   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 ReasonMLDiagonal LineSpecial Guest: Christoffer Niska. Advertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

Sponsors NetlifySentry 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 MobexGraphQLProc SQLReact-TrackedImmerReactive React ReduxReact Redux   Follow DevChat on Facebook and Twitter Picks David Ceddia: A Compiler From Scratch videoVerbal Expressions Thomas Aylott: The Making of a Manager by Julie Zhou Thomas’ Youtube channel Lucas Reis: Shun knives Daishi Kato: Remote FacesSpecial Guest: Daishi Kato. Advertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

Sponsors NetlifySentry 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 HooksCSS Follow DevChat on Facebook and TwitterAdvertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

Sponsors NetlifySentry 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 LodashMoment libraryGraphpackElm   Follow DevChat on Facebook and Twitter Picks David Ceddia: boringtechnology.club Leslie Cohn-Wein: The Ladybug PodcastBig Green Egg Lucas Reis: Top 20 CSS Navigation Menus Glenn Reyes: Lydia Hallie InstagramSpecial Guest: Glenn Reyes. Advertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.