Applicazioni Web Component-Based: Origami

Andrew Betts, direttore di FT Labs , ha presentato alla Velocity Europa 2014 assistenti di una serie di norme e strumenti di produzione propria per lo sviluppo web. Esse mirano a far fronte alle sfide dello sviluppo di creare e mantenere più di ottocento * .ft.com siti. FT Labs strategia principale è di pagine web suddivisione in componenti incorporati all'interno di un insieme ben definito di regole.

FT Labs è un Financial Times squadra incentrata sulle tecnologie web. La rapida crescita delle attività digitali Financial Times ha portato ad una serie di sfide, tutti legati in scala. Il gran numero di diversi siti web, senza, regole e strumenti strutturati comuni significa un sacco di lavoro ripetuto. Un sempre crescente, sempre più complessa rete ecosistema induce significativo trascinamento: difficile da mantenere ed evolvere applicazioni web; codice legacy che è impossibile da smantellare; contorti integrazioni applicative; difficile da trovare, i requisiti end-to-end competenze ingegneristiche.

Così FT Labs hanno cercato di trovare una soluzione che affronta questi problemi e si stabilirono su un approccio basato su componenti. Un insieme di principi sono alla base della soluzione. Alcuni di loro sono come segue:

Tutto dovrebbe essere disciplinato da norme
I componenti non devono essere speciale cased a un (ie sito web) singolo prodotto
I componenti dovrebbero essere facile da usare e non supponente
Consumatori componente dovrebbe controllare i tempi di aggiornamento dei componenti utilizzati
I componenti devono essere incapsulati o namespace in modo che non interferiscano con i loro "vicini web"
Dipendenze sui sistemi esterni dovrebbero essere ridotti al minimo, in modo che la soluzione globale è più affidabile e più veloce per spedire.
I componenti sono di due tipi: moduli e servizi web.



Un'applicazione costruita con componenti di Origami (originariamente pubblicato sul  Origami  sito web).

I moduli sono risorse statiche (ad esempio, file CSS) o CommonJS moduli, quindi il loro scopo principale è quello di fornire un'esperienza utente coerente su siti web. Ogni modulo deve seguire una specifica che tocca convenzioni di denominazione, il pacchetto e costruire configurazioni, i test e le regole demo, tra gli altri requisiti. Gli esempi includono o-grid , una griglia per i layout sensibili, o-date , per la formattazione della data e l'aggiornamento, oppure o-ft-tipografia , per specifici per il marchio stili tipografici FT. Documentazione Questi moduli 'mette in mostra ciò che è possibile, seguendo le specifiche.

Web Services, come dice il nome, fornisce contenuti e dati attraverso un endpoint URL. Servizi Web devono essere conformi ad un disciplinare . La specifica definisce una serie di requisiti, come ad esempio le regole di deprecazione, endpoint necessari (per controlli sanitari, metriche e documentazione), le regole di controllo delle versioni e dei molteplici servizi web ambienti regole. Il reattivo-image-proxy , un proxy per il ridimensionamento e l'ottimizzazione delle immagini, è un esempio di un servizio web Origami.

Origami fornisce un servizio di compilazione dei moduli. Il servizio di build è solitamente attivata in fase di esecuzione. Se una pagina web contiene <link> tag come questi:

<Link rel = href "stylesheet" = "// build.origami.ft.com/bundles/css?modules=o-ft-icons@^2.3.1" />
Il processo di compilazione sarà:

Installare la versione 2.3.1 (o aggiornamenti fino alla versione principale successiva) del o-ft-icons modulo
Installare tutte le sue dipendenze, se capita di avere qualsiasi
Eseguire il processo di compilazione
Minimizza l'uscita CSS
Gzip it & cache di esso
Servire con un CDN
C'è anche un processo di generazione Javascript equivalente che viene attivata tramite script di tag.

FT Labs fornisce di un componente registro che può essere utilizzato da chiunque, anche se alcuni componenti sono Financial Times-specifico, come abbiamo visto.

Andrew ha terminato il suo discorso presentando FT Labs polyfills as a Service . Polyfills è Javascript codice che aggiunge caratteristica non disponibile in modo nativo su un browser web, lisciando così le differenze tra venditori e versioni. Il servizio è personalizzabile , ma il suo utilizzo può essere semplice come includere questo tag script nella pagina web: