React Round Up

By Charles M WoodBusiness Technology Education How To Careers

React Round Up episodes

May 28, 2019RRU 063: Fullstack Development with React
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

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.
55 min
May 21, 2019RRU 062: Image Lazy Loading in React
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

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.
50 min
May 14, 2019RRU 061: Should Companies Have a Dedicated Frontend Team?
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

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.
46 min
May 07, 2019RRU 060: Linked lists in the Wild: React Hooks with Conlin Durbin
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
Special Guests: Conlin Durbin and Thomas Aylott.

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.
1 hr 11 min
April 30, 2019RRU 059: React Native's New Architecture with Parashuram
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
Special Guest: Parashuram.

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.
51 min
April 23, 2019RRU 058: React.js and WebAssembly to Rewrite Native Apps with Florian Rival
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
Special Guest: Florian Rival.

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.
58 min
April 16, 2019RRU 057: Playing with Polyhedra with Nat Alison
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
Special Guest: Nat Alison.

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.
51 min
April 16, 2019RRU 058: React.js and WebAssembly to Rewrite Native Apps with Florian Rival
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
58 min
April 09, 2019RRU 056: React Conf 2018 with Adam Laycock
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
Special Guest: Adam Laycock.

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.
57 min
April 02, 2019RRU 055: Building Static Sites with Gatsby with Ajay NS
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
Special Guest: Ajay NS.

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.
1 hr

About React Round Up

From the publisher's feed

Stay current on the latest innovations and technologies in the React community by listening to our panel of React and Web Development Experts.

Become a supporter of this podcast: