Подія відбулась
Подія відбулась

Квитки на наступну конференцію Конференція JavaScript fwdays’24 вже у продажу!

Easy and scalable serverless backend for your next mobile or web app [eng]

Презентація доповіді

Scaling and maintaining a dedicated BE infrastructure takes lots of time and effort, and is not always economically viable. Especially for early-stage startups with dynamic products, solo developers working on hobby projects, or a mature team working on a proof of concept. Luckily google provides developers with Firebase - an infrastructure for building serverless BE architecture and many other useful tools for facilitating it. I'll share my experience utilizing Firebase facilities such as authentication, Realtime DB vs Firestore, Cloud Functions, Firebase ML, and others. Examples would be based on an Angular-based web app, but the practices can easily be used with React, VueJS, or any other modern FE framework.

Arman Murzabulatov
Rabobank
  • A software engineer with diverse hands-on expertise in building scalable (web and mobile) tech and 15+ years of total programming experience. Taken part in the development process of rapid startups & scale-ups as well as large high-load projects
  • Currently, a Senior Software Engineer building a retail banking application for 9+ million customers
  • Arman also enjoys writing articles and talking at conferences about Frontend tech
  • Twitter

Транскрипція доповіді

Hello everyone, and welcome to my talk on building an easy and scalable serverless backend. My name is Arman, and I have extensive and diverse experience working in software engineering and software development in general. I have gone through the entire journey from Pascal, C++, Java, and JavaScript. At some point in my life, I was a co-founder and CTO of a software service startup company, which was quite successful. In the last five years, I've focused on fintech, building banking applications and banking journeys for well-known banks. Yeah, I was a semifinalist of the ACM programming contest when I was a student back in time. Today, I'll be sharing my experience and insights on creating a serverless backend architecture for various projects. We'll explore key features that are needed for building apps. Besides, of course, the app itself, there is the support for authentication, database, and data storages, cloud functions (which are basically the APIs and some scripts that are running on the cloud, doing something). And lately, machine learning is also a need for modern applications, and many more. Our examples will be focused on an Angular-based web app, but the practice can easily be applied to React, Vue.js, or any other modern framework.

Let's dive in and learn how we built a powerful serverless backend for a project. But before doing so, let's first answer the question: why do we need a serverless backend? And let's start with the challenges that many of us deal with having dedicated backend infrastructure. Basically, scaling and maintaining this type of infrastructure is often time-consuming, resource-intensive, and can incur high costs. So the complexities associated with server management can detract from our primary focus, which is building apps and delivering exceptional user experience. This is where the beauty of serverless backend solutions comes in.

So there are enormous advantages to this approach. First of all, the main advantage is serverless is cost-effective. With serverless, we only pay for what we compute, and we don't pay for the idle server costs. For example, normally, if we have a dedicated server that performs, I don't know, a few operations an hour, with serverless, we pay only for those few operations, not for the server running and doing something the entire time. Then it is fast in development, so it actually reduces the responsibilities for developers. So we have free enough time for focusing on the application logic. Another big advantage is easy scalability. So serverless solutions automatically scale with the demand of the app, so we don't have to provision, manage, and do all this stuff. So basically, we can just start the application with five users, and then if it gains traction and becomes viral, and we have from 100 users to 100,000 or 100 million users, it automatically scales.

That's like a huge advantage. And lastly, low maintenance. So server maintenance tasks such as capacity planning, patching, managing security vulnerabilities, everything is handled, freeing up a lot of time for developers. And yeah, and basically, given all these advantages listed, serverless backends are particularly beneficial for the following: early-stage startups and dynamic products where rapid prototyping and flexibility are the keys. Then the solo developers working on hobby projects. So it allows focusing on the frontend and user experience without worrying about the server infrastructure. And I'm sorry, and the mature teams working on proof of concept or MVP. So enabling to rapidly test, validate the ID and move on.

So that's not the only, but in these three groups, it's like a must. But there are also cases when not to use it. For example, a large product with the scale of Netflix, for example, where they use a lot of computation. In this case, for such large tech companies, it makes financial sense to have the dedicated server infrastructure to hire people to, yeah, basically to build their own server infrastructure and maintaining it. So in that case, it would be cheaper. But if you go with serverless and you build Netflix with the same amount of user and the views, you'll have to pay billions of dollars to the providers. So in short, embracing servers, but by using serverless backend, we can avoid many of the pain points associated with traditional management and accelerate the development process and more efficiently allocate our resources, basically focusing on the app. Now let's dive deeper into how we can use these benefits in our projects. And we will utilize the power of Firebase for that.

