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