Sistema degli ambiti

Il sistema degli ambiti controlla dove le sezioni riutilizzabili di FaceFlow sono visibili e condivise.

Per gli utenti tecnici, l'ambito è una delle regole architetturali fondamentali in FaceFlow. Decide se una sezione riutilizzabile si comporta come un asset globale, un asset di una famiglia di pagine o un asset locale esclusivo di una singola Pagina.

Tre livelli di ambito

• Sito: condiviso su tutto il sito
• Layout: condiviso tra Pagine che usano lo stesso Layout
• Pagina: locale a una singola Pagina

Modello mentale tecnico

Considera l'ambito come un contratto di visibilità e impatto delle modifiche associato a un'istanza di sezione riutilizzabile.

Concettualmente:

{
  "component": "announcement-strip",
  "scope": "site"
}

Il campo importante non è la forma esatta di memorizzazione. La regola importante è che l'ambito determina quanto ampiamente quell'istanza dovrebbe essere riutilizzata e quanto diffusamente una modifica successiva si propagherà.

Perché l'ambito è importante

L'ambito impedisce che il riuso degeneri in caos.

Senza regole di ambito, i team o:

• duplicano lo stesso blocco ovunque
• condividono eccessivamente un blocco che avrebbe dovuto rimanere locale
• perdono traccia di quali modifiche influenzano quali Pagine

L'ambito rende espliciti quei confini.

Modello mentale

Site scope
  -> affects all relevant Pages across the site

Layout scope
  -> affects Pages that share one Layout

Page scope
  -> affects only one Page

Questo non è una preferenza di contenuto. È una regola sull'impatto delle modifiche.

Esempio di mappatura delle istanze

Un'assemblaggio semplificato di una Pagina potrebbe apparire così:

Layout: docs-shell

Site scope:
  announcement-strip

Layout scope:
  docs-sidebar
  docs-subnav

Page scope:
  release-notes-cta
  migration-faq

Quel singolo diagramma spiega due fatti tecnici importanti:

• non tutte le sezioni riutilizzabili sono condivise allo stesso modo
• la revisione delle modifiche deve tenere conto dell'ambito prima che la modifica venga approvata

Esempi di ambito

Ambito Sito

Usa questo ambito quando una sezione deve comportarsi come un asset a livello di sito.

Esempi:

• barra di annunci globale
• strip di supporto per la navigazione condivisa
• banner di fiducia usato in tutto il sito

Ambito Layout

Usa questo ambito quando una sezione appartiene a una famiglia di pagine.

Esempi:

• sidebar della documentazione utilizzata solo nelle pagine di documentazione
• sub-navigazione condivisa per una sezione di servizio
• rail di supporto per un'intera famiglia di Layout

Ambito Pagina

Usa questo ambito quando la sezione è unica per una sola Pagina.

Esempi:

• un hero di campagna one-off
• una strip CTA locale
• FAQ o blocco di proof specifico della pagina

Esempio di raggio di cambiamento

Lo stesso tipo di sezione può essere valido a diversi ambiti a seconda dell'intento:

announcement-strip at Site scope
  -> change affects all relevant Pages

announcement-strip at Layout scope
  -> change affects one page family

announcement-strip at Page scope
  -> change affects only one Page

Per questo motivo l'ambito dovrebbe essere scelto in base al raggio di impatto previsto, non per comodità dell'editor.

Regola decisionale

Fai una domanda:

If I change this section, which Pages should change with it?

Se la risposta è:

• "tutte le Pagine rilevanti" -> Sito
• "Pagine in questa singola famiglia" -> Layout
• "solo questa singola Pagina" -> Pagina

Esempio di composizione

Site scope:
  global-announcement

Layout scope:
  docs-sidebar

Page scope:
  pricing-faq

Quel modello mantiene il riuso intenzionale e rende prevedibile l'impatto delle modifiche.

Linee guida architetturali

Usa l'ambito per rispondere a queste domande tecniche:

• dove dovrebbe essere individuabile questa istanza?
• quante Pagine dovrebbero ereditare le modifiche future?
• chi dovrebbe possedere la modifica?
• quale livello di revisione è giustificato prima della pubblicazione?

In pratica:

• l'ambito Sito di solito necessita della revisione più rigorosa perché l'impatto è ampio
• l'ambito Layout richiede consapevolezza della famiglia di pagine
• l'ambito Pagina è il posto più sicuro per sperimentazioni locali

Impatto tecnico

L'ambito influenza:

• dove una sezione riutilizzabile è disponibile
• quante Pagine può influenzare una modifica
• come i team ragionano sulla proprietà
• come la struttura condivisa viene mantenuta nel tempo

Per questo motivo le decisioni sull'ambito dovrebbero essere trattate come decisioni architetturali, non come scelte di comodità per l'editor.

Pattern di revisione

Quando un team propone di ampliare l'ambito, rivedilo come un cambiamento architetturale:

page -> layout
  question: is this section now shared by a durable page family?

layout -> site
  question: does this section now belong to the broader site, not one section?

Se la risposta è "non proprio", probabilmente l'ambito viene ampliato troppo presto.

Checklist per la revisione tecnica

• l'ambito scelto corrisponde al raggio di cambiamento previsto?
• la sezione è davvero riutilizzabile a quel livello?
• un futuro editor capirebbe perché la sezione è condivisa?
• la sezione contiene contenuti che avrebbero dovuto rimanere locali?
• una sezione che dovrebbe essere locale viene copiata in molte Pagine?

Anti-pattern

Evita:

• usare l'ambito sito per contenuti che servono solo a una famiglia di pagine
• usare l'ambito pagina per contenuti copiati in molte Pagine
• usare l'ambito layout per contenuti che appartengono alla shell globale del sito
• ampliare l'ambito solo per risparmiare lavoro a breve termine

Esempio di regola in pratica

Main navigation utility bar -> Site scope
Developer docs sidebar -> Layout scope
Landing page final CTA -> Page scope

Regola di design correlata

L'ambito dovrebbe essere rivisto insieme alla responsabilità dell'oggetto:

• se la modifica interessa la shell, rivedi il Layout
• se la modifica interessa il contratto di una sezione riutilizzabile, rivedi il Componente
• se la modifica interessa solo un'esperienza assemblata, rivedi la Pagina

Correlati

• Componenti
• Layout
• Pagine