Assignment # 1

Name: - Asil Zulfiqar

Registration Number: - 4459
Section: - A
Assignment: - Fronted Design Tools &
Languages
Q 1. List out all contemporary front-end Web design libraries, frameworks,
tools, and technologies.
1. React
2. Angular
3. Vue.js
4. jQuery
5. Svelte
6. Ember.js
7. Backbone.js
8. Bootstrap
9. Foundation
10. Semantic UI
11. JavaScript
12. D3.js
13. Next.js
14. Lodash
15. Sass
16. Chart.js
17. Django
18. Gatsby
19. Preact
20. NgRx

Q 2. List out all contemporary front-end Web design libraries, frameworks,

tools, and technologies.
1. React:
Developed by Facebook, React is a JavaScript library for building user interfaces.
Uses a virtual DOM for better performance by minimizing DOM manipulation.
Utilizes a component-based architecture, making it easier to manage and reuse UI
elements.
Known for its flexibility, scalability, and extensive ecosystem of supporting tools
and libraries such as Redux and React Router.
Strong community support and frequent updates.
Suitable for building single-page applications (SPAs) and complex user interfaces.
2. Angular:
Developed and maintained by Google, Angular is a platform and framework for
building client-side web applications.
Offers a comprehensive solution with built-in features like dependency injection,
routing, and state management.
Follows the MVC (Model-View-Controller) architecture.
Provides a robust CLI (Command Line Interface) for scaffolding and managing
projects.
Supports two-way data binding, making it easier to synchronize data between the
model and view.
Suitable for large-scale enterprise applications and projects requiring a full-
featured framework.
3. Vue.js:
Vue.js is a progressive JavaScript framework for building user interfaces.
Known for its simplicity and ease of adoption, allowing developers to
incrementally integrate it into existing projects.
Offers a flexible and reactive data binding system.
Provides a straightforward templating syntax similar to HTML.
Has a smaller footprint compared to Angular and React.
Offers official libraries and tools for routing (Vue Router) and state management
(Vuex).
Suitable for building SPAs, dynamic web applications, and smaller projects.
4. jQuery:
jQuery is a fast, small, and feature-rich JavaScript library.
Primarily used for simplifying DOM manipulation and event handling.
Offers cross-browser compatibility and abstracts away browser inconsistencies.
Provides a wide range of plugins for adding additional functionality.
Useful for rapidly developing interactive web applications and enhancing user
experience.
Particularly beneficial for projects requiring extensive DOM manipulation or
legacy browser support.
5. Backbone.js:
Backbone.js is a lightweight JavaScript library that provides the structure for web
applications.
Follows the MVC pattern with models, views, and controllers.
Offers key-value binding and custom events for data synchronization.
Provides a minimalistic approach, leaving flexibility for developers to choose their
preferred tools and libraries for additional functionality.
Useful for projects requiring a structured approach without the overhead of a full-
featured framework.
Has a smaller footprint compared to Angular and Ember.js.
6. Bootstrap:
Bootstrap is a popular CSS framework for building responsive and mobile-first
websites.
Offers a set of pre-designed UI components and layout grids.
Provides extensive documentation and customization options.
Facilitates rapid prototyping and development with ready-to-use styles and
components.
Supports a wide range of browsers and devices.
Suitable for projects requiring a consistent and visually appealing design with
minimal effort.
7. Foundation:
Foundation is a responsive front-end framework similar to Bootstrap.
Offers a grid system, UI components, and JavaScript plugins.
Provides a modular and customizable approach to building websites.
Focuses on performance and accessibility.
Offers built-in support for responsive design and mobile optimization.
Suitable for projects requiring a highly customizable design system and a focus on
performance.
8. Semantic UI:
Semantic UI is a development framework that helps create beautiful, responsive
layouts using human-friendly HTML.
Utilizes natural language principles for intuitive class names and syntax.
Offers a comprehensive set of UI components and themes.
Provides integration with popular JavaScript libraries like React, Angular, and
Ember.js.
Suitable for projects requiring a visually appealing design with semantic markup
and easy customization.
Actively maintained and updated by the community.
9. JavaScript:
JavaScript is a versatile programming language used for building interactive and
dynamic web applications.
Offers a wide range of frameworks, libraries, and tools for front-end development.
Provides support for both client-side and server-side development (Node.js).
Allows for dynamic content manipulation, event handling, and asynchronous
programming.
Used in conjunction with HTML and CSS to create modern web experiences.
Essential for front-end developers to master for building interactive web
applications.
10. Next.js:
Next.js is a React framework for building server-rendered applications.
Offers features like automatic code splitting, server-side rendering, and static
exporting.
Simplifies the setup of React applications with routing and server-side rendering
out of the box.
Supports incremental adoption, allowing developers to add server-side rendering to
existing React applications.
Provides improved performance and SEO benefits compared to client-side
rendering.
Suitable for projects requiring improved performance, SEO optimization, and
server-side rendering capabilities.

Q 3. Compare features like:

i. Underlying language
ii. Subscription (free/paid/both)
Features available in the variants
iii. Open Source or proprietary
iv. Key strengths and weaknesses
include developer feedback/ratings wherever available
v. Adoption (popularity)

i. Underlying Language:

React: JavaScript

Angular: TypeScript (superset of JavaScript)

Vue.js: JavaScript

jQuery: JavaScript

Backbone.js: JavaScript

