Vivekanand S Rao

Sr. Web Developer

Author: Vivek

Google Firebase: The Big Picture

Posted on by Vivek

Overview

You may have heard of the amazing Google Firebase platform. But did you know that Firebase offers some of the best services out there to develop fast, robust, and secure apps? That means that Firebase is a great idea for anyone who wants to build amazing apps. In this blogpost, I will give an overview of this great Google platform. Some of the major topics that I am going to cover in this blogpost includes

  • What is Google Firebase?
  • Understanding Core Firebase Services
  • Firebase SDKs, Frameworks, Helpers, and Utilities and
  • Why and Why Not Use Firebase?

By the end of this blogpost, you will have a general understanding of this platform, and you can dive deeper into any of the Firebase services.

What is Google Firebase?

In this blogpost I am going to cover about the big picture of Google Firebase. But before I go over it, how did Firebase become what it is today? Back in 2011 before Firebase was Firebase, it was just a startup called Envolve. As Envolve, it provided developers with an API that enabled the integration of online chat functionality into their website. After releasing the chat service, the founders found out that it was being used to pass application data that weren’t chat messages. Developers were using Envolve to sync application data such as game state in real time across their users. So they decided to separate the chat system and the real-time architecture that powered it. And after three years, Google acquired Firebase. But what is Google Firebase today? Today Google Firebase is a platform that helps developers to quickly develop high quality apps and grow businesses. In this section, I am going to cover the benefits of working with Google Firebase. Is Google Firebase integratable with other services? And most importantly I am going to go over the main problems that Firebase solves for us.

Working with Google Firebase

Working with Google Firebase is really easy and fun. And that is because Google experts have put a lot of thought and effort to do it so. But why would you want to use Firebase? By using Firebase, we can build apps fast because we don’t need to manage the infrastructure. This platform is backed by Google, so it means that it is a trusted platform. Also, it is important to mention that Firebase is one platform in which you can perfectly integrate different services with each other. Firebase as a platform offers different services to build better apps, to improve app’s quality, and to grow your business. One of the services that helps us build better apps is Cloud Functions . Now Cloud Functions as a Services offers us functions that can be triggered by different events from different Firebase products or services, Google Cloud Services, or even third parties using webhooks. Another service is the Cloud Storage, which is a great service that can be used to store and share user-generated content. I am going to go over in more detail about these services and more in the upcoming sections. So now that we have built our app, it is important to improve the app’s quality. And for that, we can use the Crashlytics, which is a primary crash reporter for Firebase. And to grow the business, we can use Firebase services like Predictions, App Indexing, and much more. Before I jump into the next part, it’s important to mention that Google Firebase integrates well with a lot of very useful apps like, for example, Google Ads, AdMob, Google Marketing, Data Studio, BigQuery, and Slack.

Challenges Made Easy with Firebase

When building robust applications, there are a lot of challenges that we need to face along the way. When building apps, it is important to send out to your customers or users the latest and the greatest version of your app. But rolling out new features progressively is not that easy. Also, having a robust authentication system is really important. You don’t want to get a lot of calls from angry customers because they cannot get into the system. And last but not least, implementing user-friendly chat features is not easy. But how can we use Firebase to roll out new features progressively? By using Firebase, we can get crash reporting. And by using this reporting, we can decide which issues to solve first because we can see which issues impact our users the most. We can also use remote configurations, and by using remote configurations, we can customize how our app renders for each user. So, we can roll out features gradually, run tests, deliver customized content to certain users. Another feature that we can use is Google Analytics. And by using Google Analytics, we can gain a real-time insight into user behavior. When it comes to authentication, Firebase offers the Firebase Authentication service, which offers multiple methods to authenticate the users including email and password, third-party providers like Google or Facebook, and using your existing account system directly. By using Firebase Authentication, we can either build our own interface, or we can use the existing, fully customizable Firebase Authentication user interface. Last but not least, implementing user-friendly chat features is really important. And to do so in Firebase, we can use Realtime Database, which is a great database to store and sync data between users and devices in real time by using a cloud-hosted NoSQL database. We can also use the Cloud Messaging to send messages and notifications to users across different platforms. It is important to mention here that the Firebase Cloud Messaging or FCM scales to even the largest apps, which means that you can even deliver hundreds or millions or even billions of messages per day.

Summary

In this section I have covered about Firebase Firestore, Google Firebase integrations and common challenges. We learned that Firebase Firestore is one platform which is used for fast development, and it is trusted because it is backed by Google. We also learned that Google Firebase integrates well with other apps like Google Ads, AdMob, Slack, etc. We also learned that by using Firebase platform, we can solve the common challenges when building robust applications like rolling out new features progressively, having a robust authentication system and integrating a user-friendly chat. In the next blogpost, I am going to cover about Understanding Core Firebase Services.

Understanding Core Firebase Services

Introduction

We have learned so far that Firebase is a platform, and it has many services for different purposes. In this blogpost, I am only going to cover the core services. I am going to start with the Cloud Firestore, which is a cloud-hosted NoSQL document database. Then, next, I am going to cover Cloud Functions, which are functions that can be triggered by events from different Firebase services, Google Cloud services, or even third parties using webhooks. Authentication is another service that I am going to cover. Firebase Authentication offers methods to authenticate users, including email and password, third-party providers like Google or Facebook, and using your existing account system directly. Hosting is another service that I am going to cover. At the very end, I am going to cover Cloud Storage, which is used to store and share user-generated content like images, videos, text, etc., and real-time database, which is used to store and sync data between users and devices in real time. So, let’s get started.

