Framer Screencast: Firebase

Firebase makes it easy to add a back-end to your project. After reading George Kedenburg III’s great Framer and Parse articles (part i, part ii), I thought it’d be cool to see how Framer and Firebase could work together.

Jay Stakelon shared a prototype in the Framer Facebook group recently working with the Designer News API and using Firebase to keep track of upvotes. That was about all I could find in group when searching for Firebase.

In this demo, I wanted to highlight how quickly you can get started with Firebase and also highlight that Firebase has realtime syncing.

I show a couple lines from the Firebase tutorial. The first is from step 1 of the tutorial, and it goes in the index.html file:

<script src="https://cdn.firebase.com/js/client/2.0.4/firebase.js"></script>

The second line goes into your Framer file, it’s from step 2 of the tutorial. Here it is with some edits to make it CoffeeScript:

myDataRef = new Firebase 'https://xxxxxxxxx.firebaseio-demo.com/'

Note: “xxxxxxxxx” will be different for you. When you open the tutorial page, a temporary Firebase database is created and it’ll generate that random address. Firebase has a free plan that’ll be way more than enough to get started.

I started with Framer Studio’s default file with the icon state transitions. Here’s the modified and additional code:

# Create the Firebase reference
myDataRef = new Firebase 'https://oybw9noehem.firebaseio-demo.com/'

# On a click, go to the next state
iconLayer.on Events.Click, ->
	iconLayer.states.next()
	# Store that state
	currentState = iconLayer.states.state
	# Also store the state using our Firebase reference
	myDataRef.set currentState
	
# Watch the Firebase reference for changes
myDataRef.on 'value', (snapshot) ->
	message = snapshot.val()
	# Trigger state change if the Firebase reference value changes
	iconLayer.states.switch message

There are tons of possibilities with Framer and Firebase. And it also works great simply as a database for your prototypes. I hope this helps get things started.