-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
391 lines (390 loc) · 13.7 KB
/
index.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
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>D7 as D8</title>
<meta charset="utf-8">
<meta name="viewport" content="width=792, user-scalable=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="shower/themes/ribbon/styles/screen.css">
<link rel="stylesheet" href="prism.css">
<link rel="stylesheet" href="custom.css">
<style>
a {
background: none;
}
</style>
</head>
<body class="list">
<header class="caption">
<h1>D7 as D8</h1>
<p>Be ready for the next drupal coding paradigm</p>
</header>
<section class="slide cover" id="Cover"><div>
<h2>D7 as D8</h2>
<p>Pablo López Escobés<br />#D7asD8</p>
<img src="pictures/intro_scale.png" alt="">
<!--
To apply styles to the certain slides
set slide ID to get needed elements
-->
<style>
#Cover h2 {
margin:260px 0 0;
color:#000;
text-align:center;
font-size:76px;
}
#Cover p {
margin:50px 0 0;
text-align:center;
color:#000;
font-style:italic;
font-size:30px;
line-height: 40px;
}
</style>
</div></section>
<!-- Team -->
<section class="slide" id="team"><div>
<h2>Team</h2>
<div class="team-member">
<p>Mateu Aguiló</p>
<img src="pictures/me.jpeg">
<p>Senior developer at Lullabot</p>
<p><a href="http://drupal.org/u/e0ipso">e0ipso</a></p>
</div>
<div class="team-member">
<p>Pablo López</p>
<img src="pictures/profile_porto.jpg">
<p>Developer at Bluespark</p>
<p><a href="http://drupal.org/u/plopesc">plopesc</a></p>
</div>
<style>
#team .team-member {
float: left;
width: 380px;
text-align: center;
}
#team img {
height: 200px;
border-radius: 100px;
}
</style>
</div></section>
<!-- Umbral -->
<section class="slide shout cover shadow" id="umbral"><div>
<h2>I came to talk about<br>my module!</h2>
<img src="pictures/umbralaora_scale.jpg" alt="">
<style>
#umbral h2 {
color: white;
font-size: 130px;
margin-top: 170px;
}
</style>
</div></section>
<!-- Onnce upon a time -->
<section class="slide cover"><div>
<img src="pictures/once1024.jpg" alt="">
</div></section>
<!-- History 1
<section class="slide"><div>
<p>Mateu: "I really liked the session plugin. I'd like to port the D8 plugin system to D7"</p>
<p>Pablo: "That'd be great. I already worked on a small plugin system for field formatters in the past"</p>
</div></section>
<!-- History 2
<section class="slide"><div>
<p>Pablo: "Did you finally worked on that plugin system idea?"</p>
<p>Mateu: "Not yet"</p>
<p>Pablo: "I'd like to use it, I'm going to create a repo for that"</p>
</div></section>
<!-- History 3
<section class="slide"><div>
<p>Mateu: "I saw your repo. But I created the REAL one approach"</p>
<p>Pablo: "That's AWESOME!!"</p>
<p>Both: "Let's create a whole family of modules using plugins for D7"</p>
</div></section> -->
<!-- Motivation -->
<section class="slide"><div>
<h2>Motivations</h2>
<ul>
<li>Learn about Drupal 8</li>
<li>Improve our skills</li>
<li>Experimentation</li>
<li>No need to waste free time or money</li>
<li><strong>Have fun</strong></li>
</ul>
</div></section>
<!-- Sliced bread -->
<section class="slide"><div>
<h2>We are not discovering sliced bread</h2>
<ul>
<li>There are already modules helping us:</li>
<ul>
<li>X Autoload, Composer manager, Service Container</li>
</ul>
<li>Other people is writing blog posts about this:</li>
<ul>
<li><a href="https://www.previousnext.com.au/tags/drupal-8-now">https://www.previousnext.com.au/tags/drupal-8-now</a></li>
<li><a href="http://cambrico.net/drupal/using-composer-to-build-your-drupal-7-projects">http://cambrico.net/drupal/using-composer-to-build-your-drupal-7-projects</a></li>
</ul>
</ul>
</div></section>
<!-- Why Plugins? -->
<section class="slide"><div>
<h2>Why Plugins?</h2>
<ul>
<li>Plugins are a key component in D8</li>
<ul>
<li>Field types, Entity types, Image effects...</li>
</ul>
<li>D8 plugin system is Drupal agnostic (<strong>lib/Drupal/Component</strong> folder)</li>
<li>A lot of problems can be solved using plugins</li>
</ul>
<div class="next">
<h3>It started with basic plugins, but then it spread!</h3>
<img src="pictures/plug.png" style="float: right; height:150px; padding-right: 150px;">
<h2 style="padding-top: 50px;">We created Plug Family</h2>
</div>
</div></section>
<!-- Plug architecture -->
<section class="slide"><div>
<h2>Plug architecture</h2>
<ul>
<li>Packagist package created from D8 source code: <strong><a href="https://packagist.org/packages/drupal/d7-plugin">drupal/d7-plugin</a></strong></li>
<li>Download and register the package to be used via <strong><a href="https://www.drupal.org/project/composer_manager">Composer manager</a></strong></li>
<li>Plug module provides some glue code to integrate the plugin system</li>
<ul>
<li>Register PSR-4 namespace for classes via <strong><a href="https://www.drupal.org/project/xautoload">X Autoload</a></strong></li>
<li>Base classes to make easier the plugin creation</li>
</ul>
</ul>
</div></section>
<!-- Plugin types -->
<section class="slide"><div>
<h2>Plugin discovery types</h2>
<p><strong>Annotation based plugins</strong><br />Plugin classes are annotated and placed in a defined namespace.</p>
Class Acme:
<pre class=" language-php"><code class="language-php">namespace Drupal\plug_example\Plugin\company;
/**
* @Company(
* id = "acme",
* country = "USA"
* )
*/
class Acme extends CompanyBase implements CompanyInterface {</code></pre>
</div></section>
<!-- Plugin types -->
<section class="slide"><div>
<h2>Plugin discovery types</h2>
<p><strong>YAML based discovery</strong><br />Plugins are listed in YAML files. This is mainly useful if all plugins use the same class.</p>
<pre class=" language-yaml"><code class="language-yaml">apple:
label: Apple
sugar: 'low'</code></pre>
Class Fruit:
<pre class=" language-php"><code class="language-php">namespace Drupal\plug_example\Plugin\fruit;
class Fruit extends PluginBase implements FruitInterface {</code></pre>
</div></section>
<!-- Plug Field -->
<section class="slide"><div>
<h2>Plug Field</h2>
<!-- <img src="pictures/spam.jpg" style="float: right; width: 380px; padding-top: 30px;"> -->
<br />
<ul>
<li>Emulate the Drupal 8 Field System</li>
<li>Expose Field types, widgets and formatters as annotated plugins</li>
<li>Provide base classes to extend easily</li>
</ul>
</div></section>
<!-- Plug config -->
<section class="slide"><div>
<h2>Plug Config</h2>
<!-- <img src="pictures/spam.jpg" style="float: right; width: 380px; padding-top: 30px;"> -->
<ul>
<li>Create exportable entities as <strong>annotated plugins</strong></li>
<li>Wrapper around Drupal 7 entities</li>
<li>Alternative to CTools plugins:</li>
<ul>
<li>Object Oriented Plugins</li>
<li>Actually are entities</li>
</ul>
<ul>
</div></section>
<!-- Typed Entity -->
<section class="slide"><div>
<h2>Typed Entity (does not need Plug)</h2>
<ul>
<li>Organize your custom code around entities in objects</li>
<li>Forget <code>my_module_process_article_images($nid)</code></li>
<li>Use <code>$article->processImage()</code> instead</li>
</ul>
<ul>
<li>It's a <strong>very</strong> lightweight module. Can complement Plug</li>
<li>More re-use of code: Code is centralized & You can use base classes</li>
<li>Objects are easy to pass around</li>
</ul>
</div></section>
<!-- Typed Entity Example -->
<section class="slide"><div>
<h2>Typed Entity: Example code</h2>
<h3>1. Create the class with your custom methods</h3>
<pre class=" language-php"><code class="language-php">namespace Drupal\my_module\TypedEntity;
class TypedNodeArticle extends TypedNode implements TypedNodeInterface {</code></pre>
<h3>2. Use that object in your regular Drupal code</h3>
<pre class=" language-php"><code class="language-php">function hook_drupalcamp_blow_mind($node) {
$article = TypedEntityManager::create('node', $node);
foreach ($article->getRelatedArticles() as $related) {
// $related->getImage() returns a TypedFileImage!
$image_urls[] = $related->getImage()->getUrl();
}
}</code></pre>
</div></section>
<!-- Use case -->
<section class="slide"><div>
<h2>Use case example</h2>
<img src="pictures/twistersfooter.png" style="float: right; width: 220px;">
<h3 style="font-size: 32px;">Somos twisters billing system</h3>
<ul>
<li>NGO fundraising company</li>
<li>Manage multiple non profit companies</li>
<li>Complex bonus system for callers</li>
<li>Multiple roles</li>
</ul>
<div>
<div style="float: left; width: 150px; height:150px"><img style="width: 120px; padding-top: 25px;" src="pictures/msf.jpg"></div>
<div style="float: left; width: 150px; height:150px"><img style="width: 120px; padding-top: 25px;" src="pictures/aldeas.jpg"></div>
<div style="float: left; width: 150px; height:150px"><img style="width: 120px;" src="pictures/medicos.jpg"></div>
</div>
</div></section>
<!-- Hot topics -->
<section class="slide"><div>
<h2>Hot topics</h2>
<img src="pictures/spam.jpg" style="float: right; width: 380px; padding-top: 30px;">
<ul>
<li>Custom plugins for different billing calculators</li>
<ul>
<li>Plug</li>
</ul>
<li>Multiple custom entity types</li>
<ul>
<li>Entity boilerplate</li>
</ul>
<li>Custom field types for bonuses and penalties</li>
<ul>
<li>Plug Field</li>
</ul>
</ul>
</div></section>
<!-- Field diagram -->
<section class="slide cover"><div>
<img src="pictures/diagram_scale.jpg" alt="">
<h2>Field diagram</h2>
<ul style="margin: 260px 0; font-size: 22px;">
<li>7 Field type classes</li>
<li>1 main abstract class</li>
<li>4 Interfaces</li>
<li>Extra features for invoicing tasks</li>
</ul>
</div></section>
<!-- Wire mess -->
<section class="slide shout cover shadow" id="frustrated"><div>
<h2>I did it<br><br><br>in a .module file</h2>
<img src="pictures/frustrated1024.jpg" alt="">
<style>
#frustrated h2 {
color: white;
}
</style>
</div></section>
<!-- Show me the code -->
<section class="slide shout cover shadow" id="code"><div>
<h2>...but show me<br><br>the code!</h2>
<img src="pictures/show_code_scale.jpg" alt="">
<style>
#code h2 {
color: white;
}
</style>
</div></section>
<!-- Encourage -->
<section class="slide"><div>
<h2>Why we do love this stuff</h2>
<ul>
<li>Maintainability</li>
<li>Have fun learning a new way to solve problems</li>
<li>Investigate and discover new programming patterns</li>
<li>Be ready for all the new Drupal 8 coding paradigms</li>
</ul>
<div class="next">
<h2>Teamwork and give back to the community</h2>
<figure>
<blockquote>
<p>Alone we can do so little; together we can do so much</p>
</blockquote>
<figcaption>Helen Keller</figcaption>
</figure>
</div>
</div></section>
<!-- Conclusions -->
<section class="slide"><div>
<h2>Conclusions</h2>
<ul>
<li>Don't need to wait more to open your mind</li>
<li>Try to learn new things to avoid burn out</li>
<li>Get out of Drupal island to learn and improve your skills</li>
</ul>
<div class="next">
<h2 style="font-size:45px;">Thirst for knowledge is basic to be up to date</h2>
</div>
</div></section>
<!-- Resources -->
<section class="slide"><div>
<h2>Resources</h2>
<ul>
<li><strong>Drupal modules:</strong> XAutoload, Composer Manager, Service container, Typed Entity...</li>
<li><strong>Plug repository:</strong> https://github.com/Plug-Drupal</li>
<li><strong>Entity Boilerplate repository:</strong> https://github.com/plopesc/entity_boilerplate</li>
<li><strong>Typed Entity repository:</strong> <br />https://github.com/mateu-aguilo-bosch/typed_entity</li>
</ul>
</div></section>
<!-- Thank you -->
<section class="slide cover shadow shout"><div id="uva">
<img src="pictures/uva2_bn.jpg">
<h2>Thanks!</h2>
<style>
#uva h2 {
color: white;
margin-top: 120px;
text-align: center;
}
</style>
</div></section>
<section class="slide shout cover" id="questions"><div>
<img src="pictures/intro_scale.png">
<h2>Questions?</h2>
<style>
#questions h2 {
color: black;
margin-top: 70px;
margin-left: 65px;
}
</style>
</div></section>
<!--
To hide progress bar from entire presentation
just remove “progress” element.
-->
<div class="progress"><div></div></div>
<script src="shower/shower.min.js"></script>
<script src="prism.js"></script>
<script src="prism_yaml.js"></script>
<script>
var pre = document.querySelectorAll("section.codeonly pre");
for (var i = 0; i < pre.length; i++) {
pre[i].className += " line-numbers";
}
</script>
<!-- Copyright © 2014 Yours Truly, Famous Inc. -->
<!-- Photos by John Carey, fiftyfootshadows.net -->
</body>
</html>