Slide 1
Slide 1 text
The hero’s journey
in JavaScript frameworks
@ddprrt • fettblog.eu
Slide 2
Slide 2 text
Hero’s journey
Slide 3
Slide 3 text
Hero’s journey
Not the tour of heroes!
Slide 4
Slide 4 text
!
Slide 5
Slide 5 text
!
call to adventure
Slide 6
Slide 6 text
!
call to adventure
crossing the threshold
Slide 7
Slide 7 text
!
call to adventure
crossing the threshold
known
unknown
Slide 8
Slide 8 text
!
call to adventure
crossing the threshold
abyss
known
unknown
Slide 9
Slide 9 text
!
call to adventure
crossing the threshold
abyss
the road of trials
known
unknown
Slide 10
Slide 10 text
!
call to adventure
crossing the threshold
metamorphosis
abyss
the road of trials
known
unknown
Slide 11
Slide 11 text
!
call to adventure
crossing the threshold
metamorphosis
the ultimate boon
abyss
the road of trials
known
unknown
Slide 12
Slide 12 text
!
call to adventure
crossing the threshold
metamorphosis
the ultimate boon
returning the boon
abyss
the road of trials
known
unknown
Slide 13
Slide 13 text
!
call to adventure
crossing the threshold
metamorphosis
the ultimate boon
returning the boon
abyss
the road of trials
known
unknown
Slide 14
Slide 14 text
It’s like learning a JavaScript framework!
Slide 15
Slide 15 text
!
call to adventure
crossing the threshold
metamorphosis
the ultimate boon
returning the boon
abyss
the road of trials
Slide 16
Slide 16 text
!
crossing the threshold
metamorphosis
the ultimate boon
returning the boon
abyss
the road of trials
starting a new project
Slide 17
Slide 17 text
!
metamorphosis
the ultimate boon
returning the boon
abyss
the road of trials
starting a new project
hello world
Slide 18
Slide 18 text
!
metamorphosis
the ultimate boon
returning the boon
abyss
starting a new project
hello world
googling the error message
Slide 19
Slide 19 text
!
metamorphosis
the ultimate boon
returning the boon
starting a new project
hello world
googling the error message
going
into
production
Slide 20
Slide 20 text
!
the ultimate boon
returning the boon
starting a new project
hello world
googling the error message
going
into
production
understanding the
technology
Slide 21
Slide 21 text
!
returning the boon
starting a new project
hello world
googling the error message
going
into
production
understanding the
technology
adding
framework to CV
Slide 22
Slide 22 text
!
starting a new project
hello world
googling the error message
going
into
production
understanding the
technology
adding
framework to CV
answering questions on
stack overflow
Slide 23
Slide 23 text
It’s a bumpy road ahead!
Slide 24
Slide 24 text
Three act structure
Slide 25
Slide 25 text
Three act structure
Slide 26
Slide 26 text
Act One Act Two Act Three
Three act structure
Slide 27
Slide 27 text
Beginning
Inciting
incident
Second
thoughts
Act One Act Two Act Three
Three act structure
Slide 28
Slide 28 text
Beginning
Inciting
incident
Second
thoughts
Act One Act Two Act Three
Obstacles
Obstacles
Three act structure
Slide 29
Slide 29 text
Beginning
Inciting
incident
Second
thoughts
Act One Act Two Act Three
Obstacles
Obstacles
Three act structure
Plot Twist!
Slide 30
Slide 30 text
Beginning
Inciting
incident
Second
thoughts
Act One Act Two Act Three
Obstacles
Obstacles
Three act structure
Climax
Plot Twist!
Slide 31
Slide 31 text
Beginning
Inciting
incident
Second
thoughts
Act One Act Two Act Three
Obstacles
Obstacles
Three act structure
Climax
Denouement
End
Plot Twist!
Slide 32
Slide 32 text
Beginning
Inciting
incident
Second
thoughts
Act One Act Two Act Three
Obstacles
Obstacles
Three act structure
Climax
Denouement
End
Plot Twist!
Slide 33
Slide 33 text
Beginning
Inciting
incident
Second
thoughts
Act One Act Two Act Three
Obstacles
Obstacles
Three act structure
Climax
Denouement
End
Plot Twist!
Slide 34
Slide 34 text
Beginning
Inciting
incident
Second
thoughts
Act One Act Two Act Three
Obstacles
Obstacles
Three act structure
Climax
Denouement
End
Plot Twist!
learning curve
Slide 35
Slide 35 text
Beginning
Inciting
incident
Second
thoughts
Act One Act Two Act Three
Obstacles
Obstacles
Three act structure
Climax
Denouement
End
Plot Twist!
learning curve
Slide 36
Slide 36 text
Beginning
Inciting
incident
Second
thoughts
Act One Act Two Act Three
Obstacles
Obstacles
Three act structure
Climax
Denouement
End
Plot Twist!
learning curve
Slide 37
Slide 37 text
Beginning
Inciting
incident
Second
thoughts
Act One Act Two Act Three
Obstacles
Obstacles
Three act structure
Climax
Denouement
End
Plot Twist!
learning curve
Slide 38
Slide 38 text
Beginning
Inciting
incident
Second
thoughts
Act One Act Two Act Three
Obstacles
Obstacles
Three act structure
Climax
Denouement
End
Plot Twist!
learning curve
Slide 39
Slide 39 text
Beginning
Inciting
incident
Second
thoughts
Act One Act Two Act Three
Obstacles
Obstacles
Three act structure
Climax
Denouement
End
Plot Twist!
learning curve
Slide 40
Slide 40 text
next.js
Slide 41
Slide 41 text
Act One: Setup
The Beginning
Inciting incident
Second thoughts
call to adventure
crossing the threshold
Slide 42
Slide 42 text
Act One: Setup
pages/index.js export default () =>
Hello World
package.json { "name": "hello-world", "scripts": { "dev": "next", }, "dependencies": { "next": "latest", "react": "^16.0.0", "react-dom": "^16.0.0" } }Slide 43
Slide 43 text
Act One: Setup
pages/index.js import Link from ‘next/link’
export default () =>
<>
Hello World
About > pages/about.js export default () => <>Hello About
>Slide 44
Slide 44 text
Act One: Setup
Second thoughts? import Head from ‘next/head’
export default () =>
<>
A podcast about JavaScript
Hello World
>Slide 45
Slide 45 text
Act Two: Confrontation
Obstacles
Obstacles
Plot Twist
the road of trials
the abyss
Slide 46
Slide 46 text
Act Two: Confrontation
next.config.js const withTypescript =
require('@zeit/next-typescript')
const withCSS = require('@zeit/next-css')
const withMDX = require('@zeit/next-mdx')()
module.exports =
withTypescript()
Slide 47
Slide 47 text
Act Two: Confrontation
next.config.js const withTypescript =
require('@zeit/next-typescript')
const withCSS = require('@zeit/next-css')
const withMDX = require('@zeit/next-mdx')()
module.exports =
withCSS(withTypescript())
Slide 48
Slide 48 text
Act Two: Confrontation
next.config.js const withTypescript =
require('@zeit/next-typescript')
const withCSS = require('@zeit/next-css')
const withMDX = require('@zeit/next-mdx')()
module.exports =
withMDX(withCSS(withTypescript()))
Slide 49
Slide 49 text
Act Two: Confrontation
about.js import ArticleLayout
from '../components/ArticleLayout';
import About from '../articles/about.mdx';
import Head from 'next/head';
export default () =>
About ScriptCast
;
Slide 50
Slide 50 text
Act Two: Confrontation The Abyss!
Slide 51
Slide 51 text
Act Two: Confrontation
server.js const express = require('express');
const next = require(‘next');
const app = next();
const handle = app.getRequestHandler();
The Abyss!
Slide 52
Slide 52 text
Act Two: Confrontation
server.js const express = require('express');
const next = require(‘next');
const app = next();
const handle = app.getRequestHandler();
app.prepare()
.then(() => {
const server = express();
server.get('/api', fetchRSS());
server.get('*', (req, res) => handle(req, res));
});
The Abyss!
Slide 53
Slide 53 text
Act Three: Resolution
Climax
Denouement
End
metamorphosis
the ultimate boon
returning the boon
Slide 54
Slide 54 text
Act Three: Resolution
import App, { Container } from 'next/app'
import React from ‘react';
export default class MyApp extends App {
render () {
const { Component, pageProps } = this.props;
return
}
}
_app.js
Slide 55
Slide 55 text
Act Three: Resolution
import App, { Container } from 'next/app'
import React from ‘react';
import Player from ‘../components/Player’
export default class MyApp extends App {
render () {
const { Component, pageProps } = this.props;
return
}
}
_app.js
Slide 56
Slide 56 text
the ultimate boon!
Slide 57
Slide 57 text
returning the boon … to you!
Slide 58
Slide 58 text
No content
Slide 59
Slide 59 text
No content
Slide 60
Slide 60 text
No content
Slide 61
Slide 61 text
incremental adoption
Slide 62
Slide 62 text
No content
Slide 63
Slide 63 text
fin.