Доклад с KievJS, 2018-10-26

1. API дизайн: уроки
известных проектов
Aндрей Саломатин
2018-10-26 @flpvsk @KyivJS

2. Мы возможно встречались на
—MoscowJS
—Frontend Unioin Conf
—RadioJS
2018-10-26 @flpvsk @KyivJS 2

3. Code Podcast
codepodcast.com
—Об общих концепциях в программировании
—Тематические эпизоды
—На английском
2018-10-26 @flpvsk @KyivJS 3

4. В этом докладе
—3 примера дизайна
—API систем
—Много абстрактной информации
2018-10-26 @flpvsk @KyivJS 4

5. В этом докладе
—3 примера дизайна
—API систем
—Много абстрактной бесполезной
информации
2018-10-26 @flpvsk @KyivJS 5

6. Зачем?
2018-10-26 @flpvsk @KyivJS 6

7. Application
Programming
Interface2018-10-26 @flpvsk @KyivJS 7

8. #1
Цена
абстракции2018-10-26 @flpvsk @KyivJS 8

9. DOM
API2018-10-26 @flpvsk @KyivJS 9

10. Примеры
2018-10-26 @flpvsk @KyivJS 10

11. 2018-10-26 @flpvsk @KyivJS 11

12. 2018-10-26 @flpvsk @KyivJS 12

13. 2018-10-26 @flpvsk @KyivJS 13

14. Immediate Mode GUI
2018-10-26 @flpvsk @KyivJS 14

15. #2
Адрес /
Содержимое2018-10-26 @flpvsk @KyivJS 15

16. Адрес = содержимое
GET '/person/flpvsk'
PUT '/person/flpvsk'
POST '/person/flpvsk/posts'
2018-10-26 @flpvsk @KyivJS 16

17. Пример
!
--> POST { text: 'I love all' } '/flpvsk/posts'
"
<-- { id: 'addr1' }
#
--> POST { share: 'newId' } '/kickz/posts'
"
<-- { id: …, share: 'newId' }
!
--> PUT { text: 'I hate birds' } '/flpvsk/posts/addr1'
2018-10-26 @flpvsk @KyivJS 17

18. Пример
!
--> POST { text: 'I love all' } '/flpvsk/posts'
"
<-- { id: 'addr1' }
#
--> POST { share: 'newId' } '/kickz/posts'
"
<-- { id: …, share: 'newId' }
!
--> PUT { text: 'I hate birds' } '/flpvsk/posts/addr1'
2018-10-26 @flpvsk @KyivJS 17

19. Пример
!
--> POST { text: 'I love all' } '/flpvsk/posts'
"
<-- { id: 'addr1' }
#
--> POST { share: 'newId' } '/kickz/posts'
"
<-- { id: …, share: 'newId' }
!
--> PUT { text: 'I hate birds' } '/flpvsk/posts/addr1'
2018-10-26 @flpvsk @KyivJS 17

20. Пример
!
--> POST { text: 'I love all' } '/flpvsk/posts'
"
<-- { id: 'addr1' }
#
--> POST { share: 'newId' } '/kickz/posts'
"
<-- { id: …, share: 'newId' }
!
--> PUT { text: 'I hate birds' } '/flpvsk/posts/addr1'
2018-10-26 @flpvsk @KyivJS 17

21. Пример
!
--> POST { text: 'I love all' } '/flpvsk/posts'
"
<-- { id: 'addr1' }
#
--> POST { share: 'newId' } '/kickz/posts'
"
<-- { id: …, share: 'newId' }
!
--> PUT { text: 'I hate birds' } '/flpvsk/posts/addr1'
2018-10-26 @flpvsk @KyivJS 17

22. 2018-10-26 @flpvsk @KyivJS 18

23. 2018-10-26 @flpvsk @KyivJS 19

24. Git как база данных
—Commit, tree, blob – объекты в базе Git
—Объект это файл в .git/objects/${id}
—ID объекта это SHA1 от содержимого
—blob = содержимое файла
2018-10-26 @flpvsk @KyivJS 20

25. Git
> git init .
> tree .git/objects
objects/
2018-10-26 @flpvsk @KyivJS 21

26. Git
> git init .
> tree .git/objects
objects/
2018-10-26 @flpvsk @KyivJS 21

27. Git
> git init .
> tree .git/objects
objects/
2018-10-26 @flpvsk @KyivJS 21

