A hero's journey in JavaScript frameworks
1 like416 views
The document discusses the hero's journey as an analogy for learning JavaScript frameworks, particularly focusing on the process of starting a new project, overcoming obstacles, and achieving mastery. It outlines a three-act structure to detail the stages of this journey, including setup, confrontation, and resolution. Key elements such as project setup in Next.js, handling configurations, and addressing challenges are highlighted as part of the learning curve.
A hero's journey in JavaScript frameworks
- 1. The hero’s journey in JavaScript frameworks @ddprrt • fettblog.eu
- 3. Hero’s journey Not the tour of heroes!
- 4. !
- 6. ! call to adventure crossing the threshold
- 7. ! call to adventure crossing the thresholdknown 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!
- 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
- 57. returning the boon … to you!
- 63. fin.