The solution provided by Google, but basically in this talk, I'll cover Firebase, but it can be used on Amazon server solutions on Microsoft, Cloudflare, Netlify, Verso, and many more vendors. So basically, there are many vendors, many solutions, and Firebase is only one of those. But in order to go deep and really give examples, I will use Firebase as our tool, but feel free to use any vendor. So firstly, what exactly is Firebase? Simply put, Firebase is a comprehensive app development platform brought to us by Google. It is designated to provide us with a serverless backend infrastructure, meaning we can focus on building our applications without having to worry about server management or database scaling. And Firebase isn't only about serverless though. It offers a whole set of tools and services that facilitate various stages of app development. That's in short Firebase. And some of the key features of Firebase include Firebase authentication. This service makes building secure authentication systems easier, supporting a variety of signing matters. We'll cover that very deep. Then a real-time database, an efficient, no-scale database that lets you store and sync data in real-time. Then Firestore, a fully functioning, flexible, and scalable database for your application. Then the core, the main one, Cloud Functions. This lets us run backend code without managing servers. And Firebase Machine Learning.

This feature provides a powerful way to integrate machine learning into our apps. So even without the knowledge of machine learning, we can actually use it. And that's just the core. There are many other features of Firebase to enhance and streamline the development process. So this is basically our short agenda. We will run through this five, six, and cover a bit more. So buckle up. Let's move on. But before now, why should we consider using Firebase? So here are some key benefits. So simplify backend development. So basically, for example, imagine you're building some app that you want to test, you want to try, then Firebase managed the backend. So we can focus on creating that application. It can be a web app, a mobile app, and so on. And the majority of the backend is handled by backend development. So backend development makes it quite easy. And faster development and deploy. And of course, easy integration. So Firebase works seamlessly with popular frontend frameworks, as I mentioned before, making it a good option. So yeah, that's like the three main reasons why I chose Firebase for a few of my projects. And not the other vendors.

But you feel free to choose any. And now finally, let's move on and explore the most critical aspect of any application development, which is, I think, user authentication, and security authentication. Because I don't think any app, like the majority of the app needs user authentication. And Firebase authentication is a comprehensive solution that simplifies the critical process of user authentication. It supports a variety of authentication providers, ranging from our traditional email, password signing, and third party like Google, Facebook, Twitter, GitHub, and Apple sign-in and so on. And the main advantages of using Firebase authentication are that it simplifies user management and security, allowing us to focus more on the core functionality of the app. So basically, this provides us with entire user management, user authentication infrastructure from Google. We'll later see how to integrate it. But with minimal effort, we have fully functioning, fully secure user management and user authentication. And then in the console, we can see the users and so on. It's brilliant. And now let's see how we can set up user authentication.

The process is relatively straightforward. So in the Firebase console, we enable the authentication providers that we want to use. So here is the screen. You can choose one or multiple providers based on your app's requirements. For example, I can have email password, Google, Facebook, and GitHub authentication. And I'll have those buttons like sign in with Google, sign in with Facebook, and so on. Then our next step is to integrate Firebase SDK into our application. This allows us to interact with Firebase and utilize its features. So basically, this is the classic SDK. We install the Firebase package in our application. And then we have these environment variables like API key and basically credential for using it. This is the screen from the actual dashboard.

Then you need to implement the sign-in and sign-up flows for your app. That's basically building the sign-in in the application, in the content. But even for that, Firebase has built-in UI libraries. For example, for providers like logging in with Facebook, Twitter, and so on, we have already open-source UI libraries that we can just use even without building it. Then there is also the classic, more classic email password authentication. And there is also email link authentication with this passwordless. So basically, you only use your email. And every time you sign in, you get an email with some link to authenticate. And for that, there is also a building or open-source UI. Or you can go custom and build the user interfaces for logging in and signing up yourself.

