Download as PDF, PPTX
Uploaded byStefan Baumgartner
A hero's journey in JavaScript frameworks
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.
![[German] Ab mit dem Kopf!](https://cdn.slidesharecdn.com/ss_thumbnails/wke-180912103636-thumbnail.jpg?width=640&height=640&fit=bounds)
A hero's journey in JavaScript frameworks
- 1. The hero’s journey inJavaScript frameworks @ddprrt • fettblog.eu
- 2.
- 3. Hero’s journey Not thetour of heroes!
- 4.
- 5.
- 6. ! call to adventure crossingthe threshold
- 7. ! call to adventure crossingthe thresholdknown unknown
- 8. ! call to adventure crossingthe threshold abyss known unknown
- 9. ! call to adventure crossingthe threshold abyss the road of trials known unknown
- 10. ! call to adventure crossingthe threshold metamorphosis abyss the road of trials known unknown
- 11. ! call to adventure crossingthe threshold metamorphosis the ultimate boon abyss the road of trials known unknown
- 12. ! call to adventure crossingthe threshold metamorphosis the ultimate boon returning the boon abyss the road of trials known unknown
- 13. ! call to adventure crossingthe threshold metamorphosis the ultimate boon returning the boon abyss the road of trials known unknown
- 14. It’s like learninga JavaScript framework!
- 15. ! call to adventure crossingthe threshold metamorphosis the ultimate boon returning the boon abyss the road of trials
- 16. ! crossing the threshold metamorphosis theultimate boon returning the boon abyss the road of trials starting a new project
- 17. ! metamorphosis the ultimate boon returningthe boon abyss the road of trials starting a new project hello world
- 18. ! metamorphosis the ultimate boon returningthe boon abyss starting a new project hello world googling the error message
- 19. ! metamorphosis the ultimate boon returningthe boon starting a new project hello world googling the error message going into production
- 20. ! the ultimate boon returningthe boon starting a new project hello world googling the error message going into production understanding the technology
- 21. ! returning the boon startinga new project hello world googling the error message going into production understanding the technology adding framework to CV
- 22. ! starting a newproject 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 bumpyroad ahead!
- 24.
- 25.
- 26. Act One ActTwo Act Three Three act structure
- 27. Beginning Inciting incident Second thoughts Act One ActTwo Act Three Three act structure
- 28. Beginning Inciting incident Second thoughts Act One ActTwo Act Three Obstacles Obstacles Three act structure
- 29. Beginning Inciting incident Second thoughts Act One ActTwo Act Three Obstacles Obstacles Three act structure Plot Twist!
- 30. Beginning Inciting incident Second thoughts Act One ActTwo Act Three Obstacles Obstacles Three act structure Climax Plot Twist!
- 31. Beginning Inciting incident Second thoughts Act One ActTwo Act Three Obstacles Obstacles Three act structure Climax Denouement End Plot Twist!
- 32. Beginning Inciting incident Second thoughts Act One ActTwo Act Three Obstacles Obstacles Three act structure Climax Denouement End Plot Twist!
- 33. Beginning Inciting incident Second thoughts Act One ActTwo Act Three Obstacles Obstacles Three act structure Climax Denouement End Plot Twist!
- 34. Beginning Inciting incident Second thoughts Act One ActTwo Act Three Obstacles Obstacles Three act structure Climax Denouement End Plot Twist! learning curve
- 35. Beginning Inciting incident Second thoughts Act One ActTwo Act Three Obstacles Obstacles Three act structure Climax Denouement End Plot Twist! learning curve
- 36. Beginning Inciting incident Second thoughts Act One ActTwo Act Three Obstacles Obstacles Three act structure Climax Denouement End Plot Twist! learning curve
- 37. Beginning Inciting incident Second thoughts Act One ActTwo Act Three Obstacles Obstacles Three act structure Climax Denouement End Plot Twist! learning curve
- 38. Beginning Inciting incident Second thoughts Act One ActTwo Act Three Obstacles Obstacles Three act structure Climax Denouement End Plot Twist! learning curve
- 39. Beginning Inciting incident Second thoughts Act One ActTwo Act Three Obstacles Obstacles Three act structure Climax Denouement End Plot Twist! learning curve
- 40.
- 41. Act One: Setup TheBeginning Inciting incident Second thoughts call to adventure crossing the threshold
- 42. Act One: Setup pages/index.jsexport 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.jsimport 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 Secondthoughts? 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 PlotTwist the road of trials the abyss
- 46. Act Two: Confrontation next.config.jsconst 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.jsconst 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.jsconst 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.jsimport 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: ConfrontationThe Abyss!
- 51. Act Two: Confrontation server.jsconst express = require('express'); const next = require(‘next'); const app = next(); const handle = app.getRequestHandler(); The Abyss!
- 52. Act Two: Confrontation server.jsconst 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 theultimate boon returning the boon
- 54. Act Three: Resolution importApp, { 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 importApp, { 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.
- 57. returning the boon… to you!
- 61.
- 63.