Cloud Firestore

Cloud Firestore is a scalable NoSQL document database which is used to store and sync data. But what can we do with Cloud Firestore? As a scalable NoSQL document database, Cloud Firestore supports flexible data structures. In Cloud Firestore, we can have documents which are organized into collections. And then inside collections, we can have sub-collections and so on. And in Cloud Firestore, we can nest data up to 100 levels deep. Of course, loading all the data does not make sense, right? We need to filter them, and to do so, we use queries. And in Cloud Firestore, we can write expressive queries. In queries, we can include multiple or chain filters, and we can even combine filtering and sorting. Now, it is important to mention that in Cloud Firestore, queries are indexed by default. This means that the query performance is really great. Other than these two features, Cloud Firestore is one of the best tools out there when it comes to data synchronization. Cloud Firestore uses data synchronization to update data on any connected device. But what happens when there is no internet connection? Does it mean that our app fails to work? Not with Cloud Firestore because Cloud Firestore offers offline support. This mean that Cloud Firestore caches data that your app is actively using. So the app can write, read, listen to, and query data even if the device is offline. And when the device comes back online, Cloud Firestore synchronizes any local changes back to Cloud Firestore. As developers, we never know how many people might be using our app. So when building apps, we always must take into consideration scalability, consistency, and, of course, reliable backups. As part of Google Cloud, Cloud Firestore offers a powerful infrastructure for automatic multi-region data replication, strong consistency, and almost real-time transaction support.

Cloud Functions

Another great service that Firebase offers is Cloud Functions. And Cloud Functions are used to write and deploy code that responds to Google Cloud services. But why would we want to use Cloud Functions in our apps? The Cloud Functions that we write can respond to events generated by other Firebase services, Google Cloud Services, or even third parties by using webhooks. Also, once you deploy your code, it is hosted in Google servers, which means that you never need to worry about credentials, server configuration, provisioning new servers, or decommissioning the old ones. It’s great that we don’t need to worry about scale-ups, server configurations, etc., which, of course, are not the funnest things that we as developers can do, right? Now imagine Google being in charge of these tasks. I don’t know if we can find any better. But should we worry about security? What about privacy? No worries. Cloud Functions is fully insulated from the client so you can always be sure it is private and always does exactly what you want. But how does all this work? Now the first step is, of course, to create a function. And then we need to deploy the function to the Cloud Functions in Firebase. And then, next, we can use different events, triggers, or webhooks to invoke the function. What else can we do with Cloud Functions? We can trigger or call the function directly. Let’s say we don’t want to call the function on events or triggers, we can call the function directly of course. Then we can test the functions. So before we deploy our functions to production, we can always test them locally. And we can check how our function behaves by monitoring them.

Authentication

Most apps need to know the identity of a user. So based on the user’s identity, we can load only data related to that user. And Firebase offers a great service for authenticating users. With Authentication as a Service, Firebase has made it really easy to integrate Authentication in our new or existing applications. But why use Firebase Authentication? Firebase Authentication service is really easy to use and secure. By using Firebase Authentication, we can integrate in our apps email and password authentication or even social media authentication. Also by using Firebase Authentication, we can easily manage our users. We can reset the passwords, or we can even switch authentication ways or types by just one click. It is also really important to mention that Firebase Authentication integrates really well with other Firebase services.

Hosting

Firebase Hosting is a Google hosting service that provides fast and secure hosting for your web applications. But why should you use Firebase Hosting? One of my favorite features of Firebase Hosting is that you do not need to worry about SSL certificates because SSL is built into Firebase Hosting so content is always delivered securely. But what can we host in Firebase Hosting? Firebase Hosting supports all kinds of content for hosting, from your static CSS and HTML files to your Express.js, Microservices, or APIs. Now, Firebase Hosting service is part of the Google family, right? And what do we expect from Google more than anything else? Speed, right? Each file that we upload in Firebase Hosting is cached on SSDs at CDN edges around the world. This means that no matter where your users are, the content is delivered fast. And last but not least, in Firebase Hosting, reverting a bad deployment is as hard as one click. In Firebase Hosting, you can also share resources across multiple sites. You can create custom domains, or you can even use reserved URLs. Firebase platform also offers other important services like Cloud Storage, which is used to store and share user-generated content like images, text, etc. Also, we have real-time database, which is used to store and sync data between users and devices in real time. Dynamic Links is another Firebase service which is used to deliver customized user experience. And last but not least, App Indexing is another service. We use the App Indexing when we want the users to re-engage with their installed apps.

Summary

In this section, I covered the core Firebase services, and started by going over Cloud Firestore, which is a cloud NoSQL document database, and it is really great because it offers flexibility. We can create expressive queries. It is great for syncing data. And, of course, it is scalable. And, next, I covered Cloud Functions, and we learned that Cloud Functions are secure and really fast. Then, next, I covered Authentication, and we said that Authentication as a Service is really easy and secure. And, of course, we can manage our users by resetting their password, by changing authentication type, etc. Hosting was another service that I went over. We learned that by using the hosting service, we can share resources across multiple sites. We can use custom domains and even use reserved URLs. So, this was all for this section. In the next section, I am going to cover Firebase SDKs, Frameworks, Helpers and Utilities.