And yeah. And basically, framework libraries like AngularFire, there are libraries for React and for Vue. Those packages, they're supported by Commenge, and they make it very easy to actually build in logging. So the authentication can be set up in, like, I don't know, 20 minutes or so. So basically, let's dive deep into the mechanism. What happens when users sign in with our application? So basically, information about the user is returned with a device callback. This allows us to personalize the app for a specific user. Then that user information is a unique ID that is guaranteed to be distinct across all authentication methods. And that unique ID is used to identify the user in different parts of the system. For example, later we'll cover database and cloud functions. So basically, that user ID will be used there. And Firebase will also manage the user session so that when the users remain logging after refreshing the browser or when the application restarts. And yeah.

So basically, it allows us to focus on the users and not the infrastructure. I think that's enough about the process. Let's dive into a bit. Let's move on. So now, while Firebase does a lot of heavy lifting for us, for example, it does everything. We just use some UI library and we have the entire flow. It's important to follow some of the best practices for secure authentication. So always use up-to-date authentication libraries. This helps us to protect users' data, obviously, and makes the application more secure. Then I would personally advise to, if user data is critical, always tend to use multi-factor authentication where possible. This adds an extra layer of security and it's especially important for applications handling, as I mentioned, sensitive data. And regular monitoring view your user's access logs. This can be done in the console of the Firebase. This can help quickly identify and respond to suspicious activities.

And after the authentication is done, what's the next? Now we can dive into the next most important decision that we have to make while using Firebase is the serverless backend, basically choosing the right Firebase database. And in the Firebase world, it provides us with two excellent NoSQL cloud-hosted databases, the Firebase Realtime Database and Firestore. Each has its strengths and the best choice, of course, depends on the situation and the specific needs of the app. And firstly, the Firebase Realtime Database, it is ideal for apps requiring low latency updates and presence detection, such as real-time collaboration apps, IoT devices, and gaming apps. Its key feature is real-time data synchronization, meaning any change in the database is instantly posted to all the connected users. And data in this Firebase Realtime Database is stored in JSON format. On the other hand, Firestore is also a NoSQL cloud-hosted database. It offers real-time updates as well but brings additional features to the table. It supports offline data access and provides more advanced querying and indexing capabilities.

And Firestore's data model is based on documents and collection, which can be more scalable and easier to manage for large-scale apps, complex data structures, and apps with multiple sub-collections. And to install Firebase with AngularFire, we need to add AngularFire. This is basically an example with Angular. After installing AngularFire, we just configure our Firebase settings in environment TS, and then we basically import and initialize Firebase in our app module. And then basically, we enable the desired database, for example, with Angular or Firestore in the console. Then we define the data model in our application to represent data structure. And finally, create a service to handle our database operations, to basically perform CRUD operations on the data. And basically, I think the example would speak more, as we mentioned. So to perform data operations for the real-time database, it's as easy as we import and inject AngularFire database in the service, for example, in Angular.

Then, for reading the data, we just basically assume that we inject to the service and its name DB. So we say DB object value changes. This returns the observable that we can subscribe and read the data in real-time. To write data, we use set for updating, update for deleting, remove. So basically, this is the CRUD operations for the real-time database. And for Firestore, it's quite similar. So we import and inject Firestore service, assuming we call it AFS AngularFireStore. For reading data, we set the path to the document. And we say, like, this AFS doc, again, value changes. This returns observable that streams the data. And for writing it, set for updating, update for deleting, delete. So these are also CRUD operations for Firestore. So imagine you create a database, then you inject it, you set the path for different documents, and that's it. By using these operations, you can already write, create, and update in your database. And you don't even touch the server. You didn't scale this. It just works. So it saves a lot of time. And now we dive into further. So we have our authentication, and we have the database. But that's in most of the cases not enough. So we can extend with Cloud Functions. So what is Firebase Cloud Functions? These are serverless event-driven functions. They're written in languages like Node.js, Python, and Go in the case of Firebase. And they automatically scale as the app's usage grows. Remember, I mentioned, like, you have five users, then you have five million.

So it automatically scales. And the serverless nature of these functions means that we don't have to worry about managing servers. So we write the function, and Firebase takes care of the rest. Technically speaking, we write some Node.js functions that need to be executed when the user performs some action, for example. Then, basically, when users access it, the instance is created, then this function is executed, and that's it. If there's no users, the instance dies, and that's it.

