RRU 040: Mastermind Groups and Staying Current with Sean Merron

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 GraphQLJS CodeShiftCombyHow OneGraph Onboards Users That Are New To GraphQLGrapiQL  Excel GraphiQL ExplorerBashOneGraphHasuraFramerSwift.ui  Picks Thomas Aylott FramerFamous Charles Max Wood Stop-motion animation Christmas movies (like Rudolph the Red-Nosed Reindeer) A Christmas Story Sean Grove Moon HighwayDraftbit SuperMario Land 2 ExplorationSpecial Guest: Sean Grove. 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.

17 Dec 20191h 1min

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-Uphttps://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/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

10 Dec 201942min

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 Vue12 React Best Practices You Need to Follow in 2019SaulTest && commit || revertVS Code ESLint Picks Thomas Aylott Teachable Machine Charles Max Wood White ChristmasHoliday Inn Chris Reyes Practical React HooksAdvertising 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.

3 Dec 201938min

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/ReactSentry– 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 contenthttps://github.com/ireade/caniuse-embedhttps://ireaderinokun.com/https://twitter.com/ireaderinokunhttps://github.com/ireadehttps://www.facebook.com/React-Round-Uphttps://twitter.com/reactroundupSpecial Guest: Ire Aderinokun. 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.

26 Nov 201912min

"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/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

20 Nov 201914min

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/ReactSentry | 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 modelReact ReduxuseReducerFrustrations with React HooksSolutions to Frustrations with React HooksESLintNext.jsRelaySeleniumStackOverflowReactiveFlux Picks Thomas Aylott Shada Charles Max Wood The MaxCoders Guide to Finding Your Dream Developer JobIt’s A Wonderful LifeMr. Kreuger’s Christmas Chris Reyes Netlify React Hooks deep diveAirPods Pro Paul Cowan Solutions to Frustrations with React Hooks Stay fit Special Guest: Paul Cowan. 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.

19 Nov 201921min

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/ReactSentry use the code “devchat” for 2 months free on Sentry’s small plan Ruby Rogues Links KnockoutWhy did you renderFusion.js: A Plugin-based Universal Web Framework - Leo HorieReact Element's 'Parent' vs Rendered ByHow To Reduce Unnecessary Re-RendersWhy Performance MattersPerformance Impact CalculatorWelldone Software Follow DevChatTV on Facebook and Twitter Picks Thomas Aylott: Face-API.jsReact force graphReact 3 Fiber Lucas Reis: Opendoodles.comAdopting Optimizely at Compass Vitali Zaidman: JSJ 402: SEO for Developers with Vitali ZaidmanSpecial Guest: Vitali Zaidman. 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.

12 Nov 201945min

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/ReactSentry– use the code “devchat” for two months free on Sentry’s small plan Adventures in AngularCacheFly Links JSJ 386: Gatsby.js with Chris Biscardi  https://www.gatsbyjs.org/https://www.christopherbiscardi.com/Views on Vuehttps://vuejs.org/https://www.facebook.com/React-Round-Uphttps://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/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

5 Nov 20191h 4min