Mano a mano che i siti diventano sempre più complessi ed articolati emergono nuovi metodi di progettazione che cercano di gestire questa complessità. Uno dei metodi più popolari è l'Atomic Design che ha nei seguenti elementi i mattoni fornamentali con cui progettare il sito: Atomi, Molecole, Organismi, Templates, Pagine. Questa tecnica è supportata da uno strumento: PatternLab. C'è molta attività attorno all'uso di questo strumento in Drupal, in questo talk vedremo a che punto è l'integrazione.

2. Drupal & Pattern Lab
un nuovo approccio al theming
Drupal Day 2017

3. Gian Mario Mereu
gmereu@wellnet.it

4. Twig

5. Twig

6. Twig
Stampa qualcosa: {{ ... }}
esegui il comando: {% ... %}
commenti: {# ... #}

7. Twig
Accesso variabili
{{ object.pippo }}

8. Twig
Includere file
{% include “file.html.twig” with { var1: value } %}
{% include “file.html.twig” with { var1: value } only %}

9. Twig
blocchi
“page.html.twig”

10. Twig
estendere un twig

11. Problema: Drupal theming
il Drupal themer
Theme accoppiato alle strutture dati
Pipeline: 1) sviluppo e/o building; 2) theming;

12. Metodologie per la progettazione e strumenti a supporto dello sviluppo
Metodo di progettazione di sistemi
(design system) chiamato:
Atomic Design
Strumento a supporto:
Pattern Lab

13. Metodologie per la progettazione e strumenti a supporto dello sviluppo
Atomic Design prende ispirazione dai ricordi di chimica dell’ideatore

14. Metodologie per la progettazione e strumenti a supporto dello sviluppo
tag html
a, input, label, h*, li, ol, p,
table, button, image
label
input
button

15. Metodologie per la progettazione e strumenti a supporto dello sviluppo
le molecole sono dei
raggruppamenti di elementi
(tag) e che funzionano come
una unità
Il form (molecola) viene
formato dagli elementi
(atomi) della slide
precedente

16. Metodologie per la progettazione e strumenti a supporto dello sviluppo
gli organismi sono dei
componenti della UI
mediamente complessi
composti da atomi e/o
molecole e/o altri organismi
Ad esempio l’header è un
organismo

17. Metodologie per la progettazione e strumenti a supporto dello sviluppo
i template raggruppano
oggetti: organismi, molecole
ed atomi, in uno specifico
layout

18. Metodologie per la progettazione e strumenti a supporto dello sviluppo
gli organismi sono dei
componenti della UI
mediamente complessi
composti da atomi e/o
molecole e/o altri organismi

19. Metodologie per la progettazione e strumenti a supporto dello sviluppo
Pattern Lab
“At its core, Pattern Lab is a static site generator (powered by either PHP or Node)
that stitches together UI components.”
definizione da http://patternlab.io/
Il sito statico viene generato a partire da una serie di template (twig o
mustache)/css/js organizzati in una gerarchia di directory

20. Metodologie per la progettazione e strumenti a supporto dello sviluppo (pattern lab)
source
root directory

21. Metodologie per la progettazione e strumenti a supporto dello sviluppo (pattern lab)
source/_patterns
http://demo.patternlab.io/

22. Strumenti esistenti in Drupal (elenco non completo)
Pattern Lab
● Pattern Lab Twig Standard Edition for Drupal (github)
plugin-drupal-twig-components (t, without, link, path …. )
Drupal 8 theme
● Phase2 Drupal 8 base theme with Pattern Lab (github)
gulp, sass, singularity - ottimamente documentato
● Shila theme for Drupal 8 (github)
gulp, sass, singularity

23. Strumenti esistenti in Drupal (elenco non completo)
Moduli
● components
Permette rendere accessibili nuovi componenti definiti in un tema o modulo come namespace Twig
mymodule.info.yml [mymodule directory]/myModuleComponets/box/box.twig
component-libraries:
myModule:
paths:
- myModuleComponets {% include "@myModule/box/box.twig" %}

24. Strumenti esistenti in Drupal (elenco non completo)
Moduli
● ui patterns
permette di definire dei pattern
ed usarli in: panels, field groups,
views, paragraphs
teammember:
label: Team Member
description: Display a team member.
fields:
name:
type: text
label: Name
description: Name of the team member.
preview: Nome Cognome
……….
use: '@molecules/components/shila-team-member/shila-team-member.html.twig'
libraries:
- shila_theme/team-member
my-pattern.ui_patterns.yml

25. Strumenti esistenti in Drupal (elenco non completo)
<div class="team-member">
<div class="team-member__picture">
<image src=”{{ image }}”>
</div>
<h2 class="team-member__name">
{{ name }}
</h2>
<span class="team-member__nikname">{{ nikname }}</span> //
<span class="team-member__email">{{ email }}</span>
<div class="team-member__bio">
<div class="team-member__bio__button">-</div>
<p class="team-member__bio__content collapse">
{{ bio }}
</p>
</div>
</div>

26. Demo

27. Team Member

28. Conclusioni
il Drupal themer
Theme accoppiato alle strutture dati
Pipeline: 1) sviluppo e/o building; 2) theming;

29. http://atomicdesign.bradfrost.com
http://patternlab.io
https://www.aleksip.net // https://github.com/aleksip/shila-drupal-theme
https://www.phase2technology.com // https://github.com/phase2/pattern-lab-starter

30. Domande