stevekinney

General React Architecture

• Video: Andrew Clark: What's Next for React — ReactNext 2016 - YouTube
• Video: Scalable React app architecture [React Bangkok 2.0.0] - YouTube
• Building an Enterprise React Application, Part 1 | Lullabot
• How to avoid refactoring in your first React.js application | Andrej Gajdos
• React Best Practices & Patterns - Sean Saranga Amarasinghe
• React Best Practices and Useful Functions – Nessim Btesh – Medium
• 11 lessons learned as a React contractor – Hacker Noon
• [Characteristics of an

stevekinney

Web Performance

Requirements

• You need to have the latest version of Node. Preferably, you're using 9.8.0, but the latest LTS should work as well.
• You should have npx installed using npm install -g npx.
• Install the React Developer Tools.

Repositories

stevekinney

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  mode: 'production',
  entry: {
    vendor: ['react', 'react-dom', 'redux', 'react-redux'],
    main: path.join(__dirname, '..', '/src/index.js'),
  },
  output: {

stevekinney

ReactDOM.render(<h1>Hello</h1>, document.getElementById('root'));

---

const App = <h1>Hello</h1>;

ReactDOM.render(App, document.getElementById('root'));

stevekinney

This is a course about web performance. But, I'm going to make the case to you that this course is going to be a bit different. We're going to look at performance in three different ways: the speed at which we get our code to our users, the speed at which our code runs, and the speed at which the changes we make are visible to the user.

In fairness, it's a bit more nuanced than that (e.g. we also want to get the initial experience up and running as quickly as possible), but let's keep it to those three buckets for now.

In a perfect world, you could do everything. You'd have server-side rendering for your client-side application, fast and efficient compression, HTTP/2, and a comprehensive CDN. You'd ship exactly what that user needs for their device for the initial render and then predictively lazy-load additional assets as needed. Your page would be ready to rock in under 5 seconds regardless of the user's location on the planet or their device.

Each line of your code would be finely-tuned to work optimall

stevekinney

// Source: http://kellegous.com/j/2013/02/27/innertext-vs-textcontent/

(function() {

var UpdateCellsAndGetInnerText = function(cells) {
  var text = [];
  cells.each(function(i, c) {
    // update styles to invalidate layout.
    // c.style.fontSize = '10px';
    c.style.paddingLeft = i + 'px';

stevekinney

Questions

Introduction

• What are some best practices for creating usable web applications?
• Can you name two programming paradigms important for JavaScript app developers?

JavaScript Fundamentals

• Why is asynchrony important in client-side web applications?

stevekinney

New Component: ComponentName

Example in Style Guide

What properties will this component receive?

• title (string, default: "Hello World"): The title of the of the component. (This is an example.)
• onClick (Function): Callback function that will be invoked when the component is clicked.
• (More properties here.)

stevekinney

• Rearchitecting Airbnb’s Frontend – Airbnb Engineering & Data Science – Medium
• Truly Multiple Entries with Webpack - Igor Kuzmenko
• Multi-page applications – A beginner’s guide to Webpack 2 – Medium
• Targets
• Multi-page website with React in 2017 – Krithika Muthukumar – Medium
• How OkCupid organizes its multi-page React app
• Multiple react apps based on multiple routers, all working with current location · Issue #3533 · ReactTraining/react-router
• [Multiple React instances per DOM (when using AMD for examp

stevekinney

const array = [1,2,3];

// Multiple lines
array.map((n) => {
  return n * 2;
});

// Single line
array.map(n => n * 2);