Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

The hero's journey

32 views

Published on

Presentation at devtreff.io on API design

Published in: Technology
  • Be the first to comment

  • Be the first to like this

The hero's journey

  1. 1. The hero’s journey @ddprrt • fettblog.eu
  2. 2. workingdraft.de @workingdraft
  3. 3. technologieplauscherl.at @plauscherl workingdraft.de @workingdraft
  4. 4. technologieplauscherl.at @plauscherl scriptconf.org @scriptconf workingdraft.de @workingdraft
  5. 5. technologieplauscherl.at @plauscherl scriptconf.org @scriptconf workingdraft.de ? @workingdraft
  6. 6. A different talk this time
  7. 7. All ducks are wearing dog masks
  8. 8. All ducks are wearing dog masks
  9. 9. The hero’s journey
  10. 10. ! call to adventure crossing the threshold metamorphosis the ultimate boon returning the boon abyss the road of trials
  11. 11. ! Act 1 Act 2 Act 3
  12. 12. Act 1: The beginning
  13. 13. call to adventure crossing the threshold "
  14. 14. Mentor
  15. 15. Mentor
  16. 16. call to adventure crossing the threshold " starting a new project working with a new technology
  17. 17. call to adventure crossing the threshold " starting a new project working with a new technology
  18. 18. next.js 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" } }
  19. 19. vue.js index.html <!doctype html> <html> <head><title>Hello world</title></head> <body> <div id="app"> {{ message }} </div> <script src=“https://cdn.jsdelivr.net/npm/vue"></script> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) </script> </body> </html>
  20. 20. A Git API GET /api/v1/repo/fettblog.eu/ POST /api/v1/repo/ PUT /api/v1/repo/fettblog.eu/ DELETE /api/v1/repo/fettblog.eu/
  21. 21. A Git API GET /api/v1/repo/fettblog.eu/ POST /api/v1/repo/ PUT /api/v1/repo/fettblog.eu/ DELETE /api/v1/repo/fettblog.eu/ C R U D
  22. 22. call to adventure crossing the threshold " rely on familiar patterns
  23. 23. call to adventure crossing the threshold rely on familiar patterns
  24. 24. Rule 1: Rely on familiarities
  25. 25. Act 2: The road of trials
  26. 26. road of trials the abyss " metamorphosis
  27. 27. next.js 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. 28. next.js Piercing the framework import Head from ‘next/head’ export default () => <> <Head> <title>A podcast about JavaScript</title> </Head> <h1>Hello World</h1> </>
  29. 29. next.js 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. 30. next.js 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. 31. next.js 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. 32. next.js 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. 33. Rule 1: Rely on familiarities Rule 2: Learn with experience
  34. 34.   GET /analytics/fettblog? fromTimestamp=1545165334269& toTimestamp=1545165634269& page=index& metrics=visits,exits
  35. 35.   GET /analytics/fettblog
  36. 36.   GET /analytics/fettblog   GET /analytics/fettblog? from=now-2d
  37. 37.   GET /analytics/fettblog   GET /analytics/fettblog? from=now-2d   GET /analytics/fettblog? from=now-2d& pages=(index,about,react)
  38. 38.   GET /analytics/fettblog   GET /analytics/fettblog? from=now-2d   GET /analytics/fettblog? from=now-2d& pages=(index,about,react)   GET /analytics/fettblog? from=now-2d& pages=(index,about,react)& metrics=visits
  39. 39. Rule 1: Rely on familiarities Rule 2: Learn with experience Rule 3: Sensible defaults
  40. 40. road of trials the abyss " metamorphosis
  41. 41. road of trials the abyss " metamorphosis
  42. 42. Act 2.5: The abyss
  43. 43. Baumi does Backend server.js const express = require('express'); const next = require(‘next'); const app = next(); const handle = app.getRequestHandler(); The Abyss!
  44. 44. Baumi does Backend 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!
  45. 45. Opening the framework 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
  46. 46. Opening the framework 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
  47. 47. PUT /api/corner payload: [ ‘baby’ ]
  48. 48. { "index": { "title": "The blog post!", "content": "...", "date": "2019-01-20", } }
  49. 49. { "index": { "title": "The blog post!", "content": "...", "date": "2019-01-20", } } { "index": { "title": "The best blog post evarr!", "content": "...", "date": "2019-01-20", } }
  50. 50. Rule 1: Rely on familiarities Rule 2: Learn with experience Rule 3: Sensible defaults Rule 4: Document wisely
  51. 51. road of trials the abyss " metamorphosis
  52. 52. road of trials the abyss " metamorphosis
  53. 53. Act 3: The boon!
  54. 54. noob
  55. 55. noob
  56. 56. noob
  57. 57. fin.

×