introduzione a ember.js

Testo

Introduzione a Ember.js“A framework for creating ambitious web applications”

AgendaEmber e ember-cli Template Routing Modelli e Ember-Data Controller Componenti Addons Risorse

Ember.js“The web derives its power from the ability to bookmark and share URLs”

Ember.js

Da creatori/sviluppatori di jQuery, Rails, SproutCore

“The web derives its power from the ability to bookmark and share URLs”

Ember.js


Moderno framework JS (v.1.0-beta - agosto 2012)


Ember.js



Finora piuttosto instabile, ma v.2.0 il 24/07/15


Ember.js




Opinionated framework: convention-over-configuration


Ember.js




Opinionated framework: convention-over-configuration

Largo uso di ECMAScript 6 (o simili, come RSVP)


Ciclo di sviluppo

Release Beta Canary1.13.0 2.0.0-beta1 2.0.0-canary+680f997e

Ember-cli

Ember-cliCommand-line-interface per gestire un progetto Ember


Asset pipeline con Broccoli (supporto per Handlebars, CoffeeScript, Sass, Less, minifier, uglifier, ecc.)



Rigida struttura convenzionale di file/cartelle (occhio ai nomi!)




Compilazione al volo ad ogni file salvato in sviluppo





Generatori di risorse, server di sviluppo, installazione addon





Generatori di risorse, server di sviluppo, installazione addon

Test con PhantomJS

Ember-cli - up & runningnpm install -g ember-cli bower phantomjsember new my-new-appcd my-new-appnpm install && bower installember server

Ember-cli - struttura fileapp/ — adapters/ — components/ — controllers/ — helpers/ — models/ — routes/ — styles/ — templates/ — app.js — index.html — router.jsconfig/environment.jsbower.jsonember-cli-build.jspackage.json


Configurazioni dell’applicazione


Gestione delle dipendenze del frontend (bower)


Gestione delle dipendenze del

backend (Node.js)


Specifiche della compilazione di Broccoli (librerie, pacchetti, ecc.)


Ember 1.x: MVC Model: gestione dati (prob. ember-data) View (templates): presentazione dati (handlebars) Controller: manipolazione dati per il template


Ember 2.x: full-stack web

framework Model: gestione dati (prob. ember-data) Components: componenti riusabili Templates: presentazione dati (HTMLbars) Router: recupero dati, gestione delle azioni dei template, salvataggio, redirect, ecc. (store, ember-data)


Specifiche delle rotte definisce gli URL (in Ember gli URL

devono essere consistenti)


Componenti elementi riusabili

nell’applicazione, composti da logica+template


Adapters logica di gestione delle API (come

passare i dati, dove ottenerli, ecc.)


Helpers funzioni riusabili (es. parsing di

date con Moment.js)

Ember-cli - generatori

ember generate <generator-name> <options>


ember generate <generator-name> <options>

Con l’opzione --pod si possono mantenere tutti i file relativi ad una risorsa nella stessa cartella:

• app/users/controller.js• app/users/route.js• app/users/template.hbs

Ember-cli - generatoriember help generate


Available blueprints: liquid-fire: transition <name> Generates a liquid fire transition. ember-select-2: ember-select-2 <name> ember-moment: ember-moment <name> ember-addon: ember-data <name> ember-cli-simple-auth-devise: ember-cli-simple-auth-devise <name> ember-cli-simple-auth: authenticator <name> Generates an Ember Simple Auth authenticator. authorizer <name> Generates an Ember Simple Auth Authorizer. ember-cli-simple-auth <name> session <name> Generates an Ember Simple Auth Session. session-store <name> Generates an Ember Simple Auth Session Store. ember-cli-qunit: ember-cli-qunit <name> ember-cli-divshot: divshot <name> ember-cli-bootstrap-datepicker: bootstrap-datepicker <name> ember-cli: acceptance-test <name> Generates an acceptance test for a feature. adapter <name> <options...> Generates an ember-data adapter. --base-class adapter-test <name> Generates an ember-data adapter unit test addon <name> The default blueprint for ember-cli addons. addon-import <name> Generates an import wrapper.

