Designing By Ilya Birman, ilyabirman.net Declarative APIs - - PowerPoint PPT Presentation

▶
designing
SMART_READER_LITE
LIVE PREVIEW

Designing By Ilya Birman, ilyabirman.net Declarative APIs - - PowerPoint PPT Presentation

Sep 19, 2023 747 likes •1.94k views

Designing By Ilya Birman, ilyabirman.net Declarative APIs bureau.ru/en Aegea blogging engine blogengine.me ilyabirman.net Designing By Ilya Birman, ilyabirman.net Declarative APIs 1. Theory SuperComplete Implements

slide-1
SLIDE 1

Designing Declarative APIs

By Ilya Birman,
 ilyabirman.net

slide-2
SLIDE 2
slide-3
SLIDE 3
slide-4
SLIDE 4
slide-5
SLIDE 5

bureau.ru/en

slide-6
SLIDE 6
slide-7
SLIDE 7

Aegea
 blogging engine

blogengine.me

slide-8
SLIDE 8

ilyabirman.net

slide-9
SLIDE 9

Designing Declarative APIs

By Ilya Birman,
 ilyabirman.net

slide-10
SLIDE 10
  • 1. Theory
slide-11
SLIDE 11
slide-12
SLIDE 12
slide-13
SLIDE 13

SuperComplete


 Implements text completion
 in input fields

slide-14
SLIDE 14

<script src="supercomplete.js" /?
 <link rel="stylesheet"
 src="supercomplete.css"
 /?

slide-15
SLIDE 15

<script src="supercomplete.js" /?
 <link rel="stylesheet"
 src="supercomplete.css"
 /? <script>
 var superCompleteInstance =
 new SuperComplete ('id')
 <0script>

slide-16
SLIDE 16

<script src="supercomplete.js" /?
 <link rel="stylesheet"
 src="supercomplete.css"
 /? <script>
 $ ('#id').superComplete ()
 <0script>

slide-17
SLIDE 17

<script src="supercomplete.js" /?
 <link rel="stylesheet"
 src="supercomplete.css"
 /? <input type="text" class="supercomplete" /?

slide-18
SLIDE 18

Imperative → Declarative

slide-19
SLIDE 19

fotorama.io by
 Artem
 Polikarpov

slide-20
SLIDE 20


 
 helsinki.jpg
 berlin.jpg
 rome.jpg
 zurich.jpg


slide-21
SLIDE 21


 
 <img src="helsinki.jpg" /?
 <img src="berlin.jpg" /?
 <img src="rome.jpg" /?
 <img src="zurich.jpg" /?


slide-22
SLIDE 22

<div class="fotorama">
 
 <img src="helsinki.jpg" /?
 <img src="berlin.jpg" /?
 <img src="rome.jpg" /?
 <img src="zurich.jpg" /?
 
 <0div>

slide-23
SLIDE 23

fotorama.io by
 Artem
 Polikarpov

slide-24
SLIDE 24

“But this is wrong!..”

slide-25
SLIDE 25

“Just linking a script shouldn’t cause anything to happen on a page”

slide-26
SLIDE 26


 
 <div class="special"> Text <0div>

slide-27
SLIDE 27

<link rel="stylesheet" src="main.css"/? <div class="special"> Text <0div>

slide-28
SLIDE 28

<link rel="stylesheet" src="main.css"/? 
 <script>
 document.getElementsByClassName ('special')
 .applyStyles ('main')
 <0script> <div class="special"> Text <0div>

slide-29
SLIDE 29

Auto initialization
 is a good thing.


 It’s as appropriate for JavaScript as it is for CSS

slide-30
SLIDE 30

“This may cause conflicts!”

slide-31
SLIDE 31

<div class="supercomplete">
 
 ../
 
 <0div>

slide-32
SLIDE 32

<script src="supercomplete.js" /?
 <link rel="stylesheet"
 src="supercomplete.css"
 /? <script>
 var superCompleteInstance =
 new SuperComplete ('id')
 <0script>

slide-33
SLIDE 33

Conflicts are
 a separate topic.


 CSS classes or JavaScript constructors
 may also cause conflicts. Solve by
 thoughtful naming and selective linking

slide-34
SLIDE 34

“This will not work in SPAs”

slide-35
SLIDE 35

Frameworks


 Angular 
 
 React

slide-36
SLIDE 36

Frameworks usage


 Angular One in about 2000 ... 10 000 websites
 
 React Five times less

According to some websites

slide-37
SLIDE 37

SPAs are special.


 Compatibility with 99,97% of the Web
 is a pretuy good start

slide-38
SLIDE 38

SPAs are special.


 Compatibility with 99,97% of the Web
 is a pretuy good start. SPAs support is a feature

slide-39
SLIDE 39

“HTML for markup, CSS for appearance, JS for behaviour —
 let’s not mix them up!”

slide-40
SLIDE 40
slide-41
SLIDE 41

<input type="button"
 value="Send"

  • nclick="this.form.submit ()"


/?