28. Git
> echo '{ "text": "I love all" }' > newId.json
> git add newId.json
> tree .git/objects
objects/
└── d7
└── 62b07ccb7fd8ef56f06a72b3b716cfd0c850b0
2018-10-26 @flpvsk @KyivJS 22

29. Git
> echo '{ "text": "I love all" }' > newId.json
> git add newId.json
> tree .git/objects
objects/
└── d7
└── 62b07ccb7fd8ef56f06a72b3b716cfd0c850b0
2018-10-26 @flpvsk @KyivJS 22

30. Git
> echo '{ "text": "I love all" }' > newId.json
> git add newId.json
> tree .git/objects
objects/
└── d7
└── 62b07ccb7fd8ef56f06a72b3b716cfd0c850b0
2018-10-26 @flpvsk @KyivJS 22

31. Git
> echo '{ "share": "d762…b0" }' > shareId.json
> git add shareId.json
> tree .git/objects
objects/
├── 6a
│ └── a55922efb726913f2848db03869efc03eea396
└── d7
└── 62b07ccb7fd8ef56f06a72b3b716cfd0c850b0
2018-10-26 @flpvsk @KyivJS 23

32. Git
> echo '{ "share": "d762…b0" }' > shareId.json
> git add shareId.json
> tree .git/objects
objects/
├── 6a
│ └── a55922efb726913f2848db03869efc03eea396
└── d7
└── 62b07ccb7fd8ef56f06a72b3b716cfd0c850b0
2018-10-26 @flpvsk @KyivJS 23

33. Git
> echo '{ "share": "d762…b0" }' > shareId.json
> git add shareId.json
> tree .git/objects
objects/
├── 6a
│ └── a55922efb726913f2848db03869efc03eea396
└── d7
└── 62b07ccb7fd8ef56f06a72b3b716cfd0c850b0
2018-10-26 @flpvsk @KyivJS 23

34. Git
> echo '{ "text": "I hate birds" }' > newId.json
> git add newId.json
> tree .git/objects
objects/
├── 52
│ └── 9b374bb968321f4651d03f74dd38198fabb58b
├── 6a
│ └── a55922efb726913f2848db03869efc03eea396
└── d7
└── 62b07ccb7fd8ef56f06a72b3b716cfd0c850b0
2018-10-26 @flpvsk @KyivJS 24

35. Git
> echo '{ "text": "I hate birds" }' > newId.json
> git add newId.json
> tree .git/objects
objects/
├── 52
│ └── 9b374bb968321f4651d03f74dd38198fabb58b
├── 6a
│ └── a55922efb726913f2848db03869efc03eea396
└── d7
└── 62b07ccb7fd8ef56f06a72b3b716cfd0c850b0
2018-10-26 @flpvsk @KyivJS 24

36. Git
> echo '{ "text": "I hate birds" }' > newId.json
> git add newId.json
> tree .git/objects
objects/
├── 52
│ └── 9b374bb968321f4651d03f74dd38198fabb58b
├── 6a
│ └── a55922efb726913f2848db03869efc03eea396
└── d7
└── 62b07ccb7fd8ef56f06a72b3b716cfd0c850b0
2018-10-26 @flpvsk @KyivJS 24

37. 2018-10-26 @flpvsk @KyivJS 25

38. CouchDB
!
--> POST { text: 'I love all' } '/posts'
"
<-- { id: 'addr1', rev: '1-abc' }
!
--> PUT { text: 'I hate birds', _rev: '1-abc' } '/posts/addr1'
"
<-- { id: 'addr1', rev: '2-bde' }
2018-10-26 @flpvsk @KyivJS 26

39. CouchDB
!
--> POST { text: 'I love all' } '/posts'
"
<-- { id: 'addr1', rev: '1-abc' }
!
--> PUT { text: 'I hate birds', _rev: '1-abc' } '/posts/addr1'
"
<-- { id: 'addr1', rev: '2-bde' }
2018-10-26 @flpvsk @KyivJS 26

40. CouchDB
!
--> POST { text: 'I love all' } '/posts'
"
<-- { id: 'addr1', rev: '1-abc' }
!
--> PUT { text: 'I hate birds', _rev: '1-abc' } '/posts/addr1'
"
<-- { id: 'addr1', rev: '2-bde' }
2018-10-26 @flpvsk @KyivJS 26