app <name> The default blueprint for ember-cli projects. blueprint <name> Generates a blueprint and definition. component <name> <options...> Generates a component. Name must contain a hyphen. --path (Default: components) aliases: -no-path (--path=) component-addon <name> Generates a component. Name must contain a hyphen. component-test <name> Generates a component unit test. controller <name> Generates a controller. controller-test <name> Generates a controller unit test. helper <name> Generates a helper function. helper-addon <name> Generates an import wrapper. helper-test <name> Generates a helper unit test. http-mock <endpoint-path> Generates a mock api endpoint in /api prefix. http-proxy <local-path> <remote-url> Generates a relative proxy to another server. in-repo-addon <name> The blueprint for addon in repo ember-cli addons. initializer <name> Generates an initializer. initializer-addon <name> Generates an import wrapper. initializer-test <name> Generates an initializer unit test. lib <name> Generates a lib directory for in-repo addons. mixin <name> Generates a mixin. mixin-test <name> Generates a mixin unit test.

model <name> <attr:type> Generates an ember-data model. model-test <name> Generates a model unit test. resource <name> Generates a model and route. route <name> <options...> Generates a route and registers it with the router. --path (Default: ) route-addon <name> Generates import wrappers for a route and its template. route-test <name> Generates a route unit test. serializer <name> Generates an ember-data serializer. serializer-test <name> Generates a serializer unit test. server <name> Generates a server directory for mocks and proxies. service <name> Generates a service. service-test <name> Generates a service unit test. template <name> Generates a template. test-helper <name> Generates a test helper. transform <name> Generates an ember-data value transform. transform-test <name> Generates a transform unit test. util <name> Generates a simple utility module/function. util-test <name> Generates a util unit test. view <name> Generates a view subclass. view-test <name>

ember help generate


Available blueprints: liquid-fire: transition <name> Generates a liquid fire transition. ember-select-2: ember-select-2 <name> ember-moment: ember-moment <name> ember-addon: ember-data <name> ember-cli-simple-auth-devise: ember-cli-simple-auth-devise <name> ember-cli-simple-auth: authenticator <name> Generates an Ember Simple Auth authenticator. authorizer <name> Generates an Ember Simple Auth Authorizer. ember-cli-simple-auth <name> session <name> Generates an Ember Simple Auth Session. session-store <name> Generates an Ember Simple Auth Session Store. ember-cli-qunit: ember-cli-qunit <name> ember-cli-divshot: divshot <name> ember-cli-bootstrap-datepicker: bootstrap-datepicker <name> ember-cli: acceptance-test <name> Generates an acceptance test for a feature. adapter <name> <options...> Generates an ember-data adapter. --base-class adapter-test <name> Generates an ember-data adapter unit test addon <name> The default blueprint for ember-cli addons. addon-import <name> Generates an import wrapper.

app <name> The default blueprint for ember-cli projects. blueprint <name> Generates a blueprint and definition. component <name> <options...> Generates a component. Name must contain a hyphen. --path (Default: components) aliases: -no-path (--path=) component-addon <name> Generates a component. Name must contain a hyphen. component-test <name> Generates a component unit test. controller <name> Generates a controller. controller-test <name> Generates a controller unit test. helper <name> Generates a helper function. helper-addon <name> Generates an import wrapper. helper-test <name> Generates a helper unit test. http-mock <endpoint-path> Generates a mock api endpoint in /api prefix. http-proxy <local-path> <remote-url> Generates a relative proxy to another server. in-repo-addon <name> The blueprint for addon in repo ember-cli addons. initializer <name> Generates an initializer. initializer-addon <name> Generates an import wrapper. initializer-test <name> Generates an initializer unit test. lib <name> Generates a lib directory for in-repo addons. mixin <name> Generates a mixin. mixin-test <name> Generates a mixin unit test.

