React Round Up

Sponsors Netlify Sentry use the code “devchat” for $100 credit Triplebyte offers a $1000 signing bonus CacheFly Panel Charles Max Wood Nader Dabit Justin Bennett Joined by Special Guest: Adam Laycock Summary Adam Laycock describes his experience at React conf 2018, the atmosphere, the people and the talks. The panel shares how the approach conferences, taking notes, getting to know people, accessing information and getting out of their comfort zone. Adam shares some of the major topics covered at including, hooks, suspense, and concurrent rendering. The panel considers these topics and React conferences they look forward to attending. The episode ends with the panel comparing Angular and React, conferences, upgrades, and routers for React. Links https://www.microsoft.com/en-us/build https://medium.com/curated-by-versett/talks-worth-watching-react-conf-2018-bfbdd40922aa https://reactjs.org/community/conferences.html https://twitter.com/atlaycock https://github.com/alaycock https://adamlaycock.ca/ https://medium.com/@adam.laycock https://twitter.com/reactroundup https://www.facebook.com/React-Round-Up Picks Charles Max Wood https://www.notion.so/ The Effective Executive by Peter F. Drucker http://entreprogrammers.com/ Michael Feathers Kent Beck Nader Dabit https://dev.to/dabit3 Justin Bennett https://github.com/Bogdan-Lyashenko/codecrumbs https://medium.com/palantir/tslint-in-2019-1a144c2317a9 https://www.npmjs.com/package/rate-limiter-flexible Adam Laycock https://kentcdodds.com/blog/please-stop-building-inaccessible-forms-and-how-to-fix-them https://medium.com/curated-by-versett/dont-eject-your-create-react-app-b123c5247741 Clean Architecture: A Craftsman's Guide to Software Structure and Design by Robert C. Martin

Sponsors Netlify Sentry use the code “devchat” for 2 months free on Sentry’s small plan CacheFly Panel Lucas Reis Justin Bennett Charles Max Wood Special Guest: Ajay NS Episode Summary In this episode of React Round Up, the panel talks with Ajay NS, a Computer Engineering student at National Institute of Technology Surat who is passionate about frontend development and design. Ajay talks about his article Why you should use GatsbyJS to build static sites on Medium and why he felt the need to write it. After attending the Plone Conference in Tokyo where he gave a talk about GatsbyJS, he realized that compared to React or Angular, Gatsby helped new developers learn about frontend development without facing too many complications. Ajay explains that he decided to write the article and share his experiences with Gatsby to help ease the learning process for new developers who are curious about frontend development. They discuss best cases to use Gatsby for and also cases where it may not be a good idea to use it. They then discuss the best tools for people who are new to web development and are trying to find jobs as remote developers. One of the best methods recommended is pair programming which can also be done remotely. Links Why you should use GatsbyJS to build static sites Ajay NS — Plone Conference 2018 – Tokyo Ajay's Talk in the Plone Conference Ajay’s LinkedIn Ajay’s Twitter Ajay’s GitHub Netlify Eleventy https://www.facebook.com/React-Round-Up https://twitter.com/reactroundup Picks Justin Bennett: gatsby-starter-typescript-rebass-netlifycms https://github.com/artsy/palette https://github.com/FormidableLabs/inspectpack Lucas Reis: react-spring Charles Max Wood: Green Screen LED lighting for video  Ajay NS: https://github.com/storybooks/storybook Bodymovin Plugin

Sponsors Sentry use the code “devchat” for $100 credit Triplebyte CacheFly Panel Lucas Reis Justin Bennett Charles Max Wood Joined by special guests: Chris Toomey Episode Summary In this episode of React Round Up, Chris Toomey introduces himself, talks about his work and his podcast and moves on to explaining the differences between a React vs GraphQL centric application. Justin explains in detail how the Relay framework works, and Chris describes the scenarios where GraphQL stands out in the process of building an application and also throws some light on the benefits of choosing it over other APIs such as REST. The panel then discusses how GraphQL is advantageous in the documentation context since it has a good schema, and also in data modeling. Chris shares some past examples of creating React applications where GraphQL and Apollo made things much simpler, and also elaborates on the trade-offs and challenges associated with it. Links The Bike Shed Chris Toomey: React & GraphQL – Bringing Simplicity to Client-Side Development / React Boston 2018 Chris’s Twitter The Past, Present, and Future of GraphQL Native - Nick Schrock @ GraphQL Europe Picks Justin Bennett: Where art thou, my error? Auto by Intuit on GitHub Lucas Reis: MDX Deck library Code Surfer library Charles Max Wood: HubSpot Zapier Google Docs Chris Toomey: Tell me when it closes Quicklink Upcase

