You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Questa sezione descrive un set di standar moderni per i "web components".
3
+
Questa sezione descrive un insieme di moderni standard per descrivere i "web components".
4
4
5
-
Ad oggi, questi standards sono in fase di sviluppo. Alcune funzionalità sono ben supportate ed integrate nel standard attuale HTML/DOM, mentre altre sono ancora allo stadio draft. Potremmo provare gli esempi in qualunque browser, ma Google Chrome è probabilmente il più aggiornato con queste funzionalità. Come è facile indovinare, ciò è dato dal fatto che dietro a molti dei concetti relativi a queste specifiche ci siano le organizzazioni di Google.
5
+
Ad oggi, questi standards sono ancora in fase di sviluppo. Quindi, alcune funzionalità sono ben supportate ed integrate nell'attuale standard HTML/DOM, mentre altre sono ancora allo stadio Draft. Possiamo provare gli esempi in qualunque browser, ma Google Chrome è probabilmente il più aggiornato con queste funzionalità. Ed indovinate un po', ciò è dato dal fatto che dietro a molti dei concetti relativi a queste specifiche ci siano le realtà che ruotano attorno a Google.
6
6
7
7
## Cosa c'è in comune tra...
8
8
9
-
L'idea generale del componente non è nulla di nuovo. Viene usato dappertuttoin molti frameworks.
9
+
L'idea generale del componente non è nulla di nuovo. Viene usato dappertutto, ed in tantissimi frameworks.
10
10
11
-
Prima di spostarci nei dettagli di implementazione, diamo un'occhiata a questa grandiosa conquista dell'umanità:
11
+
Prima di spostarci nei dettagli di implementazione, però, diamo un'occhiata a questa grandiosa conquista dell'umanità:
12
12
13
13

14
14
15
15
Questa è la Stazione Spaziale Internazionale (ISS).
16
16
17
-
E csoì è come è fatta dentro (approssimativamente):
17
+
E così è come è fatta dentro (approssimativamente):
18
18
19
19

20
20
21
21
La Stazione Spaziale Internazionale:
22
-
- Consta di molti componenti.
23
-
- Ogni componente, a sua volta, contiene all'interno tanti piccoli dettagli ancora più piccoli.
24
-
- I componenti sono molto complessi, molto più complicati della maggior parte dei siti web.
22
+
- Consta di moltissimi componenti.
23
+
- Ogni componente, a sua volta, contiene all'interno tanti componenti e dettagli, ancora più piccoli.
24
+
- I componenti sono molto complessi, e molto più complicati della maggior parte dei siti web.
25
25
- I componenti vengono sviluppati a livello internazionale, da team di paesi differenti, che parlando lingue differenti.
26
26
27
27
...E questa cosa vola, mantenendo delle persone in vita nello spazio!
28
28
29
-
Come vengono creati dei dispositivi così complessi?
29
+
Come vengono creati delle strutture così complesse?
30
30
31
-
Quali principi possiamo prendere in prestito per rendere il nostro sviluppo affidabile e scalabile allo stesso livello? O almeno, per quanto possibile, avvicinarci ad essa.
31
+
Quali principi possiamo prendere in prestito, per rendere il nostro sviluppo affidabile e scalabile allo stesso modo? O almeno, per quanto possibile, avvicinarci un po'.
32
32
33
33
## Architettura di un componente
34
34
35
35
La ben nota regola per sviluppare del software complesso è: non sviluppare software complesso.
36
36
37
-
Se qualcosa diventa complesso, dividerlo in parti più semplici e connetterli nel modo più ovvio.
37
+
Se qualcosa diventa complesso, dividerlo in parti più semplici e connetterli nel maniera più ovvia.
38
38
39
39
**Un buon architetto è colui che può rendere cose complesse, semplici.**
40
40
41
-
Possiamo dividere l'interfaccia utente in componenti visuali: ognuno di essi ha la propria posizione nella pagina, può "fare" un compito ben preciso, ed è separato dagli altri.
41
+
Possiamo dividere visivamente, l'interfaccia utente in componenti: ognuno di essi ha la propria posizione nella pagina, può "fare" un compito ben preciso, ed è separato dagli altri.
42
42
43
43
Guardiamo un sito web, per esempio Twitter.
44
44
45
-
Si divide in componenti abbastanza naturalmente:
45
+
Possiamo dividerlo abbastanza naturalmente in componenti:
46
46
47
47