Firebase SDKs, Frameworks, Helpers, and Utilities

Introduction

Firebase is a really great platform which offers a lot of tools to make it easier for us as developers to create robust, secure and scalable apps. Google Firebase offers SDKs. It offers frameworks, helpers and utilities, and that is what I will be covering in this section. I am going to start with Firebase SDKs and cover the main Firebase frameworks. And at the end, I am going to cover Firebase helpers and utilities.

Firebase SDKs

Before we learn about Firebase SDKs, let us learn what an SDK is. A Software Development Kit, or SDK, is a downloadable software package that contains the tools you need to build on a platform. Basically, it is a set of tools used for development in a given platform. Except for the Firebase SDKs, we have, for example, .NET SDKs, which are used to develop apps for .NET platforms, and so on. But, what can we find inside an SDK? Inside an SDK, we can find libraries or APIs. These are basically predefined pieces of code that help us as developers to perform common programming tasks on a platform. Then, next we have the Integrated Development Environment. These are basically the tools that we use to develop applications. So, for example, the XCode is Apple’s IDE for developing iOS applications. While there are many IDE options for Android as well. An SDK has other tools which help us to do things like debug, build, run, and test our applications. What about Firebase? Now Firebase SDK is the official SDK for Firebase. And Firebase SDK enables us to have access to different Firebase services. Firebase SDK supports different platforms like Android, iOS, Web, and it also supports other programming languages or platforms like Java, Python, Unity, C++, Node, or even Go language.

Working with Firebase SDKs

In the last part, we talked about the most important Firebase SDKs. But first we learned what an SDK is. Now so far we know that Firebase is an app-development platform, which offers different services, and we can use these services from our apps. Now, Firebase SDK enables access to these Firebase services from different platforms. It’s important to know that many components of Firebase are open source. So by being open source, it means that the community can help build better Firebase SDKs. So let us say you want to access the Firebase services from an Android app, then in this case you can use the Firebase Android SDK. In the same way if you want to access the Firebase services from an iOS app, then you can use the Firebase iOS SDK. And if you want to use them for a web app, then you can use the Firebase JavaScript SDK. Firebase also offers a group of SDKs which are known as Firebase admin SDKs, and we use this group of SDKs when we want to access Firebase services from different privileged environments such as servers or cloud. So, for example, if you want to access the Firebase services from a server or cloud in Node.js, then you can use the Firebase Admin Node.js SDK. And if you want to access the services from a privileged environment such as a server or cloud in Java, then you can use the Firebase Admin Java SDK. And, currently, this SDK provides Firebase custom authentication support and Firebase real-time database access. Other than that, we have the Python SDK. We have the Go SDK and the .NET SDK when you want to access the Firebase services from a server in .NET. We said that if we want to access the Firebase services from an Android app, then we can use the Firebase Android SDK. But what does this SDK offer? And we have mentioned in the previous part that SDKs normally offer libraries, APIs, etc. And it currently includes different Firebase libraries to access the Firebase services. So for example, it has the firebase-database library, which is used to access the Firebase realtime-database service. It also offers the firebase-functions for the Firebase Functions service. It also has the firebase-firestore for the Firebase Firestore service. And another one is the firebase-storage library. This library is used to access the storage service in Firebase. It also offers other libraries like the firebase-common and the Firebase In App Messaging display. Then next we talked about the Firebase iOS SDK. But what does this SDK offer? It offers the FirebaseDatabase library, the FirebaseFunctions to access the Firebase Functions service, the FirebaseFirestore, the FirebaseStorage, and other services like FirebaseCore, FirebaseAuth, FirebaseInstanceId, FirebaseInAppMessaging, etc. Next, we said that Firebase JavaScript SDK implements the client-side libraries used by applications using Firebase services, and from here we can use the firebase-database, firebase-functions, firebase-firestore, and firebase-storage and much more. Other than the Firebase SDKs, we have the Firebase Admin SDKs. And we have SDKs for different platforms like Node.js, Java, Python, Go, and .NET. But why use Firebase Admin SDKs? By using the Firebase Admin SDK it means that we can have access to Firebase Realtime Database, we can have access to Firebase Cloud Messaging and we can also generate and verify Firebase Authentication tokens. Other than that, it means that we can have access to the Cloud Storage buckets and Firebase databases. But to use these Firebase Admin SDKs, there are some minimal requirements for each platform. So for example, if you want to use the Firebase Admin Node.js SDK, then you need to have the Node 8+ version installed. And if you want to use the Java SDK, then you need to have the Java 8+. The same goes for the Python SDK. In this case, you need to have the Python 3.4 or greater. When it comes to the Go SDK, then you need to have the Go 1.9 and later. And for the .NET SDK, if you are using the standard .NET version, then you need to have the 4.5 or later. And for the .NET Core you can use the 1.5 or later.

Firebase Frameworks

