React Round Up

Today the panel and Sean Grove are talking about the future of programming with GraphQL. GraphQL is a new way of building APIs that is more product and frontend focused. All of the panelists agree that it is easy to get exactly what they need with ease when using GraphQL. There are also benefits for backend developers too, since GraphQL lets you see exactly what fields your clients are using. You can also reach out to specific clients who have accessed specific fields before. This is possible because every GraphQL server is introspectable by a computer, and Sean explains how it works. This introspectivity is the basis for an idea he has that allows users to generate realistic fake data before signing up so they know exactly how their application will work before committing, and gives some examples of how it can be used. They all agree that GraphQL is very well formatted and that it provides solutions to real world problems,  The conversation turns to the article How OneGraph Onboards Users Who are New to GraphQL. In particular, they discuss how the GraphiQL Explorer works versus OneGraph. GraphiQL Explorer is an extension that will look at your operations and generate a full React or Bash app from them. Sean talks about the different kinds of operations and how naming them can help you track their performance more easily. There is even a code generator that will flag unnamed queries to help you learn best practices, but won’t stop you from running your code. They talk about the benefits of using OneGraph, a single graphQL endpoint through which you can get all your data from other apps. By wrapping all the APIs in GraphQL, you get access to all the nice GraphQL tooling. They talk about how it works and some of the benefits it can have, such as helping you stay under rate limits. They talk about other interesting tools available for GraphQL and what the explosion of tools means for the GraphQL community. They talk more about how GraphQL fits into the React environment and what they think the future holds.  Panelists

• Thomas Aylott
• Charles Max Wood

Guest

• Sean Grove

Sponsors

• NxPlaybook.com - Use code ‘NXDEVCHAT’ for 50% off the official https://nx.dev/React Advanced Workspaces course! 
• Sentry | Use the code “devchat” for $100 credit

Links

• GraphQL
• JS CodeShift
• Comby
• How OneGraph Onboards Users That Are New To GraphQL
• GrapiQL 
• Excel GraphiQL Explorer
• Bash
• OneGraph
• Hasura
• Framer
• Swift.ui 

Picks Thomas Aylott

• Framer
• Famous

Charles Max Wood

• Stop-motion animation Christmas movies (like Rudolph the Red-Nosed Reindeer)
• A Christmas Story

Sean Grove

• Moon Highway
• Draftbit 
• SuperMario Land 2 Exploration

Special Guest: Sean Grove.

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.

In this week’s episode of React Round Up the panel works their way through a blog post outlining best practices for React. The first is “keeping components small and function-specific”. The panel discusses the pros of using this best practice and how it relates to the single responsibility principle. This best practice also helps with the next, “reusability is important”. The panel considers this second best practice and points out some of its flaws. It recommends avoiding the creation of new components. The panel explains that by avoiding creating new components it saves time but can also cause problems as you adapt components to fit more projects.  The next best practice is “consolidate duplicate code”, the panel shares their philosophies on dry code and when to consolidate. The fourth best practice is comment only when necessary, Charles explains how he uses comments to help him keep track of things inside his code and the panel warns against using too many comments as it may clog up your code making it hard to read.  The fifth best practice is, “name the component after the function”. The panel explains how it is an art finding a name that is not too generic but is not overly specific; mastering the art of naming is something that will benefit everyone.  Naming relates to the sixth best practice as well. “Use capitals when naming components”. The panel explains the need for convention and advises developers not to go off-book as this will slow down others.  The last six best practices are all self-explanatory says the panel. “Separate stateful aspects from rendering” is nothing new. “Code should execute as expected and be testable”, the panel explains how this allows for trust between developers.  “All files relating to a single component should be in the same folder”, this makes everything easy to find when necessary.  “Use tools like Bit”, while the panel doesn’t use Bit, they share tool recommendations. They also comment on the progress being made it tooling and the future of automated tools. “Use snippet libraries”, the panel discusses favorite libraries and building their own libraries. The final best practice is “Follow linting rules”. Panelists

• Charles Wood
• Christopher Reyes
• Thomas Aylott

Sponsors

