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
@ddprrt • fettblog.eu
workingdraft.de
@workingdraft
technologieplauscherl.at
@plauscherl
workingdraft.de
@workingdraft
technologieplauscherl.at
@plauscherl
scriptconf.org
@scriptconf
workingdraft.de
@workingdraft
technologieplauscherl.at
@plauscherl
scriptconf.org
@scriptconf
workingdraft.de ?
@workingdraft
A different talk this time
All
ducks
are
wearing
dog
masks
All
ducks
are
wearing
dog
masks
The hero’s journey
!
call to adventure
crossing the threshold
metamorphosis
the ultimate boon
returning the boon
abyss
the road of trials
!
Act 1
Act 2
Act 3
Act 1: The beginning
call to adventure crossing the threshold
"
Mentor
Mentor
call to adventure crossing the threshold
"
starting a new project
working with a new technology
call to adventure crossing the threshold
"
starting a new project
working with a new technology
next.js
pages/index.js export default () => <h1>Hello World</h1>
package.json {
"name": "hello-world",
"scripts": {
"dev":...
vue.js
index.html <!doctype html>
<html>
<head><title>Hello world</title></head>
<body>
<div id="app">
{{ message }}
</div...
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/
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/
...
call to adventure crossing the threshold
"
rely on familiar patterns
call to adventure crossing the threshold
rely on familiar patterns
Rule 1: Rely on familiarities
Act 2: The road of trials
road of trials the abyss
"
metamorphosis
next.js
pages/index.js import Link from ‘next/link’
export default () =>
<>
<h1>Hello World</h1>
<Link href=‘/about’><a>Ab...
next.js
Piercing the framework import Head from ‘next/head’
export default () =>
<>
<Head>
<title>A podcast about JavaScri...
next.js
next.config.js const withTypescript =
require('@zeit/next-typescript')
const withCSS = require('@zeit/next-css')
co...
next.js
next.config.js const withTypescript =
require('@zeit/next-typescript')
const withCSS = require('@zeit/next-css')
co...
next.js
next.config.js const withTypescript =
require('@zeit/next-typescript')
const withCSS = require('@zeit/next-css')
co...
next.js
about.js import ArticleLayout
from '../components/ArticleLayout';
import About from '../articles/about.mdx';
impor...
Rule 1: Rely on familiarities
Rule 2: Learn with experience
  GET /analytics/fettblog?
fromTimestamp=1545165334269&
toTimestamp=1545165634269&
page=index&
metrics=visits,exits
  GET /analytics/fettblog
  GET /analytics/fettblog
  GET /analytics/fettblog?
from=now-2d
  GET /analytics/fettblog
  GET /analytics/fettblog?
from=now-2d
  GET /analytics/fettblog?
from=now-2d&
pages=(index,abou...
  GET /analytics/fettblog
  GET /analytics/fettblog?
from=now-2d
  GET /analytics/fettblog?
from=now-2d&
pages=(index,abou...
Rule 1: Rely on familiarities
Rule 2: Learn with experience
Rule 3: Sensible defaults
road of trials the abyss
"
metamorphosis
road of trials the abyss
"
metamorphosis
Act 2.5: The abyss
Baumi does Backend
server.js const express = require('express');
const next = require(‘next');
const app = next();
const h...
Baumi does Backend
server.js const express = require('express');
const next = require(‘next');
const app = next();
const h...
Opening the framework
import App, { Container } from 'next/app'
import React from ‘react';
export default class MyApp exte...
Opening the framework
import App, { Container } from 'next/app'
import React from ‘react';
import Player from ‘../componen...
PUT /api/corner
payload: [
‘baby’
]
{
"index": {
"title": "The blog post!",
"content": "...",
"date": "2019-01-20",
}
}
{
"index": {
"title": "The blog post!",
"content": "...",
"date": "2019-01-20",
}
}
{
"index": {
"title": "The best blog p...
Rule 1: Rely on familiarities
Rule 2: Learn with experience
Rule 3: Sensible defaults
Rule 4: Document wisely
road of trials the abyss
"
metamorphosis
road of trials the abyss
"
metamorphosis
Act 3: The boon!
noob
noob
noob
fin.
The hero's journey
The hero's journey
The hero's journey
The hero's journey
The hero's journey
The hero's journey
The hero's journey
Upcoming SlideShare
Loading in …5
×

The hero's journey

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

×