slide-42
SLIDE 42

<input type="submit"
 value="Send"
 /?

slide-43
SLIDE 43

Click here

slide-44
SLIDE 44

Click here

slide-45
SLIDE 45

<a
 href="../"


  • nmouseover="this.style.color = 'red'"

  • nmouseout="this.style.color = ''"


>Click here<0a>

slide-46
SLIDE 46

<a href="../">Click here<0a>
 
 a:hover { color: red
 }

slide-47
SLIDE 47

Important behaviours
 deserve declarative
 APIs.


 Your thing is important :-)

slide-48
SLIDE 48

Use JavaScript
 for actual programming.


 Writing boilerplate code that just needs
 to be there for the things to work
 is not programming

slide-49
SLIDE 49

“He just can’t figure out JavaScript”

slide-50
SLIDE 50

Pascal

C

PHP

Delphi

Win32 API

ObjC

Lua

Logo :-)

Cocoa

AppleScript

JavaScript

asm

C++

slide-51
SLIDE 51

Less code,
 more meaning


 What can become declarative becomes
 declarative (or state-based)

slide-52
SLIDE 52

lea.verou.me:


slide-53
SLIDE 53

Lowering the barrier?


 Less code means less errors, less time
 to figure out and more users

slide-54
SLIDE 54

This isn’t “for dummies”.


 This is just betuer

slide-55
SLIDE 55

This isn’t “for dummies”.


 This is just betuer. As a side efgect,
 beginners will get it faster, too

slide-56
SLIDE 56

<script>
 $ ('#id').superComplete ()
 <0script>
 
 
 ../
 
 
 <input type="text" id="id" /?

slide-57
SLIDE 57

<input type="text" id="id" /? 
 
 
 ../
 
 
 <script>
 $ ('#id').superComplete ()
 <0script>

slide-58
SLIDE 58

<input type="text" /? 
 <input type="text" class="supercomplete" /? <input type="radio" /?
 <input type="radio" /?

slide-59
SLIDE 59
  • 2. Practice
slide-60
SLIDE 60
slide-61
SLIDE 61

maintained by
 Ivan
 Akulov Likely
 Social sharing
 butuons

slide-62
SLIDE 62
slide-63
SLIDE 63

<div class="likely"> <div class="twitter">Tweet<0div> <div class="facebook">Share<0div> <div class="linkedin">Link<0div> <div class="gplus">Plus<0div> <div class="vkontakte">Share<0div> <div class="telegram">Send<0div> <div class="pinterest"
 data-media="pinnable.png"
 >Pin<0div> <0div>

slide-64
SLIDE 64

<div class="likely"> <div class="twitter">Tweet<0div> <div class="facebook">Share<0div> <div class="linkedin">Link<0div> <div class="gplus">Plus<0div> <0div>

slide-65
SLIDE 65

<div class="likely"> <div class="facebook">Share<0div> <div class="twitter">Tweet<0div>
 <div class="gplus">Plus<0div> <div class="linkedin">Link<0div> <0div>

slide-66
SLIDE 66

<div class="likely"> <div class="facebook">Share<0div> <div class="twitter">Tweet<0div> <div class="gplus"><0div> <div class="linkedin"><0div> <0div>

slide-67
SLIDE 67

Thing, not action

slide-68
SLIDE 68

Emerge
 Page load coordinator

slide-69
SLIDE 69
slide-70
SLIDE 70
slide-71
SLIDE 71

<img src="picture.jpg" /?

slide-72
SLIDE 72

<img src="picture.jpg" class="emerge" /?

slide-73
SLIDE 73

<img src="picture.jpg" class="emerge" /? <div class="caption">Beautiful<0div>

slide-74
SLIDE 74

<div class="emerge"> <img src="picture.jpg"/? <div class="caption">Beautiful<0div> <0div>

slide-75
SLIDE 75

<div class="emerge"> <img src="picture.jpg"/? <div class="caption">Beautiful<0div> <!-. more images and video --? <0div>

slide-76
SLIDE 76

<div class="emerge" data-spin="true"> <img src="picture.jpg"/? <div class="caption">Beautiful<0div> <!-. more images and video --? <0div>

slide-77
SLIDE 77

<div class="emerge" data-spin="true" data-effect="slide" data-up="20px" > <img src="picture.jpg"/? <div class="caption">Beautiful<0div> <!-. more images and video --? <0div>

slide-78
SLIDE 78

<div class="emerge" data-effect="slide" data-down="20px"> <!-. ../ --? <0div> <div class="emerge" data-effect="slide" data-up="20px" data-continue="true"> <!-. ../ --? <0div>

slide-79
SLIDE 79

<div class="emerge" data-spin="true"> <!-. ../ --? <0div> <div class="emerge" data-spin="true"> <!-. ../ --? <0div>

slide-80
SLIDE 80

Doesn’t have to be everything.

slide-81
SLIDE 81

Data atuributes


 data-spin
 data-effect
 data-continue

slide-82
SLIDE 82

