Firebase vs AWS Amplify

today we're going to compare firebase to AWS amplify both of which are platforms that make it easy for app developers to manage and scale their cloud infrastructure in this video we'll build a mini JavaScript app on both platforms so we can compare feature parity the developer experience and pricing show time you're new here like and subscribe and check out the full write-up on fire ship IO now for full disclosure I am a huge fan of firebase and have been using it for many years while AWS amplify was only released in 2018 the first major difference to point out is that amplify will run on Amazon's cloud infrastructure while firebase will run on Google's so there will be some degree of vendor lock-in there but that's just the trade-off you make if you want to dramatically simplify it back-end you're mine now you belong to me you're not gonna have your mommies around behind you anymore why pillow douches let's start by looking at some of the core features offered by both platforms and I should point out that this isn't a one is better than the other type of comparison it's more about using the right tool for the job and the first thing you'll need to know is whether or not your friend and framework is supported you'll find official support for iOS Android and the web and with amplify you'll also find official support for react native as well as react web angular and view at the time of this video it does not support water or bundling with roll-up but there are open issues for those so they may be supported in the future with firebase you do have official support for flutter and angular and view both have official libraries under their mano repose for firebase and there are some really good community maintained projects for react and react native now let's take a look at the core features of these platforms starting with the things that they share in common they both provide user authentication analytics a way to manage real time data push notifications file storage service functions and web hosting well look at all these one by one throughout the video but what does amplifi offer that firebase does not come with me if you want to live one of the first things I noticed was the ability to set up dedicated environments for development and production you can do this in firebase as well by just setting up multiple projects but it's a little more streamlined here and another thing that's more streamlined is setting up your continuous deployment amplifi takes a very similar approach to natla fie where you connect to your hosting account to a github repo then when you commit your code it just automatically deploys that code to the hosting account now in all fairness you can do this with google cloud build and firebase as well there's just a few more configuration steps to get it set up another unique feature of amplifi is its integration with graph queue which we'll look at closely in a few minutes and the last thing I'll point out is its integration with Sumerian which might be useful if you're building an Augmented or virtual reality app so that's pretty cool but what does firebase have that amplify does not the first and most interesting thing is a dedicated database and we'll compare that in detail to amplifies graph QL setup and another feature in firebase that I find to be very powerful is callable functions these are service functions that you can call with the auth context from your front-end so you can easily tell on your back-end code if a user is logged in or not and that's a lot easier than setting up an API gateway or just writing the backend authorization logic from scratch in firebase you also have a few tools for quality control things like crashlytics performance and test lab and then you have quite a few more features that are built on top of your analytics things like predictions and remote config to name a few and you also have ml kit which makes it really easy to implement machine learning features both in the cloud and on device now let's go ahead and switch gears to pricing if you've ever shopped on amazon.com you'll know that they push prices to the absolute bottom that's just built into Amazon's DNA and culture and we can see that with AWS pricing going back 10 years in the past we'll find a price of 15 cents per gigabyte in an s3 storage bucket and if we fast forward to the present day it's only 2.3 cents per gigabyte that's a price reduction of 85 percent over the course of 10 years but it's a little more complex than that both platforms have extremely generous pricing models and they both start out on a free tier so you don't really pay for anything until you have a decent number of active users and what you'll find on most services is that EWS is just slightly cheaper than GCP for example a gigabyte of storage is 2.3 cents on AWS and 2.6 on firebase but firebase has a couple of services that are always free such as user authentication and push notifications on AWS you pay about half a penny for each monthly active user be on fifty thousand monthly active users but the most interesting pricing comes into play when we start talking about databases and real time listeners to that data with firestore you're billed for your reads and writes to the database and all the real-time syncing just happens automatically so you don't really have to worry much about that as far as pricing is concerned on AWS you have a service called app sync which will connect automatically to a DynamoDB instance and with app sync you pay $4 per 1 million query or write operations but with firestore that would only be 60 cents if they're read operations or $1 80 if they were write operations in addition with app sync you might have additional costs associated with the actual back-end database itself and they also calculate billing in chunks of five kilobytes so if you have a document that's a hundred kilobytes that would equal 50 document read units it is hard to compare these things side-by-side but this appears to be an area where firestore would be significantly less expensive as an app scales up and last thing I'll mention on pricing is that AWS does have a solid edge when it comes to service costing 20 cents per million function invocations versus 40 cents on firebase now pricing is an important thing to consider but the whole reason you would use a framework like amplifier firebase in the first place is to increase the speed and flexibility of development so what I've done here is built a little to-do app that has user authentication and a real time to-do list it's built with spelt three and will just use it to compare the developer experience between both platforms we'll go ahead and start with amplify so at this point you need to have an AWS developer account and also the amplify CLI installed on your system from there we'll run amplify an int which will set up a project in our working directory it'll ask us a series of basic questions and it also gives us the option to set up amplify with a popular JavaScript framework but we'll just go ahead and select none for vanilla Jas that'll take a minute to complete and then when it's done it will create this amplified directory in the root of the project and that just contains a reference to all the AWS resources that we're using in this project now we can connect authentication to this app by running amplify add-on that'll give us a few different options here but we'll go with the most simple use case of just email password authentication and once we selected those options we can go ahead and run amplify push this will take all the resources that we have staged locally for AWS and then actually allocate them in the cloud in this case user authentication is handled by an AWS service called Cognito if we go to the AWS console you'll see a user pool based on the app that you just created and inside of here you'll find all kinds of different configuration options and this is an area where AWS has a big advantage over firebase in terms of flexibility and customization it allows you to do things like multi factor auth by sending a text message or email to the user with a special code that they need to verify and you can also set up custom attributes on the user authentication record and you also have additional triggers that you can use for serverless code in firebase you can only trigger when a user is created or deleted but with Cognito you have additional places that you can hook in serverless code now if we switch over to the firebase dashboard you'll find that things are a lot more simplified things are generally faster and easier to set up but they are less flexible by comparison for example if we wanted to set up password list authentication we can just do that by clicking a button whereas on AWS we can do that as well but we'd have to set up several lambda functions to make it happen now once we have the initial configuration done the code for both platforms looks very similar on my AWS amplifi branch I had to switch over to web pack and spelt because apparently it doesn't work with roll-up currently and just a quick side note here both amplify and firebase will add quite a bit of JavaScript to your final bundle size for firebase with user authentication and firestore you'll be looking at around 500 kilobytes and AWS with app sync and graph QL is close to a full megabyte and the main j/s violence felt I'm going to import amplify from amplify core and then I'm going to call configure on it with our configuration details that were automatically generated by the CLI from there I'll just go into the app component and then when this component is mounted I'll go ahead and call off current user to see if the current user is logged in so just one line of code to check if the users logged in and then if we want to log in with email and password we can call off sign-in with user name and password and that's all it takes to get a user signed in and then we can set that user as the user property on this component now if we click the login button it's going to log us in with AWS kognito and it'll show our user name here in the UI and I don't think it gets any easier than that as far as user authentication goes now if we switch over to our firebase branch we have these same basic set up here we initialize the SDK with our credentials from the firebase console and then from there we'll go into the main app component and you'll notice that the code is almost identical to AWS amplifi we're simply calling auth current user to get the current user and then we say sign in with email and password to sign the user in now the point I'm trying to make here is that both SDKs provide well-organized JavaScript libraries that help you get things done with very few lines of code but now I want to switch gears here to real-time data and that's where things really start to get interesting I'll go ahead and start by showing you the firebase example we're here in the firestore database and we're creating a document in a to do x' collection the user needs to be able to view this data and update the data and also stay up to date with any changes that happen to it in real time across all clients and that's a very challenging requirement to not only implement but also to do it scale if we look at the app itself the user should be able to tap this mark complete button and then see the data updated in the UI and then also in the backend as well to implement this code we'll go ahead and import firestorm and then we'll make a reference to that - duze collection in the database to query the collection we just call on snapshot and that will give us a callback function that will listen to any changes to that collection in real time it's going to give us a snapshot that contains an array of the document data and then we can map that snapshot down to an actual JavaScript object that we can show here in our front-end application and that's actually all it takes to listen to a real-time stream of data now if we want to mutate or update a specific to-do item we just make a reference to its location in the database and then we call update on that reference with the new data that we want to send and in our case we want to update a to-do item to complete which we can do with a single line of code so with fire store you get simplicity without any boilerplate code that makes it really easy to work with especially if you're building complex real-time features because all of the difficult real-time stuff is done for you automatically under the hood but the major drawback is that you're stuck working with a single no sequel database that may present challenges for data modeling and can also be hard to migrate into or migrate out of let's go ahead and switch back to amplify to see how this looks with graph QL and app sync we're going to first run amplify ad API to provision these resources in the project will choose graph QL so we can use real-time features and make sure to choose API for the authentication type now with graph QL there's a lot of boilerplate code but the nice thing about the amplifi CLI is that it's going to walk you through that code and generate most of it for you conveniently the default schema matches the data type that we already have set up in our front-end app I'm just going to add a boolean property called complete from there you can run amplify push and then it will ask you if you want to automatically generate the graph QL API select yes and in this demo I'll select JavaScript as the language go ahead and select yes to everything else and it's going to finish up by giving you a graph QL API endpoint as well as an API key then head over to the app sync console and you'll find a schema has been generated and uploaded to the cloud for you this is really cool because you now have a graph QL API deployed that can be accessed by any client that has that API key and it took almost no effort on our part but the API itself is pretty useless unless there's a back-end data source attached to it amplify will automatically set up an instance of dynamodb which is a no sequel database that is roughly equivalent to MongoDB or firestore now we can go into the database and we'll go ahead and create a new item that matches the schema that we have set up and graph QL now if we go back to our source code you'll see that there's an automatically generated graph QL folder in the source directory this contains all the boilerplate code that you need for graph QL for things like mutations queries and subscriptions now there's a few different ways we could query this data with graph QL but the gold standard way is to use the Apollo client so we'll go ahead and install an AWS app sync and graph QL tag in this project and then I'm creating a new javascript file called client j s that is just here to initialize AWS app sync from there we'll go into our app component and then we'll import that client as well as the list to do use query from the graph QL directory now we can make a query for the actual data in the database by saying graph QL list to do's and that will return a promise that resolves into the actual data from the database which will be an array of to do items so that provides a relatively easy way to fetch the data but at this point it's not real time if the user clicks mark complete it's going to update the item in the database but it's not going to actually notify us of that change we'll go ahead and run the mutation as well as the subscription to real-time updates in this to do component we'll need the update to do mutation as well as the on update to do subscription and then to update the data will call client mutate and then pass in an object that contains the data that we want to change on that database record in DynamoDB now that's going to take care of the update but we still want to listen to real-time changes to make that happen we'll go ahead and set up a subscription here that listens to the update on this to-do item we'll go ahead and call client subscribe and then point it to a query of the on update to do subscription and then we'll call subscribe on that which will give us access to the data whenever it changes once we have access to that new data we can just go ahead and update the property on this component so now when this mutation runs on the back end it's going to update the UI on the front end now I probably would not build an app like this in the real world but I just want to give you an idea of what it takes to get things set up with real time data in AWS app sync graph QL is a really amazing tool but in a lot of cases it might just be overkill we have a lot of complexity in this app both an automatically generated code and our own implementation details for something that was implemented relatively easily with firestore but again the big trade out there is we now have a lot more flexibility to make the code behave exactly the way we want it to I want to finish things off by saying that both platforms are awesome in their own ways and it's hard for me to imagine going back to building a back-end from scratch these services will save you time and money and help you get your product in front of customers faster now to some of the comparison I would say that pricing is almost equivalent one might be cheaper than the other depending on how you use it I would say firebase is generally easier to use and there are fewer decisions to make when getting things configured and that's especially true when you compare a graph QL and DynamoDB to firestore but on the other hand AWS is superior when it comes to flexibility there are more knobs to turn that you can use to customize the experience specific to your needs I'm going to go ahead and wrap things up there and if you have experience with both amplify and firebase I'd really like to hear your thoughts in the comments thanks for watching and I will talk to you soon it might be a tumor it's not a tumor it's not a tuma at all

Channel: Fireship

Views: 192,933

Rating: 4.9533191 out of 5

Keywords: aws vs gcp, firebase vs aws, firebase vs amplify, google cloud vs aws, firestore, graphql, apollo client, aws appsync, cloud computing, cloud services, amazon web services, google cloud platform, arnold schwarzenegger, comparison, review, aws amplify review, baas, backend as a service, ios, js, javascript, react native, android, firebase, aws amplify, aws, gcp, app development, dev review

Id: ucmbO2lWC2A

Length: 14min 46sec (886 seconds)

Published: Wed May 29 2019