Oct 25, 2019
React Studio ❤️ Firebase
React Studio app
React Studio is backend, language and framework independent and can be customised (as part of paid enterprise customization project) to generate any kind of code projects. It’s based on code templates and Design compiler algorithm which is (in React Studio’s case) programmed to generate ReactJS code output based on users visual Design.
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 package contains three essential React Studio plugins which lets you connect your React Studio project to your backend.
- Firebase Login for adding Firebase authentication to your project web app.
- Firebase Database plugin for connecting your Firebase database to your app and taking care of CRUD operations and offline syncing.
- Cloud storage file uploader for uploading files to Firebase Cloud storage
What can you do with these plugins?
Well it depends… You can list some “shallow” data from Database easily in your app. You can add functions for users to edit or delete existing data or add new documents to Database. React Studio supports most use cases but we suggest to keep the document structure as shallow as possible, it just makes things easier.
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.
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")
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
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?
Usually it’s necessary to create rules about who can read and edit your data. In Cloud Firestore Database you can simply define Read and Write rules for each collection and document.
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 handy for e.g. database cleaning and running cron jobs to your Database, Cloud storage or simply executing logic based on the triggers (e.g. when document is created or edited).
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:
- Send notification when new document is created (e.g. when new message is received)
- 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
Cloud storage is a service for storing and serving your user’s content into secure place. React Studio has File upload plugin which lets end user to upload any files into Cloud Storage. Plugin returns file path and few other information which can then be stored into Database for later access. Plugin is based on this npm package.
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
By default the Transactions are currently not supported by React Studio plugin but we will take a look at them in the near future. Read more about the transactions here
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
