React Round Up

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

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

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

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         

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/ 

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/

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/

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/

Sponsors Netlify Sentry use the code “devchat” for 2 months free on Sentry’s small plan Triplebyte offers a $1000 signing bonus Panel Nader Dabit Lucas Reis David Ceddia Thomas Aylott Episode Summary On today’s show the panel discusses what what jobs should be delegated to the front and backend when doing fullstack development with React. They talk about where the data fetching starts coming into play in a react app and the big changes from the old web to the modern web in data fetching. They discuss how much interaction with the backend there is when working with front end applications, but also the importance of properly separating backend and frontend teams. They discuss the pros and cons of separating the front and backend teams, and agree that the problem space between both back and frontend is the user interface. They talk about where middlewares fit in. The panel notes that it is important to ensure that your new app can still communicate with older versions, and talk about different ways of dealing with it, such as continually evolving schema, installing new versions, or even never deleting anything and only adding new events. The panel talks about who should work the middle layer and who, between frontend and backend developers, should be put in charge of maintaining it. They discuss the misconception that using React makes server-side jobs irrelevant and how React actually helps. They note how automation in programming has changed the way that people use the web. They conclude by saying it is important to understand there are different ways to do these kinds of things, and encouraging listeners to look at the abstractions being built out in the serverless world Links State jQuery Middleware Rest BFFs (Backend for Frontend) Syscalls AWS Follow DevChat on Facebook and Twitter Picks Nader Dabit: The Never Hero Listening to books in the car with your kids. Lucas Reis: Why Softer Projects Take Longer Than You Think by Erik Bernhardsson Interviewing is a noisy prediction problem by Erik Bernhardsson David Ceddia: 11ty Thomas Aylott: Groovy Tie Squad The Laws of Human Nature by Robert Green