model <name> <attr:type> Generates an ember-data model. model-test <name> Generates a model unit test. resource <name> Generates a model and route. route <name> <options...> Generates a route and registers it with the router. --path (Default: ) route-addon <name> Generates import wrappers for a route and its template. route-test <name> Generates a route unit test. serializer <name> Generates an ember-data serializer. serializer-test <name> Generates a serializer unit test. server <name> Generates a server directory for mocks and proxies. service <name> Generates a service. service-test <name> Generates a service unit test. template <name> Generates a template. test-helper <name> Generates a test helper. transform <name> Generates an ember-data value transform. transform-test <name> Generates a transform unit test. util <name> Generates a simple utility module/function. util-test <name> Generates a util unit test. view <name> Generates a view subclass. view-test <name>

Anche gli addon possono aggiungere generatori

ember help generate

index.html 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <title>MyNewApp</title> 7 <meta name="description" content=""> 8 <meta name="viewport" content="width=device-width, initial-scale=1"> 9 10 {{content-for 'head'}} 11 12 <link rel="stylesheet" href="assets/vendor.css"> 13 <link rel="stylesheet" href="assets/my-new-app.css"> 14 15 {{content-for 'head-footer'}} 16 </head> 17 <body> 18 {{content-for 'body'}} 19 20 <script src="assets/vendor.js"></script> 21 <script src="assets/my-new-app.js"></script> 22 23 {{content-for 'body-footer'}} 24 </body> 25 </html>


vendor.css e vendor.js contengono

css e js delle librerie esterne


my-new-app.css e my-new-app.js

contengono css e js dell’app

application.hbs 1 <h2 id="title">Welcome to Ember.js</h2> 2 3 {{outlet}}


{{outlet}} definisce dove i

template “figli” devono inserire il loro

contenuto


{{outlet}} definisce dove i

template “figli” devono inserire il loro

contenuto

Tutti i template derivano da application.hbs

