Web

Isomorphic??

Universal??

SSR + SPA

=

Isomorphic

Node + Browser

=

Universal JS

Next.js

"Next.js is a minimalistic framework for server-rendered React applications."

Install


$ yarn add next react react-dom

Configure

					package.json

"scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start"
}

Create

					pages/index.js

export default
  () => <h1>Don't panic</h1>

Test

					$ yarn dev
http://localhost:3000

Deploy

					yarn global add now
now

Just 5 steps!

4 commands
6 lines of code

Long time ago in a universe far,
far away....

JS

					var msg = "Thanks for ..."
function scroll() {
  window.status = msg
  msg = msg.substring[...]
  setTimeout("scroll()",150)
}

CSS

...

Tables layout

Not cool...

But easy

Today

New ways

and tools

Express.js

for dynamic pages

Install
Configure routes
Create server
Update start script

~ 16

lines of code

Apollo GraphQL

for data

Install
Setup connection to server
Define queries
Use data in components

± 30

lines of code

and 1 registration

CSS-in-JS

default `styled-jsx`

Install
Setup SSR
Use

± 10

lines of code

for styled-components

Test

with Storybook

Install
Configure
Create stories
Test

Hitchhiker's guide to the Universe

Universal JS Day - 20 April 2018 - Ferrara