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

oreqizer

package main

import (
	"log"
	"net/http"
)

func main() {
	http.HandleFunc("/", func (w http.ResponseWriter, r *http.Request) {
		w.Write([]byte("Hello world"))

oreqizer

Keybase proof

I hereby claim:

• I am oreqizer on github.
• I am oreqizer (https://keybase.io/oreqizer) on keybase.
• I have a public key whose fingerprint is 6381 B42B 3743 FEA9 113E AAB2 D314 812A 32E0 151E

To claim this, I am signing this object:

oreqizer

import React from 'react';

import Todo from '../../../universal/containers/Todo';

const doneStyle = {
  textDecoration: 'line-through',
};

const notDoneStyle = {
  textDecoration: 'none',

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

// @flow
import React from 'react';

import Todo from '../containers/Todo';

import todoSelector from './todoSelector';

type Props = {
  filter: string,
  header: string,