Eighteen months ago, Firebase joined Google. Since then, our backend-as-a-service (BaaS) that handles the heavy lifting of building an app has grown from a passionate community of 110,000 developers to over 450,000.
Our current features -- Realtime Database, User Authentication, and Hosting -- make app development easier, but there’s more we can do, so today, we’re announcing a major expansion!
Firebase is expanding to become a unified app platform for Android, iOS and mobile web development. We’re adding new tools to help you develop faster, improve app quality, acquire and engage users, and monetize apps. On top of this, we’re launching a brand new analytics product that ties everything together, all while staying true to the guiding principles we’ve had from the beginning:
Firebase Analytics is our brand new, free and unlimited analytics solution for mobile apps. It benefits from Google’s experience with Google Analytics, and features some new capabilities for apps:
Firebase Analytics is user and event-centric and gives you insight into what your users are doing in your app. You can also see how your paid advertising campaigns are performing with cross-network attribution, which tells you where your users are coming from. You can see all of this from a single dashboard.
Firebase Analytics is also integrated with other Firebase offerings to provide a single source of truth for in-app activity and through a feature called Audiences. Audiences let you define groups of users with common attributes. Once defined, these groups can be accessed from other Firebase features -- to illustrate, we’ll reference Audiences throughout this post.
To help you build better apps, our suite of backend services is expanding.
Google Cloud Messaging, the most popular cloud-to-device push messaging service in the world, is integrating with Firebase and changing its name to Firebase Cloud Messaging (FCM). Available for free and for unlimited usage, FCM supports messaging on iOS, Android, and the Web, and is heavily optimized for reliability and battery-efficiency. It’s built for scale and already sends 170 billion messages per day to two billion devices.
One of our most requested features is the ability to store images, videos, and other large files. We’re launching Firebase Storage so developers can easily and securely upload and download such files. Firebase Storage is powered by Google Cloud Storage, giving it massive scalability and allowing stored files to be easily accessed by Google Cloud projects. The Firebase Storage client SDKs have advanced logic to gracefully handle poor network conditions.
Firebase Remote Config gives you instantly-updatable variables that you can use to tune and customize your app on the fly to deliver the best experience to your users. You can enable or disable features or change the look and feel without having to publish a new version. You can also target configurations to specific Firebase Analytics Audiences so that each of your users has an experience that’s tailored for them.
In addition, we’re continuing to invest heavily in our existing backend products, Firebase Realtime Database, Firebase Hosting, and Firebase Authentication. Authentication has seen the biggest updates, with brand new SDKs, and an upgraded backend infrastructure. This provides added security, reliability, and scale using the same technologies that power Google’s own accounts. We’ve also added new Authentication features including email verification and account linking. For Hosting, custom domain support is now free for all developers, and the Database has a completely rebuilt UI. We’re working hard on other great Realtime Database features, stay tuned for those.
We’re adding two new offerings to Firebase to help you deliver higher quality apps.
When your app crashes, it’s bad for your users and it hurts your business. Firebase Crash Reporting gives you prioritized, actionable reports to help you diagnose and fix problems in your iOS or Android app after it has shipped. We’ve also connected Crash Reporting to Audiences in Firebase Analytics, so you can tell if users on a particular device, in a specific geography, or in any other custom segment are experiencing elevated crash rates.
Cloud Test Lab, announced last year at Google I/O, is now Firebase Test Lab for Android. Test Lab helps you find problems in your app before your users do. It allows for both automatic and customized testing of your app on real devices hosted in Google data centers.
After you’ve launched your app, we can help you grow and re-engage users with five powerful growth features.
Firebase Notifications is a new UI built on top of the Firebase Cloud Messaging APIs that lets you easily deliver notifications to your users without writing a line of code. Using the Notifications console you can re-engage users, run marketing campaigns, and target messages to Audiences in Firebase Analytics.
Firebase Dynamic Links make URLs more powerful in two ways. First, they provide “durability” -- links persist across the app install process so users are taken to the right place when they first open your app. This “warm welcome” increases engagement and retention. Second, they allow for dynamically changing the destination of a link based on run-time conditions, such as the type of browser or device. Use them in web, email, social media, and physical promotions to gain insight into your growth channels.
Firebase Invites turns your customers into advocates. Your users can easily share referral codes or their favorite content via SMS or email to their network, so you can increase your app's reach and retention.
Firebase App Indexing, formerly Google App Indexing, brings new and existing users to your app from the billions of Google searches. If your app is already installed, users can launch it directly from the search results. New users are presented with a link to install your app.
AdWords, Google’s advertising platform for user acquisition and engagement, is now integrated with Firebase. Firebase can track your AdWords app installs and report lifetime value to the Firebase Analytics dashboard. Firebase Audiences can be used in AdWords to re-engage specific groups of users. In-app events can be defined as conversions in AdWords, to automatically optimize your ads, including universal app campaigns.
To help you generate revenue from your app and build a sustainable business, we’ve integrated Firebase with AdMob, an advertising platform used by more than 1 million apps. We’ve made it easier to get started with AdMob when you integrate the Firebase SDK into your app. Using AdMob, you can choose from the latest ad formats, including native ads, which help provide a great user experience.
Along with new feature launches, we’re moving our website and documentation to a new home: firebase.google.com.
We’re also launching a brand new console to manage your app. It is completely redesigned and rebuilt for improved ease of use, and we’ve deeply integrated it with other Google offerings, like Google Cloud and Google Play.
Firebase now uses the same underlying account system as Google Cloud Platform, which means you can use Cloud products with your Firebase app. For example, a feature of Firebase Analytics is the ability to export your raw analytics data to BigQuery for advanced querying. We’ll continue to weave together Cloud and Firebase, giving you the functionality of a full public cloud as you grow.
You can also link your Firebase account to Google Play from our new console. This allows data, like in-app purchases, to flow to Firebase Analytics, and ANRs (application not responding) to flow to Firebase Crash Reporting, giving you one place to check the status of your app.
Finally, we’re announcing the beta launch of a new C++ SDK. You can find the documentation and getting started guides here.
We’re excited to announce that most of these new products, including Analytics, Crash Reporting, Remote Config, and Dynamic Links, are free for unlimited usage.
For our four paid products: Test Lab, Storage, Realtime Database, and Hosting, we’re announcing simpler pricing. We now offer:
Many things are changing, but Firebase’s core principles remain the same. We care deeply about providing a great developer experience through easy-to-use APIs, intuitive interfaces, comprehensive documentation, and tight integrations. We’re committed to cross-platform development for iOS, Android, and the Web, and when you run into trouble, we’ll provide support to help you succeed.
If you were using a Firebase feature before today -- like the Realtime Database, GCM, or App Indexing -- there’s no impact on your app. We’ll continue to support you, though we recommend upgrading to the latest SDK to access our new features.
As far as we’ve come, this is still early days. We’ll continue to refine and add to Firebase. For example, the JavaScript SDK does not yet support all the new features. We’re working quickly to close gaps, and we’d love to hear your feedback so we can improve. You can help by requesting a feature.
All the new features are ready-to-go, and already in use by apps like Shazam, SkyScanner, PicCollage, and more. Get started today by signing up, visiting our new site, or reading the documentation to learn more.
We can’t wait to hear what you think!
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.
