Vue.js - Firebase
Retour d'expérience
Qui suis-je ?
@thierrylemoulec
Bosse actuellement sur DeliPress une solution
d'Email Marketing pour WordPress
Entrepreneur et développeur frontend
Digital nomad pendant un temps
PARTIE 1 -
LA Genèse
Ou pourquoi après pas mal de "js fatigue" j'ai sauté le pas avec vue.js
Chiang Mai
Que fait un digital nomad à l'épicentre du mouvement ?
Un projet simple
LeanCanvas
PART 2 -
MES impressions
1. Un environnement de dév sur mesure
2. Outil de debug
3. Rapidité de prise en main du framework et des concepts
4. Premières difficultés rencontrées
5. Ajout d'un backend
Webpack - HCR - static server - Build
Vous faites seulement un `vue init nom-du-projet` et tout est fait pour vous. (Je ne sais toujours pas comment ça marche)
Un des meilleurs debuggers que j'ai utilisé
Un exemple de code
avant d'aller plus loin (promis c'est le seul)
<template>
<div class="zone">
<div class="zone-head">
<span class="zone-title">{{ zone.name }}</span>
<a class="zone-help" @click.prevent="addPostit" title="Tip: Double click to create a new postit">
<svg width="10" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"><path fill="#000" fill-rule="nonzero" d="M50 0h-20v30h-30v20h30v30h20v-30h30v-20h-30z"/></svg>
</a>
</div>
<div class="zone-body" @dblclick="addPostit">
<draggable class="draggable" :list="zone.postits" :options="{group:'zone', handle: '.move', onEnd: 'checkPostitsArray'}">
<postit v-for="postit in zone.postits" :key="postit.id" :postitObj="postit" @set-last-color="setLastUsedColor" @delete-postit="deletePostIt" @add-postit="addPostit"></postit>
</draggable>
</div>
</div>
</template>
<script>
import draggable from 'vuedraggable'
import Postit from 'components/Postit';
import md5 from 'md5';
export default {
name: 'zone',
components:{
'postit': Postit,
draggable
},
props: ['zone'],
data(){
return{
lastUsedColor: 'yellow'
}
},
methods: {
addPostit(event, force = false){
this.$nextTick(() => {
})
},
deletePostIt(postit){
},
setLastUsedColor(color){
this.lastUsedColor = color;
},
checkPostitsArray: function(){
if (!this.zone.hasOwnProperty('postits')) {
this.$set(this.zone, 'postits', []);
}
}
},
beforeMount() {
this.checkPostitsArray()
},
beforeUpdate() {
this.checkPostitsArray()
}
}
</script>
<style lang="scss" scoped>
.zone{
display: flex;
flex-direction: column;
user-select: none;
flex-grow: 1;
}
.zone-head{
display: flex;
padding: .5rem;
align-items: center;
background-color: rgba(0,0,0,.05);
span{
display: inline-block;
height: 20px;
vertical-align: middle;
font-weight: bold;
}
svg{
height: auto;
width: 14px;
}
}
.zone-body{
flex-grow: 1;
background-color: #FFF;
padding-bottom: 1rem;
display: flex;
flex-direction: column;
}
</style>
Un composant/view est toujours le reflet d'un état à un instant T
Concept de base des composants
Problème
Dès que l'application devient un peu plus complexe que un ou deux composants, il devient difficile de synchroniser l'état des composants entre eux.
Solution
Mise en place d'un backend
Firebase
Firebase vous propose Out of the box :
-
Une base de donnée temps réel
-
Authentication / Envoi d'email
-
Des fonctions à executer comme si vous aviez un backend.
(Très pratique pour valider des paiements stripe par exemple)
-
L'hébergement de votre code
Conclusion
Familiarisez-vous avec les concepts
Vuejs - firebase
By thierrylemoulec
Vuejs - firebase
- 31