Sponsors Sentry– use the code “devchat” for $100 credit Netlify TripleByte Panel Justin Bennett Thomas Aylott Dave Ceddia Notes Today’s show has the panel discussing image lazy loading in React. Image lazy loading is the notion that images that are below the fold (rendered outside of your browser view when you initially load a page) are deferred and loaded later, so that your page loads faster. As you scroll down the page and things get close, then they are loaded in. This is a commonly suggested performance optimization, but often it doesn’t work well in React. The panelists talk about their experiences with lazy loading and different methods they’ve seen on other sites. They discuss the tradeoff between having a lot of images and slower loading and the importance of communicating with the design team. Since lazy loading is a unique challenge in React, they give recommendations for implementing lazy loading and tools for tracking site usage. They talk about dealing with JavaScript payloads, bundle and load splitting, and automating performance tracking. They discuss different performance tracking tools. The panelists address the NIH bias (Not Invented Here) and the trend that designers tend to be willing to pay money for good tooling, while engineers are cheap. There have been great improvements in the marketplace for good tools, so much so that oftentimes buying the tools is cheaper than making them yourself. They finish by discussing the pros and cons of building vs. buying and the future of the frontend. Links Lighthouse Gatsby Above the fold optimizations Below the fold optimizations Crump Survive JS on Webpack React lazy load image component Calibre SpeedCurve Bundle Analyzer Inspect Pack by Formidable Labs Cypress Github Actions Follow DevChat on Facebook and Twitter Picks Justin Bennett: Netlify Dev Products Easy Peasy Thomas Aylott: Displaced: Stories from the Syrian Diaspora React Rewind Dave Ceddia: Notion Understanding By Design

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 Dabit Lucas Reis Thomas Aylott Episode Summary Today the panel is discussing the necessity of companies having a dedicated frontend team. They begin by discussing the technologies that might be used by a dedicated frontend team. According to the panel, the necessity of a frontend team is determined by the size of the company. When you try to have a frontend team too soon, it ends up being a huge debacle, but once you get bigger and have multiple teams, it gets more useful. A company is ready for a dedicated frontend team when it is able to build with a common set of components. The panel discusses the concept of ownership in a company. Nader believes that things should be run where there is a team that’s in charge of building a component, and once the component has shipped, they are no longer in charge. The other panelists disagree with that method because they believe there is a danger of the project getting bloated. Thomas shares his experience with working for Facebook and Lucas talks about how he has previously set up his teams. They talk about the necessity of having a design system before having a React design system, and they all agree that it is useful Nader shares his experience with his brother working for Cartoon network and the design rules they had for the websites for each show like Dexter’s Lab and PowerPuff Girls. Since the panel agrees on the importance of consistency in visual communication and designs, they delve into deciding what is owned by the design system and what is shared between other teams, who maintains these things, and how to differentiate between the different kinds of components. They talk about the idea of Atomic Design in programming, separating component into categories called names like atoms, molecules, organisms, etc. Nader talks about his experience with this method. He found it difficult because components didn’t always fit cleanly into one category. The panel believes that it all comes back to ownership and it is important that companies are handling ownership well Links Storybook Frontend Cloudera Next.js Gatsby React Native Web Docz Material Follow DevChat on Facebook and Twitter Picks Nader Dabit: React Native in Action by Nader Dabit Lucas Reis: Kickstarting a Library of Internal React Components for Multiple Teams by Javier Lefevre Thomas Aylott: The E-Myth Revisited The Design of Everyday Things Atomic Design by Brad Frost

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 Dabit Justin Bennett Lucas Reis Dave Ceddia Charles Max Wood Joined by Special Guests: Thomas Aylott, Conlin Durbin Episode Summary Conlin Durbin is a front end software engineer for a company called Lessonly and occasionally writes about React. Thomas Aylott is a web guy from the 90’s who was briefly on the React team, and he makes thingsthatdostuff.com and groovytiesquad.com. The panel discusses  Conlin’s article Link Lists in the Wild: React Hooks. They begin by talking about the relationship between linked lists and React hooks. Linked lists are used under the hood to render hooks every time that they’re created and maintain integrity of the hook chain. They discuss the importance of knowing what goes on under the hood share their methods of learning. They give tips for learning on the job. The panel agrees that one of the best ways to learn is to teach. Conlin shares his experience working for Lessonly, a company that builds lesson-building software. The panel discusses WET (Write Everything Twice) vs DRY (Don’t Repeat Yourself) programming. They talk about when it is beneficial to have abstractions in code and when it is not. It’s also important to think about the humans that are going to be using it, and to write the code so that it’s humane. They praise good error messages that tell you exactly where you went wrong and how to fix it. They talk about the dangers of putting invariants everywhere, and finish by talking about ways to improve. Links Linked list React Fiber Hooks Backbone JavaScript Redux Gatsby Flow Jake Archibald: In The Loop-JS Conf Asia 2018 (video) What the heck is the event loop anyway? (video) Practical 00 Design in  Ruby, Sandi Metz Stop trying to be so DRY, instead Write Everything Twice (WET) Sebastian Markbage: Minimal API Surface Area – Learning patterns instead of frameworks Someone Is Changing Your Code Conlin Durbin username for most places is ‘wuz’, except Twitter for twitter it’s @CallMeWuz Follow DevChat on Facebook and Twitter Picks Justin Bennett: The 3 most effective ways to build trust as a leader article Pheonix Live View Lucas Reis: Pamela Zave Small Functions Considered Harmful article Dave Ceddia: New Redux course Kinesis Advantage 2 Keyboard Charles Max Wood: MicroConf BuzzSprout Thomas Aylott: Noflojs.org The Laws of Human Nature by Robert Greene Conlin Durbin: https://dev.to/ Soft Skills Engineering Conlin’s Discord server

