IMPORTANT: Per accedir als fitxer de subversion: http://acacha.org/svn (sense password). Poc a poc s'aniran migrant els enllaços. Encara però funciona el subversion de la farga però no se sap fins quan... (usuari: prova i la paraula de pas 123456)

El lema és:

Reactive Components for Modern Web Interfaces

Amb el que ja deixa clar 3 dels conceptes importants:

Introducció

http://blog.evanyou.me/2015/10/25/vuejs-re-introduction/

IMPORTANT: Vue.js és una llibreria per a crear/construir web interfaces/Interficies web utilitzant reactive components

Vue no és pròpiament un framework Javascript (tot i que conjuntament amb altres eines pot ser un framework). Realment és més com una sèrie d'eines opcionals que juntes treballen realment bé.

Característiques (http://vuejs.org/)

  • Simple: Write some HTML, grab some JSON (vue-resource), create a Vue instance, that's it.
  • Reactive: Expressions & computed properties with transparent dependency tracking.
  • Components: Compose your application with decoupled, reusable components.
  • Compact: ~24kb min+gzip, no dependency.
  • Fast: Precise and efficient async batch DOM updates.
  • Package Ready: Install via NPM or Bower - leverage your favorite eco system!

I per que no Angular, Ember o React?

You should try it out if you like:

  • Extendable Data bindings
  • Plain JS object models
  • API that simply makes sense
  • Build UI by composing components
  • Mix & matching small libraries

Instal·lació

Teniu diverses possibilitats.

Simple javascript include

El podeu trobar a:

http://vuejs.org/guide/installation.html

Es recomanable utilitzar CDNs com:

http://cdn.jsdelivr.net/vue/1.0.10/vue.min.js
http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.10/vue.min.js

IMPORTANT: La versió development conté warnings molt interessant al desenvolupar però en explotació es recomanable posar la versió minificada i sense els comentaris

també està disponible a npm i a bower

NPM

NPM: es la instal·lació recomanada amb large scale apps. Es relaciona molt bé amb sistemes CommonJS i module bundlers com Webpack o Browserify (vegeu eines com vueify i vue-loader).

# latest stable
$ npm install vue
# latest stable + CSP-compliant
$ npm install [email protected]
# dev build (directly from GitHub):
$ npm install vuejs/vue#dev

Bower:

# latest stable
$ bower install vue

Tingueu en compte la possibilitat d'utilitzar eines com laravel Elixir i/o Browserify per treballar amb vue (ho recomano)

Resources

Reactive

Keeping the state and the view in sync is hard. Or is it?

Esquema:

image


Reactive o Reactivity i que significa?

Expressions & computed properties with transparent dependency tracking. 

Vegem-ho amb el típic Hello World vue:

Ummm és només un altre sistema de plantilles? De fet similar a Blade de Laravel utilitzant Moustaches...

Però oco que la cosa va més enllà! Per què cal fer per que la vista s'actualitzi si canviem l'objecte (l'estat) ?

No res!

Vue ha convertit l'objecte i la fet reactiu, és a dir que si es modifica el seu estat (a l'exemple si modifiquem message ) és modifica automàticament la vista. Com ho podeu comprovar? Doncs modificant l'estat per la consola javascript:

https://jsbin.com/zixuhu/4/edit?html,js,console,output

Escriviu a l'apartat consola:

object.message = "HEY you!"

Exemple computed properties:

Les computed properties poden definir dependencies entre variables/estat de forma que si una variable (un estat) de la qual depen un altre variable (un altre estat) es modificat l'estat de totes dues es modifica:

https://jsbin.com/rutabo/6/edit?html,js,console,output

La propietat computada té una dependència i aquesta dependència és automàticament gestionada per vue sense necessitat de definir la dependència entre les variables!

Resources:

Data binding

A l'apartat anterior fem ús de la consola per modificar l'estat. Anem a a veure un exemple de Two-way data binding

https://jsbin.com/racezo/3/edit?html,js,output

Esquema:

En aquest exemple lliguem un item de formulari amb un missatge dins d'un paràgraf. Podeu trobar més exemples a Laracasts:

https://laracasts.com/series/learning-vue-step-by-step/episodes/1

Resources:

Components

El sistema de components després del reactive data binding és segurament el concepte més important de Vue. Els components són una abstracció que permet crear aplicacions web de gran escala ja que permet que una aplicació estigui formada de petits components reutilitzables i autocontinguts. Vegeu:

 Esquema

NOTA: Personalment comentar que els components poder ser útils també en aplicacions a petita escala. De fet per exemple per tal de poder reutilitzar un tros de codi vue en una mateixa pàgina és necessari tenir components

Un exemple de component tree:

<div id="app">
  <app-nav></app-nav>
  <app-view>
    <app-sidebar></app-sidebar>
    <app-content></app-content>
  </app-view>
</div>

És a dir qualsevol aplicació per complexa que sigui es pot representar com un conjunt de components en forma d'arbre.

NOTA: Fixeu-vos la relació entre components Vue els Web components de HTML5. Hi ha similaritats però tingueu en compte que els web components no són encara àmpliament suportats pels navegadors

http://caniuse.com/#search=web%20components

Cal tenir en compte a més les interessants "features" dels components Vue:

  • Cross-component data flow: Utilitzant props
  • Custom event communication
  • Dynamic component
  • Switching with transition effects

Resources:

Modularity. Large Scale apps

Funcionament asíncron de Vue. nextTick

Exemple

var apiURLVue = $("#tree_table").attr('data-url-vue');

var vm = new Vue({
    el: '#tree_table_box',

    data: {
        loading: true,
        rows: []
    },
    created: function () {
        this.fetchData()
    },
    methods: {
        fetchData: function () {
            var xhr = new XMLHttpRequest();
            var self = this;
            xhr.open('GET', apiURLVue);
            xhr.onload = function () {
                self.loading = false;
                self.rows = JSON.parse(xhr.responseText);
                self.$nextTick(function () {
                    $("#tree_table").treetable({expandable: true});
                });
            };
            xhr.send()
        }
    }
});
nextTick de Vue

Exemples

Vue i socket.io chat

Comparació amb altres frameworks

Angular

  • Vue és més simple que Angular i per tant amb una corba d'aprenentatge més ràpida.
  • Vue.js és més flexible i és una solució menys esbiaixada (less opinionated or unopinionated). Permet estructurat la vostra aplicació de moltes formes diferents en comptes d'haver de fer-ho tot en Angular way
  • Vue només és una capa d'interfície i per tant es pot utilitzar en qualsevol pàgina web sense necessàriament haver d'implementar un full SPA (Single Application Page). Per tant és una eina que es pot barrejar fàcilment amb altres eines com Jquery. Això si evidentment la flexibilitat implica que s'han de pendre més decisions sobre l'arquitectura de la vostra aplicació. Per exemple vue de sèrie no porta cap suport per a routing (tot i que es pot utilitzar component opcional vue-routing) o per Ajax (es pot utilitzar Jquery Ajax o vue-resource). Aquesta és possiblement la diferència més important entre Vue i Angular.
  • Angular utilitza two-way binding entre scopes. Vue també suporta two-way bindings però s'ha de fer de forma explícita no implicita. Implicitament només és fa parent-to-child one-way binding data flow entre components. Millor rendiment en apps grans?
  • Vue.js té una separació més clara entre components i directives. El objectiu de les directives a Vue és encapsular només manipulacions del DOM i els Components són mòduls autocontinguts de funcionalitat (programació modular o per components). Els components tenen la seva pròpia lògica/comportament i vista/vistes pròpies. A angular hi ha un munt de confusió entre directives i components
  • Vue.js té millor rendiment i és més fàcil d'optimitzar perquè no utilitza dirty checking. Angular es fa lent quan hi ha molts watchers pq cada vegada que algo a l'scope canvia tots els watchers ha de tornar a ser reavaluats. Vue.js doesn’t suffer from this at all because it uses a transparent dependency-tracking observing system with async queueing - all changes trigger independently unless they have explicit dependency relationships. The only optimization hint you’ll ever need is the track-by param on v-for lists.

NOTA: La comparació és respecte Angular 1. Curiosament és interessant veure com Vue i Angular 2 solucionen de forma similar els problemes d'Angular 1

Resources:

Tutorials

https://auth0.com/blog/2015/11/13/build-an-app-with-vuejs/

Vue directives

Vue directives

Exemple. Directiva per formularis enviar petició per Ajax

Recursos:

Workflow

Laravel

Vegeu Vueify i laravel Elixir

Browserify

Vegeu Vueify i laravel Elixir

Webpack

Vegeu Vue.js i webpack

Controllers

Vue no té controladors a l'estil d'Angular però podem fer amb Browserify/webpack un require:

//Browserify/webpack
var posts= require('./postsMethods.js');
//Assuming there is a send method on the posts you can do :
posts.send(data);
//ES6
import {send} from "postMethods"
send(data);

Resources

Traits/Mixins

Amb PHP tenim els Traits. Amb vue podem utilitzar els mixins ([1]) de forma similar:

// PostMethods.js
var PostMethods = {
    send: function()
    {
        console.log('string');
    }
}
module.exports = PostMethods;
and then

var PostMethods = require('./PostMethods.js');

var MyVueComponent = {
    mixins: [PostMethods],
    methods: {
        doSomething: function(){
            this.send();
        }
    }
}

module.exports = MyVueComponent;
or do it like this if you want:

var MyVueComponent = {
    mixins: [require('./PostMethods.js')],
    methods: {
        doSomething: function(){
            this.send();
        }
    }
}

module.exports = MyVueComponent;

Vue.js Ecosystem

https://github.com/vuejs

Vue-cli

Vegeu Vue-cli

Vue-resource

Vegeu Vue-resource

Vue-router

Vegeu vue-router

Vue-validator

Vegeu vue-validator

Vue.js examples

http://vuejsexamples.com/
https://github.com/vuejs/awesome-vue

Vue Navigation Guards

Serveix per mirar si no es troba una pàgina mostre una indicant que la pàgina no existeix, són com unes guardies (es com els Middlewares de Laravel), que et poden bloquejar, o reenviar a una altra pàgina.

Vegeu també

Enllaços externs