ANGULAR 7 V/s FIREBASE

Barry

Origin of Angular:

Originally developed in 2009 by Misko Hevery at Brat Tech LLC as the software behind an online storage service, to make exceptional and user-friendly applications for the enterprises or organizations Angular is a Java-script based framework. It is a platform that makes it easy to build applications with the web. Angular mainly combines declarative templates, dependency injection, end to end tooling, and non-segregated practices to solve the development challenges . Angular empowers developers to build applications that live on the mobile, web or desktop.

Functionality of Angular

In computer science, declarative programming is a paradigm, a style of building components and structure of computer programs . Declarative Programs often considers programs as theories of a formal logic, and computations as deductions in that logic space. Declarative programs may greatly simplify writing parallel programs. Angular is based on a particular belief that declarative programming should be used to create user interfaces and connect software components.

JOIN OUR NEWSLETTER
Not Every One Focuses On Your Requirements! Get What You Want- Revenue & Ranking Both. Make Money While Stepping Up The Ladder Of SERPs.
We hate spam. Your email address will not be sold or shared with anyone else.

Angular had 6 versions and now it has recently released their 7th version, i.e. , Angular 7.0 . So one may ask that what the new features are in this new version of Angular. Here are the new features of angular 7.0:

  • The Angular CLI will trigger the user to select if they want to add any feature like the format of the style sheet or add features like Angular routing they want to use in their application.
  • The Bundle Budget feature of Angular will be used by the new version of Angular 7.0 , which will help the developers to be warned about the bundle limit and if it is exceeding or not . The default value which is set to 2mb will exceed to 5mb in the case of errors. This value is can be customized and is configurable from ANGULAR.JSON file. This feature enriches the application’s performance.
  • As a part of this update the Component Dev Kit (CDK) of Angular material also gets upgraded. The new features that gets added to the CDK are :
    1. Drag and drop ,
    2. Virtual Scrolling.

The Drag and Drop Feature:-

With this new added feature to CDK one can easily drag and drop feature to an item. What it mainly does is , it supports features such as free dragging of an element , moving items between the list , animation , adding custom drag handle etc. and restricted dragging around X and Y axis .This Drag and Drop module provides you with way to easy and declarative drag and drop interfaces.

The Virtual Scrolling Feature:-

<cdk-virtual-scrool-viewport>, can be of great help if you are trying to load a large list of items , and doing which is affecting you’re your application’s performance . When a When a user scrolls through the list then the DOM will load and unload the elements dynamically based on the display size. This feature is not to be mixed up with infinite scrolling which is altogether a different strategy to load elements.

  • More usability and enhanced performance can be provided to an application with this mat-form-field which now will support the native select element. <mat-select> is a form control for selecting a value from a set of options, similar to the native <select>element. Angular Material also supports use of the native <select> element inside of <mat-form-field>. The native control has several performance, accessibility, and usability advantages.
  • Angular 7.0 has upgraded its dependencies to support Typescript 3.1, RxJS 6.3 and Node 10.

The Angular CLI Installation:

Now coming to the installation of Angular CLI, which is the command line Interface for Angular and it helps us to initialize, develop and maintain Angular applications easily. To install Angular CLI, run the following command in the command window: npm i -g @angular/cli, this will help you to universally install Angular CLI 7.0 in your machine.

Image Source: https://bit.ly/2Q7sji8

To check the version of Angular in your machine run the following command

Image Source: https://bit.ly/2A6skc5

How to create the Angular 7 application:

Now coming to a very important topic that is how to create Angular 7 app, to do it one needs to open Visual Studio code and navigate to View >> Terminal , which will open the VS code terminal window . There is also a keyboard shortcut which can be used to open the terminal window, that is, ctrl+. Then one needs to type the following sequence of command in the terminal window, which will create a directory named “ng7Demo” and then create an Angular application with the name “ng7App” inside the directory. As soon as the ng commands are given the Angular CLI will be prompting questions like:

  • Would you like to add Angular routing? (y/n)
  • Which of the stylesheet format would you like to use?

As soon as you click your suitable options and hit enter your Angular 7 app will be created.

Image Source: https://bit.ly/2S0TOY3

for better understanding click on the link mentioned above.
Now after you have created the app successfully, you need to run the following command to open the project:

Image Source: https://bit.ly/2DOtHk3

This will open the code file of your application in a new VS Code Window which you can see in the following file structure in Solution Explorer:

Image Source: https://bit.ly/2Q4HSHt

As you will open the package.json file you will observe that we have the latest Angular 7.0.0 installed in our package.

{
"name": "ng7-app",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "~7.0.0",
"@angular/common": "~7.0.0",
"@angular/compiler": "~7.0.0",
"@angular/core": "~7.0.0",
"@angular/forms": "~7.0.0",
"@angular/http": "~7.0.0",
"@angular/platform-browser": "~7.0.0",
"@angular/platform-browser-dynamic": "~7.0.0",
"@angular/router": "~7.0.0",
"core-js": "^2.5.4",
"rxjs": "~6.3.3",
"zone.js": "~0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.10.0",
"@angular/cli": "~7.0.1",
"@angular/compiler-cli": "~7.0.0",
"@angular/language-service": "~7.0.0",
"@types/node": "~8.9.4",
"@types/jasmine": "~2.8.8",
"@types/jasminewd2": "~2.0.3",
"codelyzer": "~4.5.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~3.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~3.1.1"
}
}