• NxPlaybook.com - Use code ‘NXDEVCHAT’ for 50% off the official https://nx.dev/React Advanced Workspaces course! 
• Sentry– use the code “devchat” for two months free on Sentry’s small plan
• CacheFly

Links

• https://teachablemachine.withgoogle.com/ 
• Practical React Hooks: How to refactor your app to use Hooks 
• 12 React Best Practices You Need to Follow in 2020 
• https://github.com/nadeesha/saul 
• https://www.facebook.com/React-Round-Up
• https://twitter.com/reactroundup

Picks Charles Wood:

• White Christmas 
• Holiday Inn 
• The MaxCoders Guide To Finding Your Dream Developer Job 

Christopher Reyes:

• https://github.com/microsoft/vscode-eslint 
• https://www.playingwithfire.co/ 

Thomas Aylott:

• test && commit || revert

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.

Today the panel is discussing how to introduce new tech at work. They agree that it’s important to get input from all teams on the decision, although it will primarily affect the development team. One should also consider the different ways people make decisions, such as through discussion or quiet thinking, and give everyone time to come to a decision. The panel talks about positive and negative examples of how to introduce new tech at work. Thomas believes that it is important to acknowledge your own biases in decision making and to try to avoid them. The React experts discuss the significance of the team dynamic and the necessity of different roles in decision making or if it is better to have an organic discovery phase. This relates to Thomas’ point about personal biases, and he believes that it is important to put people in roles that are opposite of their personality. When making decisions about new technology, it is also important to note that not all decisions require the same amount of input, and they discuss how to measure how much input is required for a decision. The discussion turns to methods for introducing testing, and the panelists talk about their experiences. The rule of thumb for introducing testing is to start simple, have an expected behavior, and test the output to see if it matches. Some other aspects of this discussion to consider are that introducing React Hooks could be considered introducing tech, testing is just a new process, introducing new tools, and budget concerns. Charles shares experience convincing his boss to introduce Agile practices which shows the importance of getting management to see the benefits of the new tech or strategy for themselves. The show concludes with the panel acknowledging that other than introducing tech, introducing philosophies on how to organize your code follows the same patterns as introducing technology. Panelists

• Thomas Aylott
• Charles Max Wood
• Chris Reyes

Sponsors

• NxPlaybook.com - Use code ‘NXDEVCHAT’ for 50% off the official https://nx.dev/React Advanced Workspaces course! 
• Sentry | Use the code “devchat” for $100 credit

Links

• Vue
• 12 React Best Practices You Need to Follow in 2019
• Saul
• Test && commit || revert
• VS Code ESLint

Picks Thomas Aylott

• Teachable Machine

Charles Max Wood

• White Christmas
• Holiday Inn

Chris Reyes

• Practical React Hooks

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.

In this episode of React Round Up Charles Max Wood interviews Ire Aderinokun at JAMstack conf 2019. Ire works for Buycoins, a cryptocurrency exchange for Africa. She gave a lightning talk, “Headless Chrome & Cloudinary for progressively enhanced dynamic content on the web”. After giving a brief overview of her talk to Charles, Ire defines progressive enhancement for the listeners.    Walking through how progressive enhancement works, she explains how Headless Chrome and Cloudinary helped her with the project she shared in the talk. Ire and Charles consider the blindspot that developers experience because they work on high-end devices and how using progressive enhancement helps those who use lower-end devices.   Ire shares her experience with JAMstack and explains how progressive enhancement works with JAMstack. Charles shares his experience using JAMstack. The episode ends with Ire giving advice and resources to help get started with progressive enhancement.    Panelists

• Charles Wood

Guest:

• Ire Aderinokun

Sponsors

• Nrwl | Nx.Dev/React
• Sentry– use the code “devchat” for two months free on Sentry’s small plan
• CacheFly

Links

• https://buycoins.africa/
• Headless Chrome & Cloudinary for progressively enhanced dynamic content
• https://github.com/ireade/caniuse-embed
• https://ireaderinokun.com/
• https://twitter.com/ireaderinokun
• https://github.com/ireade
• https://www.facebook.com/React-Round-Up
• https://twitter.com/reactroundup

Special Guest: Ire Aderinokun.

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.

