Google Firebase: The Big Picture

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

Learning the Angular CLI

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.

Essential Extensions for Brackets

Brackets has an extensive array of extensions for enhancing your front-end development workflow.

  • Emmet – The Emmet extension for Brackets, if you take the time to learn it, provides wonderful shorthand snippets for quickly coding in HTML and CSS.
    1. Emmet Plugin
    2. Emmet — the essential toolkit for web-developers
  • Indent Guides – The Indent Guides extension for Brackets adds helpful guides to your code, making it easier to see where one section ends and another begins.
    1. A Brackets extension to show indent guides in the code editor
  • Beautify – The Beautify extension for Brackets does exactly what its name implies. It takes sloppy, unformatted markup and makes it look beautiful by adding spacing and indents that to make it easier to read.
    1. Brackets Beautify 2.x
  • Autoprefixer – The Autoprefixer extension for Brackets parses through your CSS code and adds vendor prefixes to your styles to make it as browser-friendly as possible.
    1. Brackets Autoprefixer
  • Lorem Pixel
    1. Brackets Lorem Pixel
  • CDN Suggestions – Using a Content Delivery Network is a great way to link to commonly used libraries like jQuery and Bootstrap. CDN Suggestions is a plugin that will give you quick access to all of the most popular CDN links available.
    1. CDN Suggestions
  • HTML Wrapper – The HTML Wrapper extension for Brackets provides a great shortcut for surrounding plain text with list item tags, anchor tags, and more.
    1. HTML Wrapper Extension
  • CanIUse – The CanIUse plugin provides a quick-access panel in Brackets where you can search for information about browser compatibility on the CanIUse website.
    1. CanIUse Extension

Useful Tools

  1. embedresponsively.com helps build responsive embed codes for embedding rich third-party media into responsive web pages. — embedresponsively.com
  2. dabblet is an interactive playground for quickly testing snippets of CSS and HTML code — dabblet
  3. An online tool to display formatted source code — Syntax Highlighting
  4. CodePen is all about front end code inspiration, education, and sharing. Enter HTML, CSS, and JavaScript and the combined result is displayed below. – CodePen
  5. JSFIDDLE
  6. JSDB.io is a collection of the best javascript libraries
  7. DevDocs combines multiple API documentations in a fast, organized, and searchable interface.