Bootstrap: HTML, CSS, JavaScript (with optional integration with frameworks like React
and Angular)
Foundation: HTML, CSS, JavaScript (with optional integration with frameworks like React
and Angular)

Semantic UI: HTML, CSS, JavaScript (with optional integration with frameworks like React
and Angular)

JavaScript: JavaScript

Next.js: JavaScript (built on top of React)

ii. Subscription (free/paid/both):

React: Free and open source
Angular: Free and open source
Vue.js: Free and open source
jQuery: Free and open source
Backbone.js: Free and open source
Bootstrap: Free and open source
Foundation: Free and open source
Semantic UI: Free and open source
JavaScript: Free and open source
Next.js: Free and open source (with commercial support available)
iii. Open Source or Proprietary:
All listed frameworks and libraries are open source.
iv. Key Strengths and Weaknesses:

React: Strengths include its virtual DOM for better performance, component-
based architecture, and large ecosystem. Weaknesses may include the steep
learning curve for beginners and managing state in larger applications.
Angular: Strengths include its comprehensive solution with built-in features like
dependency injection and routing. Weaknesses may include its complexity for
smaller projects and slower performance compared to other frameworks.
Vue.js: Strengths include its simplicity, ease of adoption, and flexible data binding
system. Weaknesses may include its smaller ecosystem compared to React and
Angular.
jQuery: Strengths include its simplicity, cross-browser compatibility, and
extensive plugin ecosystem. Weaknesses may include its declining popularity and
lack of modern development patterns.
Backbone.js: Strengths include its lightweight nature, simplicity, and flexibility.
Weaknesses may include its minimalistic approach lacking built-in features
compared to modern frameworks.
Bootstrap: Strengths include its extensive collection of pre-designed components
and responsive design. Weaknesses may include its generic appearance without
customization and performance overhead.
Foundation: Strengths include its modular and customizable approach, focusing
on performance and accessibility. Weaknesses may include its learning curve and
smaller community compared to Bootstrap.
Semantic UI: Strengths include its human-friendly syntax, comprehensive set of
UI components, and ease of customization. Weaknesses may include its smaller
ecosystem compared to Bootstrap and Foundation.
JavaScript: Strengths include its versatility and wide range of frameworks and
libraries available for front-end development. Weaknesses may include managing
browser compatibility and scalability.
Next.js: Strengths include its built-in features for server-side rendering, automatic
code splitting, and SEO optimization. Weaknesses may include its limited use
cases compared to standalone React.
v. Adoption (Popularity):
React: Extremely popular, with a large developer community and widespread
adoption by companies such as Facebook, Instagram, and Airbnb.
Angular: Widely adopted, particularly for enterprise-scale applications, with
support from Google and companies like Microsoft and Forbes.
Vue.js: Rapidly growing in popularity, known for its simplicity and ease of
adoption, with companies like Alibaba and Xiaomi using it in production.
jQuery: Although its popularity has declined in recent years with the rise of
modern frameworks, jQuery is still widely used in existing projects and legacy
codebases.
Backbone.js: Usage has declined with the rise of more feature-rich frameworks
like React and Angular, but it is still maintained and used in some projects.
Bootstrap: Highly popular, with a large community and adoption by companies
like Twitter, Spotify, and LinkedIn.
Foundation: Less popular than Bootstrap but still widely used, with companies
like Adobe and HP using it in their projects.
Semantic UI: Has a smaller community compared to Bootstrap and Foundation
but is growing in popularity, particularly among developers who prefer its human-
friendly syntax.
JavaScript: Being the core language of web development, JavaScript is
universally adopted, with frameworks and libraries catering to different needs and
preferences.
Next.js: Growing in popularity, particularly for projects requiring server-side
rendering and SEO optimization, with companies like Netflix and TikTok using it.

Q. 4. List key capabilities

the development tasks/artefacts we can accomplish using it
Present your data in tabular form with features listed in columns, and
frameworks/tools listed down the rows.
 Semantic
Features React Angular Vue.js jQuery Backbone.js Bootstrap Foundation UI JavaScript Next.js
Virtual DOM Yes No No No No No No No No Yes
Component-
based Yes Yes Yes No Yes No No No No Yes
Two-way data
binding Yes Yes Yes No Yes No No No No Yes
Server-side
rendering No Yes No No No No No No No Yes
Routing Yes Yes Yes No Yes No No No No Yes
State Redux,
management Context RxJS, NgRx Vuex No Yes No No No No Yes
Create
CLI tool React App Angular CLI Vue CLI No No No No No No Yes
Mobile app React Vue
development Native NativeScript Native No No No No No No Yes

Community size Large Large Large Large Medium Large Medium Medium Large Large

Based on your research and analysis, choose your top three picks, and state
reasons for your choices.
React:
React is highly versatile and widely adopted, with a large ecosystem of tools and
libraries.
It offers a component-based architecture, virtual DOM for efficient rendering, and
strong community support.
React's flexibility makes it suitable for building various types of applications, from
single-page apps to complex enterprise solutions.
Vue.js:
Vue.js combines simplicity with powerful features, making it easy to learn and use.
It provides reactive data binding, component-based architecture, and a well-
designed ecosystem.
Vue.js is suitable for both small-scale projects and larger applications, offering
features like routing, state management, and server-side rendering.
Next.js:
Next.js offers a robust framework for building server-rendered React applications.
It provides features like automatic code splitting, server-side rendering, and SEO
optimization out of the box.
Next.js simplifies the development process for React applications, particularly
those requiring improved performance and search engine visibility.