A hero's journey in JavaScript frameworks
•
1 like•399 views
Everytime you select a JavaScript framework, you set out on a hero's journey, much like Frodo who needs to cast the one ring into the fires of Mount Doom. See how models of mythology and narrative fiction help us discover new technologies and help us overcome obstacles on our very personal road of trials. With Zeit's Next.js, we set out on an incremental path of adoption. Being offered just enough API surface to fulfill our direct needs and to master our skills.
Recommended
Recommended
More Related Content
More from Stefan Baumgartner
More from Stefan Baumgartner (12)
Recently uploaded
Recently uploaded (20)
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.