What is a Framework?

A framework is like a structure that provides a base for the application development
process. With the help of a framework, you can avoid writing everything from scratch.
Frameworks provide a set of tools and elements that help in the speedy development
process. It acts like a template that can be used and even modified to meet the project
requirements.
Frameworks are based on programming languages. Some popular frameworks that are
most used are Django, Flutter, Angular, Vue, PyTorch, Spring Boot, React Native,
Apache Spark, Ionic, etc. These frameworks allow developers to create robust and rich
functionalities software.

Why is Framework Used?

Writing the code from scratch is a tedious task full of possible risks and errors. You
need to make the code clean, well-tested, bugs and errors free. It will be difficult for
other developers to understand the code and work on it. So, it is better to work with the
frameworks that meet your requirements. They make the development process easy
with fewer errors. It is a general template that can be used and modified as per the
requirement. It will be easy for others to understand your code as they are also familiar
with frameworks.
Frameworks provide many advantages such as:
 Easy to test your code and debug it.
 Clean code is much easy to understand and work with.
 Reduces redundancy of code in the project.
 Reduces the time and cost of the project with the enhanced application.
 Features and functionalities provided by the framework can be modified and
extended.

Introduction to other popular frameworks and libraries

Front-End Frameworks:
Frontend web development frameworks are used to create the user interface of the
website that is seen and used by the users. They develop the client side of the
application. Some of the popular front-end web development frameworks are Angular
and Vue.js.
1. Angular: Angular is an open-source TypeScript-based framework. It is created and
maintained by Google. Angular provides many features and services that can help in
developing websites and Progressive Web Apps (PWAs). Angular makes use of
TypeScript code on websites and gives proper responses to the user’s input in less time
without writing any extra lines of code. It allows the integration of third-party tools.
There are many top companies that make use of Angular framework such as Google,
PayPal, Nike, Upwork, etc.
2. VueJS : Vue.js is an open-source JavaScript-based frontend web development framework. It is
built using HTML, CSS, and JavaScript and supports Model-View-View Model (MVVM) architecture.
It is easy to learn and understand and has large community support. Many top companies use the Vue.js
framework such as Behance, Trustpilot, etc.

3. Bootstrap: Bootstrap is an open-source CSS-based framework. It is developed with

the help of HTML, CSS, and JavaScript. It helps in creating websites that are easy and
fast to develop, highly responsive, and platform-independent. Nowadays, all websites
are suitable for all kinds of devices (desktops, smartphones, tablets) thanks to Bootstrap.
Many top companies use the Bootstrap framework such as Airbnb, Netflix, Uber, etc.
Back-End Frameworks:
Backend web development frameworks are used on the server side of the application.
They provide backend functionalities responsible for handling requests, databases,
communicating with APIs, etc. Some of the popular backend web development
frameworks are Ruby on Rails, Django, PHP, etc.
1. Ruby : Ruby is an open-source Ruby-based framework. Ruby is responsible for
providing secure and scalable software. It is based on Model View Controller (MVC)
architecture and third-party libraries can also be integrated. There are many top
companies that make use of the Ruby on Rails framework such as CafePress, Airbnb,
etc.
2. Django: Django is an open-source Python-based web framework. It provides a
speedy development of web applications and ensures that they are scalable and flexible.
Django is based on Model Template View (MTV) architecture and is compatible with
any frontend framework. There are many top companies that make use of Django such
as YouTube, Instagram, Spotify, etc.
3. Spring: Boot Spring Boot is an open-source Java-based web framework. It enables
developers to develop production-ready and standalone applications. Spring Boot
provides high flexibility and scalability to websites. Many top companies use Spring
Boot such as Netflix, Uber, Intuit, LinkedIn, etc.

