Vuejs

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

2 / 24
The pronunciation
/vjuː/

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

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

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

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

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 / 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 / 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 / 24
Vue Component Lifecycle
export default {
beforeCreate() {},
created() {},
beforeMount() {},
mounted() {},
beforeUpdate() {},
updated() {},
activated() {},
deactivated() {},
beforeDestroy() {},
destroyed() {},
errorCaptured() {},
}

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

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

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 / 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 / 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 / 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 / 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 / 24
Progressing Web Applications
Vue offer a vue cli template and scaffolding to
create PWA apps

21 / 24
Vue Just For Components

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 / 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
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”

Vuejs

Recommended

More Related Content

What's hot (20)

Similar to Vuejs (20)

More from Mario Alexandro Santini (9)

Recently uploaded (20)

Vuejs