41. CouchDB
!
--> POST { text: 'I love all' } '/posts'
"
<-- { id: 'addr1', rev: '1-abc' }
!
--> PUT { text: 'I hate birds', _rev: '1-abc' } '/posts/addr1'
"
<-- { id: 'addr1', rev: '2-bde' }
2018-10-26 @flpvsk @KyivJS 26

42. Другие проекты
2018-10-26 @flpvsk @KyivJS 27

43. Другие проекты
—BitTorrent
2018-10-26 @flpvsk @KyivJS 27

44. Другие проекты
—BitTorrent
—BitCoin
2018-10-26 @flpvsk @KyivJS 27

45. Другие проекты
—BitTorrent
—BitCoin
—IPFS
2018-10-26 @flpvsk @KyivJS 27

46. Другие проекты
—BitTorrent
—BitCoin
—IPFS
—Dat
2018-10-26 @flpvsk @KyivJS 27

47. #3
Состояние /
Операция2018-10-26 @flpvsk @KyivJS 28

48. Найди три отличия
// State
{ _id: 'cl1+1-2', name: 'Andrey', podcasts: [ 'Code' ] }
// Op
{ $set: { name: 'Andrey' } }
2018-10-26 @flpvsk @KyivJS 29

49. Состояние и операции
// State
{ _id: 'cl1+1-2', name: 'Andrey', podcasts: [ 'Code' ] }
// Ops
[
{ $set: { name: 'Andrey' } },
{ podcasts: { $add: 'Code' } }
]
2018-10-26 @flpvsk @KyivJS 30

50. Состояние и операции
// State
{ _id: 'cl1+1-2', name: 'Andrey', podcasts: [ 'Code' ] }
// Ops
[
{ $set: { name: 'Andrey' } },
{ podcasts: { $add: 'Code' } }
]
2018-10-26 @flpvsk @KyivJS 30

51. Состояние и операции
// State
{ _id: 'cl1+1-2', name: 'Andrey', podcasts: [ 'Code' ] }
// Ops
[
{ _id: 'cl1+1', $set: { name: 'Andrey' } },
{ _id: 'cl1+2', _parent: 'cl1+1', podcasts: { $add: 'Code' } },
]
2018-10-26 @flpvsk @KyivJS 31

52. Патч
// State 1
{
_id: 'cl1+1-2.cl2+1-2',
name: 'Andrey S',
podcasts: [ 'Code' ],
instruments: [ 'Bass' ],
}
// State 2
{
_id: 'cl1+1-2',
name: 'Andrey',
podcasts: [ 'Code' ]
}
2018-10-26 @flpvsk @KyivJS 32

53. Патч
// Ops
[
{ _id: 'cl1+1', $set: { name: 'Andrey' } },
{ _id: 'cl1+2', _parent: '1+cl1', podcasts: { $add: 'Code' } },
{ _id: 'cl2+1', $set: { name: 'Andrey S' } },
{ _id: 'cl2+2', _parent: 'cl2+1', instruments: { $add: 'Bass' } },
]
2018-10-26 @flpvsk @KyivJS 33

54. Патч
// Patch === State
{
_id: 'cl2+1-2',
name: 'Andrey S',
instruments: [ 'Bass' ],
}
2018-10-26 @flpvsk @KyivJS 34

55. Состояние ~ Патч ~ Лог
операций
2018-10-26 @flpvsk @KyivJS 35

56. Пример из HeyMoose!
2018-10-26 @flpvsk @KyivJS 36

57. Другие проекты
2018-10-26 @flpvsk @KyivJS 37

58. Другие проекты
—RON – replicated object model
2018-10-26 @flpvsk @KyivJS 37

59. Другие проекты
—RON – replicated object model
—Kafka
2018-10-26 @flpvsk @KyivJS 37

60. Другие проекты
—RON – replicated object model
—Kafka
—Dat
2018-10-26 @flpvsk @KyivJS 37

61. Итог
2018-10-26 @flpvsk @KyivJS 38

62. Итог
—Предположения определяют API
2018-10-26 @flpvsk @KyivJS 38

63. Итог
—Предположения определяют API
—Изучайте проекты вне вашей специализации
2018-10-26 @flpvsk @KyivJS 38

64. @flpvsk
codepodcast.com
2018-10-26 @flpvsk @KyivJS 39