The hero's journey in JavaScript frameworks

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.

187d92c9284160ad908885ab096f5209?s=128

Stefan Baumgartner

October 09, 2018
Tweet

Transcript

  1. 4.

    !

  2. 11.

    ! call to adventure crossing the threshold metamorphosis the ultimate

    boon abyss the road of trials known unknown
  3. 12.

    ! call to adventure crossing the threshold metamorphosis the ultimate

    boon returning the boon abyss the road of trials known unknown
  4. 13.

    ! call to adventure crossing the threshold metamorphosis the ultimate

    boon returning the boon abyss the road of trials known unknown
  5. 15.

    ! call to adventure crossing the threshold metamorphosis the ultimate

    boon returning the boon abyss the road of trials
  6. 16.

    ! crossing the threshold metamorphosis the ultimate boon returning the

    boon abyss the road of trials starting a new project
  7. 17.

    ! metamorphosis the ultimate boon returning the boon abyss the

    road of trials starting a new project hello world
  8. 18.

    ! metamorphosis the ultimate boon returning the boon abyss starting

    a new project hello world googling the error message
  9. 19.

    ! metamorphosis the ultimate boon returning the boon starting a

    new project hello world googling the error message going into production
  10. 20.

    ! the ultimate boon returning the boon starting a new

    project hello world googling the error message going into production understanding the technology
  11. 21.

    ! returning the boon starting a new project hello world

    googling the error message going into production understanding the technology adding framework to CV
  12. 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
  13. 28.

    Beginning Inciting incident Second thoughts Act One Act Two Act

    Three Obstacles Obstacles Three act structure
  14. 29.

    Beginning Inciting incident Second thoughts Act One Act Two Act

    Three Obstacles Obstacles Three act structure Plot Twist!
  15. 30.

    Beginning Inciting incident Second thoughts Act One Act Two Act

    Three Obstacles Obstacles Three act structure Climax Plot Twist!
  16. 31.

    Beginning Inciting incident Second thoughts Act One Act Two Act

    Three Obstacles Obstacles Three act structure Climax Denouement End Plot Twist!
  17. 32.

    Beginning Inciting incident Second thoughts Act One Act Two Act

    Three Obstacles Obstacles Three act structure Climax Denouement End Plot Twist!
  18. 33.

    Beginning Inciting incident Second thoughts Act One Act Two Act

    Three Obstacles Obstacles Three act structure Climax Denouement End Plot Twist!
  19. 34.

    Beginning Inciting incident Second thoughts Act One Act Two Act

    Three Obstacles Obstacles Three act structure Climax Denouement End Plot Twist! learning curve
  20. 35.

    Beginning Inciting incident Second thoughts Act One Act Two Act

    Three Obstacles Obstacles Three act structure Climax Denouement End Plot Twist! learning curve
  21. 36.

    Beginning Inciting incident Second thoughts Act One Act Two Act

    Three Obstacles Obstacles Three act structure Climax Denouement End Plot Twist! learning curve
  22. 37.

    Beginning Inciting incident Second thoughts Act One Act Two Act

    Three Obstacles Obstacles Three act structure Climax Denouement End Plot Twist! learning curve
  23. 38.

    Beginning Inciting incident Second thoughts Act One Act Two Act

    Three Obstacles Obstacles Three act structure Climax Denouement End Plot Twist! learning curve
  24. 39.

    Beginning Inciting incident Second thoughts Act One Act Two Act

    Three Obstacles Obstacles Three act structure Climax Denouement End Plot Twist! learning curve
  25. 40.
  26. 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" } }
  27. 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> </>
  28. 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> </>
  29. 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()
  30. 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())
  31. 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()))
  32. 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>;
  33. 51.

    Act Two: Confrontation server.js const express = require('express'); const next

    = require(‘next'); const app = next(); const handle = app.getRequestHandler(); The Abyss!
  34. 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!
  35. 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
  36. 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
  37. 58.
  38. 59.
  39. 60.
  40. 62.
  41. 63.