Libraries:
A library is a collection of pre-written code that can be used to perform common tasks
or add specific functionality to a program. Libraries are often written in a specific
programming language and are designed to be easily reusable and modular.
JavaFX: JavaFX is a Java library and a GUI toolkit designed to develop and facilitate
Rich Internet applications, web applications, and desktop applications. The most
significant perk of using JavaFX is that the applications written using this library can
run on multiple operating systems like Windows, Linux, iOS, Android, and several
platforms like Desktops, Web, Mobile Phones, TVs, Tablets, etc. This characteristic of
the JavaFX library makes it very versatile across operating systems and different
platforms.
WPF: Windows Presentation Foundation(WPF) is a development framework used to
create a desktop application. It is a part of the .NET framework. The WPF has a
resolution-independent and vector-based rendering engine which is helpful to deal with
modern graphics hardware. The latest version of WPF is 4.6. In this framework, UI of
the application is designed in XAML language and Application logic is Written in C#
programming language.
GTK: GTK, originally known as the GIMP Toolkit, is an open-source, multi-platform
toolkit for creating graphical user interfaces (GUIs). Primarily written in C, GTK offers
a comprehensive set of widgets such as buttons, menus, and text boxes for building
desktop applications on platforms like Linux, Windows, and macOS. It supports various
languages through bindings, including Python and C++. GTK is the foundation of many
desktop environments, including GNOME, providing theming and customization
capabilities for visually appealing interfaces. Released under the GNU Lesser General
Public License (LGPL), GTK is a versatile choice for both open-source and proprietary
software projects, fostering a community of developers around the world.

Accessibility Web Design

Accessibility in web design is when we make websites that everyone, including people
with disabilities, can easily use. It means we make sure that people who have trouble
seeing, hearing, moving, or understanding can still use and understand the website. We
do things like adding descriptions for images so that special software can read them
aloud, making it easy to navigate with a keyboard, providing captions or written
versions for videos, and making sure the colors on the site are clear for everyone. This
kind of design follows rules like the Web Content Accessibility Guidelines to ensure
that the website is friendly and useful for all kinds of people.

Why Accessibility in Web Design is Important?

It is very important for websites to be accessible to all users. As for general people, they
can access almost all websites but people with certain disabilities face problems while
accessing a website. Designing and making websites that can be accessed by everybody
especially people with disability is a necessity in today’s world. It allows them the same
features and functionalities that others can access. Services like online shopping, online
banking, health services, government schemes and programs, etc should be accessible
to everybody regardless of their condition. Ensuring that everyone has the same access
to online content is necessary.
Benefits of Accessibility in Web Design
Higher Web Traffic: Since the Website becomes accessbile to a higher number of
users, the web traffic increases.
Better User Experience: Website being accessible to users with disability helps them
gain access to information like everyone else which enhances their Experience with the
website.
Higher User Engagement: Higher accessibility of a website leads to users spending
more time on the website engaging with its features increasing User Engagement.
Improves Website SEO: Higher User Engagement and Higher web traffic helps the website to
get high SERP ranking.

Improves Brand Identity: Making the Brand Website accessible to more people helps improving
the brand’s reputation and increases awareness about the Brand in the market.

Reduces Bounce Rate: Website being more accessible and Interactive helps in reducing the
bounce rate by making users engage with the website more.

Introduction to electron setting up an electron project

Electron is a framework for building desktop applications using JavaScript, HTML, and
CSS. By embedding Chromium and Node.js into its binary, Electron allows you to
maintain one JavaScript codebase and create cross-platform apps that work on
Windows, macOS, and Linux — no native development experience required.
Popular apps like Slack, Hyper, and Visual Studio Code are built with Electron
To use Electron, you need to install Node.js.

https://nodejs.org/en
To check that Node.js was installed correctly, type the following commands in your
terminal client:
node --version
npm –version
Start by creating a folder and initializing an npm package.
mkdir my-electron-app
This command creates a new directory named "my-electron-app".
cd my-electron-app
This command changes your current working directory to the newly created "my-
electron-app" directory.
The npm init command will initialize a project and create the package.json file.
npm init

There are a few rules to follow

 entry point should be main.js.
 author and description can be any value, but are necessary for app packaging.

install the electron package into your app's devDependencies.

npm install --save-dev electron
npm install: This is the command used to install a package using npm
--save-dev: the package should be added as a development dependency in your
package.json file.
electron: This is the name of the package you want to install . In this case, it is the
Electron framework.
To set up a start script to execute your Electron application, add the following line to
the "scripts" field of your package.json file:

This start command will let you open your app

npm start
During execution, Electron will look for this script in the main field of the app's
package.json. To initialize the main script, create an empty file named main.js in the
root folder of your project.
Before we can create a window for our application, we need to create the content that
will be loaded into it. Create an index.html file in the root folder of your project.