Sponsors Sentry use the code “devchat” for $100 credit Triplebyte CacheFly Panel Lucas Reis Nader Dabit Charles Max Wood Joined by special guest: Thomas Aylott Episode Summary In this episode of React Round Up, Thomas Aylott, Founder at Things That Do Stuff, gives an overview of Framer X, explains what it is used for and how it can be beneficial for web designers. The panelists then discuss the timeline and usage of different design and developer tools along with their compatibility with various platforms. Thomas shares his front-end development experiences from 2005, the kind of technologies he learnt and how, with interesting and fun anecdotes, and also talks about about his time at Facebook. They discuss the fact that how Ruby on Rails has brought about a significant change in web development, work-life balance in general, and in the end, the importance of making checklists and taking ownership. Links Things That Do Stuff Thomas’s website Thomas’s Twitter Thomas’s GitHub Thomas’s YouTube Prettier Picks Nader Dabit: Gödel, Escher, Bach: An Eternal Golden Braid Lucas Reis: CSS-Tricks Indirection is not Abstraction Charles Max Wood: Check out the recent milestone episodes on Devchat.tv! DevRev Hiring Show Notes writers for podcasts Extreme Ownership: How U.S. Navy SEALs Lead and Win Thomas Aylott: Objective Personality Notion The Checklist Manifesto: How to Get Things Right

Sponsors Sentry use the code “devchat” for $100 credit Triplebyte CacheFly Panel Lucas Reis Charles Max Wood Joined by special guest: Jared Palmer Episode Summary  In this episode of React Round Up, Jared Palmer, Lead Engineer at Palmer Group, gives the listeners an overview of React Suspense, how it helps to resolve conflicts with resource scheduling and how it differs from current practices. He mentions that it is developed completely by the React team and talks about some of its applications, especially in handling images. He explains how React Suspense will reduce code size for loading states, the mechanism of parallel execution and how complexity in logic can be simplified with it. Jared also mentions some modules where Suspense can already be integrated with and advises on where it is not recommended to be used yet. The panelists then discuss server-side rendering with Suspense and their approach in technology adoption, which is incremental. Finally they talk about Redux and move on to picks. Links The Platform - Suspense-ready components  Jared’s GitHub Jared’s Twitter Jared’s website The Palmer Group https://www.facebook.com/React-Round-Up-297859274397129/ https://twitter.com/reactroundup Picks Lucas Reis: Sunlight Alarm Clock Charles Max Wood: Gel Pads Notion Jared Palmer: DevHub The Undefined Podcast

Sponsors Sentry– use the code “devchat” for $100 credit TripleByte offers a $1000 signing bonus CacheFly Episode Summary In this episode of React Round Up, Justin Bennett speaks with co-founder of Couchbase, Chris Anderson. Chris has been working with NoSQL databases for approximately a decade, and is currently working on FaunaDB, doing development outreach, while writing codes to connect with the different eco systems: Serverless, JAMStacks and React Native. He is also a blogger on a platform he calls ‘Serverless’ and enjoys decoding web applications and converting them to mobile. Chris elaborates on the particulars and functions of JAMstacks, FaunaDB, React Native, Expo, Firebase and Netlify along with their databases. He tells of his journey with FaunaDB and explains what led to its introduction. He also gives a detailed explanation on Serverless functions, Multi-cloud deployment and extends advice to apprentices in the similar field. Links https://serverless.com/author/chrisanderson/ https://twitter.com/jchris https://github.com/jchris https://fauna.com/ Serverless Netlify React Native Firebase https://www.facebook.com/React-Round-Up https://twitter.com/reactroundup Picks Chris Anderson: React Native Starter Kit Netlify Fauna Todo Justin Bennett: Refactoring UI Build Your Own Mint

