Understanding JavaScript Libraries via React... by Andrew Pinkham

DjangoCon US 2017 - Understanding JavaScript Libraries via React and the React Ecosystem by Andrew Pinkham

After an initial foray into JavaScript in 2011, I actively avoided learning or using JavaScript. Then, in early 2017, JamBon Software took on a project to build a bleeding-edge JavaScript web app in Facebook’s React. Suddenly, I did not have a choice and had to learn JavaScript—versions 5 and 6—as well as Facebook’s React library with the entire JavaScript and React ecosystems behind it.

This talk will give developers a framework to analyze the overwhelming number of tools in the JavaScript world by categorizing the types of problems currently being solved. By the end, you’ll walk away with a mental framework of the solutions being built today.

We will start by looking at a history of JavaScript. This will allow us to discuss problems that developers need to solve in browsers when interacting with APIs. With a full understanding of the problems, we’ll turn our attention to discussing the types of solutions available and quickly discuss how different libraries like Angular, Vue, Inferno, and Cycle implement these solutions.

The talk will then explain how to use React in tandem with Redux to build a tiny website. We will demonstrate how to use tools like Webpack, fetch, Promises, and thunks to enhance React to solve the problems previously discussed.

Finally, we’ll end with a review of the material, and consider some of the topics being looked at by Facebook, Google and Microsoft.

Outline:

Libraries as Systems to Concretize Abstract Thought
Understanding the Problem
Node, NPM, and Yarn
DOM-Focused JavaScript Libraries
Understanding React
Enhancing React
Converting ES6 with Babel or Bublé
Aside: Handling types with Immutable.js, Typescript, and Tern
Handling Modules with Webpack or Rollup
Polyfills for Behavior
Replacing XMLHttpRequest with fetch
Using Promises and thunks for asynchronous actions
React-Router for Single-Page Apps
Redux-Forms for User Input
Linting with ESLint
Testing in 2 minutes
React with Django
Conclusion
Review of Problems
Review of Solution Types
Break Down: Modules vs Syntax Transformations
Performance with InfernoJS
Future JS
Photo of