Template - HTMLBars 1 {{#if users}} 2 {{#each users as |user|}} 3 <p class="user {{if user.isActive 'active' 'inactive'}}"> 4 User: {{#link-to 'users.profile' user}}{{user.name}}{{/link-to}} 5 <button {{action "like" user}}>Like</button> 6 </p> 7 {{/each}} 8 {{else}} 9 Nobody's here.. 10 {{/if}}

È una variante di HandleBars che genera DOM invece di stringhe, con notevole incremento di

prestazioni (+30%)

Routing

1 import Ember from 'ember'; 2 import config from './config/environment'; 3 4 var Router = Ember.Router.extend({ 5 location: config.locationType 6 }); 7 8 Router.map(function() { 9 this.route('people', function() { 10 this.route('new'); 11 this.route('edit', {path: '/:id/edit'}); 12 this.route('contracts', { path: '/:person_id/contracts' }); 13 }); 14 });

Ember.js si fonda sull’URL Il file router.js definisce le rotte e la mappatura degli url:

Routing 1 Router.map(function() { 2 this.route('people', function() {}); 3 });

error e loading sono due rotte usate automaticamente quando il modello è in fase di caricamento o è in errore

Routing

1 import Ember from 'ember'; 2 3 export default Ember.Route.extend({ 4 5 model: function(params) { 6 return this.store.find('myModel', params); 7 }, 8 9 setupController: function(controller, model) { 10 controller.set('model', model); 11 } 12 });

Implementazione di base di una rotta:

Quindi nel controller e nel template è disponibile il modello

Modello associatoOgni rotta ha un modello associato


Il modello può essere un POJO, il risultato di una chiamata AJAX con jQuery oppure ottenuto con

Ember-data e lo store


Il modello può essere un POJO, il risultato di una chiamata AJAX con jQuery oppure ottenuto con

Ember-data e lo store

1 import Ember from 'ember'; 2 3 export default Ember.Route.extend({ 4 5 model: function() { 6 return this.store.find('myModel'); 7 } 8 });

1 import Ember from 'ember'; 2 3 export default Ember.Route.extend({ 4 5 model: function() { 6 return Ember.$.getJSON(/*…*/) 7 } 8 });

StoreLo store astrae il backend

Il modello vive sul client e si sincronizza col backend

var model = this.store.find('user', 1); model.deleteRecord();// il modello non è più sullo store // ma va sincronizzato col backendmodel.save().catch(function() {// ops! Torniamo indietro model.rollback();});

StoreLo store astrae il backend

Il modello vive sul client e si sincronizza col backend

var model = this.store.find('user', 1); model.deleteRecord();// il modello non è più sullo store // ma va sincronizzato col backendmodel.save().catch(function() {// ops! Torniamo indietro model.rollback();});

La configurazione dello store (con gli adapters e serializzatori) permette di lavorare con ogni backend (anche legacy!)

Definire un modello 1 import DS from 'ember-data'; 2 3 export default DS.Model.extend({ 4 name: DS.attr('string'), 5 surname: DS.attr('string'), 6 is_admin: DS.attr('boolean'), 7 8 roles: DS.hasMany('roles', { embedded: 'always' }), 9 office: DS.belongsTo('office', { async: true }), 10 11 fullName: function() { 12 return this.get('name') + this.get('surname'); 13 }.property('name', 'surname'), 14 15 rolesList: function() { 16 return this.get('roles').map(function(role){ 17 return role.get('name'); 18 }); 19 }.property('roles.@each') 20 });

I tipi consentiti sono: string, number, boolean, date

Modelli

8 roles: DS.hasMany('roles', { embedded: 'always' }), 9 office: DS.belongsTo('office', { async: true }),

I modelli possono essere in relazione tra loro:

Modelli



Nel primo caso i dati sono forniti dal backend insieme al modello

Modelli



Nel primo caso i dati sono forniti dal backend insieme al modello

Nel secondo caso il modello contiene l’ID del modello associato e viene caricato in maniera

asincrona quando necessario con una chiamata specifica

Modelli

15 rolesList: function() { 16 return this.get('roles').map(function(role){ 17 return role.get('name'); 18 }); 19 }.property('roles.@each')

Le proprietà elaborate (computed properties) sono attributi bidirezionali non direttamente ottenuti attraverso il backend ma calcolati usando altri attributi (anche altre computed

properties)

ControllerI controller “preparano” il modello e altri dati per l’uso nei template

Controller

1 {{#if showForm}} 2 <form> 3 ... 4 </form> 5 <button {{action 'toggleFormVisibility'}}>Nascondi il form</button> 6 {{else}} 7 <button {{action 'toggleFormVisibility'}}>Mostra il form</button> 8 {{/if}}

I controller “preparano” il modello e altri dati per l’uso nei template

Controller

1 {{#if showForm}} 2 <form> 3 ... 4 </form> 5 <button {{action 'toggleFormVisibility'}}>Nascondi il form</button> 6 {{else}} 7 <button {{action 'toggleFormVisibility'}}>Mostra il form</button> 8 {{/if}}

1 import Ember from 'ember'; 2 3 export default Ember.Controller.extend({ 4 showForm: false, 5 6 actions: { 7 toggleFormVisibility: function() { 8 this.set('showForm', !this.get('showForm')); 9 } 10 } 11 });

I controller “preparano” il modello e altri dati per l’uso nei template

ControllerGli observer possono rimanere in “ascolto” di

cambiamenti negli attributi

Controller

1 import Ember from 'ember'; 2 3 export default Ember.Controller.extend({ 4 showForm: false, 5 6 formVisibilityObserver: function() { 7 console.log('Il form è visibile'); 8 }.observes('showForm'), 9 10 modelNameObserver: function() { 11 console.log('Il nome del modello è cambiato'); 12 }.observes('model.name') 13 });

Gli observer possono rimanere in “ascolto” di cambiamenti negli attributi

Action bubbling 1 <button {{action "like" user}}>Like</button>

Le azioni risalgono fino a trovare l’implementazione nel controller o nella rotta, fino alla rotta globale

(ApplicationRoute), ad esempio:

1 import Ember from 'ember'; 2 3 export default Ember.Route.extend({ 4 actions: { 5 like: function(user) { 6 // Implementazione 7 } 8 } 9 });

Azioni: rotta o controller?Le azioni possono essere definite sia nella rotta che

nel controller. Qual’è il posto giusto?

La convenzione è che la rotta ospiti azioni che hanno un impatto diretto sul modello, mentre il controller

gestisca le azioni che hanno impatto sui template e sul flusso di controllo

Componenti

Componenti

• Formate da un file js di logica e gestione azioni e un template

Componenti


• Forniscono componenti riusabili nel codice con una propria logica funzionale anche complessa

Componenti



• Esistono anche gli helper che hanno un uso più banale (ad esempio formattare le date)

Componenti

Le componenti sostituiscono le viste delle vecchie versioni di Ember



• Esistono anche gli helper che hanno un uso più banale (ad esempio formattare le date)

Componenti 1 {{#timetracker-weekly-day-column dayOfCurrentMonday=dayOfCurrentMonday dayOfWeek=5}}

Componenti

1 import Ember from 'ember'; 2 import moment from 'moment'; 3 4 export default Ember.Component.extend({ 5 classNames: ['col-md-1', 'text-center'], 6 7 isToday: function() { 8 return moment().format('YYYY-MM-DD') === moment(this.get( 9 'dayOfCurrentMonday')).add(this.get('dayOfWeek'), 'days'). 10 format('YYYY-MM-DD'); 11 }.property('dayOfCurrentMonday', 'dayOfWeek') 12 });

1 {{#timetracker-weekly-day-column dayOfCurrentMonday=dayOfCurrentMonday dayOfWeek=5}}

Componenti

1 import Ember from 'ember'; 2 import moment from 'moment'; 3 4 export default Ember.Component.extend({ 5 classNames: ['col-md-1', 'text-center'], 6 7 isToday: function() { 8 return moment().format('YYYY-MM-DD') === moment(this.get( 9 'dayOfCurrentMonday')).add(this.get('dayOfWeek'), 'days'). 10 format('YYYY-MM-DD'); 11 }.property('dayOfCurrentMonday', 'dayOfWeek') 12 });

1 {{#if isToday}} 2 {{dayOfWeek}} è oggi! 3 {{/if}}

1 {{#timetracker-weekly-day-column dayOfCurrentMonday=dayOfCurrentMonday dayOfWeek=5}}

Componenti

1 import Ember from 'ember'; 2 import moment from 'moment'; 3 4 export default Ember.Component.extend({ 5 classNames: ['col-md-1', 'text-center'], 6 classNameBindings: ['isToday:col-highlight'], 7 //qualcosa 8 });

1 {{yield}}

1 {{#timetracker-weekly-day-column dayOfCurrentMonday=dayOfCurrentMonday dayOfWeek=5}} 2 //qualcosa 3 {{/timetracker-weekly-day-column}}

Le componenti prendono anche dei blocchi in input

Addon

emberaddons.com

ember install <addon>

Aggiungono funzionalità all’applicazione, ad esempio template grafici (bootstrap), autenticazione, librerie (moment.js, datepicker), paginazione, animazioni,

librerie personali, ecc.

http://www.emberaddons.com/

Risorse utili• guides.emberjs.com • discuss.emberjs.com • fromrailstoember.com • ember-cli.com • Ember.js su StackOverflow • emberwatch.com • Video da EmberConf 2015

http://guides.emberjs.com

http://discuss.emberjs.com

http://emberjs.com/community

http://ember-cli.com

http://stackoverflow.com/questions/tagged/ember.js

http://emberwatch.com

https://www.youtube.com/watch?v=o12-90Dm-Qs&list=PLE7tQUdRKcyacwiUPs0CjPYt6tJub4xXU

introduzione a ember.js

Internet