Slides for the July 2013 Belgian Fronteers meetup

1. The Web | a hypermedia story
past, present, future.
Ruben Verborgh

2. Congratulations,
you’re old
enough to
remember
the difference.

3. This is
a camera.
Of course it’s digital.
What else?

4. POOR
DIGITAL
NATIVES
only use
digital technology.

5. In only 20 years time,
information
has become actionable.

6. The Web | a hypermedia story
past, present, future.

7. Ted Nelson
°1937
Doug Engelbart
1925–2013
Aaron Swartz
1986–2013

8. The Web | a hypermedia story
past, present, future.

9. Hypertext is text that branches and
allows choices on an interactive screen.
It’s text chunks connected by links which
offer the reader different pathways.
—Ted Nelson, Dream Machines (1974)

11. 1992?
1993?

12. Xanadu
solves your
information
hunger.

13. Xanadu
the biggest
vaporware product
in history.

16. In those days
hypertext systems
couldn’t exchange information.

17. Tim Berners-Lee
°1955

18. The Web is severely limited
only publishers can make links
they are one-directional
they can break
But it scales.
Globally.

19. URL
HTTP
HTML
http://en.wikipedia.org/wiki/World_Wide_Web

21. The Web | a hypermedia story
past, present, future.

22. Roy Thomas Fielding
°1965

23. REST | REpresentational State Transfer
An architectural style
for large hypermedia systems
(such as the Web).
Why is the Web successful?
constraints

24. REST | Uniform interface constraints
Identification of resources
Manipulation through representations
Self-descriptive messages
Hypermedia as the engine

25. /index.php?action=showBook&id=35
REST | Identification of resources
/index.php?action=borrowBook&id=35
What is a “borrowBook”?
Can I GET it?
Can I POST to it?

26. /books/35
REST | Identification of resources
/users/34/books/borrowed
I can get the list of borrowed books.
I can add something to it.
Identify resources, not actions.

27. REST | Uniform interface constraints
Identification of resources
Manipulation through representations
Self-descriptive messages
Hypermedia as the engine

28. http://example.org/books/35
REST | Manipulation of resources
http://api.example.org/REST/books/35.json
They point to the same resource.
Why does it matter who uses it?

29. http://example.org/books/35
REST | Manipulation of resources
Humans get HTML.
Machines get JSON.
One resource, many representations.
HTML
when asked
by user
JSON
when asked
by AJAX

30. REST | Manipulation of resources
Don’t create an API.
There is already one:
it’s called HTTP.
(And it’s more widely used
than yours will ever be.)

31. REST | Uniform interface constraints
Identification of resources
Manipulation through representations
Self-descriptive messages
Hypermedia as the engine

32. REST | Self-descriptive messages
POST /index.php?action=showBook&id=35
POST /index.php?action=borrowBook&id=35
What happens?

33. REST | Self-descriptive messages
POST /對我來說 是中國的
POST /我不知道 意味著什麼
What happens?

34. REST | Self-descriptive messages
POST /users/34/books/borrowed
Use it.
No surprises.
HTTP has a uniform interface.
GET /users/34/books/borrowed
DELETE /users/34/books/borrowed

35. REST | Uniform interface constraints
Identification of resources
Manipulation through representations
Self-descriptive messages
Hypermedia as the engine

36. http://example.org/books/35
REST | Hypermedia as the engine
HTML
when asked
by user
JSON
when asked
by AJAX

37. http://example.org/books/35
REST | Hypermedia as the engine
HTML
<h1>Dream Machines</h1>
<a href="/authors/ted_nelson">
by Ted Nelson
</a>

38. http://example.org/books/35
REST | Hypermedia as the engine
JSON
{
"title": "Dream Machines",
"author": "Ted Nelson"
}

39. http://example.org/books/35
REST | Hypermedia as the engine
JSON
{
"title": "Dream Machines",
"author": { "name": "Ted Nelson":
"url": "/authors/ted_nelson" }
}

40. REST | Hypermedia as the engine
For humans and machines.
Don’t make us read your manual.
Make your information actionable.
Hypermedia should be the engine
of your application.
Representations should contain
the links to next steps.

41. REST | Fielding’s definition of hypermedia
Hypertext is the simultaneous presentation
of information and controls such that
the information becomes the affordance
through which the user (or automaton)
obtains choices and selects actions.

42. REST | Fielding’s definition of hypermedia
the simultaneous presentation
of information and controls
HTML or JSON
with links

43. REST | Fielding’s definition of hypermedia
the user (or automaton)
obtains choices and selects actions.
you choose
the next step
(you don’t have
to create it yourself)

44. this handle
affords
opening
the door
this handle is
an affordance
for opening
the door

45. a property
of an object
that lets you
act upon it
affordance

46. the information
becomes
the affordance

47. The Web | a hypermedia story
past, present, future.

50. The Semantic Web | for machines
Make machines
understand information
so they can
do things for us.

51. Resource Description Framework | RDF
:Tim :knows :Ted.
subject | predicate | object

52. URLs give meaning to concepts | RDF
<http://en.wikipedia.org/wiki/Tim_Berners-Lee>
<http://en.wiktionary.org/wiki/knows>
<http://en.wikipedia.org/wiki/Ted_Nelson>.

53. Embed meaning in HTML | RDF
<div id="book" itemtype="http://schema.org/Book">
<span itemprop="name">The Catcher in the Rye</span> –
by <a itemprop="author" href="#salinger">J.D. Salinger</a>
</div>

54. Embed meaning in HTML | RDF
<div id="book" itemtype="http://schema.org/Book">
<span itemprop="name">The Catcher in the Rye</span> –
by <a itemprop="author" href="#salinger">J.D. Salinger</a>
</div>
Your page can be
read by people
and understood
by machines

55. The Web | a hypermedia story
past, present, future.

57. Representations should contain
the links to next steps.
The Web is severely limited
only publishers can make links

58. Publishers are responsible
for creating the right links.
How can they possibly know
what next steps you will take?

59. The hypermedia paradox
Publishers are responsible
for creating the right links.
How can they possibly know
what next steps you will take?

60. Semantic Web:
if your browser understands content
Hypermedia:
can it create the right links?
The hypermedia paradox solved?

61. + =
HTML
&
semantics
your
preferred
actions
personalized
hypermedia

62. browser reads semantics
finds matching actions
creates right links
The information
becomes your affordance.
Distributed affordance

63. The Web | a hypermedia story
past, present, future.

69. The Web | a hypermedia story
past, present, future.
ruben.verborgh.org
@RubenVerborgh