Sponsors Sentry use the code “devchat” for $100 credit Netlify Triplebyte CacheFly Panel Lucas Reis Justin Bennett Nader Dabit Charles Max Wood Episode Summary In this 50th episode of React Round Up, the panelists start with talking briefly about themselves, their work, as well as their side projects. Lucas Reis is a Senior Frontend Engineer at Zocdoc, and is working on the Zocdoc website, specifically on performance and SEO. He is also involved in sharing frontend knowledge throughout the company. Justin Bennett is a Senior Engineer at Artsy and focuses on web performance along with several open source projects. He is also interested in release processes and continuous integration. Nader Dabit is with Amazon Web Services as a Developer Advocate, working on GraphQL, React to React Native, Vue and is involved in community work too. Charles Max Wood is mainly focused on making this podcast better that includes things like getting sponsors, dealing with business issues, releasing the episodes on time, etc. He talks about his mission to help people find fulfillment from coding and enabling them to achieve their ideal lifestyle. They discuss hard and soft skills in software development, their interdependence and importance, and also the fact that the skills required to become a good developer are needed for personal development in general as well. They then mention their favorite past episodes and the growth of different programming ecosystems and communities such as React, Vue, Angular, etc. With respect to upcoming projects in React, they talk a bit about Suspense, Concurrent React, server-side rendering, performance issues, Prepack, compiler optimizations and Reason React. Finally, they each mention what they do apart from regular development work to unwind and relax. Links Artsy The Dev Rev React 16 Roadmap Reason ReasonReact ClojureScript Thinkster Disney Heroes Battlemode Picks Justin Bennett: Inter Can’t Unsee design game Lucas Reis: The Law of Leaky Abstractions Nader Dabit: React Native Open GraphQL newsletter Charles Max Wood: Libsyn WordPress DigitalOcean Microphones – Electro-Voice RE20, Audio-Technica ATR2100

Sponsors: Netlify Sentry use the code “devchat” for $100 credit TripleByte   Panel: Charles Max Woods Special Guests: Donovan Brown In this episode, the Charles speaks with Donovan Brown. He is a principal DevOps Manager with Microsoft with a background in application development. He also runs one of the nation’s fastest growing online registration sites for motorsports events DLBRACING.com. When he is not writing software, he races cars for fun. Listen to today’s episode where Chuck and Donovan talk about DevOps, Azure, Python, Angular, React, Vue, and much, much more! Links: Donovan Brown’s GitHub Donovan Brown’s Twitter Donovan Brown Donovan Brown – Channel 9 Donovan Brown – Microsoft Azure YoTeam Azure.com/devops GitHub Azure DevOps’ Twitter Picks: Charles Jet Blue Beta Testers Donovan YoTeam VSTeam Powershell Module

Sponsors: Netlify Sentry use the code "devchat" for $100 credit CacheFly Panel Lucas Reis Nader Dabit Charles Max Wood Special Guest: Kay Plößer Episode Summary In this episode of React Round Up, the panel talks with Kay Plößer, describing their experiences learning React. Kay is a software developer from Stuttgart, Germany and the author of the book React from Zero. They discuss the best approach to learning React from scratch. Kay describes the process of writing and producing his book 'React from Zero'. Initially he started with tutorials and lessons and then turned those into a book. It is constructed in two sections: basic and advanced and it's purpose is to help developers learn React without being overwhelmed. He has received great feedback from the people who have bought the book. Kay then describes his experiences teaching React to developers and talks about his blog post React Hooks Demystified which became really popular. The panel then about how developers can increase and diversify income through writing books and side projects. Links Kay's Book: React from Zero Kay's Blog Post: React Hooks Demystified Kay’s LinkedIn Kay’s Twitter Kay’s GitHub Kay's Website Kay's Skillshare Kay's Facebook https://www.facebook.com/React-Round-Up https://twitter.com/reactroundup Picks Nader Dabit: Finite and Infinite Games by James Carse Lucas Reis: An Introduction and Guide to the CSS Object Model AST Explorer Charles Wood: Charles' New Devchat.tv Build on Eleventy on GitHub Kay Plößer: Wardley maps

