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.