Vue.js makes it incredibly easy to create dynamic web interfaces. Firebase makes it incredibly easy to create a persistent, realtime backend. Combining the two would give us possibly the easiest way to build a data-driven web application. Now with VueFire, an unofficial Firebase binding library for Vue.js, it only takes a few lines of code to reactively render your Firebase data in your app.
Vue.js is a JavaScript framework for building dynamic web interfaces. It offers reactive data binding and composable components in an extremely approachable core library, which can be dropped into any existing page and picked up in a matter of hours. On the other hand, the framework also provides more opinionated solutions for more ambitious use cases, such as client-side routing, state management and advanced build tools. It currently has over 15,000 stars on GitHub and is rapidly rising in popularity. You can visit vuejs.org for a more thorough introduction.
It is already pretty simple to manually update a Vue instance's data when a Firebase reference's value has changed, but the VueFire library makes it even easier. To get started, just include Vue, Firebase and VueFire in your page:
<head> <!-- Vue --> <script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script> <!-- Firebase --> <script src="https://cdn.firebase.com/js/client/2.4.2/firebase.js"></script> <!-- VueFire --> <script src="https://cdn.jsdelivr.net/vuefire/1.0.0/vuefire.min.js"></script> </head>
VueFire will automatically detect Vue's presence and install itself. If you are using a module bundler, you can also install the dependencies via NPM:
npm install vue firebase vuefire --save
var Vue = require("vue"); var VueFire = require("vuefire"); var Firebase = require("firebase"); // explicit installation is required in a module environment Vue.use(VueFire);
With proper installation, your Vue components can now accept a new option: firebase. You can use this option to declaratively bind Firebase references to properties on your Vue instance:
firebase
var itemsRef = new Firebase("https://vuefiredemo.firebaseio.com/items/"); var vm = new Vue({ el: "#app", firebase: { // can bind to either a direct Firebase reference or a query items: itemsRef.limitToLast(25) } });
And the HTML:
<body> <div id="app"> <ul> <li v-for="item in items"> {{ item.text }} <button @click="removeTodo(item['.key'])">X</button> </li> </ul> <form @submit.prevent="addTodo"> <input v-model="newTodo" /> <button>Add #{{ items.length }}</button> </form> </div> </body>
Now whenever the Firebase reference's value changes, the DOM will be updated accordingly. Isn't that easy?
Now all we need to do is allow the user to update the list of items. First let's create a form that enables adding items:
<body> <div id="app"> <form v-on:submit.prevent="addTodo"> <input v-model="newTodo"> <button>Add #{{ items.length }}</button> </form> </div> </body>
The <input> element is bound to a variable named newTodo, so we need to declare that in the component's data option. We use the v-on directive to listen to form submission. The .prevent is a modifier that tells Vue.js to automatically call preventDefault() on the event to prevent page reload. We also need to define the addTodo() method which will be called when the form is submitted:
<input>
newTodo
data
v-on
.prevent
preventDefault()
addTodo()
var vm = new Vue({ el: "#app", firebase: { items: itemsRef.limitToLast(25) }, // declare local state data: { newTodo: "" }, // define instance methods methods: { addTodo: function () { if (this.newTodo.trim()) { // update the Firebase reference! itemsRef.push({ text: this.newTodo }); // reset input box this.newTodo = ""; } } } });
Finally, we can add a button for each item that enables removal and this is the final code for our little demo. Note the @ bindings are shorthand for v-on:
@
<body> <div id="app"> <ul> <li v-for="item in items"> {{ item.text }} <button @click="removeTodo(item['.key'])">X</button> </li> </ul> <form @submit.prevent="addTodo"> <input v-model="newTodo"> <button>Add #{{ items.length }}</button> </form> </div> </body>
var itemsRef = new Firebase("https://vuefiredemo.firebaseio.com/items/"); new Vue({ el: "#app", data: { newTodo: "" }, firebase: { items: itemsRef.limitToLast(25) }, methods: { removeTodo: function (key) { itemsRef.child(key).remove(); }, addTodo: function () { if (this.newTodo.trim()) { itemsRef.push({ text: this.newTodo }); this.newTodo = ""; } } } });
You can find the source code for this demo and more detailed docs at the VueFire GitHub repo.
With around 30 lines of code, we now have a dynamic interface entirely driven by a remote data source, with updates propagated to multiple clients in realtime. The Vue.js + Firebase combination makes building these types of apps faster and easier than ever before.
The Vue.js team is also investigating Firebase integration with Vuex, Vue.js' official client-side state management solution. This would provide a scalable pattern for managing Firebase data in large scale single-page applications.
We believe Vue.js and Firebase are a perfect match for building modern web apps, and we are excited to see what you create!
The 1.2 release of AngularFire introduces dependency injection of Firebase references and a simplified authentication service.
$firebaseRefProvider
Do you find yourself writing new Firebase("") in your AngularFire code too often?
new Firebase("")
When it comes to Angular, new is a bad word. Using new in a controller makes it difficult to unit test, because it couples your object construction logic to your application logic. This makes it very difficult to unit test in isolation.
new
AngularFire 1.2 introduces the $firebaseRefProvider, which allows you to register a reference in the configuration phase of your Angular app.
app.config(function($firebaseRefProvider) { $firebaseRefProvider.registerUrl('https://<my-app>.firebaseio.com'); });
After you’ve registered the URL, you can inject them into your controllers, services, factories, or wherever you need them.
function MyCtrl($firebaseArray, $firebaseRef) { this.messages = $firebaseArray($firebaseRef.default); }
You can also register multiple URLs by using a config object:
app.constant('FirebaseUrl', 'https://<my-app>.firebaseio.com/'); app.config(function(FirebaseUrl, $firebaseRefProvider) { $firebaseRefProvider.registerUrl({ default: FirebaseUrl, // 'https://<my-app>.firebaseio.com/' messages: FirebaseUrl + 'messages' // 'https://<my-app>.firebaseio.com/messages' }); });
The only requirement when specifying multiple urls is that you provide a default property that by convention points to the root url.
default
Whenever you register a Firebase URL with $firebaseRefProvider, AngularFire will be able construct a $firebaseAuth service on your behalf using the $firebaseAuthService service (I know, it’s a service-service).
$firebaseAuth
$firebaseAuthService
$firebaseRefProvider.registerUrl('https://<my-firebase-app>.firebaseio.com'); $routeProvider.when('/', { controller: 'MyCtrl as ctrl', templateUrl: 'views/my-ctrl.html', resolve: { user: function($firebaseAuthService) { return $firebaseAuthService.$waitForAuth(); } } });
This service makes it even easier to use authentication features in the router, because there’s no need to create your own $firebaseAuth service.
Even though we’re also hard at work on AngularFire 2, we’re still giving AngularFire 1 the attention it needs. Give the 1.2 version a spin and let us know what you think.
bower install angularfire --save # or for you CommonJS fans npm install angularfire --save
Do you love Slack? We do too. We’re happy to introduce the new Firebase Slack community to discuss all things Firebase!
Slack has been a great tool for community members to help one another. The Angular and iOS Slack communities have grown to over 4,000 strong each, and we hope we can do the same.
When you want to learn a foreign language, the best way is to surround yourself with those who speak it.
The Firebase Slack community is a place to learn from other Firebase developers. Such as Firebase GDEs (Google Developer Experts), active Github contributors to libraries like AngularFire, and even Firebase team members (I’ll be there!).
The Slack community is a place to discuss app ideas, data structure questions, feature requests, guidance on problems, and feedback about Firebase in general. Oh, and we love GIFs too.
Our goal is to gather a diverse group to represent the community. In doing so, we expect community members to treat each other kindly and respectfully. We have a complete Code of Conduct that can be viewed here.
To join, click here to go to the inviter website. Once you input your email, you’ll get a confirmation to join in your inbox. (Make sure to check for spam if you don’t see it).
We hope to see you there soon.
Get ready for a whole new series of screencasts. Today we're excited to announce the launch of our new YouTube series, Firecasts!
Firecasts is a hands on YouTube series for Firebase developers. Tune in each week and learn how to build realtime apps on Android, iOS, and the Web.
While the first episode is on Android, Firecasts is platform agnostic. We have episodes queued for iOS and the Web as well. Tune in each week for a new screencast. And, if you want to see something specifically covered...
Your input matters. If you want to see a topic covered, tweet at us using the #AskFirebase hashtag. We'll be answering those questions in future videos.
At Firebase, we believe the best way to learn is by doing. We're excited to hear what you want to learn.
You've likely already heard that Parse will be shutting down. It brings us no joy in seeing them close their doors. While Parse was a competitor, they were also a part of the developer tools community and ecosystem. We were both working towards a common goal: empowering developers to create great apps.
I’m writing this post to reassure current and future Firebase developers that we are working full steam ahead on realizing that goal.
Firebase joined Google fifteen months ago, and the experience has been fantastic. We’ve had a chance to work closely with many products inside Google Cloud and across the company with teams like Play. We're in the process of moving our account system to Google accounts so we can deeply integrate with Google's family of developer products.
Also, we’ve been busy:
These are just a few examples.
For those of you who have asked about migration from Parse Core to the Firebase Realtime Database: there isn’t currently an easy migration path. The data models and APIs are quite different. We recommend moving to Google Cloud by running Parse’s server on App Engine. To do so, follow this guide.
Though we’re sad to see Parse shut down, it does not change our roadmap. Firebase and Google are committed to radically changing how app development is done, and we’re working hard towards that goal.
We have big plans for the future.
