Изоморфность

1

jQuery vs Cheerio

1

let cheerio = require('cheerio')
let $ = cheerio.load('<h2 class="title">Hello world</h2>')

$('h2.title').text('Hello there!')
$('h2').addClass('welcome')

$.html()
//=> <h2 class="title welcome">Hello there!</h2>

1

Isomorphic

vs

Universal

1

JS only?

1

Скорость

1

Critical CSS

1

Critical CSS

1

Critical CSS

1

Server side rendering

2

Client

2

 ReactDOM.render(
    <ErrorReporter error={error} />, 
    container
);

Component

2

class Header extends React.Component {
  render() {
    return (
      <div className={s.root}>
        <h1>
          Hello from {__SERVER__ ? 'server' : 'browser'}
        </h1>
      </div>
    );
  }
}

Component

2

class Post extends React.Component {
  ...
  renderComments(){
    if (__SERVER__) return null

    return <Comments data={this.props.comments} />
  }
  render() {
    return (
      <div className={s.root}>
        {this.renderPost()}
        {this.renderComments()}
      </div>
    );
  }
}

Package.json

2

{
  "private": true,
  "name": "fetch",
  "main": "./fetch.server.js",
  "browser": "./fetch.client.js"
}

Websockets & Socket.io

3

Websockets

3

Socket.io

3

Docker

4

Why?

4

Архитектура

4

Docker-compose

4

docker-compose.yml

Text

web:
  image: node:5.4.0
  restart: always
  command: /bin/bash -c "npm install && npm start"
  mem_limit: 100000000
  volumes:
      - ../../node_modules/:/app/node_modules/
      - ../../gizobi_frontend/:/app/src/
      - ../../gizobi_frontend/node_modules:/app/src/node_modules
  ports:
      - "8022:8080"
  environment:
    PORT: 8080
    ENV: production
    SITE_URL: http://gizobi.immuzov.ru
  working_dir: /app/src

4

docker-compose.yml

4

Хостинг

pages.github.com

heroku.com

digitalocean.com

mongolab.com

4

5

React-starter-kit

RSK

6

kriasoft/react-starter-kit