015 Michael Jackson and Ryan Florence explain that React.js really changes how we think about building web and mobile apps

Jeff is joined by Michael Jackson and Ryan Florence to discuss what makes the technology and innovations coming from the React.js community really special.

“It’s so rare that something actually comes along that really changes how we think about building stuff” - Michael Jackson

Episode InfoShow Notes and TimelineMichael Jackson and Ryan Florence React.js trainingLinks and ResourcesOnline Training CoursesTrainingMentioned in the episodeFollowRelated contentVideo

Episode Info

Episode: CW 015
Published: April 8th, 2015
Tags: javascript, reactjs,nodejs,isomorphic
Duration: 1:16:34
Updated: 2015-04-11

Show Notes and Timeline

2:40 - What’s special about React.js?

“For me personally, it changed the way that I code as much as jQuery did back in 2008.” - Michael Jackson

“OMG, This is really going to change the way that I work and how much I enjoy my job on a day to day basis.” - Michael Jackson

5:00 - React.js doesn’t care about how you represent your data, models can be simple objects and arrays

“What excites me about React.js is… it doesn’t care about your data model, you just use plain JavaScript objects… For my models I use: array, Object, Number, …” - Ryan Florence

“The new paradigm with React.js is we aren’t observing, we aren’t having a bunch of events, we are just throwing data at functions and then they return descriptions of UI” - Ryan Florence

6:40 - Javascript becomes our templating language

“It’s hard to explain until you start doing it how big of a shift this makes in your user interface development, to not worry about your app over time; you’re not mutating the state of objects over time in your UI components” - Ryan Florence

“We get to use the solutions that JavaScript already provides like modules and scope… we don’t have to wait for the framework’s template language to implement a solution for that” - Ryan Florence

8:25 - React.js, Angular, and Ember are pushing the language forward (ES6)
10:56 - Is React.js differnet from other SPA frameworks?
11:30 - React.js could be a good rendering tool for many frameworks
12:10 - Integrating React.js into existing code is easy without a full rewrite
13:30 - React.js be added to mature apps, not just greenfield apps
14:50 - Angular 2.0 and Ember 2.0 look a lot like and sound a lot like React.js. It is influencing so many other frameworks.
15:30 - Who can use React.js? What types of projects?
19:00 - Server side rendering - Isomorphic javascript
22:30 - React.js doesn’t care where you render - client, server, canvas, etc.
24:00 - Is React.js hard to learn?
25:00 - React.js allows you to code yourself out of problems
26:00 - Smaller API’s are easier to learn
28:10 - What brought Michael and Ryan to using React.js?

For me, one of the most awkward parts about #Emberjs is switching back and forth between Handlebars templates and component code. Any ideas?

— Michael Jackson (@mjackson) May 13, 2014

28:45 - Instructure had invested in Ember but were having struggles shipping and learning

“At Instructure, we bet on Ember… we were messing with it for almost a year and kind of weren’t shipping anything…” - Ryan Florence

30:00 - After an hour of using React.js, Ryan wanted to use it everywhere

“After an hour of using React.js, I had my face in my hands and said… I want to use this everywhere” - Ryan Florence

30:45 - A few hours later, Ryan had a router proof of concept up and running

“After two hours I actually had something working, and that probably impressed me the most about React.js” - Ryan Florence

“I was never able to just pick up something as quickly as I was able to pick up React.js and build a router” - Michael Jackson

“Two guys who had no idea what they were doing (with React.js) were able to make something (ReactRouter) that worked and was useful for other people” - Michael Jackson

32:30 - Ryan started throwing his toughest problems at React.js and it handled them great

“Then I just threw all of my toughest problems that I had ever run into as a frontend developer at React.js” - Ryan Florence

33:00 - Everyone at Instructure wanted to switch to React.js after being exposed to it

“At Instructure we had this hack week, I encouraged a couple of my coworkers to use React.js for their projects… every single one of them came back and asked: When are putting this into our stack?” - Ryan Florence

33:20 - Reducing the context switch when developing, JSX
37:26 - React Router and Relay, working with React.js team

“This is something that I really feel that the React.js authors have seriously nailed on the head, they’ll say they care about the community, and then they will show it by listening, participating, and working with us” - Michael Jackson

40:00 - Data fetching improvements
41:00 - Forward thinking attitude using ES6
42:01 - Relay
45:10 - Components
48:00 - Michael Jackson and Ryan Florence’s React.js Training offerings
50:10 - Become a React.js expert
51:00 - React.js topics covered
52:26 - Prerequisites for learning React.js, just javascript
54:30 - Training format
56:13 - React Router
58:30 - JSX is an optional convenient way to write nested function calls
1:00:00 - Getting designers involved with React.js

@ebryn @ryanflorence @mjackson At Stampsy, JSX enabled our designer to author, refactor and tweak components at crazy speed.

— Dan Abramov (@dan_abramov) September 28, 2014

1:02:00 - Thinking in React.js by Pete Hunt
1:03:38 - React Native
1:05:00 - React Native as a game changer
1:07:00 - Developers can work on native and web
1:08:00 - React Native productivity of instant refreshing for new code
1:10:20 - The wonderful and genuine React.js community

“I am just so impressed by the React.js community… everybody is helping and sharing, all trying to move our industry forward” - Jeff Barczewski

“The people I have found in the React.js community have been genuine. Their desire to help you understand is genuine. Their desire to learn is genuine. It’s been inspiring for me as well.” - Michael Jackson

1:11:38 - Closing

Michael Jackson and Ryan Florence React.js training

Michael and Ryan have launched some React.js training starting this April. CodeWinds listeners can get a $300 discount to their San Francisco training this April 16-17, 2015. Use the link: http://codewinds.com/reactsf

Links and Resources
Online Training Courses
CodeWinds React.js Fundamentals

The premier online course and community where you learn React.js by pragmatically building a real web app while applying TDD/BDD principles

Training

http://codewinds.com/reactsf - $300 discount for Michael Jackson & Ryan Florence React.js training in San Francisco - April 16-17, 2015
https://reactjs-training.com/ - Michael Jackson and Ryan Florence training events - Seattle, San Francisco, Boulder, Boston, New York, Paris
http://codewinds.com/topics - Provide your input on topics, projects, difficulties, technology that you would like covered in future CodeWinds content (tutorials, podcasts, video training courses and classes).
Subscribe to the CodeWinds Leading Edge member list to be the first to hear about the upcoming CodeWinds React.js video training course and be invited to become charter members.

Mentioned in the episode

React Rally - A community React conference August 24 - 25, 2015 in Salt Lake City, Utah
Removing User Interface Complexity, or Why React is Awesome - James Long
Twitter on the importance of server rendering
Flipboard renders to canvas
The tweet that started it all for Michael
ReactRouter - Michael and Ryan’s isomorphic client and server routing solution for React.js
Facebook’s React.js Conf talk about Relay/GraphQL - video from React.js Conference 2015
Dan Abramov’s tweet about designers + React
Pete Hunt’s post about “Thinking in React”
Former UIKit dev on React Native
Building the Facebook Newsfeed with Relay
Mach HTTP client, server, and proxy which runs on Node.js and in the browser

Follow

Michael Jackson - twitter, github
Ryan Florence - twitter, github
Jeff Barczewski - twitter, github
CodeWinds - twitter, github

Related content

The React.js Conference experience - Jeff’s article on his experience at the first React.js Conference (2015)
CodeWinds podcast episode 4 - React.js with Pete Hunt

Video

Keynote on React.js and React Native from React.js Conf 2015