An introduction to vuejs

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”