oreqizer

I've encountered many people being oblivious to the way web application rendering works. Initial rendering is an important topic, especially in the context of SEO and performance, so brew yourself a nice cup of tea and pay attention.

Now, I will be talking about customer-facing web apps. When building internal tools or toy apps, it does not really matter. Just pick whichever is the simplest to implement (which is CSR in most cases).

There are three stages of the initial app render:

oreqizer

<div id="app"></div>

oreqizer

{"gameLink":"www.flickgame.org","canvasses":[[1619,"7",1,"f",3,"7",12,"f",7,"7",34,"f",32,"7",18,"f",3,"7",7,"f",24,"7",7,"f",3,"7",10,"f",3,"7",12,"f",7,"7",47,"f",10,"7",2,"f",7,"7",18,"f",3,"7",11,"f",16,"7",11,"f",3,"7",10,"f",3,"7",12,"f",7,"7",59,"f",7,"7",18,"f",3,"7",16,"f",3,"7",19,"f",3,"7",10,"f",3,"7",12,"f",7,"7",59,"f",7,"7",18,"f",3,"7",16,"f",3,"7",19,"f",3,"7",10,"f",3,"7",12,"f",7,"7",59,"f",7,"7",18,"f",3,"7",16,"f",3,"7",19,"f",3,"7",10,"f",3,"7",12,"f",7,"7",59,"f",7,"7",18,"f",3,"7",16,"f",3,"7",19,"f",3,"7",10,"f",3,"7",12,"f",7,"7",59,"f",7,"7",18,"f",3,"7",16,"f",3,"7",19,"f",3,"7",10,"f",3,"7",12,"f",7,"7",59,"f",7,"7",18,"f",3,"7",16,"f",3,"7",19,"f",3,"7",10,"f",3,"7",12,"f",7,"7",59,"f",7,"7",18,"f",3,"7",16,"f",3,"7",19,"f",3,"7",10,"f",3,"7",12,"f",7,"7",59,"f",7,"7",18,"f",3,"7",16,"f",3,"7",19,"f",3,"7",10,"f",3,"7",12,"f",7,"7",59,"f",7,"7",18,"f",3,"7",16,"f",3,"7",19,"f",3,"7",10,"f",3,"7",12,"f",7,"7",59,"f",7,"7",18,"f",3,"7",16,"f",3,"7",19,"f",3,"7",10,"f",3,"7",12,"f",

oreqizer

import * as React from "react";

class RestPost extends React.Component {
  constructor(props) {
    super(props);
    this.state = { firstName: "", lastName: "", country: "", university: "" };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

oreqizer

import { createSelector } from 'reselect';

const allTodoSelector = props => props.todos;  // an array of todos
const filterSelector = props => props.filter;  // a url parameter

const todoSelector = createSelector(
  [allTodoSelector, filterSelector],
  (todos, filter = 'all') => {
    switch (filter) {
      case 'all':

oreqizer

import React, { PureComponent } from 'react';

import CountryIcon from './CountryIcon';
import Box from './Box';

export default class TurboTodo extends PureComponent {
  constructor(props) {
    super(props);
    
    this.geo = { lat: props.lat, lon: props.lon };

oreqizer

import React, { PureComponent } from 'react';

import CountryIcon from './CountryIcon';
import Box from './Box';

export default class TurboTodo extends PureComponent {
  handleClick = () => {
    const { todo, onClick } = this.props;
    
    onClick(todo.id);

oreqizer

// WRONG!
// Always use a class/memoization for partial application
// and keep props flat, or implement 'shouldComponentUpdate'.
import React from 'react';

import CountryIcon from './CountryIcon';
import Box from './Box';

const BadTodo = props => (
  <Box onClick={() => props.onClick(props.todo.id)}>

oreqizer

import { createSelector } from 'reselect';

// sub-selectors
const allTodoSelector = state => state.todo.todos;  // an array of todos
const filterSelector = (_, props) => props.params.filter;  // a url parameter

// a selector
const todoSelector = createSelector(
  [allTodoSelector, filterSelector],
  (todos, filter = 'all') => {

oreqizer

import React from 'react';
import { storiesOf, action, linkTo, getStorybook } from '@kadira/storybook';
import Button from './Button';
import Welcome from './Welcome';
import { WithNotes } from '../notes-addon';
// import { addGroups, Group } from 'storybook-groups';


const Group = ({ children }) => React.Children.only(children);