Web Development Using Angular: A Case Study

Web development is same as building a house. Just like we require a plan, a building permit and license from city, web development also requires documentation, appropriate server, designing and a programming language. Since the standards of web designing are always increasing and so does the complexity of the technology required, frameworks have now become a crucial part of developing websites or web applications. It is absolutely unreasonable to reinvent the wheel, thus for designing rich and attractive websites, it is very much sensible to use frameworks endorsed by developers all over the world. Django, Angular, Spring, React, Vue, Express are some of the well-known web development frameworks. In my project I have used Angular.


Technology Used
There are various technologies used as mentioned below: Angular 9, Firebase, Bootstrap, firebase firestore, firebase auth Firebase.

Firebase
Firebase can be defined as a backend platform for developing not only web applications but also ios and android applications. It provides a real time database experience, offers different application program interfaces or APIs, supports multiple types of hosting and authentication platforms. All firebase users receive live updates after every alteration just like a real time database [7]. For the authentication purpose, users can apply anonymous passwords or other social authentications can also be used. The hosting involves the deployment of the applications over a secure connection to the Firebase servers. The limitation of Firebase is that it can support 50 connections and 100MB storage.

Firestore
Firestore is a more flexible and scalable no SQL database. It can be used for storing and syncing the data for client as well as server side development. Just like the Firebase, Firestore provides a real time database experience by syncing the data through the real time listeners to the client app. Not only this, it also has a provision for offline support for both web and mobile in order to enable the developers to build responsive applications irrespective of the network availability.

NodeJS
NodeJS is a JavaScript based run-time environment which is needed by the Angular Command line interface or CLI to execute. Just time java virtual machine is needed for java applications to work, nodeJS is required for the Angular command line to run. It is a server-side platform which is built on JavaScript Engine (version 8) of Google chrome. It is a cross platform open source runtime environment which is used for building networking and server side applications. It can be executed within Node.js runtime on various operating systems like Microsoft Windows, Macintosh, Linux etc.

Visual Studio
Visual Studio Code is a light weight and a well-built integrated development environment. It runs on the desktop and works with Windows, Linux and macOS. Visual Studio Code supports JavaScript, Typescript as well as Node.js. This source code editor is enriched with not only an ecosystem of many extensions for various languages like PHP, C++, Go, Java, Python and C# but also many runtimes such as Unity and .NET. VS code assists the developers with its instant syntax highlighting, auto indentation, bracket matching, box selection, snippets and much more.

Font Awesome
Font Awesome icons can be placed just anywhere by simply using a style prefix and the name of the icon. The icons of Font Awesome are made in such a way that they adopt the properties and naturally appear alongside the text. These icons are made to be used with the inline HTML elements like, or. The libraries present in font awesome come with approximately 519 free vector icons which are scalable too. These icons are easily customized and can be used for commercial as well as personal purposes.

Bootstrap
Bootstrap is a well built, instinctive and a strongly powered front end framework. It makes web development easier by simply using HTML, CSS and JavaScript. The responsive CSS of Bootstrap fits to all screen sizes from desktops to mobile.
Bootstrap has some properties of global CSS, basic HTML elements upgraded with the use of extensible classes and an improved grid sys-tem. It consists of many components which are reusable in order to provide drop-downs, alters, pop overs, icons and much more. Bootstrap comes with various customized jQuery plugins which can easily be included and used.

jQuery
jQuery is a cross platform, enriched with features, small but fast JavaScript based library. It was built for the simplification of HTML client-side scripting. jQuery makes animation, event handling, document traversal very easy and simple to use on various types of web browsers. 10 The most vital functionality of jQuery is to make the usage of JavaScript easy, so that the web-sites are made more attractive as well as interactive without much difficulty. It works on the principle of "Write less, do more" because a lot of common tasks which consume many JavaScript code lines are taken up by the jQuery which binds those lines of code into functions which can be invoked whenever needed by just a single line of code.

Pixabay
Pixabay is an international, free to use website used for sharing pictures, vector images, illustrations, video clips as well as audio clips. Currently Pixabay offers approximately 1188454 photos, vector graphic images, videos and audio clips free of cost. All the image and video files available on the website can be utilized for both personal and commercial purposes with-out any attribution requirement [5].

About the project
Angular can be understood as an open source framework used for front end web development. It is a Typescript based framework. Front end web development means Angular can be used to develop front end of the websites. Saying that Angular is Typescript based, tells that Typescript is the primary language used in Angular. Typescript is a superset of JavaScript which means that any valid JavaScript code is also valid Typescript code. Since the browsers used currently do not recognize the Typescript, therefore at the time of compilation, typescript is transpiled or converted to plain old JavaScript. Typescript is used since it offers many more features as compared to regular JavaScript. It not only supports class-based object-oriented programming features but also static typing.
Most portion of the development using Angular involves the usage of components. Components can be understood as the classes which interact with the HTML files which finally get displayed on the web browser. The structure of file consists of application component which has the following files. There are 9 components which together constitute this project. • comments.component These files get created automatically when the project is made using the Angular command line interface. The whole Angular application is developed using various components. The main idea behind Angular using the components to build an application is to reduce the complicated application to a number of parts which can be reused when required.

login.component
Again, the login component follows the same design approach and offers a very clean experience. It uses a custom service (auth.service) which uses firebase auth module to handle the login process of user. This service is responsible make basic

profile.component
Profile component is responsible for displaying profiles of users along with ability to modify or update it. It also allows users to change profile picture and change password of their account. The profile component uses a different approach for dis-playing information. Instead of displaying it in some sort of div or tabular format and providing a edit button for each value, it just assigns the stored value to each respective filed. So, the user can edit whichever field he wants and hit submit and the information will be updated.

myblogs.component
The myblogs component serves quite a few purposes: • It allows user to create new blog

views.component
view component is responsible to display the blog and the comments associated with it. view component is designed to dis-play blog to anyone, irrespective of whether he has logged in or not. view component also provides option to comment on the blog, though for commenting, one must be logged in. Again, Firebase firestore database is used to store comments and are retrieved and rendered using comments component.

app routing module
After building all those components, we need to somehow relate them to enable navigation between them. Some of

auth.service
This is a custom service designed to handle authentication with firebase auth, thereby simplifying this process and reducing repetition of code. Making a custom service enables us to change authentication method in future, without struggling too much as now all the authentication code is at one place and not scattered among several files.

myguard.guard
This is a custom guard designed to validate email address, password etc before it is pushed to database. Similar to auth ser-vice, we define it as a guard to reduce repeating of code and gives us flexibility to 20 tune these criteria with a lot more ease. This guard is used in login, signup and profile component to validate the information given by the user. Guards are implemented to impose constraint's on information provided by user, such as password, email id, name etc.

Conclusion
The evolution occurring in the technology sector, it has become necessary for all of us to become used to these new advancements if we want to get groomed up and do not want to get stale or neglected in the market. These new technologies also assist us in obtaining more users, increasing the user involvement, and will also help in making better revolutions and conversions. Some of these technologies and advancements have already been implemented while others are looking forward to being implemented in near future. Angular's revolutionary perspective for widening HTML will make very much sense to those who are web developers in soul. With Google behind it and the support of a big community, Angular is here to stay and grow. Angular works quite well with both large scale productions as well as quick prototyping projects.