Other than Firebase SDKs, Firebase platform also supports different frameworks. Per definition, a framework is a library that provides a fundamental structure to support the development of apps for specific environments. The intention of designing application framework is to decrease the general issues that we face when we develop applications. And this is achieved by using code that can be shared across different modules of an application. But why would we want to use a framework? A framework serves as a wrapper, which means that it simplifies an interface to a technology, and it also helps us reduce the repetitive tasks. As a wrapper, a framework increases the app flexibility through abstraction. It also is an architecture because we use a framework to manage a collection of discrete objects. Other than that, it is a methodology because it makes sure that we use a consistent design approach. Now, since it is an architecture and a methodology, it basically means that it is a design pattern because design patterns are both architecture and methodologies. But which are the main frameworks that Firebase can work with? The first one is the AngularFire framework. By using the AngularFire, we can interact from our Angular application with our Firebase services. Another greate framework is the EmberFire, and the EmberFire framework is great for bindings for the Firebase Realtime Database and Authentication. Another one is the FlutterFire, which is a set of Flutter plugins that enable Flutter apps to use one or more Firebase services and it is used in Android and iOS.

Firebase Helpers and Utilities

Firebase as a platform offers different helpers and utilities that can be used to interact with the Firebase services. Some of the Firebase helpers are the FirebaseUI, the GeoFire, the FirebaseJobDispatcher, FirePad, and others like firebase-dart, firebase-queue, and firebase-util. But where do we use all these Firebase Helpers? Let us start with the first one. FirebaseUI is a helper which offers optimized UI components. The GeoFire, as the name already indicates, is used for location, but for realtime location queries. FirebaseJobDispatcher, as the name already indicates, is used to schedule background jobs. And the FirePad is a code and text editor. Other than Firebase Helpers, we have the Firebase Utilities. But which are the main ones and where do we use them? Firebase Tools is used as a Firebase command line tool. Then we have the Firebase Import, which helps import large JSON files into the Firebase Realtime Database. Then we have the Flashlight, which is an ElasticSearch integration with the Firebase Realtime Database. In conclusion, this section covered the main Firebase Helpers and the Firebase Utilities but, of course, you can learn more by going to their official documentation at https://firebase.google.com/.

Working with Firebase Helpers and Utilities

In the above section, I covered the main Firebase Helpers and Utilities. In this section, I am going to go over them in more details. So let us start with the first one, the FirebaseUI. FirebaseUI is an open source JavaScript library that provides simple and customizable UI bindings on top of the Firebase SDKs. So FirebaseUI is a set of open source libraries for Firebase that allows us to quickly connect to common UI elements. We can use the FirebaseUI for common tasks like, for example, displaying a list of items or collection of items or even how our items change in real time. Other than that, by using the FirebaseUI, we can simplify the Firebase Authentication because FirebaseUI provides authentication methods that integrate with common identity providers like Facebook, Twitter, Google, etc. FirebaseUI is available in three platforms, the FirebaseUI for iOS, Android and Web. Another useful tool is the Firepad, and Firepad is an open source collaborative code and text editor. Firepad was designed to be embedded inside larger applications. And as a back-end service, it uses the Firebase Realtime Database. Now since it uses the Firebase Realtime Database as a backend, it requires no server-side code and can be added to any web app simply by including the necessary JavaScript files. So by using Firepad, it means that in our apps we can now integrate a synchronous text editing tool and also a code editing tool. Other than that, Firepad is open source and it is extendable. It is important to mention that most collaborative text editors normally require special code to run on a server making them impractical to use if you are not already using the the right server stack. As I already mentioned, the Firepad has no server dependencies and instead relies on the Firebase Realtime Database for realtime data synchronization. We also have the Firebase Tools, and we use the Firebase Tools when we want to deploy code or assets, when we want to run a local webserver, for example, when we want to test our functions. Also, we can use the Firebase Tools when we want to interact with the Firebase Database. And last but not least, we can use the Firebase Tools to import or export users into or from Firebase Authentication service. Firebase Import is another great tool that can be used to import large JSON files into the Firebase Realtime Database, and it can also be used to upload chunks through the Firebase API. It is important to mention that Firebase Import can be used to import files upto 400 MB.

Summary

In this section we learnt about the Firebase SDKs, Firebase frameworks, and Firebase Helpers and Utilities. We started by going over Firebase SDKs. Then, next, we went over the Firebase frameworks where we talked about the AngularFire, the EmberFire, and the FlutterFire. We also talked about Firebase Helpers and Utilities. We talked about the FirebaseUI, the GeoFire, and Firepad. We also covered Utilities like Firebase Tools and Import and Flashlight.

Why and Why Not Firebase?

Introduction

We covered a lot of great services that Firebase offers. But, of course, other than Firebase, there are a lot of services out there that offer similar services. In this section, I am going to cover why and why not use Firebase. I am going to start with the Why Use Firebase where I am going to talk about the key features that Firebase has to offer. The next, I am going to talk about Why Not Use Firebase. And then at the end I am going to talk about some features that we, as developers, have to decide based on the apps that we want to build. So let’s get started.

Why Use Firebase?