Sponsors Netlify Sentry use the code “devchat” for 2 months free on Sentry’s small plan Triplebyte offers a $1000 signing bonus CacheFly Panel Justin Bennett Lucas Reis Joined by Special Guest: Parashuram Summary Parashuram (aka Ram) and the panel compares various frameworks including the differences between React Native and NativeScript. Ram discusses what it’s like introducing react native to mobile teams which leads to a panel discussion of web app developer experience compared to mobile app developers. Ram shares the changes that are being made to React Native and what this means for its developers. Some of the things to look forward to are a leaner and more browser-like React Native.  The episode ends with Ram sharing a little of his story. Links http://artsy.github.io/blog/2017/07/06/React-Native-for-iOS-devs/ http://artsy.github.io/artsy-x-react-native.html https://github.com/necolas/react-native-web https://github.com/vincentriemer/react-native-dom https://microsoft.github.io/reactxp/ https://facebook.github.io/react-native/blog/2018/11/01/oss-roadmap http://nparashuram.com/ https://twitter.com/nparashuram https://www.facebook.com/React-Round-Up https://twitter.com/reactroundup Picks Justin Bennett: http://artsy.github.io/blog/2017/07/06/React-Native-for-iOS-devs/ http://artsy.github.io/artsy-x-react-native.html https://github.com/vadimdemedes/ink Parashuram: https://github.com/react-native-community/discussions-and-proposals https://github.com/facebook/react-360 Lucas Reis: Family Time

Sponsors Netlify Sentry use code “devchat” for 2 months free Triplebyte Panel Lucas Reis Charles Max Wood Special Guest: Florian Rival Episode Summary Florian is a software engineer working for Facebook. He has previously worked with React Native making apps. He has also created an open source game creation software called GDevelop. Florian talks about his inspiration for GDevelop. He delves into the nature of GDevelop as a desktop app built on the web. Florian talks about his decision to not go full JavaScript in his app and to redo the interface. He ultimately decided to combine C++ and JavaScript, and top it with a React interface. Florian discusses how C++ is used in this web application and how it connects to react. The panel discusses the use cases for WebAssembly and the performance quality. They discuss the bundle sizes in WebAssembly compared to other languages and compatibility with different browsers. Florian talks about how WebAssembly and React work together in his app. He talks about some of the issues and solutions you had in desiging the UI and how he created the editable lists and trees. Florian concludes by saying that any LLVM language can be compiled into web assembly Links React Native React WebGL JavaScript HTML Storybook Feedback Loop C++ The DOM Angular Clank QT5 Enscripten C Make EV computation C# WebAssembly Domain Driven Design Slack React Sortable Tree Canvas Godot Pixy LLVM Picks Lucas Reis: American food Charles Max Wood: Podfest Alita: Battle Angel Florian Rival: Material UI Gatsby

Sponsors Netlify Sentry use the code “devchat” for 2 months free on Sentry’s small plan Triplebyte CacheFly Panel Justin Bennett Lucas Reis Joined by Special Guest: Nat Alison Summary Nat Alison shares with the panel her work in translating Reactjs. Lucas Reis thanks her for her work in this very important project. Nat updates the panel on how the translation is going and discusses some of the specifics of updating, changing language direction and how it all got started. The panel moves on to discussing Nat’s work with her Polyhedra application. Nat discloses what she learned while creating this app, how she tested the app and why she used the react framework for this project. The panel discusses suspense features and what they could do for this app. Nat ends the episode by sharing her inspiration for this app. Links https://github.com/reactjs/reactjs.org-translation https://reactjs.org/languages https://isreacttranslatedyet.com/ https://polyhedra.tessera.li/ https://github.com/tesseralis https://twitter.com/tesseralis https://www.linkedin.com/in/nat-alison-2768a449 https://www.facebook.com/React-Round-Up https://twitter.com/reactroundup Picks Lucas Reis http://shadow-cljs.org/ Justin Bennett https://zeit.co/now https://github.com/artsy/dupe-report Nat Alison https://www.npmjs.com/package/cron