stevekinney

{
    "Records": [
        {
            "cf": {
                "config": {
                    "distributionDomainName": "d3j9cel339anj4.cloudfront.net",
                    "distributionId": "E3U8Q34NJRFZ8Y",
                    "eventType": "viewer-request",
                    "requestId": "EvyNcmriLUwwIKecK5dpPHehUpzBcO2BolZQ9O3Q95A9DxtOuEwRUw=="
                },

stevekinney

language: node_js
node_js:
  - '8'
cache:
  yarn: true
  directories:
    - node_modules
script:
  - yarn test
before_deploy:

stevekinney

Node.js Serverless Design and Best Practices

Bryan Hughes

  Serverless is taking the backend world by storm, and for good reason. It promises infinite scalability and never having to manage a server again. Serverless mostly achieves these goals the same way that functional programming does. You define inputs and outputs without using state...and state is what makes scaling hard.   Much like functional programming though, being productive in serverless requires a tricky shift in mindset. This workshop will walk you through creating a serverless application with Node.js, teach you best practices, and teach you how to think serverless.  

stevekinney

class Board {
  constructor(min = 1, max = 30) {
    this.spaces = {};

    for (let space = min; space <= max; space++) {
      this.spaces[space] = space;
    }

    // Ladders
    this.spaces[2] = 21;

stevekinney

• State: as much as you need and as little as you can get away with
• Prefer stateless components
• Keep logic out of your components
• Lazy-load and chunk components when aggressively
• Assume Asynchrony (See above; also—don’t unleash Zalgo)
• Use UI components
• Prefer renderProps to large components
• Start with a story in the storybook
• Use the adapter pattern for managing state
• If the data layer promise resolves—assume everything worked out. Do not try to read responses in your components.

stevekinney

• Organizing Large React Applications – Kapost Engineering
• How OkCupid organizes its multi-page React app
• Dissecting Twitter’s Redux Store – Statuscode – Medium
• Diving Deeper into Twitter’s Redux Store: Adventures in Minified Vendor Javascript
• Five Tips for Working with Redux in Large Applications
• Advanced Redux Entity Normalization – Daniel Cousineau – Medium
• [Normalizing Redux stores for maximum code reuse. – Adam Rackis – Medium](https://medium.com/@adamrackis/n

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'));