That's technically it. And if you have millions of users, then you have multiple instances running, like starting up, and then they all execute the one million requests, then, for example, the activity drops, then the server scales down. So these Cloud Functions are like the core of serverless. And if you access Wikipedia, and you say, like, serverless, it would say, like, the Cloud Functions. But for this talk, serverless is more of a complex for, yeah, what I meant here is the scope of this talk is broader, not only Cloud Functions, but all the tools that basically, all the tools, services that make backend accessible without having, without being a backender, basically. And these Cloud Functions have a wide range of benefits and use cases. So they allow us to execute custom server-side logic without the need to manage servers.

As mentioned earlier, they can be incredibly beneficial for performing tasks like data validation, transformation, and aggregation. So, for example, building API, so in Node.js, for example, we use Cloud Functions for that. And furthermore, these functions can respond to events from various Firebase services, like Firestore, Realtime Database Authentication. For example, when a new user signs up, send them a welcome email from Mailchimp right away. That is Cloud Functions. And let's install the Firebase tools with, let's basically set up and deploy Cloud Functions. So, it consists of five easy steps. First, we install Firebase CLI, with join on npm, then we initialize functions.

So, we write, we run Firebase init functions in our project directory and select the language that we want to use, for example, Node.js, Python, or other. And then, it initializes the functions. Basically, it initializes the index.js or index.ts file. And basically, the first step is creating a function. So, we write our functions in index.js or index.ts file and in the function directory created by Firebase CLI. Then, to deploy the function, we use Firebase deploy only functions command to upload the functions to Firebase. And that's it. After those four steps, the function is there in Firebase. And when it is accessed by API or when it's triggered by some events, it will be executed. And the last step would be to monitor our functions. So, we use Firebase console to monitor, we have basically, Firebase console is the Firebase dashboard, the one that I showed in the beginning.

So, there we can monitor the execution times, errors, and so on. And yeah, so basically, to call these functions from our applications, we import Firebase app and Firebase functions packages for the frontend. For example, for Angular, it's AngularFire. Then, we initialize Firebase with configuration. Then, to call the function, we use discrete Firebase functions, HTTPS callable, then to create reference, and then call to execute the method. And example use case, the code can run in, yeah, so basically, yeah, the example that I mentioned earlier with the email sending. And yeah, basically, while those functions are executed, we don't have to worry about scaling provisioning or decommissioning those apps. And this is the example of the function. So, basically, this is it. For example, this script is an example of Cloud Function. Of course, it has an empty body, but you can do whatever.

And then, from the frontend, for example, from the Angular, we can inject the service from the AngularFire. And then, using these syntaxes, we can convert it to promise and do something with it, or we can use it as an observable. And basically, now, I think the latest version is generation to Cloud Functions, and it was announced last week at the Google's I/O event. And the second generation features have two main advantages. Basically, one main advantage is now one, remember when I said, like, when user accesses the function, it sets up an instance and runs this function there. So, now, each instance can run up to 100 requests in parallel.

So, that's concurrency wasn't possible before. So, because of that, it doesn't need to start too many instances when the app goes viral. So, that it has fewer cold starts. Cold start is when the instance is started. So, for example, when 1 million requests are when the application goes viral and we have 1 million requests, previously, it had to run 1 million instances. And now, it can just run start 10,000 instances, with each of the instances able to run 100 requests. And the second update is from the event is Firestore trigger support, which allows changing based on a query. But more on that later. And that's the core. And let's now move on and explore additional Firebase capabilities. So, first of all, also, Firebase Extensions. This is new, relatively. It was also announced during the event last week.

Firebase Extensions are prepackaged serverless solutions that let us quickly add capabilities. And it provides a rich ecosystem of open-source extensions written by Google or third parties. They can easily build nice features into the API. For example, we can add full-text search with Algolia, email marketing with MailChimp, or messaging with Twilio. Extensions are easily configurable once deployed, no maintenance required. When a new improved version of an extension is available, we can update it with just one click of a mouse. And these extensions are also built on top of Google's serverless architecture. So, just like Cloud Functions, they automatically scale when the load goes up.