"The MaxCoders Guide to Finding Your Dream Developer Job" by Charles Max Wood is available on Amazon. Get your copy here today only for $2.99!

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.

Paul Cowan was a painter and decorator for 30 years until he switched to front end development. He got into React because for him, much of programming didn’t make a whole lot of sense until he read about the flux model, and React Redux was one of the few frameworks that followed the flux model. Spending most of his life outside of the programming world has granted him a unique perspective frameworks like React. He talks about some of his frustrations with React hooks. Hooks can be frustrating because it’s a new paradigm to learn JS, the dependencies array can get bungled, React relies on the order in which hooks are called, and closures can be difficult. Overall, hooks come off at deceptively simple. Paul believes that we shouldn’t need external tooling to keep the dependency array on the right track. To avoid these frustrations, Paul reminds listeners that hooks have to be called in the same order each time at the beginning of your functional components. You also cannot have a hook in an if statement or event handler. It’s also important to remember the declarative nature of React. In production code, updating states is the best way to go.  The panel agrees that it’s good that react has clarified their position on what hooks are supposed to be used for, and how we are beginning to see the limitations of React hooks. They discuss unit testing with hooks and how to determine when the React framework becomes too big. They talk about some of the new features that are coming out and how they benefit new developers. When mistakes do happen, Paul talks about how he determines what went wrong. If you want to get advice from other humans, they suggest consulting StackOverflow, ReactiveFlux, and IRC chat. When you do consult these sources, it’s important that your problem is reproducible so that it’s easier for people to help you out. It’s also important that you learn how to ask questions.  The show finishes with them discussing how they handle changes in the industry. They have found that reusing components is difficult across Angular and React. They talk about the positive ways that React went version to version. They discuss complexity management in apps. The panel talks about some ways to do things in React without hooks, but also caution that avoiding the popular thing can also get you into trouble.  Panelists

• Thomas Aylott
• Charles Max Wood
• Chris Reyes

Guest

• Paul Cowan

Sponsors

• Nrwl |  Nx.Dev/React
• Sentry | Use the code “devchat” for $100 credit

  _______________________________________________________ "The MaxCoders Guide to Finding Your Dream Developer Job" by Charles Max Wood will be out on November 20th on Amazon. Get your copy on that date only for $1. _______________________________________________________ Links

• Flux model
• React Redux
• useReducer
• Frustrations with React Hooks
• Solutions to Frustrations with React Hooks
• ESLint
• Next.js
• Relay
• Selenium
• StackOverflow
• ReactiveFlux

Picks Thomas Aylott

• Shada

Charles Max Wood

• The MaxCoders Guide to Finding Your Dream Developer Job
• It’s A Wonderful Life
• Mr. Kreuger’s Christmas

Chris Reyes

• Netlify React Hooks deep dive
• AirPods Pro

Paul Cowan

• Solutions to Frustrations with React Hooks
• Stay fit

Special Guest: Paul Cowan.

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.

Vitali Zaidman works for the WellDone Software consultancy. He has worked with a lot of different technologies, but currently works with React. In a recent React meetup, he talked about React performance. When someone says that React is not performant, Vitali disagrees and says that it is very performant unless you do certain things. If your React application is slow, it’s down to the tools you use. The panelists all agree that premature optimization is the root of all evil. The difference between premature optimization and good architecture comes down to experience. It is important to be data driven and consider performance a business environment. Vitali believes that performance is a feature and should be treated like any other.  The panel discusses accessibility versus internationalization. Launching to one language is different than launching to one set of abilities. While you don’t need to internationalize on day one, don’t make it impossible to internationalize. They talk about how creating a timeline of changes in your project can help you pinpoint where your performance issues came from. It is also important to remember that developers have strong computers, while users generally do not. As you build, check your product on slower devices to make sure that it works for your users.  Vitali talks about his tool why-did-you-render, which will notify you of avoidable re-renders. He also talks about considering why you are choosing to use React and whether or not is the correct choice for your project. The panel discusses their feelings on pure components. They talk about the importance of code review and manual QA since not everything can be automated, again suggesting having a slow computer or phone in the office to test as you go. They also agree that it is important to understand how your library works. They talk about the huge amount of work that is required to maintain an open source project, and how development is a team effort if you want to create sustainable software. The show concludes with Vitali talking about a performance issue he encountered and how he recognized it, diagnosed the problem, and fixed it.  Panelists