48
48
49
49
1. Barra di navigazione superiore.
50
50
2. Informazioni utente.
51
-
3. Suggerimenti di follow.
52
-
4.From di invio.
53
-
5. (e inoltre 6, 7) -- messaggi.
51
+
3. Suggerimenti di utenti da seguire.
52
+
4.Form di invio.
53
+
5. (e inoltre 6, 7) sono messaggi.
54
54
55
-
I componenti possono avere sottocomponenti, per esempio i messaggi possono essere parte di un componente "lista di messaggi" di livello superiore. Una immagine utente può essere essa stessa un componente, e così via.
55
+
I componenti possono avere sottocomponenti, per esempio i messaggi possono essere parte di un componente "lista di messaggi" di livello superiore. Una immagine di un utente può essere, essa stessa, un componente, e così via.
56
56
57
-
Come possiamo decidere, cosa sia un componente? Ciò arriva dall'intuizione, l'esperienza ed il senso comune. Solitamente è una entità separata a livello visivo che possiamo descrivere in termini di cosa fa e di come interagisce con la pagina. Nell'esempio precedente, la pagina è divisa in blocchi, ognuno dei quali gioca un ruolo, quindi è logico farne dei componenti.
57
+
Come possiamo decidere, cosa sia un componente? Ciò arriva dall'intuizione, l'esperienza ed il senso comune. Solitamente è una entità separata a livello visivo, che possiamo descrivere in termini di "cosa fa" e di "come interagisce" con la pagina. Nell'esempio precedente, la pagina è divisa in blocchi, ognuno dei quali gioca un ruolo, quindi è logico farne dei componenti.
58
58
59
59
Un componente ha:
60
60
- Una propria classe JavaScript
61
-
- Una struttura DOM, gestito esclusivamente dalla sua classe, il codice esterno no può accedervi (principio di "incapsulamento").
62
-
- Stili CSS, applicati al componente.
61
+
- Una struttura DOM, gestita esclusivamente dalla sua classe, ed il codice esterno non può accedervi (principio di "incapsulamento").
62
+
- Stili CSS, da applicare al componente.
63
63
- API: eventi, metodi della classe etc, per poter interagire con altri componenti.
64
64
65
65
Ancora una volta, il concetto di "componente" nen è niente di speciale.
@@ -69,8 +69,8 @@ Ci sono una serie di frameworks e metodi di sviluppo per costruirli, ognuno con
69
69
I "Web components" forniscono capacità built-in nel browser per questo, quindi non abbiamo più bisogno di emularli.
70
70
71
71
-[Custom elements](https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements) -- per definire elementi HTML personalizzati.
72
-
-[Shadow DOM](https://dom.spec.whatwg.org/#shadow-trees) -- per creare un DOM interno e visibile al componente stesso ed invisibile per gli altri.
73
-
-[CSS Scoping](https://drafts.csswg.org/css-scoping/) -- per dichiarare stili da applicare solo dentro lo Shadow DOM del componente.
74
-
-[Event retargeting](https://dom.spec.whatwg.org/#retarget)ed altre funzionalità minori per rendere i componenti personalizzati più adatti allo sviluppo.
72
+
-[Shadow DOM](https://dom.spec.whatwg.org/#shadow-trees) -- per creare un DOM interno e visibile solo al componente stesso, ma nascosto agli altri.
73
+
-[CSS Scoping](https://drafts.csswg.org/css-scoping/) -- per dichiarare stili applicabili esclusivamente dentro lo Shadow DOM del componente.
74
+
-[Event retargeting](https://dom.spec.whatwg.org/#retarget) altre funzionalità minori per rendere i componenti personalizzati più adatti allo sviluppo.
75
75
76
-
Nel prossimo capitolo entreremo nei dettagli dei "Custom Elements", una funzionalità fondamentale e ben supportata dei web component, già ottima anche anche usata da sola.
76
+
Nel prossimo capitolo entreremo nei dettagli dei "Custom Elements", una funzionalità fondamentale e ben supportata dei web component, ottima anche anche usata da sola.
0 commit comments