Why should we use Firebase? We have talked so far that using Firebase means that your apps will be performant. They will be secure and integratable with other Firebase services or even third-party apps using webhooks. Why else would we use Firebase? We said that Firebase offers Authentication as a Service where we can use the default features of Firebase service or we can even modify the UIs. Then next, Firebase offers a great file storage service. Also, database backups are really easy with Firebase. And other than that, Firebase is great when it comes to auto-scaling. Firebase also offers a great command line interface, which can be used to interact with different Firebase services. Last but not least, Firebase also offers a free tier, which means that before you decide to pay for Firebase, you can always test the Firebase services.

Why Else Use Firebase?

We know so far that Firebase is a platform, and as a platform, we know that Firebase is performant, it is secure and it is easily integratable with other platforms. But why else use Firebase? During this part, we are going to talk about the main pillars that make us, as developers, proud to use such a great platform. We are going to start with Analytics. Then next, we are going to talk about the Development. And at the end, we are going to talk about the third pillar, which is the Engagement. So let us start with the first one. By using Firebase, it means that we have unlimited reporting capabilities because Firebase offers a capacity to report 500 different event types. Other than that, by using the Firebase Console, we can segmentize our audience. And last but not least, we can use different Firebase or third-party services for different analytics. For example, we can use BigQuery, or we can use the Firebase Crash Reporting service or Firebase Notifications service. The next pillar is the Development. So by using Firebase, we can use amazing services like Cloud Messaging, which is used for communication. Other than that, Firebase offers the Authentication service, and we have covered this service so far. Another great service that comes from Firebase is the Firebase Hosting, which is used to host our apps. Next, we have the Remote Configuration. We have the Test Lab which can be used to test our apps before we deploy them to production. We have the Crash Reporting, which is a really great service that can be used to check how our app behaves. Other than that, we have the Realtime Database for realtime communication and the Firebase Storage for storing data. The last pillar and the third one is the user engagement. So by using different Firebase or third-party services, we can grow our user base, which means that we can increase the income. So we can use the AdWords. We can use App Indexing, Dynamic Links, and Notifications. And if you want to monetize your Firebase applications you can use the AdMob.

Why Not Use Firebase?

We have talked so far about different reasons why we want to use Firebase. But why wouldn’t we want to use Firebase? Now, Firebase is a great platform. It offers different services, and it is secure. But Firebase offers limited SDKs. This means that there are some services in Firebase which don’t have SDKs for all the platforms. So, for example, the Firebase Predictions service has SDKs available only for iOS and Android, but not for Web. We also mentioned that in Cloud Firestore, Cloud Firestore queries are indexed, which means that they are really performant. But when it comes to queries, Firebase queries are limited. You cannot do everything with Firebase queries, but you can of course do the main operations. And we have also mentioned that Firebase Databases are NoSQL databases, which means that it is a great database if you want to use a NoSQL DB. Other than that, we have said that when using Firebase, the data is being stored across multiple Google servers, which means that your data is not yours. Also when it comes to data migration, data migration is not easy in Firebase. Now there are some features in Firebase that we, as developers, get to decide if we want to use Firebase based on the app that we want to create. So, what else has Firebase to offer that we need to decide? When it comes to Firebase, for defining rules, we use JSON files. And in JSON files, we use JavaScript code. We also mentioned that Firebase offers the Firebase Console, which is great when you want to interact with different Firebase services, but it also doesn’t offer a lot of features. But, of course, Firebase Console is being developed really fast. Other than that, Firebase doesn’t offer local development. In Firebase you can test your functions locally, but you cannot really work with Cloud Firestore or Firebase Realtime Database locally. You need to always have a reference to these Firebase services.

Summary

We covered about using Firebase where we learnt that Firebase is great for performance, security, and it integrates really well with other Firebase services or even third-party apps using webhooks. Other than that, we said that Firebase offers limited SDKs and queries. By the end of this section, we talked about the Firebase Security rules and how we write them using JavaScript code in JSON format, how the Firebase Console doesn’t offer a lot of stuff, but, of course, it is always being improved, and that Firebase is not great for local development, but you can always test your functions locally. So

What is RxJS?

Posted on by Vivek

RxJS is short for Reactive Extensions for JavaScript. Reactive extensions were originally developed by Microsoft as Rx.NET. Since that time, the Reactive extensions library has been implemented for several other languages, including Java, Python, Ruby and JavaScript. But that doesn’t really answer the question.

What is RxJS? According to the documentation, “RxJS is a library for composing asynchronous and event-based programs by using observable sequences.”

What does that mean? Think of RxJS as a way to manage data as it flows through time, similar to how Apple’s flow on a conveyor belt. First we collect. Apples are picked, hauled and loaded onto a conveyor, creating a stream of apples. Similarly, we use RxJS to send an HTTP request and receive the response, creating a stream of data. The stream is observable. We can watch it as items are added or emitted to the stream. We pipe the stream of apples through a set of operations. As each apple flows through, we transform the apple by cleaning it, filter it by quality or size, and process it of fixing a label, for example. Likewise, we pipe our data through a set of operations to transform, filter or process our data. Using query like operators, we combine streams to merge their results. In our apple example, we combine the green apple stream with a red apple stream to create a mixed bag of apples. Correspondingly, we combined a stream of customer data with the stream of invoice data to display a customer with their overdue invoices, and we can cache the stream. This one doesn’t fit as well into our apple metaphor. But when working with data, we may want to cache it in a service to reuse the data without another HTTP request.

