Unit 3 :

FRONT END TECHNOLOGIES

1
Syllabus
Front-End Frameworks: What is web framework? Why Web Framework? Web Framework Types.

MVC: What is MVC, MVC Architecture, MVC in Practical, MVC in Web Frameworks.

TypeScript: Introduction to TypeScript (TS), Variables and Constants, Modules in TS.

Angular Version 10+: Angular CLI, Angular Architecture, Angular Project Structure, Angular Lifecycle,
Angular Modules, Angular Components, Angular Data Binding, Directives and Pipes, Angular Services
and Dependency Injections (DI), Angular Routers, Angular Forms.

ReactJS: Introduction to ReactJS, React Components, Inter Components Communication, Components

Styling, Routing, Redux- Architecture, Hooks- Basic hooks, useState() hook, useEffect() hook,
useContext() hook.

2
Front-End Frameworks

3
What is web framework?
Web Application Framework or simply “web framework” is a software framework that is
designed to support the development of web applications including web services, web
resources, and web APIs.
In simple words, web frameworks are a piece of software that offers a way to create and run
web applications. Thus, you don’t need to code on your own and look for probable
miscalculations and faults.
Now, depending upon your task you may choose one web framework that fulfills all your
requirements or converges multiple frameworks.

4
What is web framework?
Web frameworks provide a standard way to build and deploy web applications on the World
Wide Web.
For example, you may have written a code to handle data validation for your web application.
In order to prevent having to re-write that code from scratch each time you make a website or
web service, the web framework does it for you.

5
Why Web Framework?
Saves time

Well organized app

Flexibility and highly customizable

Secure code

Scalable, fast and secure

Reduce development time and cost

CRUD

Re-use of code

Easy deployment and maintenance

6
Types of Web Framework

7
Types of Web Framework
1. Server-side Frameworks

To create a web application with a well-developed interface you need a wider range of functionality. Server-
side frameworks handle HTTP requests, database control and management, URL mapping, etc. These
frameworks can improve security and form the output data- simplifying the development process.

