An overview of what came before React, the birth of React and it's evolution over the years. We included lessons we learned and a our wishlist for a better future.

1. React in 2018
by Michael Yagudaev

2. About Michael
• Co-Founder @ Nano 3 Labs & PictureThat
• Full-stack Developer Rails/React
• Been working with React since 2014
• Web dev since 2001
• Passionate about AR
• Fun Fact: Snowboarding is my freedom

3. Outline
• The Web Before React
• The History of React
• Lessons We Learned
• Our hope for a better tomorrow

4. Before React
2006
2010
2010
2010-2011

5. React is Born!
• In May 2013, Facebook brought us React
• Idea for Virtual DOM came from Doom 3 Engine
• Based on solid Computer Science design principles:
• Composition
• Encapsulation
• Unidirectional dependency

6. Flux Architecture
• In 2014 Facebook introduced us to Flux
• Solved the problem of State management on a global
(application) level

7. Redux is Born
• In 2015 Dan Abramov introduced us to Redux
• Inspired by Flux and Elm
• Single store architecture
• Composable reducers
• Focus on immutable data

8. Create React App is Born
• In 2016 we got a zero-config, official way to start a
react project
• Comes with
• Webpack
• Jest Test framework
• ES6
• ESLint

9. 2017
• Static Typing became important: TypeScript
• GraphQL as Replacement of REST
+

10. 2018?
• Let’s switch gears…
• What else do we need to create a real app?
• beyond create-react-app
• Is it really zero-config?
• wait, where is the server in all of this?

11. Apps We Want to Build
• Single Page Applications
• Responsive User Interface
• Easy for new developers to work with
• Extendable beyond browser, native desktop, mobile,
etc
• Fault tolerant (i.e. less bugs)

12. Let’s add the usual suspects
• Add eslint-config-standard
• Add React Router
• Add Redux
• Easy to do, just go to README and follow instructions
• Still… it takes time… :(

13. What about CSS?
• CSS is global scope, not great
• It is often used for state level changes (:hover, :visited,
.active)
• We need something better
• inline-styles are great, but there are better things:
• JSS or Styled Components
• See Material UI @ 1.0.0 for e.g.

14. How do we get data?
users
posts
Server
comments
users
posts
Client
comments
normalized normalized
REACT UI
REST/GraphQL
Http
Http
denormalized
Post 1
by John Doe
4 Comments
Post 2
by John Doe
7 Comments
Http
new
sync

15. How does it look like in
Redux?
{
users: {
items: {
1: { id: 1, name: 'Bob Smith', ... }
...
},
meta: { fetching: false, errors: [] }
}
posts: {
items: {
1: { id: 1, userId: 1, comments: [1, 2, 3] }
},
...
},
comments: { ... }
}

16. Redux (cont’d)
// actions/users.js
import { fetch } from 'fetch-redux-crud'
export const fetchUsers = _ => dispatch =>
dispatch(fetch('users', { path: 'users' }))
// reducers/users.js
import { reducersFor } from 'fetch-redux-crud'
export default reducersFor('users')

17. Redux (cont’d)
// selectors/users.js
import values from 'lodash/values'
const getUsers = (state) => values(state.users.items)
const getUsersById = (state) => state.users.items
// e.g. getUsersById(state)[2]

18. Where do you denormalize?
• Denormalize inside of selectors
• Before passing down to React
• Remember, keep the # of containers in the app low

19. Tips for using APIs
• Take only what you need (easier with GraphQL)
• Go through a single entry point e.g.`/lib/api.js`
• Keep it DRY, just because it is Redux
• look at `redux-crud` library
• Develop a naming convention for selectors
• Use React 16 Error Boundaries

20. File Structure
./src
actions/
components/
routes/
containers/
routes/
lib/
reducers/
selectors/
services/ <- optional
styles/ <- theme
index.js <- entry point
./tests
structure by type, than by feature

21. Wish List
• End-to-End Testing Framework
• create-react-app option to run a full-setup with redux
out-of-the-box
• Generators
• Library authors creating Test Helpers

22. Questions?
• twitter: @yagudaev, @nano3labs
• P.S. We’re Hiring…