The hero's journey in JavaScript frameworks

A framework's learning progress should mirror the classical hero's journey. See how Next.js helps you to become a hero step by step.

Transcript

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