Going back to the definition, we restate this as “RxJS is a library for composing observable streams and optionally processing each item in the stream using an extensive set of operators.” RxJS helps us better manage and manipulate the data needed in our application. There are other techniques for  managing asynchronous and event-based data.

A callback is a function that can be called back after an async operation is complete, but callbacks can be difficult to manage when working with nested async operations.

A promise is an object that may produce a single value sometime in the future. It can only handle a single emission and is not cancelable.

async/await is a special syntax that allows writing asynchronous code that looks synchronous. It also can only handle a single emission and is not cancelable.

Why use RxJS and not one of these approaches? Using RxJS has several advantages. RxJS provides a single technique for working with any type of data. We often work with multiple sources of data. Events from the keyboard, mouseover routes and data from various files, databases or third party APIs. With RxJS, we work with different data sources using the same techniques and operators. Our views often require data combined from several sources. We easily compose data with RxJS. RxJS can produce multiple values over time and uses a push model to notify our code when specific actions occur, making it easy for us to watch and react to user interactions or data changes. RxJS is lazy. Evaluation does not start until subscription. So we can create recipes that only execute when we need the result. For the best user experience we want to handle errors gracefully. RxJS has built-in error handling and with RxJS we can cancel asynchronous actions. For example, if a user clicks on Product A and then quickly clicks on Product B, we can cancel the request for Product A and only return Product B.

So many great advantages to RxJS that Angular built it in into several key features. For example, Angular uses RxJS in routing to watch for changes to route parameters, route data or router events. In Reactive Forms to watch for value changes as the user modifies input elements on a form and when communicating with the backend server, sending requests and receiving responses using HTTP client. That’s why Angular installs RxJS as part of its core set of libraries. We can expand our use of RxJS in our Angular applications to move towards more Reactive Development.

What is Reactive Development?

From Wikipedia, Reactive Development, also called Reactive Programming, is a declarative programming paradigm concerned with data streams and the propagation of change. As the user makes a selection, data is retrieved from a backend server or some other system status changed. That change is propagated and the application reacts appropriately updating the display or performing another action. In addition, reactive development is functional.

“The essence of functional reactive programming is to specify the dynamic behavior of a value completely completely at the time of declaration.” – Heinrich Apfelmus.

Reactive Development

A reactive system is quick to react to user interactions, resilient to failure with good error handling and reactive to state changes, meaning the code watches for change events and reacts, instead of procedurally calling methods.

Introducing GatsbyJS

Posted on by Vivek

Overview

There is a new modern web development architecture in town called the JAMstack. It is based on client-side JavaScript, reusable APIs, and prebuilt markup. GatsbyJS embraces this philosophy by creating blazing-fast and secure apps and sites using modern technologies like React and GraphQL. In this article, we are going to build a complete modern static blog site with Gatsby using React components and GraphQL and a methodology in line with the JAMstack, all thanks to the power of GatsbyJS. We will be using GatsbyJS version 2 to build a fast static blog that you can host very cheaply, even for free if you wish, all with unprecedented speed and very secure in nature. Static sites also have the added advantage of being great with regards to search engine optimization (SEO), so that is also a plus. Some of the major topics that will be covered include how to get started creating static sites with GatsbyJS; creating reusable React components like headers, buttons, and footers; working with Gatsby’s plugins and extensibility points; using GraphQL to query for data; and deploying a static site to a modern web hosting provider. This article assumes you are familiar with basic JavaScript, HTML, CSS concepts, basic knowledge of the command-line interface and running basic commands.

The JAMstack Architecture

Before we start to learn about GatsbyJS, I think it’s important to understand about this new concept called the JAMstack. What is JAMstack? JAM stands for JavaScript, API, and Markup. The term was coined by Mathias Biilmann, cofounder of Netlify . As per the definition on the official JAMstack website, JAMstack is a modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup. In other words, a site that adheres to JAMstack only uses static content like HTML, images, CSS, JavaScript, and calls external APIs over HTTP that typically exist in the form of REST endpoints. These APIs can be created by you or by an external organization that provides a particular service. The client logic lives in the static JavaScript files, and the business logic comes from these external endpoints. In more traditional applications, the rendering of a site happens on the server at runtime, while in a static site, the rendering happens at build time in your computer while building the application or in a build server if you wish to do so.

So what are the advantages of using the JAMstack? For starters, JAMstack offers better performance compared to server-side rendered applications, especially if you host your static site in a CDN, you can get subsecond access times in this way. Static sites offer better security because they offer a reduced attack surface compared to dynamic sites. Removing system components, like a database from the equation, can have significant advantages, including eliminating SQL injection attacks. Moving he business logic away from your app also decreases the risk of an attack. Now it’s the responsibility of API creators to secure that part of the application. Static sites are cheap to host and scale. You can serve your site in more places faster. Finally, if your goal is good SEO performance, static sites can also dramatically improve the discoverability of your site.

So to recap, when is a site built with JAMstack in mind? A site is built with JAMstack in mind when all site components are static; you create site assets like HTML pages at build time instead of runtime; when it uses JavaScript to add dynamic programming on the client side, it could be any front-end framework like Angular, Vue, or React, for example, or a library such as jQuery or even plain old vanilla JavaScript; uses markup that is HTML, but also CSS, images, or any other type of static content; and finally, it calls external APIs that perform the heavy lifting when business logic functionality or database access is required.

