Vue.js
The progressive framework
DevDay Napoli
Proudly presents:
Vue.js
The progressive framework
DevDay Napoli
Proudly presents:
Halloween
Edition!
Michele Nasti
Come mi sono sentito mentre imparavo le ALTRE librerie frontend
In principio...
Next step:
Less
More
React+
Vue+
Angular
Ember
Meteor
Templating
Engines
Backbone
With
supporting
libraries
React
Vue
The Framework Spectrum
Vue.js
La popolarità: aprile 2015
Sempre Aprile 2015
Concetti chiave
Declarative & Reactive
Rendering
DOM
State
???
DOM
Problemi del DOM:�
Declarative & Reactive Rendering
View
User Input
State
Render
La View è un mapping dichiarativo dello stato
Lo Stato è l’unica fonte di Verità
var vm = new Vue({� el: '#demo',� data: {� msg: 'Hello Vue.js!'� }�})
<div id="demo">� <h1>{{msg}}</h1>�</div>
JavaScript
HTML
ES5 Snippet
var vm = new Vue({� el: '#demo',� data: {� msg: 'Hello Vue.js!'� }�})
<div id="demo">� <h1>{{msg}}</h1>�</div>
JavaScript
Dynamic Bindings
Vue instance
State
DOM Mounting point
Template
ES5 Demo
Parte 2:
Component Oriented
In principio...
Era tutto bello, tranne che per un dettaglio:
Scalabilità
“Classica” divisione dei file:
HTML
CSS
JS
...Ma le pagine di solito sono così:
Nav
Content
Item
Sidebar
Side
Item
Possiamo immaginare ogni blocco come un componente:
Nav
Content
Item
Sidebar
Vue solution:
HTML
CSS
JS
Vue solution:
HTML
CSS
JS
COMPONENTS!
Vue-cli
Perchè ?
Vue-cli (2)
$ npm i -g vue-cli
$ vue init webpack-simple hello-world
(14 sec)
$ cd hello-world
$ npm install (161 sec)
$ npm run dev
Lanciatemi i componenti! (demo 2)
Ultime considerazioni
Vantaggi delle librerie extra:
Ultime considerazioni (2)
Vantaggi:
Svantaggi:
Michele Nasti
vaz.app
Grazie!