Polymer Elements, Yeoman generator per Polymer

yeoman_generator

Polymer Elements cosa sono?

Nel post Polymer, Html5 e WebComponents, come iniziare? abbiamo visto quali strumenti sono necessari per iniziare a familiarizzare con Polymer e come installarlo. Abbiamo in realtà creato un app demo vuota, un contenitore in cui abbiamo installato le librerie e settato le dipendenze.

In questo post entriamo nel dettaglio cercando di approfondire Polymer le sue caratteristiche ed il suo utilizzo.

Polymer include al suo interno al momento gli “Element collection” ovvero Polymer Core elements e Paper Elements.

Polymer core elements

Il core di Polymer è l’insieme degli elementi e delle utility che permettono di lavorare sul layout, sull’input dell’utente, selezioni e struttura delle app che si andranno a realizzare.
Documentazione e Demo

Paper elements

L’implementazione del Material Design di Google per il web, un set di elementi interattivi disponibili per costruire applicazioni web ricche di nuove funzionalità.
Documentazione e Demo

Polymer Elements come utilizzarli?

Partendo dall’app creata in precedenza in questo post Polymer, Html5 e WebComponents, come iniziare? vedremo come installare, includere ed utilizzare i Polymer Core elements e Paper Elements. 

Utilizzeremo Yeoman generator for Polymer projects

Le caratteristiche di Yeoman:

  • Polymer app scaffold costruito con Html5 Boilerplate (tutti gli elementi strutturali di Polymer)
  • Sub-generator per creare gli elementi del core di Polymer
  • Boilerplate per creare elementi di Polymer riutilizzabili
  • Supporto SASS/SCSS
  • PageSpeed Insights per i test sulle performance
  • altro

Vediamo come installarlo nella nostra app, apriamo git e posizioniamoci nella cartella della nostra app creata in precedenza /nomeApp

ora siamo nel folder della nostra app /nomeApp

ci verranno poste alcune richieste

yopolymer

Vogliamo includere i core-elements di Plolymer? SI
Vogliamo includere i paper-elements di Plolymer? SI
Vogliamo utilizzare SASS/SCSS per gli elementi di stile? SI
Vogliamo utilizzare libsass? SI
yopolymer2

Bower ora sta creando le dipendenze per gli elementi che Yeoman si appresta ad installare, ha trovato all’interno della root della nostra app il file bower.json che avevamo creato in precedenza e ci chiede se vogliamo sovrascriverlo, gli diciamo di si e confermiamo.

A questo punto Bower inizia l’installazione, ci vorrà un minuto circa…

Finita l’installazione dei Polymer Core elements e Paper Elements diamo uno sguardo alla root della nostra app. Questa è la struttura generata che modifica quella in precedenza creata nel post Polymer, Html5 e WebComponents, come iniziare? – innanzitutto possiamo subito notare che Yeoman ha installato tutto il contenuto in /app all’interno troviamo /bower_components , ma se scendiamo più in basso troviamo (indicato con la freccia rossa) il vecchio folder creato in precedenza /bower_components che a questo punto non ci serve più e possiamo cancellare.

yopolymersublime

Diamo subito uno sguardo all’index.hml nella directory /app

Possiamo notare subito l’inclusione della piattaforma

e l’inclusione degli elementi di Polymer

 

yopolymersublime2

 

A questo punto dovremmo entrare nel vivo di Polymer, ovvero provare a strutturare qualcosa, ma volutamente lo rimandiamo ad un post successivo…

Al momento limitiamoci a lanciare l’app test creata di default andiamo nel terminale:

vi dovrebbe lanciare in automatico il browser e l’applicazione su http://localhost:9000/

se ricevete errori dal terminale installate:

e poi riprovate a lanciare nuovamente

ecco l’app demo

app

 

Al momento ci fermiamo qui, ma inserirò presto per entrambe gli articoli due video in italiano per facilitare la comprensione delle operazioni da fare e con un terzo successivo post vedremo dettagliatamente la struttura e le caratteristiche degli elementi di Polymer.

Qui inoltre trovate il video di Rob Dodson che vi sarà utile sicuramente per approfondire quanto abbiamo già visto, fate particolare attenzione in quanto potreste trovare piccole discrepanze sull’inclusione dei core-elements e della piattaforma stessa, in quanto Polymer stesso si evolve ed attualmente è alla versione 0.5, mentre il video in basso fa riferimento ad un version precedente.

 

 