Sponsors Sentry use the code "devchat" for $100 credit

Sponsors: KendoUI Sentry use the code "devchat" for $100 credit TripleByte $1000 signing bonus Cachefly Panel: Nader Dabit Justin Bennett Charles Max Wood Special Guest:  Charlie Cheever Notes: This episode of React Round Up has the panelists talking to Charlie Cheever, a former Facebook employee, who currently works on Expo.  The panel discusses Charlies article called “Should we be using React Native?”,  Airbnb sunsetting their React Native app, and the nature of the Expo app. Charlie describes Expo as the easiest way to do React Native using just JavaScript, and making it as easy and powerful as possible. Expo works kind of like a web browser for JavaScript, and is available on iOS, Android, and and Google app stores. Expo CLI has replaced Create React Native CLI because Expo is more user friendly. Many features are already included in Expo, including OTA updates, dealing with fonts, video player, Facebook ad and Google ads, barcode scanner, Native maps, and much more. To get started on your computer, go to snack.expo.io or download the Expo app on your phone. The panelists chat about the success of Charlie’s company and how he has attracted so many great programmers to his company. Charlie gives a history of how Expo got started. Charlie gives advice on how to start a business around a free tool, and the goal of Expo to make every service available on the app before focusing on making money. The panel discusses sustainability in the software world, as making people pay for things can drive them to write their own stuff. They talk about the benefits of using Expo and its ability to cross platforms, and enterprise companies such as Youtube and Instagram shifting over to using React. Charlie attributes this shift to two things; the increase in software developer salaries driving down the number of available software engineers, which makes it difficult for smaller companies to hire engineers, thus pushing them to use things like React and Expo to make up for it. Last, the panelists talk about the possibility that the world is moving towards a future characterized by a “write once, run everywhere” and more uniform experiences across operating systems. Terms: React Native Expo Expo CLI VS Code Emacs Vim Xamarin Titanium Native Script AWS Picks: Nader: Video series on Egghead On Grand Strategy Justin: rePNG Dark Reader Charles: Pomodoro method Kanbonflow John Somnez video Charlie: React navigation React Native Gesture Handler React Native Reanimated Wiliam Candelon “Can It Be Done in React Native” videos

Sponsors KendoUI Sentry use the code “devchat” for $100 credit TripleByte Cachefly Panel Lucas Reis Justin Bennett Charles Max Wood Joined by Special Guest: Max Desiatov Summary Max Desiatov shares his experience transitioning from REST to GraphQL. The panel discusses Max’s migration strategy and other strategies. REST and GraphQL are compared, the problems with both are discussed. The panel shares their favorite things about GraphQL including workflow and data modeling. The solutions for GraphQL problems are discussed and the things the panel would like to see are mentioned. Max Desiatov and Justin Bennett share the different tools they use including Apollo and Graphiql. Charles Max Wood steers the conversation to the adoption of GraphQL by companies. Links https://sailsjs.com/ https://graphql.org https://spring.io/understanding/HATEOAS https://www.graphile.org/postgraphile/ https://www.apollographql.com/docs/react/ https://github.com/expo/apollo-codegen https://github.com/graphql/graphiql https://www.apollographql.com/docs/graphql-tools/schema-stitching.html https://www.apollographql.com/docs/react/essentials/local-state.html https://desiatov.com/why-graphql/ https://desiatov.com/ https://twitter.com/maxdesiatov https://github.com/maxdesiatov Picks Justin Bennett https://renovatebot.com/ The Wheel of Time by Robert Jordan and Brandon Sanderson Charles Max Wood https://www.11ty.io/ https://devchat.tv/ruby-rogues/rr-383-rbspy-a-newish-ruby-profiler-with-julia-evans/ Max Desiatov https://nadiaeghbal.com https://jvns.ca/blog/2018/09/18/build-impossible-programs/

Sponsors KendoUI Sentry use the code “devchat” for $100 credit TripleByte Cachefly Panel Charles Max Wood Lucas Reis Justin Bennett Joined by Special Guest: Dave Ceddia Summary Dave Ceddia introduces hooks and what they let you do. The panel discusses how hooks work and how they will clean up the code. Dave explains what react does behind the scenes when hooks are being used. Hooks are simple to use but hard to explain, so the panel asks Dave how he would teach hooks. Dave explains there is a learning hump and shares what trips most developers up. The panel considers the switch from life cycles to effect and the mindset shift it requires.  The difficulties of hooks are explored, such as there are now three ways to share functionality in react components. Dave shares the advantages of using array destructing instead of object destructing. The panel considers how hooks change the react framework and whether it is worth going back and refactoring everything or to refactor as you go. Different migration paths are discussed and the panel gives advice for different company types and sizes. Jokingly the panel contemplates the hype surrounding hooks and suspense. Links https://www.youtube.com/watch?v=Z2DU0qLfPIY&feature=youtu.be&t=2445 https://reactjs.org/docs/hooks-faq.html#should-i-use-hooks-classes-or-a-mix-of-both https://english.stackexchange.com/questions/12980/how-to-pronounce-tuple https://reactjs.org/blog/2018/11/27/react-16-roadmap.html https://reactjs.org/docs/hooks-intro.html https://daveceddia.com/tags/#hooks https://youtu.be/CpPCJigsPNY https://daveceddia.com/ https://twitter.com/dceddia Picks Charles Max Wood mastermindhunt.com/devchat https://devchat.tv/get-a-coder-job/ Lucas Reis https://xstate.js.org/docs/ https://github.com/carloslfu/use-machine Justin Bennett https://github.com/zeit/ncc https://parceljs.org/ https://bcrikko.github.io/NES.css/ Dave Ceddia https://codesandbox.io/docs/live https://jamesclear.com/atomic-habits

Sponsors KendoUI Sentry use the code “devchat” for $100 credit TripleByte CacheFly Panel Charles Max Wood Nader Dabit JC Hiatt Joined by Special Guest: Spencer Miskoviak Summary In this episode, Spencer Miskoviak shares his experience and answers questions about using typescript in React. Spencer starts by answering why react developers tend to use es6 and what the tradeoff is using typescript instead. The panel contemplates the advantages and disadvantages of using typescript and its gaining momentum in the React community. Spencer discusses how they are using typescript at Handshake and how it has paid off. Create react app and its support of typescript is discussed. The episode ends with Spencer answering questions about using dot notation with typescript and how it works. Links https://webpack.js.org/ https://parceljs.org/ https://medium.com/@skovy/using-component-dot-notation-with-typescript-to-create-a-set-of-components-b0b2aad4892b https://app.joinhandshake.com/login https://medium.com/@skovy https://twitter.com/SpencerSkovy https://github.com/Skovy Picks Nader Dabit https://medium.com/open-graphql https://reinvent.awsevents.com/ JC Hiatt Sony Noise Cancelling Headphones WH1000XM3 Charles Max Wood https://devchat.tv/dev-rev/ https://www.garyvaynerchuk.com/podcast/ https://player.fm/series/refactor-your-body Spencer Miskoviak http://www.rubberducking.fm/ The Future of React Endurance: My Year in Space, A Lifetime of Discovery by Scott Kelly  

Panel: Lucas Reis Justin Bennett Charles Max Wood Special Guest: Kent C. Dodds In this episode, the panelist talk with today’s guest, Kent C. Dodds who works for PayPal, is an instructor, and works through open source! Kent lives in Utah with his wife and four children. Kent and the panel talk today about testing – check it out! Show Topics: 0:00 – Kendo UI 0:32 – Chuck: Hello! My new show is TheDevRev – please go check it out! 1:35 – Panel: I want all of it! 1:43 – Chuck: Our guest is Kent C. Dodds! You were on the show for a while and then you got busy. 2:06 – Guest.  3:09 – Panel: The kid part is impressive. 3:20 – Guest: Yeah it’s awesome, but the kid part is my wife!  4:09 – Panel: 10 years ago we weren’t having any tests and then now we are thinking about how to write better tests. It’s the next step on that subject. What is your story with tests and what sparked these ideas? 4:50 – Guest. 7:25 – Panel: We have a bunch of tests at my work. “There is no such thing as too many tests” are being said a lot! Then we started talking about unit tests and there was this shift. The tests, for me, felt cumbersome. How do I know that this suite of tests are actually helping me and not hurting me? 8:32 – Guest: I think that is a valuable insight. 11:03 – Panel: What is the make-up of a good test? 11:13 – Guest: Test every line – everything! No. 11:19 – Chuck: “Look at everything!” I don’t know where to start, man! 11:30 – Guest: How do you avoid those false negatives and false positives. 15:38 – Panel: The end user is going to be like more of integration test, and the developer user will be more like a unit tester? 16:01 – Guest: I don’t care too much of the distinction between unit and integration tests. 18:36 – Panel: I have worked in testing in the past. One of the big things that fall on the users’ flow is that it’s difficult b/c maybe a tool like Selenium: when will things render? Are you still testing things in isolation? 19:33 – Guest: It depends. When I talk about UI integration testing I am still mocking the backend. 23:10 – Chuck: I am curious, where do you decide these are expensive (so I don’t want to do too many of them), but at what point is it worth it to do it? 23:30 – Guest mentions the testing pyramid. 28:14 – Chuck: Why do you care about confidence? What is confidence and what does it matter? 28:35 – FreshBooks! 29:50 – Guest. 32:20 – Panel: I have something to add about the testing pyramid. Lucas talks about tooling, Mocha, JS Dong, and more! 33:44 – Guest: I think the testing pyramid is outdated and I have created my own. Guest talks about static testing, LINT, Cypress, and more! 35:32 – Chuck: When I was a new developer, people talked about using tests to track down bugs. What if it’s a hairy bug? 36:07 – Guest: If you can, you can use this methodical approach... 39:46 – Panel: Let’s talk about the React library for a little bit? Panel: Part of the confidence of the tests we write we ask ourselves “will it stand the test of time?” How does the React Testing library go about to solve that? 41:05 – Guest. 47:51 – Panel: A few more questions. When you are getting something and testing and grabbing the label by its text have you found that to be fragile? Is it reasonably reliable? 48:57 – Guest: Yeah this is a concern and it relies on content. 53:06 – Panel: I like this idea of having a different library. Sometimes we think that a powerful tool is better, but after spending some time with other tools that’s not always the case. 54:16 – Guest: “You tie your hands to free your mind.” It does less but what it does less it does better. 55:42 – Panel: I think that with Cypress, too? 55:51 – Guest: Yeah that’s why Cypress is great to use. 57:17 – Panel: I wrote a small library here at work and it deals with metrics. I automated all of those small clicks – write a bit – click a bit – and it was really good. I felt quite efficient. Those became the tests. 57:58 – Panel: One more question: What about react Native? That comes up a lot. At looking at testing libraries we try to keep parody between the two. Do you have any thoughts on that? 58:34 – Guest talks about React Native. 1:00:22 – Panel: Anything else? It’s fascinating to talk about and dive-into these topics. When we talk about confidence that is very powerful, too. 1:01:02 – Panelist asks the last question! 1:01:38 – Guest: You could show them the coverage support. Links: Ruby on Rails Angular JavaScript Elm Phoenix GitHub Get A Coder Job Enzyme React Testing Library Cypress.io Hillel Wayne Testing JavaScript with Kent C. Dodds Kent Dodds’ News Kent Dodds’ Blog Egghead.io – Kent C. Dodds Ready to Write a Novel? Practical TLA+ GitHub: Circleci-queue GitHub: sstephenson / bats Todoist Discord Kent’s Twitter Sponsors: Get a Coder Job Cache Fly Fresh Books Kendo UI   Picks: Lucas Hillel Wayne Practical TLA+ Justin Circle CI Queue Bats Todoists Charles MFCEO Project Podcast The DevRev Kent Discord Devs Who Write Finding your Why! TestingJavaScript.com kcd.im/news kcd.i./hooks-and-suspense NaNoWriMo