Data atuributes


 data-spin
 data-spin-element
 data-continue
 data-await
 data-hold
 data-effect
 data-up
 data-down
 data-left
 data-right 
 data-duration
 data-scale
 data-angle
 data-origin
 data-expose
 data-opaque
 data-style-1
 data-style-2
 data-emerge-event

slide-83
SLIDE 83

Data atuributes


 <div class="fotorama emerge" data-../ data-../ data-effect../ ??? data-../ data-../ > ../ <0div>

slide-84
SLIDE 84

Data atuributes


 data-emerge-spin
 data-emerge-effect
 data-emerge-continue

slide-85
SLIDE 85

Data atuributes


 <div class="emerge" data-effect=../>
 <div class="fotorama" data-effect=../> ../ <0div>
 <0div>

slide-86
SLIDE 86

Universal → Clean

slide-87
SLIDE 87

maintained by
 Evgeniy
 Lazarev Jouele
 Audio player for the Web

slide-88
SLIDE 88
slide-89
SLIDE 89
slide-90
SLIDE 90

Jouele

slide-91
SLIDE 91

<a href="yesterday.mp3">The Beatles: Yesterday<0a>

The Beatles: Yesterday

slide-92
SLIDE 92

<a href="yesterday.mp3" class="jouele">The Beatles: Yesterday<0a>

The Beatles: Yesterday

slide-93
SLIDE 93

<h1>The Beatles<0h1> <a href="yesterday.mp3" class="jouele">Yesterday<0a> <a href="letitbe.mp3" class="jouele">Let it be<0a> <a href="heyjude.mp3" class="jouele">Hey Jude<0a>

slide-94
SLIDE 94

<h1>The Beatles<0h1> <div class="jouele-playlist"> <a href="yesterday.mp3" class="jouele">Yesterday<0a> <a href="letitbe.mp3" class="jouele">Let it be<0a> <a href="heyjude.mp3" class="jouele">Hey Jude<0a> <0div>

slide-95
SLIDE 95

D E M O

Unreleased

slide-96
SLIDE 96

How is it done?




slide-97
SLIDE 97

<img ../ class="jouele-control"
 data-type="play-pause"
 /?

slide-98
SLIDE 98

<tr class="jouele-control"
 data-type="seek"
 data-to="12:34"
 >../<0tr>

slide-99
SLIDE 99

One-way control




  • 1. Image controls the player
  • 2. Table rows control the player
slide-100
SLIDE 100

Two-way control




  • 1. Image controls the player
  • 2. Table rows control the player
  • 3. The player controls the image
  • 4. The player controls the table rows
slide-101
SLIDE 101
slide-102
SLIDE 102

Callback?
 Event?

slide-103
SLIDE 103

Abstract classes


 Defined, but not implemented

slide-104
SLIDE 104

Abstract classes


 .jouele-is-playing
 .jouele-is-buffering
 .jouele-is-unavailable
 ../


slide-105
SLIDE 105

img.jouele-control.jouele-is-playing {


  • utline: rgba(255,255,255,.2) 10px solid;


}

slide-106
SLIDE 106

<tr class="jouele-control"
 data-type="seek"
 data-to="12:34"
 >../<0tr>

slide-107
SLIDE 107

<tr class="jouele-control"
 data-type="seek"
 data-range="12:34../15:26"
 >../<0tr>

slide-108
SLIDE 108

.mix-playlist td.jouele-is-within {
 background: rgba(255,255,255,.2);
 color: #fd0093;
 }

slide-109
SLIDE 109

Conclusion

slide-110
SLIDE 110

Why




  • 1. Code makes sense, related code is in one place,

less errors, more users.


  • 2. The code remains sensible without JavaScript (i.e.

in RSS or email).

slide-111
SLIDE 111

How




  • 1. Extend the standard HTML tags


when it makes sense.


  • 2. Use simple data atuributes.
  • 3. Use abstract state classes in CSS for two-way

control.

  • 4. Leave JavaScript for the actual programming
slide-112
SLIDE 112

What’s next




  • 1. Web Components
  • 2. CSS custom properties
slide-113
SLIDE 113

<likely>

slide-114
SLIDE 114

<img> <table>
 ...
 </table>

slide-115
SLIDE 115

F A N T A S Y

.element:loading .element-contents {

  • pacity: 0;


} .element .element-contents {

  • pacity: 1;

transition: opacity 1s ease-out; } .element:loading .element-stub { ../ }

slide-116
SLIDE 116

.element .element-contents {

  • .opacity-loading: 0;

  • .transition-loaded: opacity 1s ease-out;
  • pacity: 1;

} .element .element-stub {

  • .opacity-loading: 1;

  • pacity: 0;

}

slide-117
SLIDE 117

What if it was part of HTML and CSS?


 Choose what makes sense for your product

slide-118
SLIDE 118

Ilya Birman,
 ilyabirman.net

Thanks!

Core Hubs:
All Converters PDF Hub Video Hub Audio Hub Image Hub File Compressor