Some of the top server-side frameworks are –

 NET (C#)

 Django (Python)

 Ruby on Rails (Ruby)

 Express (JavaScript/Node.JS)

 Symfony (PHP)

8
Types of Web Framework
2. Client-side Frameworks

Client-side frameworks don’t take care of the business logic like the server-side ones. They function inside the
browser. Therefore, you can enhance and implement new user interfaces. A number of animated features can be
created with frontend and single page applications. Every client-side framework varies in functionality and use.

Some of the client-side frameworks are –

 Angular

 Ember.JS

 Vue.JS

 React.JS

9
Front End Frameworks : React

◦ React is mostly used for developing single-page applications.

◦ However, it is a framework specifically used for User Interface development.

◦ It comes in quite handy when you require building an interactive interface for an

application within a limited time because you can reuse the components in this

framework.

10
Front End Frameworks : Angular

o Angular usually deals with the development of mobile and web applications. Not just

that, but one can easily build both single and multi-page web applications.

o Due to its various features, Angular is opted by some of the biggest companies in the

world, including Microsoft Office, BMW, Forbes, Gmail, and Upwork.

o Although Angular has better features when compared to React, it is not easy to learn.

The framework is a bit complex and thus takes time to excel at.

11
Front End Frameworks : VueJS
o Firstly, it is not complex like Angular, which makes it easy to learn and use.

o Secondly, it is much smaller in size and similar to Angular, offers two-way binding, Visual
DOM, and component-based programming.
o VueJs is a framework that allows you to build both dynamic and small web applications with
ease.
o However, despite being versatile, it is not yet popular among big-scale companies. This is
because most large-scale companies still trust Angular for enterprise-based web applications.
o Some of the companies that use VueJs are Alibaba, 9gag, and Xiaomi.

12
Front End Frameworks : jQuery

o Despite being an older Framework, it is still popular and widely used. Jquery is a very simple
Framework that is easy to learn. With the framework, one doesn’t need to write extensive
Javascript codes.
o Despite being a simple framework, it can still be used to deploy dynamic applications.

o Components can be easily added or removed due to its flexible DOM.

o If you want to develop desktop-based javascript applications, JQuery is a go-to option.

o JQuery is not suggested for building large-scale applications because the excess javascript
code might make your application heavy.

13
Front End Frameworks : EmberJs
o It was developed in 2011 owing to the demands of modern technologies.

o With its component-based functionality and two-way data binding, Ember resembles Angular
a lot.
o Despite being one of the toughest Frameworks to learn, it is still used by some of the largest
companies like Linkedin and Apple.
o This is because it allows the developers to develop complex mobile and web applications
easily.

14
 MVC
(Model-View-Controller)

15
What is MVC?
The Model-View-Controller (MVC) is an architectural pattern that separates an application
into three main logical components: the model, the view, and the controller.
Model: It includes all the data and its related logic

View: Present data to the user or handles user interaction

Controller: An interface between Model and View components

MVC Architecture
16
Features of MVC:
 It provides a clear separation of business logic, Ul logic, and input logic.

 It offers full control over your HTML and URLs which makes it easy to design web
application architecture.

 It is a powerful URL-mapping component using which we can build applications that have
comprehensible and searchable URLs.

 It supports Test Driven Development (TDD)

17
MVC Components

18
Example of MVC Architecture Design

The flow of Data in MVC Components

19
Design principles:

1. Divide and conquer.

2. Increase cohesion.

3. Reduce coupling.

4. Increase reuse.

5. Design for flexibility.

20
 Advantages of MVC:
 Codes are easy to maintain and they can be extended easily.

 The MVC model component can be tested separately.

 The components of MVC can be developed simultaneously.

 It reduces complexity by dividing an application into three units. Model, view, and controller.

 It supports Test Driven Development (TDD).

 It works well for Web apps that are supported by large teams of web designers and developers.

 This architecture helps to test components independently as all classes and objects are independent of each other.

21
Disadvantages of MVC:
 It is difficult to read, change, test, and reuse this model

 It is not suitable for building small applications.

 The inefficiency of data access in view.

 The framework navigation can be complex as it introduces new layers of

abstraction which requires users to adapt to the decomposition criteria of MVC.

 Increased complexity and Inefficiency of data.

22
Popular MVC Frameworks :
Some of the most popular and extensively used MVC frameworks :
 Ruby on Rails
 Django
 CherryPy
 Spring MVC
 Catalyst
 Rails
 Zend Framework
 Fuel PHP
 Laravel
 Symphony
23
TypeScript

24
Introduction to TypeScript
TypeScript is an open-source, object-oriented language developed and maintained by Microsoft.

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

TypeScript extends JavaScript by adding data types, classes and other object-oriented features with type-
checking.
Why TypeScript?

25
Features
Cross-Platform

Object-Oriented Language

Static Type Checking

Optional Static Typing

DOM Manipulation

ES 6 Features

26
Installation on Windows 8 or later
Following are the steps to be followed for installing the TypeScript code.

Step 1: Installation of Node.js (https://nodejs.org/en)

Step 2: Verify Installation (On command prompt write command as -v)

Step 3: Installation of typescript

npm install –g typescript

Step 4: check installed version of TypeScript

tsc –v

27
Installation on VS terminal
Following are the steps to be followed for installing the TypeScript code:

Step 1: Installation of typescript

npm i -g typescript

Step 2: check installed version of TypeScript

tsc --version

Your default terminal in VS is Powershell so you have to write tsc.cmd instead of tsc

To change default terminal to cmd , press crtl + alt + p -> terminal(with profile) ->
change to cmd

28
How to Write Program?

⮚ Make Typescript file(.ts file)

⮚ Generate js file

⮚ Making a HTML file and add js file here

⮚ Run program on browser

29
Type Annotations
The TypeScript is a typed language. We can specify the data type of the variables and
functions.
For specifying the data type of the variable the syntax is:

var variable_name : data type

where data type is any standard data type used in JavaScript

Example

1. var count: number = 100;

2. var ischecked: boolean = true;

30
Variable and Constant Declaration

We can declare variable one of the four way:

1. var [identifier] : [type-annotation]=value; //var x : string = “xml”;

2. var [identifier] : [type-annotation]; // var x : string;

3. var [identifier] : value; // var x : “xml”;

4. var [identifier]; // var x;

31
Modules in TS
The TypeScript code we write is in the global scope by default. If we have multiple files in a
project, the variables, functions, etc. written in one file are accessible in all the other files.

For example, consider the following TypeScript files: file1.ts and file2.ts

32
Modules in TS

33
Export Module
Use the prefix export with all the definitions you want to include in a module and want to access
from other modules.

34
Import Module
A module can be used in another module using an import statement.

35
Thank You!!!

36