Demo to Execute:

The name of the Angular application is ng7App which is inside the ng7demo directory, so one needs to first navigate to the application using the commands below:

  • cd ng7Demo
  • cd ng7App

Now by the using the command “ng serve” one can start the web server.

Image Source: https://bit.ly/2FvkM8A

After you run the command, you will see that it will ask you to open http://localhost:4200 in your browser. So now you can open any browser on your machine and then you can navigate to this URL. After you navigate you can see this following page:

Image Source: https://bit.ly/2AhzN8v

How will you update to the new version : Angular 7

The Angular team has provided an Angular update guide to ensure the smooth upgrade of Angular versions and to access it you need to navigate to http://update.angular.io/ . It is undoubtedly a user friendly application. It will show you the steps which you need to follow before updating, during the upgrading phase and after the upgrading phase. Just like the image:

Image Source: https://bit.ly/2QYx9eL

If you want to upgrade your application from Angular 6 to Angular 7 then you run the following command in the project folder ng update @angular/cli @angular/core.

Now you know what are the new features of Angular7.0, how to install it in CLI 7.0 , and how to create and execute an Angular 7.0 using Angular CLI and VS code . Also now you know how to upgrade an existing application to Angular 7.

The Modules:

|-- modules
|-- home
|-- components
|-- pages
|       |-- home
|                |-- home.component.ts|html|scss|spec
|
|-- home-routing.module.ts
|-- home.module.ts

There is a very interesting topic by Tom Crowley named “ANGULAR FOLDER STRUCTURE” where he is working in a very light Angular project to an extremely solid folder structure . There the idea of modules, with assigned folders for pages and components, is appropriate for scaling and component.

The Core module takes on the role of root app module, however it is not the module that gets bootstrapped by Angular at run time. The core module should contain singleton services, which is generally the case, and should also contain universal components and other features. You should also add a guard for the core module to prevent the re-importing the core module elsewhere.

|-- core
|-- [+] authentication
|-- [+] footer
|-- [+] guards
|-- [+] http
|-- [+] interceptors
|-- [+] mocks
|-- [+] services
|-- [+] header
|-- core.module.ts
|-- ensureModuleLoadedOnceGuard.ts
|-- logger.service.ts

The Shared module is where any shared components, filters and pipes should go. The Shared module must not have any dependency to the rest of the application and therefore must not rely on any module.

|-- shared
|-- [+] components
|-- [+] directives
|-- [+] pipes

The component folders contain all the “shared” components. This components are like loaders and buttons, from which multiple components gets benefited from and the directive folder contains directives, pipes and models

|-- directives
|-- auth.directive.ts|spec.ts
|-- pipes
|-- capitalize.pipe.ts
|-- safe.pipe.ts|-- models
|-- user.model.ts
|-- server-response.ts

In most apps components and services of particular feature module will usually only have to have access to services from the Core module and components from Shared Module. Sometimes this might not be enough to solve particular business case and we will also need some kind of “shared feature module” which is providing functionality for a limited subset of other feature modules.

In this case we will end up with something like import {Some Service} from ‘@app/shared-feature’; So similarly to core, shared-feature is also accessed using @app alias.

Image Source: https://bit.ly/2Q8u9iD

Firebase:

Established back in 2011 by Andrew Lee and James Tamplin , Firebase was finally launched in April 2012. The framework was expected to be a real-time database giving its APIs, enabling users to store and synchronize information across various customers. However, the plans changed a little bit when Firebase was taken over by Google two years after its release. Today, the service has various functions that a wise entrepreneur may find exceptionally valuable. Firebase has reached from 110,000 developers when it was initially obtained by Google in October of 2014 to a booming number of 450,000 plus developers at present.

Firebase is a framework which is help for building portable and web application for your business with real-time database which implies when one user updates a record in the database, that update would be conveyed to every single user, be those users on a website, iOS or Android device. It gives a basic and unified platform with so many Google features packed-in. You don’t need to configure your server when you use Firebase. Everything will be taken care of by Firebase automatically.

Benefits of using Fire Base

Real-time Database:

Real-time Database  is a cloud-hosted database. Data is stored as JSON and synchronized continuously to each associated client. When you build cross-platform applications with iOS, Android, and JavaScript SDKs, the greater part of your customers’ demand is based on one Real-time Database instance and consequently getting updates with the most current data. By utilizing this feature of Firebase, there is no necessity to make your own database or own API, Firebase handles all the components that usually come along with creating a backend for applications. It gives an adaptable, expression-based rules language to define how your data should be organized and when information can be perused from or composed to.

Hosting:

Hosting is production-grade web content that facilities the developers. With Hosting, you can rapidly and effectively send web applications and static content to a Content Delivery Network (CDN) with a single command. It is very easy process in Firebase because it contains Custom domain support, Global CDN and Auto Provisioned SSL Certificate ideas for that. Whether you are sending a simple application landing page or a complex Progressive Web App. Hosting gives you the infrastructure, features, and tooling tailored to convey and manage static websites.

