React Studio ❤️ Firebase

Photo by Jan Kolar / VUI Designer on Unsplash

React Studio app

Earlier we’ve also build Objective-C target for iOS, Java code generation for Android and C-code generation for Tizen wearables.

React Studio is a native Mac app and can be expend with React Studio plugins. Plugins are small pieces of your own code which is wrapped into format that Studio can understand. Currently Plugins can be Visual element plugins (e.g. Camera, Text Field, File uploader)or Data plugins (Connecting to backend).

Unfortunately you cannot import your existing React projects; it would be rather impossible to re-engineer the code into visually editable format because the code could be pretty much anything. Studio generates real code which can be sent to your SVN and merged to any of your projects. Just think it as a tireless developer in your team which writes code to your repository.

Firebase Cloud Firestore plugins

Firebase plugin settings in React Studio’s Data sheet editor

Firebase plugin package contains three essential React Studio plugins which lets you connect your React Studio project to your backend.

  1. Firebase Login for adding Firebase authentication to your project web app.
  2. Firebase Database plugin for connecting your Firebase database to your app and taking care of CRUD operations and offline syncing.
  3. Cloud storage file uploader for uploading files to Firebase Cloud storage

What can you do with these plugins?

You need to add the login element into Project’s Login gate screen and store the User id and token into Data slot. This way you can make queries based on User id and add data for particular user.

React Studio does not take a stand about the security rules. The right place to protect your data is to set up the Firestore Database and Cloud storage security rules in Firebase console.

Queries and Collection paths

Please note that Firestore database is NoSql database and queries work a bit different than in the Sql world. You cannot make queries between multiple tables with conditions used in traditional Sql databases.

Update late 2019! Cloud Firestore now supports queries between subcollections which share the same name. You simply need to enable new security Rules 2.0 version for your database. Read more detailed post about collection group queries here: https://medium.com/@reactstudio/firebase-plugin-update-firestore-collection-group-queries-and-increment-925bf8603f1f

You can make queries e.g. give me all documents where State is “CA” or Population is less than 100000 but you cannot make complicated queries based on other collections and documents.

where("state", "==", "CA")
where("population", "<", 100000)

You may also sort or limit the returned collection simply by adding “.orderBy” or “.limit” to your query in Data sheet inspector panel’s Query field.

orderBy("name", "desc").limit(3)
orderBy("state").orderBy("population", "desc")
Example of Data sheet with data sorted by timestamp. See Query written in Query textfield.

When you add query methods to a data sheet, you may see an error message like the one shown here. This indicates that Cloud Firestore needs to have a composite index before the query can work.

Fortunately the Firebase developers have made it easy to fix the issue. The error message contains a link that points to the Firebase Console and you can just copy the link from React Studio’s error message, paste it into a web browser, and you’ll be taken to a screen that let’s you create the necessary index.

Read more about the queries and sorting from official docs: https://firebase.google.com/docs/firestore/query-data/queries
https://firebase.google.com/docs/firestore/query-data/order-limit-data

Firestore Increment

In case you want to increment field value there is a handy “Increment” function available. Just select button and choose Save data -> Plugin -> Firebase plugin from User interactions.

Structuring the data

Excellent explanation of how one should model data when using Cloud Firestore database

In noSQL world it is ok to “denormalise” your data and have same data in many places in your Database. This kind of approach is faster for read operations (in most cases 99% of the app’s data usage are reads).

You could even design your Database collections and documents based on the views in the app. Great example would be e.g. storing Tweet like count in Tweet document even if you’re storing Likes in their own collection. It’s just faster to read the Tweet’s like count from the same document where all other Tweet data is already stored. This can be achieved easily by adding Cloud function which updates the Tweet document’s like count attribute every time when new like is added to Likes collection. This approach is also cheaper because Google is charging usage by Reads and Writes so you don’t need to read all tens or thousands “TweetLike” documents for just counting the total like count for each Tweet.

There are many examples when people got huge bills just because of unnecessary reads. Here is a great example of one of those: https://hackernoon.com/how-we-spent-30k-usd-in-firebase-in-less-than-72-hours-307490bd24d

Who can see and edit your data?

When designin app in React Studio is better to keep the Database totally “open” so that you can load data into Studio’s Data sheets. When you start testing app in real environment then it’s time to add rules to protect your precious data.

Here’s an example of classic Expense tracker app’s Database rules. In this case anyone can Read documents in “projects” and “userorganizations” collections. User can read and write documents in “expenses” collection if user belongs to organization. This rule is created with function called “isMemberOfOrganization” which checks that there is a needed document in userorganizations collection and document name contains User’s id + organization Id for selected organization.

service cloud.firestore {
match /databases/{database}/documents {
match /userorganizations/{userorgId} {
allow read;
}

match /projects/{projectId} {
allow read;
}

match /expenses/{expenseId} {
allow read, write : if isMemberOfOrganization(resource.data.organization_id);
}

function isMemberOfOrganization(organizationID) {
return exists(path(“/databases/” + database + “/documents/userorganizations/” + request.auth.uid + organizationID));
}
}
}

Basically you can create as complex rules you want but note that document reads are billed also when you read documents with functions.

Firebase Cloud functions

Cloud functions are fairly easy to write and deploy and saves a lot of hazzle compared to having to install your own servers.

Read more about cloud functions here: https://firebase.google.com/docs/functions/use-cases

Typical use case could be the “Tweet” like count. In traditional normalized database model one could simply query and count all like “Like” rows for certain tweet. In NoSQL world it’s much faster to store tweet like count in Tweet document and update the value every time when “like” document is added to the likes collection. This way you need to read only one document instead of possible tens or even millions of documents.

Update late 2019! Firestore now has Increment function which allows user to increment field value reliably without having to write a Cloud function. Read more from here: https://medium.com/@reactstudio/firebase-plugin-update-firestore-collection-group-queries-and-increment-925bf8603f1f

Example use cases for cloud functions:

  • Automatically resize uploaded image in Cloud storage
  • Track number documents in you database
  • Clean up up database (e.g. when user is deleted delete all user data)
  • Push data to other services
  • Trigger function via URL (read more)

Cloud storage

React Studio file upload plugin

Snapchat uses Cloud storage for storing files so it is definitely battle tested to be reliable enough for most of the apps.

Updating data with transactions

What kind of features would you like to add into React Studio plugins? Let us know in the comments or via email at hello@neonto.com.

Download React Studio free from www.reactstudio.com

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
React Studio

The premium app design tool for the most advanced JavaScript UI library — React JS www.neonto.com/reactstudio