Applicazioni Web ultra-performanti con Vue.js e Delphi
2 likes542 views
Vue.js è un framework per creare interfacce utente estremamente performanti e che può essere introdotto progressivamente nelle vostre applicazioni Web, nel modo meno invasivo possibile. In questo talk scoprirete come utilizzarlo con Delphi creando una soluzione frontend e backend ad elevate prestazioni.
![DEMO
<div id="app">
<ol>
<li v-for="todo in todoList">
{{ todo.text }}
</li>
</ol>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
todoList: [
{ text: "Imparare Vue" },
{ text: "Integrarlo con Delphi" },
{ text: "Costruire applicazioni spaziali!" }
]
}
});
</script>
Loops](https://image.slidesharecdn.com/slides-170530215159/85/Applicazioni-Web-ultra-performanti-con-Vue-js-e-Delphi-22-320.jpg)
![Componenti
Vue.component('todo-item', {
props: ['task'],
template: '<li>{{ task.text }}</li>'
})
Aggiungiamo proprietà per renderlo "configurabile"…](https://image.slidesharecdn.com/slides-170530215159/85/Applicazioni-Web-ultra-performanti-con-Vue-js-e-Delphi-32-320.jpg)
Ad
More Related Content
What's hot (20)
Similar to Applicazioni Web ultra-performanti con Vue.js e Delphi (20)
Ad
More from Marco Breveglieri (7)
Ad
Applicazioni Web ultra-performanti con Vue.js e Delphi
- 1. Applicazioni Web ultra-performanti con Vue.js e Delphi Marco Breveglieri
- 2. Chi sono Marco Breveglieri Software & Web Developer @ABLS Team Blogger (www.compilaquindiva.com) Host @Delphi Podcast (www.delphipodcast.com) and sushi eater! 🍣
- 4. Che cos'è Vue.js? Vue.js è un progressive framework per la costruzione di interfacce utente
- 5. Che cos'è Vue.js? Comparazione con altri celebri framework JavaScript • Meglio chiamarla libreria, non framework • Ha le prestazioni di React • Usa convenzioni già viste in AngularJS (e altre librerie MVVM)
- 6. Cos'è Vue.js? Incremental adoption • Può essere gradualmente integrato in un'applicazione Web esistente • Curva di apprendimento morbida
- 7. Cos'è Vue.js? Focalizzato sulla «View» La libreria si concentra sulla gestione delle "viste" per generare e aggiornare la UI.
- 8. Cos'è Vue.js? Perfetto anche per SPA sofisticate • Supporta i moderni tool di sviluppo JavaScript • Node, WebPack, Browserify, ES2016, … • Approccio component-based • Disponibile vue-cli • Numerosi componenti ed estensioni di terze parti
- 10. Perché Vue.js? Accessibile Ti basta conoscere HTML, CSS e JavaScript.
- 11. Perché Vue.js? Versatile Può essere usato in progetti sia piccoli che di grandi dimensioni.
- 12. Perché Vue.js? Performante Estremamente veloce grazie al proprio Virtual DOM.
- 13. Perché Vue.js? Compatto Il runtime è molto piccolo: solo ~19Kb.
- 14. Primi passi
- 15. Primi passi <script src="https://unpkg.com/vue"></script> Importare lo script di Vue nella pagina:
- 16. Primi passi <div id="app"> <p>{{ message }}</p> </div> Creare il markup dell'applicazione:
- 17. Primi passi <script> var app = new Vue({ el: "#app", data: { message: "Hello Vue!" } }); </script> Costruire un'istanza dell'oggetto Vue:
- 18. DEMO
- 19. DEMO <div id="app"> <p>{{ message }}</p> </div> <script> var app = new Vue({ el: "#app", data: { message: "Hello Vue!" } }); </script> Declarative Rendering
- 20. DEMO <div id="app"> <p v-bind:title="message"> Sposta qui il mouse per vedere il messaggio. </p> </div> <script> var app = new Vue({ el: "#app", data: { message: "Hello Vue!" } }); </script> Attribute Binding
- 21. DEMO <div id="app"> <p v-if="visible">Ora mi vedi!</p> </div> <script> var app = new Vue({ el: "#app", data: { visible: true } }); </script> Conditionals
- 22. DEMO <div id="app"> <ol> <li v-for="todo in todoList"> {{ todo.text }} </li> </ol> </div> <script> var app = new Vue({ el: "#app", data: { todoList: [ { text: "Imparare Vue" }, { text: "Integrarlo con Delphi" }, { text: "Costruire applicazioni spaziali!" } ] } }); </script> Loops
- 23. DEMO <div id="app"> <p>{{ message }}</p> <button v-on:click="reverseMessage">Reverse</button> </div> <script> var app = new Vue({ el: "#app", data: { message: "REDRUM" }, methods: { reverseMessage: function () { this.message = this.message.split("").reverse().join(""); } } }); </script> Events
- 24. DEMO <div id="app"> <p>{{ message }}</p> <input v-model="message"/> </div> <script> var app = new Vue({ el: "#app", data: { message: "REDRUM" } }); </script> Two-Way Binding
- 25. DEMO <div id="app"> <p>{{ message | reverse | toUpper }}</p> <input v-model="message"/> </div> <script> var app = new Vue({ el: "#app", data: { message: "redrum" }, filters: { reverse: function (value) { return value.split("").reverse().join(""); }, toUpper: function (value) { return value.toUpperCase(); }, } }); </script> Filters
- 26. DEMO <div id="app"> <p>{{ reversedMessage }}</p> <input v-model="message"/> </div> <script> var app = new Vue({ el: "#app", data: { message: "REDRUM" }, computed: { reversedMessage: function () { return this.message.split("").reverse().join(""); } } }); </script> Computed Properties
- 27. Componenti!
- 28. Componenti Ogni interfaccia utente può essere scomposta in componenti, ossia parti • più piccole • incapsulate • indipendenti • riutilizzabili
- 30. Componenti Vue.component('todo-item', { template: '<li>Cosa da fare</li>' }) Creare un componente è molto semplice…
- 32. Componenti Vue.component('todo-item', { props: ['task'], template: '<li>{{ task.text }}</li>' }) Aggiungiamo proprietà per renderlo "configurabile"…
- 33. Componenti <ul> <todo-item v-bind:task="{ text: 'Task 1' }"></todo-item> <todo-item v-bind:task="{ text: 'Task 2' }"></todo-item> <todo-item v-bind:task="{ text: 'Task 3' }"></todo-item> </ul> …e successivamente valorizziamo la proprietà.
- 34. DEMO
- 35. Componenti Ricordate lo schema iniziale?
- 37. Dietro le quinte
- 38. Dietro le quinte var data = { a: 1 }; var vm = new Vue({ el: '#example', data: data }); vm.$data === data; // -> true vm.$el === document.getElementById('example') ; // -> true // $watch is an instance method vm.$watch('a', function (newVal, oldVal) { // this callback will be called when `vm.a` changes }); Le istanze Vue sono dotate di estensioni.
- 39. Dietro le quinte Gestione degli eventi del ciclo di vita • created • mounted • updated • destroyed
- 41. Thanks! 🙏