Now let’s see when a site does not adhere to JAMstack. If you build a site with a server-side render framework like a content management system (CMS), such as WordPress, for instance, your site does not adhere to the JAMstack framework. The same applies to a web-application created with more established frameworks like C#, and .NET, Java, and Spring, and Node, and Express just to name a few. These frameworks render your application in the server, hence not adhering to JAMstack either. A less intuitive example is a single-page application created with a front-end framework like Angular, Vue, or React that is isomorphic in nature that is a sort of a blended server-side rendered application and a single-page application.

So what does Gatsby and JAMstack have in common then? Well, Gatsby adheres to all tenants in the JAMstack, and does it magnificently using the best technologies and workflows that work in tandem to provide a great user experience for developers. Now that we have a clear understanding of JAMstack and its advantages, it’s time to explore Gatsby in more detail. We will do that next.

What is GatsbyJS?

GatsbyJS is a modern front-end framework for creating static sites and applications. It’s been built upon modern technologies such as React, GraphQL, and Webpack, amongst other front-end technologies. One thing that makes Gatsby unique is that you  don’t have to know React or GraphQL to start working with Gatsby. You can learn Gatsby as a way to introduce yourself to the world of React, GraphQL, and modern front-end development in general. Its creators have taken out the guesswork of configuring a modern workflow to build sites based on these technologies; therefore, creating sites with Gatsby is fun, productive, and easy, and the results are great. I mentioned React and GraphQL, but what are these and what do they do?

React is a JavaScript library for building modern user interfaces. It was created by Facebook to help their development teams in creating modern and responsive applications. Along with Vue and Angular, it’s the defacto framework to build modern apps today. With React, the focus is on building small components that you can reuse throughout the application.

GraphQL is also a technology created by Facebook and is a query language that allows you to query for data in a declarative way by describing the data you intend to get from a data source. It lets you specify the data your application needs and gets that data in the format you initially requested. We will be using GraphQL for querying data when building blog site.

The goal of Gatsby is to create static sites and applications comprised of HTML, CSS, JavaScript, and other static content. The difference between Gatsby and other static site generators is the way Gatsby accomplishes this goal. Think about the different types of data. It could be Markdown files, an external database, or an API, a JSON file, or even a text file. Gatsby lets you query with this data with GraphQL in the format you need. For example, you can query data from a Markdown file sitting in your local drive that you intend to use as the content for our blog post. GraphQL grabs the file content, its file name, the blog post title, and the creation date and uses this information to create a static HTML file ready to be uploaded on the server.

Okay, another example. Let’s say you want to create a page with a list of popular products that your company sells. This data changes once every three months or so and resides in a database. The traditional approach was to create a server-side rendered application that connects to a database, generally, through a endpoint exposing this data and then generate the page on the fly at runtime with the desired information. With Gatsby, we take a different approach. We call the endpoint with GraphQL, fetch the data you need, and then create a static HTML page with the required data. The information is only queried once and served from the server as a prebuilt static HTML file. Another cool thing about Gatsby is its rich plugin ecosystem which brings a lot of functionality to Gatsby.

Alright, we went over React, GraphQL, and the merits and benefits of static sites and using Gatsby. Gatsby is the way to go when you want to build a site that is fun to develop, uses a modern workflow and future-proof technologies, adheres to the tenants of JAMstack, is fast, secure, inexpensive to host, and has excellent SEO capabilities.

Gatsby goes beyond creating static sites. React and GraphQL are used by thousands of companies and developers to create sophisticated web applications. Since Gatsby uses React, we can use Gatsby to develop sophisticated web applications as well.

Lastly, I want to go over browser support for Gatsby briefly. Gatsby currently supports the same browsers as the current stable version of React, that is Internet Explorer 9 and above, as well as the most recent versions of other popular browsers. They are also known as ever-green browsers, in other words, browsers that self-update. Next, let’s go over the installation process of GatsbyJS.

What is the Web Animations API?

Posted on by Vivek

In the context of web apps, animation is nothing more than the visualization of change over a specified duration. This visualization of change is very important because when done right we can use this to dramatically increase the user experience of an app and make our apps feel more refined and well designed.

At the highest level, the Web Animations API is a standardized JavaScript API which is baked into browsers that allows developers to animate DOM elements. CSS was always been the most performant way to animate on the web because the CSS animations engine can run animations on the GPU instead of the CPU allowing us to achieve smooth 60 fps animations. The Web Animations API finally allows us to write animation logic using JavaScript and opens up the browsers animation engine allowing us to run these animations on the GPU. As well as performant animations there are host of other benefits the Web Animations API provides us. Because it is a JavaScript API we can easily create dynamic animations by altering durations, easing methods and other variables; something which is very hard to do in CSS. The API provides very flexible playback control which allows us to Pause, Rewind, Skip and even change the rate of playback and more. The API is Promise based so it is really easy to chain multiple animations or run other logic when the animation completes. And because the Web Animations API is a browser feature there are no external dependencies to manage or maintain. Today most JavaScript libraries take a component based approach. Whether that’s using Angular, React, VueJS or just native web components the Web Animations API fits in with this architecture because the JavaScript used to create this animations can be embedded into the components easily without any dependencies. These are great benefits provided by the Web Animations API which we can use to harness the power of the GPU to create silky smooth animations that are dynamic and flexible.