• Thomas Aylott
• Lucas Reis

With special guest: Vitali Zaidman Sponsors

• Nrwl | Nx.Dev/React
• Sentry use the code “devchat” for 2 months free on Sentry’s small plan
• Ruby Rogues

Links

• Knockout
• Why did you render
• Fusion.js: A Plugin-based Universal Web Framework - Leo Horie
• React Element's 'Parent' vs Rendered By
• How To Reduce Unnecessary Re-Renders
• Why Performance Matters
• Performance Impact Calculator
• Welldone Software

Follow DevChatTV on Facebook and Twitter Picks Thomas Aylott:

• Face-API.js
• React force graph
• React 3 Fiber

Lucas Reis:

• Opendoodles.com
• Adopting Optimizely at Compass

Vitali Zaidman:

• JSJ 402: SEO for Developers with Vitali Zaidman

Special Guest: Vitali Zaidman.

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.

In this episode of React Round Up the panel interviews Chris Biscardi. Chris is now working with Gatsby. He shares a bit about his background and how he got into programming. Chris explains his move from Kubernetes and Docker over to Gatsby. His overall drive is to increase leverage for other people and what drew him to these projects.  Chirs explains what Gatsby is and what it has to offer to React developers. Gatsby is like a creat react app which is attached to a static site generator that has an API that allows you to pull in data from anywhere. Also, by using Gatsby developers do not have to operate alone, they get the whole Gatsby ecosystem to help them.  The panel considers Gatsby and if it would be a good way for developers to learn React. Chris explains with Gatsby’s documentation it would be great for learning React. The panel believes it would be a good place to learn because of the hands-on goal-oriented work engaged in when using Gatsby. Chris shares what developers get when using Gatsby and why it appeals to programmers today.  Chris explains what Gatsby themes are and how they are more powerful than CSS themes. The panel discusses how to use themes and how to write them. ThemeUI library is shared and Chris explains how it works. They consider what is next for both Gatsby and React.  Panelists

• Lucas Reis
• Charles Wood
• Thomas Aylott

  Guest:

• Chris Biscardi

Sponsors

• Nrwl | Nx.Dev/React
• Sentry– use the code “devchat” for two months free on Sentry’s small plan
• Adventures in Angular
• CacheFly

Links

• JSJ 386: Gatsby.js with Chris Biscardi 
• https://www.gatsbyjs.org/
• https://www.christopherbiscardi.com/
• Views on Vue
• https://vuejs.org/
• https://www.facebook.com/React-Round-Up
• https://twitter.com/reactroundup

Picks Lucas Reis:

• Don’t procrastinate

Charles Wood:

• Find solid people in your life
• Get away

Chris Biscardi:

• Chris's Discord

Thomas Aylott:

• Real relationships with real people outside of work. 

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.