Authentication:

Firebase Authentication gives backend services, simple to-use SDKs, and instant UI libraries to confirm clients over your application. It supports authentication using passwords, email id or username.

You can allow users to sign in to your Firebase app either by using Firebase UI as a complete drop-in authentication solution or by using the Firebase Authentication SDK to manually integrate one or a few sign-in techniques into your application.

Storage:

It is built for application developers who need to store and serve user-generated content, for example photos or videos. It gives secure document transfers and downloads for Firebase applications, regardless of network quality. You can utilize it to store pictures, sound, video, or other user-generated content. Firebase Storage is upheld by Google Cloud Storage, a capable, basic, and cost-effective object storage service.

Cloud Messaging

It is a cross-platform messaging solution that lets you dependably convey messages at zero expense. You can inform a customer that new email or other information is accessible to sync. You can send notification messages to drive user reengagement and maintenance.

Remote Configuration

It is a cloud service that gives you a chance to change the conduct and appearance of your application without requiring users to download an application update. Your application controls when updates are applied, and it can as often as possible check for updates and apply them with a negligible effect on execution.

Test Lab

Test Lab is utilized for testing your application on gadgets hosted in a Google data-center. It helps you to find issues that only happen on particular gadget configurations. A test result includes logs, videos, and screenshots which are available in your project in the Firebase console. Even if you haven’t composed any test code for your application, Test Lab can practice your application consequently, looking for crashes.

Crash Reporting

Crash Reporting helps to create detailed reports of the errors which are assembled into groups of comparative stack flow triaged by the severity of effect on users. In addition to automatic reports, you can register custom events to help capture the steps which lead to a crash.

App Indexing

By using this component you easily get to index your application in Google Search. For an instance, if your application is already installed in user’s device when he searches for related content, it will live your app directly from the search results. If users have not installed your application yet, an install card shows up in search results.

Dynamic Links

They are the smart URLs that dynamically change behavior to provide the best experience across various platforms. You can use it in web, email, social media, referral or any promotions to increase user acquisition, maintenance, and value to Gain end-to-end understanding into all your development channels through analytics on the Firebase console.

Invites

Word-of-mouth is an outstanding and amongst the best methods for motivating users to install your application. It is a cross-platform solution for sending customized email and SMS invitations, onboarding of clients, and measuring the effect of the invitation.

AdWords

You can characterize custom audiences in the Firebase console based on device data, custom events, or user properties. By using this you can achieve potential clients with the help of online advertisements. You can gain deep insights into promotion conversions, and run targeted advertisement campaigns using Firebase Analytics to engage your audiences.

Ad Mob

It is a simple approach to adapt mobile apps with focused in-application promoting. It is mobile advertising platform which you can use to create revenue with the help of your application. Using it with Firebase Analytics gives you extra application usage information and analytics capabilities.

Why Angular and Why Firebase:

While Angular is an open-source front-end framework developed by Google for creating dynamic, modern web apps however, the majority of the above can now be executed when utilizing Firebase. One feature rich platform. However, they have their own limitations and trade-offs also. For example, unless your application is running over unified database which is being modified by a vast number of users simultaneously & the updates are required to be notified, the use of Firebase is not legitimized. Since essential review functions can be performed by MySQL database. It does not have any SQL features so if you want to send an email to a group of users, you’ll need to put the JSON into your favorite programming language and build the list manually or additionally write information to an SQL database for querying later. Having rapidly evolved from AngularJS in 2010 to Angular 5 in 2017, the front-end framework is today used by more than 44.3% of software engineers for creating user interfaces. Consistency in coding makes reading the code a piece of hot cake for the developers, which adds to their productivity. Enterprise applications can grow quite large and the ability to divide the labor across multiple team members while keeping code organized is definitely achievable with Angular. However, once a team architects modules appropriately they can reap the benefits when it comes to the division of labor, code consistency, productivity, and maintenance.

Building an application or website may seem to be a very exhaustive process at first sight involving investment of significant time and cost. However, there are many services available which can facilitate the development work in various ways. Firebase is one of them. This giant is ready to take away a significant part of the burden from the developer’s shoulders. If you have a business application or are considering starting one, Firebase is the one of the good options available for that. This interface actually has all that you could need to begin a fruitful business application or to launch your current configuration forward in the right direction. Between analytics, development, growth, and money-making considerations, you will be set with this platform for a long time of continued success. It helps to save a lot of time helping the developer to concentrate on the core functionalities that make application or websites faster, extraordinary and easy to use.

Header Image Source: https://bit.ly/2QTvPtK

mm

Barry Davis is a Technology Evangelist who is joined to Webskitters for more than 5 years. A specialist in Website design, development & planning online business strategy. He is passionate about implementing new web technologies that makes websites perform better.

Facebooktwittergoogle_pluspinterestlinkedin

Interested in working with us?

We'd love to hear from you
Webskitters LLC
7950 NW 53rd St #337 Miami, Florida 33166
Phone: 732.218.7686