-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathpresentation.html
249 lines (215 loc) · 13.3 KB
/
presentation.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hands On talk about webComponents & Drupal</title>
<!-- Remote !-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.1.0/reveal.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.1.0/theme/simple.min.css" id="theme">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.1.0/theme/moon.min.css">
<!-- Usando https://cdnjs.com/libraries/reveal.js/4.1.0 !-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/default.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/monokai.min.css">
<!-- Usando https://cdnjs.com/libraries/highlight.js/11.5.1 !-->
</head>
<body>
<div class="reveal">
<div class="slides">
<section data-background="#C6F3C9">
<section>
<h2>Hands On talk</h2>
<h3>webComponents & Drupal</h3>
<h4>(using Phase2 Outline)</h4>
</section>
<section>
<h3>Your sandbox environment</h3>
<p style="text-align: left; margin-left: 200px;">You'll need:</p>
<ul>
<li>The hands on <a href="https://github.com/weknowinc/webcomponents_handson">repository</a>.</li>
<li>To have <a href="https://docs.docksal.io/getting-started/setup/">Docksal</a> installed.</li>
<li>For outline you'll need:
<ul>
<li><a href="https://nodejs.org/en/download/package-manager/#nvm">NVM/Node16</a>.</li>
<li>And <a href="https://classic.yarnpkg.com/lang/en/docs/install/">Yarn v1</a> as well.</li>
</ul>
</li>
</ul>
</section>
<section>
<h3>Docksal Drupal</h3>
<br/>
<p style="font-size: 80%;">Within this repository root and with <a href="https://docs.docksal.io/getting-started/setup/">Docksal installed</a> you can run:</p>
<pre class="bash"><code data-trim>
$ fin init
$ fin wk-setup
$ fin drush uli
</code></pre>
<p style="font-size: 80%;">This will leave a Drupal running with everything you need.</p>
</section>
<section>
<h3>Outline</h3>
<p style="font-size: 80%;">Then we move to the outline. With <a href="https://nodejs.org/en/download/package-manager/#nvm">Node</a> & <a href="https://classic.yarnpkg.com/lang/en/docs/install/">Yarn</a> installed,<br/>you can run the following commands:</p>
<pre class="bash"><code data-trim>
$ cd outline/
$ yarn install
$ yarn start
</code></pre>
<p style="font-size: 80%;">This will start Storybook and<br/>keep updating when you do changes.</p>
</section>
<section>
<h3>Outline & Drupal</h3>
<br/>
<p style="text-align: left; margin-left: 20px; font-size: 80%;">You also have a Docksal command:</p>
<pre class="bash"><code data-trim>
$ fin wk-sync
</code></pre>
<p style="font-size: 80%;">which compiles outline and update Drupal theme with it.</p>
</section>
<section>
<h3>Your sandbox environment (I)</h3>
<p style="text-align: left; margin-left: 20px;">Once ready you get:</p>
<ul style="font-size: 80%;">
<li>A Drupal 9.1 installation using Olivero as the base theme and some demo content.</li>
<li>A Phase2 Outline design system version from their github repo (detached as P2 doesn't have an stable version yet).</li>
<li>An Olivero subtheme we named <a href="https://github.com/weknowinc/webcomponents_handson/blob/main/resources/wkth/">wkth</a>.</li>
<li>A couple of example webComponents we named <a href="https://github.com/weknowinc/webcomponents_handson/tree/main/resources/wkwc/">wkwc</a>.</li>
</ul>
</section>
<section>
<h3>Your sandbox environment (II)</h3>
<br/>
<p>The <a href="https://github.com/weknowinc/webcomponents_handson/blob/main/resources/wkth/">wkth</a> subtheme and <a href="https://github.com/weknowinc/webcomponents_handson/tree/main/resources/wkwc/">wkwc</a> webComponents are used within the hands on environment (they are copied within Drupal and Outline).</p>
</section>
</section>
<section data-background="#99D0E2">
<section>
<h3>A brief webComponents introduction</h3>
<ul style="font-size: 80%;">
<li>webComponents have been around for a while now (<a href="https://medium.com/@pablortsal/the-year-of-web-components-c92960830d00">v1 implementation 2018</a>) and it is supported by <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components#browser_compatibility">most mayor browsers</a>.</li>
<li>You can use webComponents directly by calling the browser API, but it is simpler to use libraries like <a href="https://stenciljs.com/">StencilJS</a> or <a href="https://lit.dev/">LitJS</a> (currently being used by Outline).</li>
</ul>
</section>
<section>
<h3>webComponents use a shadow DOM</h3>
<p style="font-size: 50%;">This <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM">Shadow DOM</a> tree is rendered separately from the main document DOM.</p>
<img alt="ShadowDOM" src="./resources/ShadowDOM.jpg" title="ShadowDOM" width="400px">
<p style="font-size: 50%;">It allows to encapsulate your CSS within it, and protects it from outside interference. As a side effect, styles from outside won't have any effect on your webComponent.</p>
</section>
<section>
<h3>More about webComponents</h3>
<ul style="font-size: 80%;">
<li>All webComponents have a <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements#using_the_lifecycle_callbacks">lifeCycle</a> and they are similar to React components.</li>
<li>For people using Drupal, there is an initiative to create webComponents for different Drupal objects. In particular the <a href="https://www.drupal.org/project/decoupled_menus_initiative">decouple Menus/module initiative</a> is an interesting starting point (<a href="https://dri.es/state-of-drupal-presentation-july-2020">mentioned by Dries in DrupalCon 2020 EU</a>).</li>
</ul>
</section>
<section>
<h3>What we will show</h3>
<p>In this handson you'll have examples of:</p>
<ul style="font-size: 80%;">
<li>How to create a webComponent using outline.</li>
<li>Pass to it attributes to it.</li>
<li>Use slots to receive HTML.</li>
<li>Integrate a webComponent with Drupal.</li>
</ul>
</section>
<section>
<p>Some Web Components 101<br/>articles you might find useful:</p>
<ul style="font-size: 80%;">
<li><a href="https://dev.to/this-is-learning/web-components-101-history-2p24">History</a></li>
<li><a href="https://dev.to/this-is-learning/web-components-101-vanilla-javascript-2pja">Vanilla JavaScript</a></li>
<li><a href="https://dev.to/this-is-learning/web-components-101-lit-framework-3en1">Lit Framework</a></li>
<li><a href="https://dev.to/this-is-learning/web-components-101-framework-comparison-989">Framework Comparison</a></li>
</ul>
</section>
</section>
<section data-background="#FBE7BF">
<section>
<h2>Scenario 1 : wk-hello</h2>
<h3>webComponent Hello World</h3>
<br/>
<p style="font-size: 80%;">We will go over the <a href="https://github.com/weknowinc/webcomponents_handson/tree/main/resources/wkwc/wk-hello">wk-hello</a> initial hello example.</p>
</section>
<section>
<h3>wk-hello</h3>
<p style="text-align: left; margin-left: 20px; font-size: 90%;">We have 3 files:</p>
<ul style="font-size: 70%;">
<li>The style file <a href="https://github.com/weknowinc/webcomponents_handson/blob/main/resources/wkwc/wk-hello/wk-hello.css">wk-hello.css</a>: Which in this initial case doesn't have code.</li>
<li>The TypeScript file with the webComponent description <a href="https://github.com/weknowinc/webcomponents_handson/blob/main/resources/wkwc/wk-hello/wk-hello.ts">wk-hello.ts</a>: Interesting thing about it is the inclussion of LIT an outline components which make everything work. In this simple example we create a component, nothing more.</li>
<li>The Storybook file <a href="https://github.com/weknowinc/webcomponents_handson/blob/main/resources/wkwc/wk-hello/wk-hello.stories.ts">wk-hello.stories.ts</a> with an example use of the defined webComponent: It just shows the created webComponent within StoryBook. It is interesting to see the line:<br/><code style="text-align: left; margin-left: 500px; font-size: 90%;">title: 'WK/Hello'</code><br/>Which defines the StoryBook category.</li>
</ul>
</section>
<section>
<h3>wk-hello</h3>
<p><img alt="Seeing the webComponents in StoryBook" src="./resources/Outline-Phase2-StoryBook.png" title="StoryBook"></p>
</section>
<section>
<h3>wk-hello</h3>
<p>Once you have run Yarn you'll also have an output file used by Storybook's implementation<br/><code>wk-hello.css.lit.ts</code><br/>which has the compiled output and should be ignored.</p>
<p>This file is used by the Storybook implementation, but Outline output files are different.</p>
</section>
<section>
<h2>Scenario 2 : wk-card</h2>
<h3>webComponent gets string attributes</h3>
<br/>
<p>For <a href="https://github.com/weknowinc/webcomponents_handson/tree/main/resources/wkwc/wk-card">the card example</a> we use<br/>attributes to configure the webComponent.</p>
</section>
<section>
<h3>wk-card</h3>
<ul style="font-size: 70%;">
<li>The style file <a href="https://github.com/weknowinc/webcomponents_handson/blob/main/resources/wkwc/wk-card/wk-card.css">wk-simple-card.css</a>: It is interesting to see we add "&" which will be interpreted as the webcomponent name.</li>
<li>The webComponent description <a href="https://github.com/weknowinc/webcomponents_handson/blob/main/resources/wkwc/wk-card/wk-card.ts">wk-simple-card.ts</a>: You can first see the explicit declaration of the attributes (aka property) and the html template which uses the properties.</li>
<li>The Storybook file <a href="https://github.com/weknowinc/webcomponents_handson/blob/main/resources/wkwc/wk-card/wk-card.stories.ts">wk-simple-card.stories.ts</a> with an example use of the defined webComponent: You will first need to export the properties, grab them in the template and use the webComponent.</li>
</ul>
</section>
<section>
<h2>Scenario 3 : wk-banner</h2>
<h3>webComponent strings and a named slot</h3>
<br/>
<p>With slots you can pass HTML code directly to the webComponent.</p>
</section>
<section>
<h3>wk-banner</h3>
<p>In <a href="https://github.com/weknowinc/webcomponents_handson/tree/main/resources/wkwc/wk-banner">banner example</a> we will use a named slot.</p>
<p>The use of the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLSlotElement">HTMLSlotElement</a>) <code><slot></slot></code> allow us to pass to the webComponent a full HTML snippet.</p>
</section>
</section>
<section data-background="#C6F3C9">
<section>
<h2>Drupal Integration</h2>
<p>First we derived from Drupal's latest theme Olivero a subtheme: "weKnow Outline Theme"</p>
<p>Within it's <a href="https://github.com/weknowinc/webcomponents_handson/blob/main/resources/wkth/wkth.libraries.yml">wkth.libraries.yml</a> file we include the outline output JS+CSS files.</p>
<p>The only difference between a regular subtheme with JS+CSS inclusion and the export of webComponents.</p>
</section>
<section>
<h3>wkth.libraries.yml</h3>
<p><img alt="wkth.libraries.yml configuration" src="./resources/wkth_libraries_yml.png" title="wkth.libraries.yml"></p>
<p style="font-size: 70%;">The "attributes type module" is what makes them "magically" available.</p>
<p style="font-size: 70%;">Now we can use the webComponents on your twig.</p>
</section>
<section>
<h3>node--teaser.html.twig</h3>
<p>See <a href="https://github.com/weknowinc/webcomponents_handson/blob/main/resources/wkth/templates/content/node--teaser.html.twig">node--teaser.html.twig template</a> to check the use of <code>wk-banner</code> webComponent and pass one the attribute "rounded" and the slot "heading".</p>
<p>That's enough to glue everything together. Just visit the site's <a href="http://webcomponents-handson.docksal.site/">homepage</a> to see the result.</p>
</section>
</section>
</div>
</div>
<!-- Remote !-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.1.0/reveal.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.1.0/plugin/markdown/markdown.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.1.0/plugin/highlight/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.1.0/plugin/notes/notes.min.js"></script>
<!-- Usando https://cdnjs.com/libraries/reveal.js/4.1.0 !-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
<!-- Usando https://cdnjs.com/libraries/highlight.js/11.5.1 !-->
<script>
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]
});
</script>
</body>
</html>