Monica Lent has been interested in software from a very young age, and made her first domain name when she was 9 years old. She studied legacy languages Latin and Ancient Greek in university, but ended up keeping her college development job and going into software. She recently left her job and founded a startup, analytic tool designed for bloggers designed around affiliate marketing. She talks about some of the lessons she’s learned, including how to sift through data and how to make it useful for people.  Monica gave a talk at React Finland and she first applies some of her principles from that talk to what she’s learned founding a startup. One of the main differences she’s found is a small startup has different needs and levels of stability than a business. In early stage business, you have to decide where you want to invest in quality and where you shouldn’t be investing. For example, her primary focus is on her algorithm that runs the tool, and UI is less of a priority. In a large company, this might be structured differently. The panel discusses how to distill the priorities from the project manager so you know where to spend your time, something that takes a lot of experience and failure. They agree that if something is business critical and will cause the business to lose money if it fails, those things should be a top priority.  Second, the panel discusses the merits of different practices such as whether or not to deploy on Friday and having engineers on call. In Monica’s React Finland talk, she talks about the importance of constraints, which can help with these kinds of decisions. She explains that instead of thinking of architecture as something super abstract, think of it as enabling constraints, as picking ways to do less and end up with code that is safer to run, longer lasting, and has fewer bugs. Thomas shares how he used to oppose constraints and architecture, and how he changed his mind. They discuss the importance of automation over documentation for building sustainable code.  Third, Monica explains her opinion on how copying and pasting code instead of adding dependencies is a positive constraint. She prefers this method most of the time but not in all cases because it keeps your code flexible and avoids unnecessary specialization. However she is not advocating for copy/paste over dependencies in every situation : rather the point comes down to using copy/paste instead of inappropriate coupling. Sometimes, when you create an abstraction and combine two pieces of code, this new combination makes code more brittle than it would be otherwise Components put in the shared folder almost never leave. This causes the  component to become very specialized and not work in all scenarios. The panel discusses where this method may not work. Thomas talks about some of his favorite tools for simplifying complexity, React Hooks and Relay. Monica and the panelists discuss the merits of using TypeScript and proper methods for coupling code. Fourth, the panel discusses how so much of programming is dealing with other people and the importance of keeping your ego out of it when designing constraints, especially since developers hate other developer’s abstractions. They debate whether pride is a characteristic of junior or senior developers. They note that it is easier to get prideful and opinionated when you’re not working on a team. Thomas believes that if you aren’t working on a big team, you should force yourself to talk to people with opposing positions. The show concludes with the panelists agreeing that it all comes down to the balance between priorities and making things work. Sometimes we can get so focused on making something work that we lose sight of what actually matters. They agree that  collaboration generally yields better results than leaving it to one person. Monica talks about the importance of senior developers nurturing their team by leading from behind to help people come up with their own solutions. The panelists talk about different methods they’ve seen for doing this.    Panelists

• Leslie Cohn-Wein
• Thomas Aylott
• Lucas Reis

With special guest: Monica Lent Sponsors

• Progress KendoReact | Try now for FREE: kendoreact.com/reactroundup
• Sentry use the code “devchat” for 2 months free on Sentry’s small plan
• Views on Vue

Links

• Monica's React Finland talk
• Narcissistic design talk
• A Philosophy of Software Design
• React Hooks
• Relay
• TypeScript
• Webpack
• gRPC
• Prettier
• 7 Absolute Truths I Unlearned as a Junior Developer

Follow DevChatTV on Facebook and Twitter Picks Leslie Cohn-Wein:

• Xochimilco, Mexico City, Mexico
• List of CSS mistakes

Thomas Aylott:

• Get the Truth book

Lucas Reis:

• Lovevery
• Zero Fasting app

Monica Lent:

• The Mom Test by Rob Fitzpatrick

Special Guest: Monica Lent.

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.

In today’s show, Chuck talks about the recent Twitter thread about 10x engineers. He goes through each of the points in the tweet and talks about each of them in turn. There are only two points he sort of agrees with, and believes the rest to be absolute garbage. One of the issues with this tweet is that it doesn’t define what a 10x engineer is. Defining a 10x engineer is difficult because it is also impossible to measure a truly average engineer because there are many factors that play into measuring productivity. Chuck turns the discussion to what a 10x engineer is to him and how to find one. A 10x engineer is dependent on the organization that they are a part of, because they are not simply found, they are made. When a 10x engineer is added to a team, the productivity of the entire team increases. Employers have to consider firstly what you need in your team and how a person would fit in. You want to avoid changing the entire culture of your organization. Consider also that a 10x engineer may be hired as a 2x engineer, but it is the employer that turns them into a 10x engineer. Overall, Chuck believes these tweets are asinine because it’s impossible to measure what makes a 10x engineer in the first place, and hiring a person that fits the attributes in the list would be toxic to your company. Panelists

• Charles Max Wood

Sponsors

• Progress KendoReact | Try now for FREE: kendoreact.com/reactroundup
• Sentry use the code “devchat” for 2 months free on Sentry’s small plan
• iPhreaks

Links

• 10x engineer Twitter thread

Follow DevChat on Facebook and Twitter Picks Charles Max Wood:

• Copyhackers.com
• Good to Great by Jim Collins
• Keto diet
• Podcast Movement

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.