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. 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!

  58. None
  59. None
  60. None
  61. incremental adoption

  62. None
  63. fin.