So, in other words, when Cloud Functions, if everybody starts building, but there are some features that the majority or, like, a lot of developers build. And this basically generic functions are being generalized and put as an extension. For example, you can see from this screen and from the example, like, search with Algolia or, like, send messages with MailChimp. Those tasks, I think, before the extensions, they were rewritten hundreds of times. And also, one of the latest extensions that was released last week during the event is a chatbot with ARM API. ARM API is basically an analog of chat GPT from Google. So, they have an API, like OpenAI API. But here we have an extension that automatically integrates it with Firestore. And, for example, for Firestore, we can have, like, a prompt. And then, basically, when, for example, someone writes a query or a request to the chatbot from the user interface, then it is written into the Firestore database. Then, once the new API, for example, once something is added to this database, it triggers the Cloud Function that accesses the API. And then the generated API would generate the answer and update the Firestore. And in real-time, we can use the chat GPT, a copy of chat GPT, supported by Google's API seamlessly. I think that's pretty cool. You should go and try.

And, yeah, basically, this is a screenshot from that presentation. These are the latest extensions that have been added to the collection, to the ecosystem. So, yeah, we can see this chatbot with Power API, summarize text with Power API, convert text to speech, and so on. And, yeah, be aware that anyone can build extensions. And if you have a great idea, you can write a generic Cloud Function, and then you can deploy it as an extension. And then, like, thousands of developers can reuse it. And, yeah. And one of the last topics is Firebase ML. I will speed up a little bit.

So, Firebase ML helps us leverage the power of Google's machine learning capabilities directly in our app. It provides an easy-to-use SDK to pre-train data models for common machine learning tasks. It also supports custom model deployment and hosting. It has previewed APIs for common machine learning tasks, for example, image labeling (recognizing entities in an image), text recognition (recognize and extract text from images), object detection tracking (detecting an object in an image), face recognition, barcode scanning, and landmark recognition (recognizing well-known landmarks in an image). All these models are pre-trained, so we don't have to be machine learning experts. We can just use the API we need, like text recognition. It has seamless integration with other Firebase services, so check it out. Custom models are also supported.

The deployment and hosting process, in general, is as follows: we train our own custom machine learning model and deploy it to Firebase. Then our app downloads the custom model from Firebase and uses it to make predictions. Firebase handles hosting, serving, and updating of our custom models. I have never done that, but if you are a machine learning expert or you know how to create and train models, you can also use machine learning. I personally only use previewed models. That's basically the core, the main. But there are other features or functionalities of Firebase. I will just list them. So, it's storage (to store and serve user-generated files), analytics (to gain insights into user behavior), hosting (every app can be hosted with a global CDN), and Firebase Remote Config (to customize behavior without redeploying). And many more.

Basically, I gave examples with Angular, but actually, Firebase is framework-agnostic. The Firebase SDK is compatible with many popular frameworks. It can easily be integrated with React, Vue.js, and many others. For example, for React, it's React Firebase or React Redux Firebase packages. For Vue.js, it's Vue.fire, Vue.xfire, and so on. Yeah. And there are many general resources. For example, Firebase documentation, community examples, or tutorials. You can find integration with mostly all the frameworks. And sorry. Oops. Sorry.

So, basically, yeah. So, the benefits of, I think I don't need to explain the advantage of having a cross-platform. And all right. We reached the end of the journey with Firebase and the potential of the serverless backend. Let's quickly review some of the key points that we have discussed today. So, Firebase significantly simplifies server backend development, freeing up time for development. It provides a suite of tools and services such as authentication, realtime database, Firestore, Cloud Function, machine learning, extensions, and so on. Importantly, Firebase is compatible with popular frameworks like Angular, React, Vue.js, further increasing the possibilities.

And what's next? As a developer, I urge you all to leverage Firebase to build scalable, cost-effective backend solutions for your apps. Don't be afraid. Experiment with different features to find the perfect combination for your project. And, yeah. For further, I mean, basically, it's all the theory that you need in these slides. Now you can jump in, start building. As you build, you learn more. The tools that we covered cover 80-90% of the needed tools. Maybe you need some extra tools, but you can read for that. I recommend the Firebase official documentation. Obviously, their YouTube channel is quite nice with lots of practical examples. And remember, Firebase is not just a tool. It's basically, I think, a way of thinking where you can delegate a lot of things to the infrastructure and just utilize the infrastructure of Google a lot. And with that, I conclude my talk. Thanks a lot for listening. I hope you found it informative. Again, thank you very much for your attention. And now I'm open to answer your questions. Thank you.

Увійти
Або поштою
Увійти
Або поштою
Реєстрація через e-mail
Реєстрація через e-mail
Забули пароль?