Firebase Realtime Database + Vue + ORM = 🔥
🗃️ Firebase ORM
Object Relation Management for Firebase Realtime Database.
♻️ One codebase
Generate Frontend API and Backend API from one codebase.
⚡ Faster development
Significantly reduced development time of complex realtime applications.
heliosRX is a front-end Object-Relational Mapping layer for reactive real-time web applications using Firebase Realtime Database.
# 1. Define a Schema
const taskModelDefinition = {
schema: {
fields: {
title: { type: 'String', required: true },
createdAt: { type: 'ServerTimestamp' },
isDone: { type: 'Boolean' },
}
}
};
export const task = new GenericStore( '/user/{userId}/task/*', taskModelDefinition );
# 2. Use auto-generated API
<template>
<!-- Example: Simple To-Do App -->
<ul>
<li v-for="task in tasks.items" :key="task.$key">
<input type="checkbox" @input="onCheckTask( task )">
{{task.title}}
<a href="#" @click.prevent="onDeleteTask( task )">del</a>
</li>
<input v-model="title" />
<button @click="onAddTask">add</button>
</ul>
</template>
<script>
export default {
data() {
return {
title: ""
}
},
computed: {
tasks() {
return this.$models.task.subscribeList();
}
},
methods: {
onCheckTask( task ) {
task = task.clone()
task.isDone = !task.isDone;
task.write();
// or: this.$models.task.update( task.$id, { isDone: !task.isDone } )
},
onAddTask() {
this.$models.task.add({
title: this.title
});
},
onDeleteTask( task ) {
task.remove();
// or: this.$models.task.remove( task.$id );
}
}
}
</script>
# 3. Generate Security Rules automatically
> helios rules
type Task {
title: String
createdAt: ServerTimestamp | Null
isDone: Boolean | Null
}
...