Polymer, Html5 e WebComponents, come iniziare?

polymer

Polymer di cosa parliamo?

Presentato al Google keynote 2014 il progetto “Polymer and the Web Components revolution” definisce un nuovo approccio alla costruzione del web con Html5 attraverso un Ecosistema di librerie, strumenti e framework che consentono di snellire una serie di pratiche consolidate, ma soprattutto di generare piattaforme web scalabili su qualsiasi dispositivo da SmartPhone a Smart Tv.

In questo primo post su Polymer l’intenzione è quella di descrivere brevemente l’idea di base su cui si fonda l’utilizzo di Polymer, ma soprattutto e principalmente delineare i passaggi fondamentali che ne consentono l’utilizzo.

Polymer è una libreria che consente l’utilizzo di Web Components in dotazione e la creazione di nuovi, incapsulati ed interoperabili che estendono di fatto Html5 stesso. Polymer rende più facile e veloce la creazione di qualsiasi elemento web da un semplice bottone fino ad applicazioni desktop o mobile più complesse.

 

Polymer quali strumenti ci servono per iniziare?

Git (Sistema controllo versione e terminale )
Node e npm
  (è una soluzione server-side per JavaScript, in particolare, in grado di ricevere e rispondere alle richieste HTTP)
Bower (Package manager per applicazioni web)
Polymer
Editor di testo

Abbiamo anche necessità di avere un ambiente HTTP server base per lanciare in locale le nostre applicazioni web. Possiamo utilizzare diverse soluzioni, Apache o oppure se già installato Python.

Qualche chiarimento sul flusso di utilizzo ed installazione degli strumenti:
Per utilizzare Polymer o più ingenerale i Web Components dobbiamo utilizzare Bower
Per installare ed utilizzare Bower dobbiamo installare Node,npm e Git

Per iniziare sarà sufficiente andare sui siti di riferimento scaricare ed installare Node,npm e Git

Attraverso la console di Git faremo la maggior parte delle operazioni legate al nostro progetto, ma iniziamo installando Bower (che riutilizzeremo anche per progetti web futuri)

[crayon-5a8bcc3816277217254234/]

gitbash

Dopo aver installato Bower, dobbiamo creare la directory che conterrà il nostro progetto

[crayon-5a8bcc3816284123775927/]

Per esplorare la directory in cui ci troviamo e verificare che /nomeApp sia stata correttamente creata possiamo digitare

[crayon-5a8bcc381628c342458164/]

A questo punto posizioniamoci all’interno della directory /nomeApp

[crayon-5a8bcc3816294625360715/]

gitbash2

Ora inizializziamo il nostro progetto, ovvero dobbiamo creare il file bower.json che conterrà le diverse informazioni, in questa fase possiamo inserire i dati richiesti o comunque trattandosi di un test lasciarli vuoti, dando un return/invio verranno definiti i dati di default, l’ultima richiesta ci mostrerà il file bower.json che stiamo per creare per conferma.

[crayon-5a8bcc381629c335246808/]

gitbash3

Adesso installiamo Polymer, Bower aggiungerà /bower_components nella root della nostra applicazione /nomeApp inserendo all’interno /Polymer e le sue dipendenze

[crayon-5a8bcc38162a4198941434/]

ecco come appare la root della nostra App, come possiamo notare è stato aggiunto al file bower.json la dipendenza di Polymer
sublimetext

Quando vengono rilasciate nuove versioni di Polymer sarà sufficiente aggiornare con:

[crayon-5a8bcc38162ac780129369/]

A questo punto abbiamo tutto quello che ci serve per procede.
Se avete già installato un serve locale Apache oppure qualsiasi altra soluzione potete già provare a lanciare qualche file presente nell’App, altrimenti possiamo velocemente installare con npm serve:

[crayon-5a8bcc38162b4994977424/]

Ora aprendo in un qualsiasi browser http://localhost:3000/ abbiamo la possibilità di accedere alla nostra App e navigare tra le cartelle e dare uno sguardo ai file html all’interno.

Al momento abbiamo un bel contenitore, ma sostanzialmente vuoto.

Di seguito qualche link per approfondire: