Hitchhiker's guide to the Universe

Universal JS Day - 20 April 2018 - Ferrara

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

  1. Install
  2. Configure routes
  3. Create server
  4. Update start script

~ 16

lines of code

Apollo GraphQL

for data

  1. Install
  2. Setup connection to server
  3. Define queries
  4. Use data in components

± 30

lines of code

and 1 registration

CSS-in-JS

default styled-jsx

  1. Install
  2. Setup SSR
  3. Use

± 10

lines of code

for styled-components

Test

with Storybook

  1. Install
  2. Configure
  3. Create stories
  4. Test

~ 10

lines of code

¯\_(ツ)_/¯

Giacomo Zinetti

@gcmznt

DON'T
PANIC

Links