This document provides an overview of the Vue.js web framework. It discusses key features of Vue like reactivity, components, small size, excellent tooling, and wide ecosystem. It also covers related topics like Vue routing, state management with Vuex, server-side rendering, progressive web apps, and differences between Vue 2 and 3. The document serves as a reference for Vue's capabilities and comparing it to other frameworks.

1. 1 / 24
Web Frameworks:
The VueJs Case
Software Developers’ Thursday 3 Jun 2021

2. 2 / 24
The pronunciation
/vjuː/

3. 3 / 24
The Best Web Framework
WebSocket
DOM
Service Workers
Web Workers
SSE

4. 4 / 24
Why Choosing A Framework
It simplify “boring” (important) choices:
●
Architecture
●
Design Patterns
●
Infrastructure implementation
●
Deployment format
●
Security
●
...

5. 5 / 24
So, Why Vue?
●
Reactivity
●
Components
●
Small
●
Excellent tooling
●
Wide ecosystem

6. 6 / 24
Reactivity

7. 7 / 24
Reactivity the Cool Part
<template>
<div>
<div class="col">
<input type="number" v-model="counter" />
</div>
<div class="col">
{{ counter }}
</div>
</div>
</template>
<script>
export default {
name: 'my-counter',
data() {
return { counter: 0 }
}
}
</script>

8. 8 / 24
Reactivity the Cool Part / 2
<template>
...
<input type="number"
v-bind:value="counter"
v-on:input="counter = $event" />
...
</template>

9. 9 / 24
Limitation in Reactivity
An attribute must exists to be watched!
Vue cannot detect the adding o deleting of an
attribute of an object.
You cannot combine reactive objects with non-
reactive objects!

10. 10 / 24
Vue Component
export default {
el: ‘#mount-element’,
template: ‘<div>Template as string</div>’,
name: 'component-id',
props: [],
mixins: [],
data() { /* return an object */ },
methods: { /* functions */ },
watch: { /* watched parameters */ },
computed: { /* sort of “magic” getters */ },
render(createElement) {
// function that return the VNode
}
}

11. 11 / 24
Mixins
The way to share reusable functions in Vue
●
You can share normal
functions
●
You can easily share
functions between different
projecs not just components
●
Total separation between
components
●
Is a custom composition
●
Can be weird to use
●
You cannot use “this”

12. 12 / 24
Vue Component Lifecycle
export default {
beforeCreate() {},
created() {},
beforeMount() {},
mounted() {},
beforeUpdate() {},
updated() {},
activated() {},
deactivated() {},
beforeDestroy() {},
destroyed() {},
errorCaptured() {},
}

13. 13 / 24
Vue Component Lifecycle
export default {
beforeCreate() {},
created() {},
beforeMount() {},
mounted() {},
beforeUpdate() {},
updated() {},
activated() {},
deactivated() {},
beforeDestroy() {},
destroyed() {},
errorCaptured() {},
}

14. 14 / 24
Tooling
●
Vue Cli
●
Powered by Webpack
●
Development server with hot reload
●
Development IDE plugins
●
Project build
●
Unit testing
●
Debugging
●
Documentation
●
...more

15. 15 / 24
Vue Router
import Vue from “vue”
import VueRouter from “vue-router”
// ...import components…
const router = new VueRouter({
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
})
const app = new Vue({
router,
}).$mount('#app')

16. 16 / 24
Vuex
●
When you need to
share a state between
multiple components
●
To separate APIs from
the App components
●
For complex
applications
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
}
})
MobX, XState, Redux as alternatives

17. 17 / 24
SPA
●
Your app is just plain HTML, CSS and JavaScript
●
You can use a simple web server to publish it
●
The app and the back-end can be independent
●
The back-end will just serve the data and be
much simple and with less load
●
Good user experience and interactivity
●
You can parallelize development of FE and BE

18. 18 / 24
SPA
●
It can be slow in rendering some times
●
No great SEO
●
If your app is big with many pages it can be very
heavy in clients memory
●
You have to build the app before deployment
●
Debugging deployed app can be complex

19. 19 / 24
Some Solution For SPA
To address slow rendering and SEO we can
implement the following features:
●
Pages Entry Points
●
Prerendering
●
Server-Side Rendering

20. 20 / 24
Progressing Web Applications
Vue offer a vue cli template and scaffolding to
create PWA apps

21. 21 / 24
Vue Just For Components

22. 22 / 24
Vue 3 Why
●
Performance enhancements
– Small size for core
– Rewrite of DOM API to increase performance
●
Composable API
– setup()
– “hooks”
●
New features
– Fragments
– Suspense
– Teleport

23. 23 / 24
Vue 3: Should I Use It?
●
Still use Vue 2 for production
●
Not many libs are available for Vue 3
●
You can experiment or use for small projects
●
Check your dependencies before upgrade your
app from version 2

24. 24 / 24
References
●
Vue https://vuejs.org/
●
Vue Devtools https://github.com/vuejs/vue-devtools
●
GitHub https://github.com/vuejs/vue
●
Vue 3 https://v3.vuejs.org/
●
Vue Cli https://cli.vuejs.org/
●
Vue Router https://router.vuejs.org/
●
Vuex https://vuex.vuejs.org/
●
SSR https://ssr.vuejs.org/
●
Article: “Create your Vue.Js component and use it everywhere”