When I think back 10 years or so when I was writing code for a monolithic codebase written in C++, one of the worst memories I have of the time was waiting for a build to complete just to run a couple lines of new code. The pain was so common among engineers that it bore the creation of one of the all-time most popular XKCD comics:
My office at the time didn't have swords to play with, so waiting for a build to complete was really boring.
The pain is similar if I had to deploy my Cloud Functions code every time I want test a function. Fortunately, the Firebase CLI now has a local emulator that works for both HTTPS and other types of functions. This lets me run the functions on my development machine by emulating the events that would trigger it. You can read more about that in the documentation.
One of the emulator's handy features is the fact that it will reload any JavaScript files that change over time. So, if you modify the code of a function, you can test it right away in the emulator without having to restart it:
It's fast and easy, and keeps you "in the zone".
However, things become less easy when you switch from JavaScript to TypeScript. Running TypeScript on Cloud Functions requires a compilation phase to convert the TypeScript into JavaScript so that it can be executed by the emulator. It adds a bit of a hassle:
npm run build
There's an easier way to do this that doesn't involve running a command every time. The TypeScript compiler (tsc) has a special "watch mode" that lets it pick up changes to your TypeScript and automatically compile them. You can run it from the command line by changing to your functions folder and running this command:
tsc
./node_modules/.bin/tsc --watch
With this running alongside the local emulator, which automatically picks up changes to the compiled JavaScript, your development workflow goes back to this:
And, if you're using VSCode, you can even have it directly run tsc in watch mode. You can start it up with Tasks -> Run Build Task..., then choosing "tsc: watch".
It will fire up a command shell right in the IDE, run tsc --watch, and show you the output. You'll see messages like this, along with any compilation errors, any time a TypeScript file changes:
tsc --watch
2:38:38 PM - File change detected. Starting incremental compilation... 2:38:38 PM - Compilation complete. Watching for file changes.
Now, bear in mind that tsc in watch mode won't run TSLint against your code, so be sure to set that up in VSCode so you can always see its recommendations, as I showed in a prior blog post. If you're not linting your code, seriously consider setting that up, because you'll catch potential mistakes that could be costly in production.
Are you looking for something new to learn this year? Then let me suggest TypeScript for development with Cloud Functions!
Not long ago, the Cloud Functions for Firebase team released an update to the Firebase CLI that makes it easy for you to write your functions in TypeScript, rather than JavaScript. The Firebase team encourages you to consider switching to TypeScript, but I can imagine you might be reluctant to learn a new language, especially if you're already comfortable with JavaScript. The great news is that TypeScript offers you a bunch of benefits that are easy to start using today.
The language itself offers a bunch of features that make your code easier to read and write, and less error-prone:
There's also async/await from ECMAScript 2017, which helps you write asynchronous code more easily. The primary challenge with asynchronous code is management of promises, which is crucial to get right when writing Cloud Functions, but difficult to master. TypeScript makes that much easier.
But what I really want to dive into here is an excellent tool called TSLint that can check your TypeScript code for potential problems before you deploy to Cloud Functions. The Firebase CLI will prompt you to configure TSLint when you initialize Functions in a project using TypeScript, and we strongly recommend that you opt into it.
When you opt into TypeScript and TSLint in your Firebase project structure, the Firebase CLI will add and modify some project files when you run firebase init. First let's take a look at functions/package.json. In there, you'll see the following key:
firebase init
functions/package.json
"devDependencies": { "tslint": "^5.8.0", "typescript": "^2.6.2" },
This is where node pulls in TypeScript and TSLint for development. Notice that there are "devDependencies" that are separate from the normal "dependencies" that you use in your function code. devDependencies are only stored on your machine, and are made available as tools for development. They are not deployed with your code. Also in that file, notice there are two script definitions:
"scripts": { "lint": "./node_modules/.bin/tslint -p tslint.json", "build": "./node_modules/.bin/tsc", ... }
These give you the ability to run npm run lint and npm run build on the command line from your functions directory. The first check your code with TSLint, and the second will build it with the TypeScript compiler.
npm run lint
The next file to look at is firebase.json. This now has a predeploy hook that runs TSLint against your code, so if it has an error, the deploy will fail:
firebase.json
{ "functions": { "predeploy": [ "npm --prefix $RESOURCE_DIR run lint", "npm --prefix $RESOURCE_DIR run build" ] } }
The next file is functions/tsconfig.json. This contains the configuration for the TypeScript compiler.
functions/tsconfig.json
{ "compilerOptions": { "lib": ["es6"], "module": "commonjs", "noImplicitReturns": true, "outDir": "lib", "sourceMap": true, "target": "es6" }, "compileOnSave": true, "include": [ "src" ] }
I won't cover all the settings here, but it's important to note that the compiler will look for source TypeScript files under functions/src, and compile them to JavaScript into functions/lib, with ECMAScript 6 compatibility, as required by Cloud Functions. Cloud Functions currently runs Node 6, which means it natively understand ES6 code.
functions/src
functions/lib
Lastly, take a brief look at functions/tslint.json. This lists all the rules that are observed when TSLint checks your code. You can add new rules here, or remove the rules you don't want. I suggest leaving everything there, as the list of rules was curated by the Firebase team to help with writing functions. The "strict errors" whose values are set to true will cause compile time errors if violated. The warnings below that will just complain about possible issues, and it's the team's opinion that you should look into resolving them.
functions/tslint.json
true
Alrightey. Take a look at this function that populates a property called createdAt when a user node is created in Realtime Database. Do you see what's wrong here?
createdAt
export const onUserCreate = functions.database.ref('/users/{uid}').onCreate(event => { event.data.ref.update({ createdAt: Date.now() }) })
TSLint sees the issue, and its one of the most common mistakes made when writing functions. If you run npm run build on this code, you'll see this error in its output:
Promises must be handled appropriately
This error is triggered by the rule no-floating-promises. TSLint sees that event.data.ref.update returns a promise, but nothing is being done with it. The correct way to deal with promises for database triggers is to return it:
event.data.ref.update
export const onUserCreate = functions.database.ref('/users/{uid}').onCreate(event => { return event.data.ref.update({ createdAt: Date.now() }) })
If you're using async/await, you can also declare the function async and use await to return it:
async
await
export const onUserCreate = functions.database.ref('/users/{uid}').onCreate(async event => { await event.data.ref.update({ createdAt: Date.now() }) })
Proper handling of promises is an absolute requirement when dealing with Cloud Functions, and TSLint will point out where you're not doing so.
I do a lot of Android development, and I'm accustomed to Android Studio linting my code as I type it. This is valuable because I get instant feedback about where things could go wrong. On the Firebase team, a bunch of us use VSCode for editing TypeScript, and it will use TSLint to give you instant feedback. The TSLint extension is easy to install.
Go to View -> Extensions. Type "TSLint" into the search box on the left. Find the TSLint extension, and click the Install button. After it's installed, click the Reload button, and now your TypeScript will be marked with possible mistakes.
Here's an HTTPS function that fetches a user document from Firestore using the Admin SDK. It looks OK and works OK:
export const getUser = functions.https.onRequest((req, res) => { var uid = req.params.uid const doc = admin.firestore().doc(`users/${uid}`) doc.get().then(doc => { res.send(doc.data()) }).catch(error => { res.status(500).send(error) }) })
But when viewed in VSCode with TSLint markers, you'll see that it violates some best practices:
Notice the squiggly lines under var, uid, and doc. If you hover the mouse over the marked code, you'll see a message from TSLint:
var
uid
doc
That's TSLint using the prefer-const rule to tell you that it's better to use const instead of var to declare values that don't change. It's good for the readability of your code, and also prevents someone from making an accidental change to it later on.
const
The squiggly line under doc is TSLint using the no-shadowed-variable rule to point out that the doc parameter in the function passed to then() (a DeltaDocumentSnapshot object) is masking the doc constant in the outer scope (a DocumentReference object), making the latter completely unavailable for use. While this is not really a bug here, it can lead to confusion about which doc instance is being referred to at any given moment. Renaming either instance resolves the issue.
then()
Here's a lint-free version of the same function:
export const getUser = functions.https.onRequest((req, res) => { const uid = req.params.uid const doc = admin.firestore().doc(`users/${uid}`) doc.get().then(snapshot => { res.send(snapshot.data()) }).catch(error => { res.status(500).send(error) }) })
This makes TSLint happy, which should make you happy, because you're writing better code!
If you haven't started learning TypeScript yet, 2018 is a fine time to begin. It's easy to get started, because TypeScript is a strict superset of JavaScript, meaning that all your existing JavaScript code is already valid TypeScript. So you can simply rename your .js files to .ts and drop them into functions/src. Then, you can start using TypeScript language features as you wish. Let us know how it goes and shout out to @Firebase on Twitter.
As a Developer Advocate with the Firebase team, one of the fun things I get to do is travel around the world to talk about Firebase and run hackathons for developers. As I reflect on these experiences, it seems to me that the participants at these events have different reasons for being there, and different categories of project ideas.
If you read along here, I’ll encourage you to think about which categories you belong to, or maybe you’re in a category of your own! Then, after you’re done, why don’t you follow this link to Twitter polls where you can tell us how you fit in. I’m curious to see the results!
The first question I’d like to ask is this:
I’m here for the prizes!
Of course, prizes are a pretty obvious motivator to participate in an event like a hackathon that can take all day and require some fairly difficult work. At DevFest Hamburg 2017 we ran a Firebase AppFest (that’s a lot of fest-ing, yeah?) and I was surprised to see some fantastic prizes:
I’m looking at you, Pixel 2.
The winning team at that event was ecstatic to win, I was told this was an especially big deal because the Pixel 2 was not available in their home country. So, kudos to that team, and enjoy your new phones!
I’m here to learn!
Another motivator for participation in a hackathon is the opportunity to learn new technologies. These folks are not necessarily in it for the prizes - the reward is the knowledge and experience gained from working on a project idea with others. Firebase hackathons are indeed a great place to learn, because the Firebasers present at the event are effectively on-call to answer questions, and get folks unstuck with whatever problems might come up. At AnDevCon DC this year, we held a Firebase + Android Things hackathon, which was a great opportunity for participants to learn about two Google developer technologies at the same time. I was inspired by everyone’s work on this, so I chose to work with Firebase on Android Things during our internal “Firebase Hackweek”. This “doorbell” is what we made.
It turns out that we Firebasers also learn a lot from these events. If there’s something unclear in the documentation, or some API doesn’t work the way you’d initially expect, that becomes real and actionable feedback that we can take to the product teams to further improve the developer experience. And that’s something we take seriously.
I’m here to build with friends!
It comes as no surprise to me that spending time with friends on a shared experience is the only reason you might need to show up at a hackathon. I saw a lot of this at SM Hacks, an event for high school students. I saw many teams there simply enjoying each other’s company while figuring out what to build and how to build it. So many fun and goofy hacks came out of that!
Now here’s the second question I’d like to ask. It’s about how you choose what you want to work on.
I’m a “personal hacker”!
This might be the most common type of hacker I’ve seen. Personal hackers build things that they would like to use themselves. I fall squarely into this category most of the time. The main reason I got into mobile development was the idea of programming the little computer in my pocket that I carry around with me everywhere, making it do things that are useful to me.
Some of the useful hacks I’ve seen powered by Firebase are a chord transposer, a to-do manager, and a medication reminder app.
I’m an “opportunity hacker”!
If you see a need in the world for a specific kind of app, then I’ll call you an “opportunity hacker”. I saw this a lot in Manila where we conducted a hackathon for the Firebase support staff. Many of the teams focused on very practical, real-world needs, and built an order-ahead food app, reward points trackers (two teams did this!), and a hardware inventory tracker. These are ideas that could live beyond the end of a hackathon, and become actual services that earn money.
I’m a “technical hacker”!
Technical hackers like projects that explore connections between technologies and solve known technical problems in new ways. Probably the best example I’ve seen of this was the winning project at the Bangkok Firebase AppFest - a Kotlin chatbot that lets you type Kotlin code into it, it evaluates the code using a Google Cloud backend, and sends back the response. I’m not sure I would have ever been able to come up with that idea!
I’m a “fun hacker”!
If you like creating games or apps for entertainment purposes, you’re probably a “fun hacker” by my reckoning. I used to work at a game company, and their hackathons were (of course) totally dominated by games of all varieties. There was one particularly memorable (for me) project in Bangkok where someone used Cloud Functions to progressively un-blur an image of either myself or Sheldon Cooper, and you had to guess which of us was in the picture. That day, I learned that I kinda-sorta look like Sheldon Cooper.
To be honest, I used to dislike the idea of a hackathon because I always felt “dirty” about writing what feels like mostly terrible code to get something done quickly. I’ve always been a big fan of processes like Test Driven Development that yield high code quality, at the expense of some extra time up front. But my experiences with Firebase suggest there is a place for quick hacks alongside disciplined software engineering. And it can be fun and rewarding!
So, what motivates you to go to a hackathon? And what type of hacker are you? Click those links to take a poll on Twitter and let me know!
Whoa! Is it the end of the year already? It looks like 2018 will be upon us before you know it; but I'm sure like most of you, it's going to take me three months before I remember to stop writing 1513684800 on all of my timestamps.
Looking back at 2017, I can say it's been an exciting year for all of us here in Firebase land. We launched a whole boatload of new features, attended dozens of conferences, welcomed several dozen new team members, met hundreds and hundreds of developers from all over the world, and had one crazy dance party.
I don't know if any year could have topped everything we accomplished in 2016 in terms of new features, but 2017 certainly gave it a run for its money. Here's a quick overview of just some of the great new products we released over the past year.
We released the beta version of Cloud Functions for Firebase, which lets you run server-side code in response to changes that happen within your app. I know the team who worked on this was very excited to see it launch, and this really helps us realize the whole "serverless computing" vision that Firebase has been working towards for the last several years.
For all you game developers out there, the C++ and Unity SDKs graduated from Beta to official General Availability status. Woo hoo!
We also announced support for games for Firebase Test Lab for Android, so you can help squash a few more bugs before your game hits the Play Store.
Over in the world of Analytics, we released StreamView and DebugView to all of our developers, along with the ability to create reports for custom parameters, and worked closely with the AdMob team to help you see important data about your ad revenue directly within the Analytics console.
We made several dozen new best friends in San Francisco and Cambridge by joining forces with the Fabric team.
This has resulted in some nice improvements to Firebase, including adding Crashlytics to the Firebase Console, and creating some new reports for the Analytics dashboard. We were also able to add Phone Authentication for Firebase, which allows your users to sign in to your app through a simple text message.
We began the process of open sourcing many of our client and server SDKs. We also released the Admin SDK for Go, for all of you Go fans out there (who, if they're not calling themselves Goficionados, are missing out on a golden opportunity here1).
We announced Firebase Performance Monitoring, so you can make sure your app is performing well out in the real world, not just at work with your fancy office wifi.
We introduced Cloud Firestore to the world, our highly scalable document database in the cloud. Cloud Firestore contains many of the same features that made the original Realtime Database successful, along with a number of improvements -- including a more sophisticated querying language, shallow queries, and a number of scalability improvements on the backend.
We added platform specific overrides to Firebase Cloud Messaging, so you can customize messages for your iOS, Android, or web users while still writing one single call to the FCM service.
To help you make smarter and more data-driven decisions around your app, we announced the beta version of Firebase A/B testing. This feature, in conjunction with Remote Config and Notifications, allows you to A/B test both app features and push notifications, so you can drive growth in the metrics that matter to your team.
And what Google product would be complete without machine learning? Just a few months ago, we announced Firebase Predictions. Predictions allows you to create dynamic groups of users who are predicted to churn, spend money in your app, or trigger special conversion events, so you can deliver unique experiences just to them, either through Firebase Remote Config or Notifications.
Phew! That was a lot! And while all of these new features and product announcements are great, 2017 wasn't just about new launching new products; it was about meeting all of you, too!
Some of our favorite moments came from attending developer events around the world. For a lot of our product team, getting the chance to meet with real developers, hear about how they were using Firebase, and all of their experiences, both good and bad, was thrilling and educational.
The Firebase team went to over 136 events in over 120 countries all around the world. And this included everywhere from Kuala Lumpur to New York City...
...to Manilla…
...to Google I/O down here in Mountain View...
….to Japan…
...to Washington DC2, to, of course, our big Developer Summit in Amsterdam. Fun fact: One attendee decided to bike all the way from Poland to Amsterdam just to see us. I think he earned an extra stroopwafel for that.
How were we able to accomplish this amazing task while still getting our work done? Mostly because we had Casey stay home and do all the work for us while we were gallivanting around the world. Thanks, Casey!
And some of our favorite moments didn't have anything to do with official work duties at all! Here's a few other highlights from Firebasers all around the world.
The San Francisco team continued its traditional annual observation of Take Your Pineapple to Work Day, because we believe it's important for all pineapples to discover their true potential.
Firebase hosted its second annual hack week, where Firebasers from around the company worked on feature improvements or fun side projects using the Firebase platform. We saw a number of fun hacks, including a coffee shop kiosk, a video doorbell, and some nifty improvements that might make their way into Firebase security rules someday soon.
Sam Stern dressed as an elf. And somehow managed to still look intimidating.
Amber from the Cambridge office had the privilege of hosting the Cambridge Women Techmakers conference and emceeing a panel with some of the area's top female entrepreneurs.
We all made it through the eclipse with minimal eye damage.
Alex -- our Cloud Firestore Product Manager -- had a baby! Also, Alex -- our Cloud Firestore Technical Writer -- is expecting a baby! Basically, if you're named Alex and working on the Cloud Firestore team… you might want to invest in some onesies.
Speaking of which, Jake on the Fabric team also had a baby! So cute3!
And Jake isn't alone. The folks in the Cambridge office had 7 babies total in 2017!
The Crashlytics and Performance Monitoring teams went to an offsite where they learned about street art and made a kick-ass Crashlytics logo. Because when you're building a crash reporting tool, the most important thing is to have street cred.
In cute animal news, the team in Cambridge got a new puppy, allowing us to meet our ambitious belly-rubs-per-employee goal for Q4.
Abe rescued a stray kitten he found in an alley behind his house. He's hosting the kitten right now at his apartment, and while he claims this is only temporary, it's been that way for three months. So, to summarize: Abe adopted a new kitten and it's his forever.
And Annum in Cambridge adopted Juno! Juno is a Maine Coon cat, which is generally known as the largest domesticated cat breed.
Anit on the Crashlytics team, worked the Firebase tent at I/O and got married! He won't tell me which event was more exciting, but let's be honest; you don't get a cool "Staff" T-shirt at a wedding, amirite?
The Cloud Functions team built a fireplace in the office. Although after some discussions with the fire marshall, who's a total wet blanket4 when it comes to things like open flames, they had to settle with a video fire.
Rich shaved his beard for charity. I'm pretty sure he raised a dollar for each whisker shaved.
Firebase hosted its very own Gingerbread House contest. Along the way, we learned that gingerbread baked specifically for constructing houses is only slightly less tasty than actual drywall.
With that, most of us are taking several days off this holiday season to spend some quality time with family and loved ones. We look forward to starting up again in 2018 with renewed vigor and more ways for you to build successful apps.
Until then, we hope you take some time off as well to relax and recharge, and have a Happy New Year, from all of us on the Firebase and Fabric teams!
I'll also accept Go-urmands ↩
At our Washington DC event, we had both an 11-year-old and a professional opera singer write their very first web apps on top of Firebase. ↩
I'm referring specifically to the baby here. Jake's cuteness is a private matter between him and his spouse. ↩
Which is pretty apropos, if you think about it ↩
Hey, welcome to part 3 in this series about using lifecycle-aware Android Architecture Components with Firebase Realtime Database. In part 1, we started with a simple Activity that uses database listeners to keep its UI fresh as data changes in the database. We converted that to use LiveData and ViewModel to remove the boilerplate of dealing with the listeners during the Activity lifecycle. Then, in part 2, we completely refactored away all mention of Realtime Database from the Activity, and implemented a performance enhancement. This optimization uses MediatorLiveData and some threading, for the case where data manipulation might be too expensive operation to perform on the main thread.
MediatorLiveData
There's one more optimization that can be applied in the code. It could have a large impact on performance, depending on how much data your database listeners are receiving. It has to do with how our FirebaseQueryLiveData implementation deals with the database listener during its onActive() and onInactive() methods. Here it is again:
FirebaseQueryLiveData
onActive()
onInactive()
public class FirebaseQueryLiveData extends LiveData<DataSnapshot> { private static final String LOG_TAG = "FirebaseQueryLiveData"; private final Query query; private final MyValueEventListener listener = new MyValueEventListener(); public FirebaseQueryLiveData(Query query) { this.query = query; } public FirebaseQueryLiveData(DatabaseReference ref) { this.query = ref; } @Override protected void onActive() { query.addValueEventListener(listener); } @Override protected void onInactive() { query.removeEventListener(listener); } private class MyValueEventListener implements ValueEventListener { @Override public void onDataChange(DataSnapshot dataSnapshot) { setValue(dataSnapshot); } @Override public void onCancelled(DatabaseError databaseError) { Log.e(LOG_TAG, "Can't listen to query " + query, databaseError.toException()); } } }
The key detail to note here is that a database listener is added during onActive() and removed during onInactive(). The Activity that makes use of FirebaseQueryLiveData executes this code during its onCreate():
onCreate()
HotStockViewModel viewModel = ViewModelProviders.of(this).get(HotStockViewModel.class); LiveData<DataSnapshot> liveData = viewModel.getDataSnapshotLiveData(); liveData.observe(this, new Observer<DataSnapshot>() { @Override public void onChanged(@Nullable DataSnapshot dataSnapshot) { if (dataSnapshot != null) { // update the UI here with values in the snapshot } } });
The observer here follows the lifecycle of the Activity. LiveData considers an observer to be in an active state if its lifecycle is in the STARTED or RESUMED state. The observer transitions to an inactive state if its lifecycle is in the DESTROYED state. The onActive() method is called when the LiveData object has at least one active observer, and the onInactive() method is called when the LiveData object doesn't have any active observers. So, what happens here when the Activity is launched, then goes through a configuration change (such as a device reorientation)? The sequence of events (when there is a single UI controller observing a FirebaseQueryLiveData) is like this:
Activity
LiveData
I've bolded the steps that deal with the database listener. You can see here the Activity configuration change caused the listener to be removed and added again. These steps spell out the cost of a second round trip to and from the Realtime Database server to pull down all the data for the second query, even if the results didn't change. I definitely don't want that to happen, because LiveData already retains the latest snapshot of data! This extra query is wasteful, both of the end user's data plan, and and counts against the quota or the bill of your Firebase project.
There's no easy way to change the way that the LiveData object becomes active or inactive. But we can make some guesses about how quickly that state could change when the Activity is going through a configuration change. Let's make the assumption that a configuration change will take no more than two seconds (it's normally much faster). With that, one strategy could add a delay before FirebaseQueryLiveData removes the database listener after the call to onInactive(). Here's an implementation of that, with a few changes and additions to FirebaseQueryLiveData:
private boolean listenerRemovePending = false; private final Handler handler = new Handler(); private final Runnable removeListener = new Runnable() { @Override public void run() { query.removeEventListener(listener); listenerRemovePending = false; } }; @Override protected void onActive() { if (listenerRemovePending) { handler.removeCallbacks(removeListener); } else { query.addValueEventListener(listener); } listenerRemovePending = false; } @Override protected void onInactive() { // Listener removal is schedule on a two second delay handler.postDelayed(removeListener, 2000); listenerRemovePending = true; }
Here, I'm using a Handler to schedule the removal of the database listener (by posting a Runnable callback that performs the removal) on a two second delay after the LiveData becomes inactive. If it becomes active again before those two seconds have elapsed, we simply eliminate that scheduled work from the Handler, and allow the listener to keep listening. This is great for both our users and our wallets!
Handler
Runnable
Are you using lifecycle-aware Android Architecture components along with Firebase in your app? How's it going? Join the discussion of all things Firebase on our Google group firebase-talk.