Learning the Angular CLI

Posted on by Vivek

Exploring the Angular Command Line Interface (CLI)

Installing the CLI

sudo npm install -g @angular/cli
ng --version

Using the CLI

ng --help
ng build --help

Creating New Angular Projects

The ng new command

ng new app-name

New project generation options

ng new --help
ng new app-name --routing
ng new app-name --style=scss --routing --dry-run
ng new app-name --style=scss --routing --prefix=vsrao

Serving Angular Applications for Development

The ng serve command

ng serve --help
ng serve
ng serve --open

Customizing the development server

ng serve --port=8000 --open
ng serve --host=whatever.dev.company.com --open

Generating Angular Application Code

Creating new code with blueprints

With the Angular CLI you can generate the different entities used to build your application. You will be able to easily generate Components, Directives, Services, Pipes, Models and Interfaces, Route Guards and Modules. When generating a blueprint, your command will follow the following template:

ng generate [schematic] [name] [options...]
ng generate --help

Available schematics: application, class, component, directive, enum, guard, interface, module, pipe, service, universal and appShell.

Generating components and modules

ng generate component contact-list --dry-run
ng g c contact-list --dry-run
ng g c contact-list --dry-run --flat
ng g c contact-list
ng generate module shared
ng generate component shared/avatar --module=shared

Generating directives

ng generate directive shared/directives/non-numeric --module=shared

Generating services

ng generate service services/api
ng generate service services/api --module=app

Generating pipes

ng generate pipe pipes/phone

Generating models

ng generate class models/contact

Generating interfaces and enums

ng generate interface models/contact
ng generate enum models/contact-type

Generating route guards

ng generate guard auth

Building Angular Applications

A build pipeline for an Angular app

There are many steps involved in building an Angular application. Since Angular applications are written in TypeScript and ES6 and beyond, the build pipeline is quite involved. We need to Transpile TypeScript and ES6+ code, bundle our application into one file, or split across many, minify files by removing newlines and white space, mangle our application bundles to make files even smaller, and also generating source maps. Aside from that, we also need to deal with CSS and other assets, such as compiling from Sass to CSS, possibly inlining CSS, having scoped styles, and copying or inlining images. As you can see the process is very involved, but the Angular CLI takes care of all this for us using Webpack under the hood, all with a simple command, ng build. The ng build command also comes with several options.

Configuring different build options

By default, the ng build command runs a development build due to which the JavaScript bundles are not optimized meaning they are neither minified nor uglified for performance. Also the bundle names do not contain a hash for cache busting.
A production build can be run using ng build --prod. For generating source maps in a production build we need to use the ng build --prod --sourcemap command. Lastly, if you wish to analyze the generated bundle files, using a tool such as webpack bundle analyzer use the ng build --prod --stats-json command. Running this command will generate a stats.json file, which you can then upload on webpack.github.io/analyse/ . On this site, you can analyze the different bundles that the build pack run generated for you. You can analyze chunks, the assets, and see the size of each of them.

Setting up build scripts

In the package.json file, we can setup the below npm scripts:
"build:dev":"ng build --stats-json"
"build:prod": "ng build --prod --stats-json"
Setting up npm scripts will make automation much easier.

Running Tests

Built-in test runners and scaffolding

When you create an Angular application using the CLI, a testing pipeline is already set up for you. To run your unit tests, a karma configuration file, karma.conf.js is generated. Karma is used as a test runner using jasmine as a testing framework, and is set up, by default, to run your tests in Chrome. Additional setup can be seen in test.ts. Essentially, this provides additional setup to initialize the Angular testing environment. You can write your tests in TypeScript and the CLI will take care of transpiling that for you.

The ng test command

In order to run your unit tests, you use the ng test command. This will take all of your spec files, transpile them in memory, and run your unit test in Chrome.

Test run options

Running the ng test command runs the test in watch mode. However, if you prefer not to do that, you can use a single run flag. By running the ng test --single-run command the test will only run once and then exit. This will be needed in a Continuous Integration environment.
You can also generate code coverage reports when running your tests. To do so, you need to use the code coverage flag. Running ng test --single-run --code-coverage command will not only run your tests but will also generate code coverage reports using Istanbul. Once it is complete, it will create a new coverage folder, with an index.html page for your report.

Ejecting from the Angular CLI

The tooling provided by the Angular CLI is quite extensive. It can generate applications, application code, and also set up build and testing pipe lines for you. However, it is not uncommon for a development team to ask specific needs over the build process, in order to have finer control. It is for these purposes that the Angular team created an eject feature. You can use this feature if you feel that you want to manually take care of running and building your application. To do so, you can use the ng eject command.

Conclusion

The Angular CLI is truly a great tool that will allow you to be productive building Angular applications. I recommend subscribing to notifications on this GitHub repository – https://github.com/angular/angular-cli/, as it will allow you to keep up to date with new features and be notified of new releases. The Angular team have some great things planned for the CLI. I also recommend subscribing to the official Angular Blog – https://blog.angular.io/ for keeping up to date.