Muhammad Atique

Reg # 4469/bscs/F21-A
Web Engineering
Sir Majid Bashir
Assignment # 3/4

Q) List out all contemporary front-end Web design

libraries, frameworks, tools, and technologies. Here are
some of the contemporary front-end web design
libraries, frameworks, tools, and technologies:
1. React: An open-source JavaScript library used for
building user interfaces for web and mobile applications.
It allows developers to build reusable UI components
that can be combined to create complex and interactive
applications.
2. VueJS: A progressive JavaScript framework used for
building user interfaces. Unlike other monolithic
frameworks, Vue is designed from the ground up to be
incrementally adoptable.
3. Angula: A platform for building web applications. It
provides a way to organize code, reduce repetitive work,
and achieve consistency across projects.
4. Svelte: A new approach to building user interfaces. It
compiles your code to tiny, framework-less vanilla
JavaScript.
5. MUI: A popular React UI framework with a set of
React components that implement Google's Material
Design.
6. PostCSS: A tool for transforming CSS with JavaScript. It
is used by industry giants like Facebook, Twitter, and
Alibaba.
7.Sass: A preprocessor scripting language that is
interpreted or compiled into Cascading Style Sheets
(CSS).
8. Tailwind CSS: A utility-first CSS framework that
provides a set of pre-built classes that can be used to
quickly build responsive web designs.
9. Grunt: A JavaScript task runner that automates
repetitive tasks like minification, compilation, unit
testing, and linting.
10. Yeoman: A scaffolding tool for modern web apps,
which helps getting started and bootstrap your
application with popular front-end tools and
frameworks.
11. RequireJ: A JavaScript file and module loader, which
improves the speed and quality of your code.
12. Browserify: Allows you to require('modules') in the
browser by bundling up all of your dependencies.
13. Knockou: A standalone JavaScript implementation of
the Model-View-ViewModel pattern with templates.
14. Kraken: A secure and scalable layer that extends
Express by providing structure and convention.
15. Async.j: A utility module which provides straight-
forward, powerful functions for working with
asynchronous JavaScript.
16. Underscore.js: A JavaScript library that provides a
whole mess of useful functional programming helpers
without extending any built-in objects.
17. Lodash: A modern JavaScript utility library delivering
modularity, performance, & extras.

Comparative Review
1. React:
- Pros: Easy to learn and use, component-based
(reusable code), performant and fast, large community.
- Cons: JSX is required, poor documentation.
2. VueJS:
- Pros: Performant and fast, component-based
(reusable code), easy to learn and use, good and
intuitive documentation.
- Cons: Fewer resources compared to a framework like
React, over flexibility at times.
3. Angular:
- Pros: Fast server performance, MVC Architecture
implementation, component-based (reusable code),
good and intuitive documentation.
- Cons: Steep learning curve, Angular is very complex.
4. Svelt:
- Pros: No virtual DOM, truly reactive, easy to learn
and use, component-based (reusable code).
- Cons: Small community, confusion in variable names
and syntax.
5. MUI:
- Pros: Provides a set of React components that
implement Google's Material Design, making it easier to
build visually appealing user interfaces.
- Cons: As it is tied to React, it requires knowledge of
React to use effectively.
6. PostCSS:
- Pros: Allows you to use tomorrow’s CSS syntax today,
has a plugin system that allows you to extend its
functionality.
- Cons: Requires a build process, which might be
overkill for smaller projects.
7. Sass:
- Pros: Provides variables, nesting, and mixins, which
can make your CSS more readable and DRY.
 - Cons: Requires a build process, which might be
overkill for smaller projects.
8. Tailwind CSS:
- Pros: Provides utility classes that make it quick and
easy to build responsive designs.
- Cons: Has a steep learning curve, especially if you're
used to traditional CSS or pre-processors like Sass.
9. Grunt:
- Pros: Automates repetitive tasks like minification,
compilation, unit testing, and linting.
- Cons: Configuration can be complex and time-
consuming.

10. Yeoman:
- Pros: Helps to get started and bootstrap your
application with popular front-end tools and
frameworks.
- Cons: Requires Node.js and npm to be installed,
which might be a barrier for beginners.

Q3) 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)

1. React
- Underlying Language: JavaScript
- Subscription: Free
- Open Source or Proprietary: Open Source
- Key Strengths: Flexibility, efficiency, and powerful
User Interfaces
- Key Weaknesses: It has a steep learning curve due to
its complex concepts like Virtual DOM, JSX, and
component lifecycle
- Adoption: Used by many developers and companies
2. VueJS
- Underlying Language: JavaScript
- Subscription: Free
- Open Source or Proprietary: Open Source
- Key Strengths: Approachable, performant, versatile
framework for building web user interfaces
- Key Weaknesses: It has limited support for large-
scale projects due to its relatively small team and
community
 - Adoption: Used by many developers and companies

3. Angular
- Underlying Language: TypeScript
- Subscription: Free
- Open Source or Proprietary: Open Source
- Key Strengths: A component-based framework for
building scalable web applications
- Key Weaknesses: It’s a heavyweight framework,
which can be overkill for simple projects and can impact
performance
- Adoption: Used by many developers and companies
4. Svelte
- Underlying Language: JavaScript
- Subscription: Free
- Open Source or Proprietary: Open Source
- Key Strengths: Simplicity, lightweight nature, and
efficient rendering process
- Key Weaknesses: A much smaller community than
other frameworks, lack of IDE support, few Svelte dev
toolkits are available
- Developer Feedback/Ratings: Not found in the
search results
- Adoption: Used by many developers and companies
5. MUI
- Underlying Language: JavaScript
- Subscription: Free and Paid
- Open Source or Proprietary: Open Source
- Key Strengths: Comprehensive suite of free UI tools
to help ship new features faster
- Key Weaknesses: It can add significant size to your
application, impacting performance. Also, while it allows
for some customization, achieving the exact look and
feel you want may be challenging
- Adoption: Used by many developers and companies
6. PostCSS
- Underlying Language: JavaScript
- Subscription: Free
- Open Source or Proprietary: Open Source
- Key Strengths: Allows for rapidly getting started on
new projects and streamlines the maintenance of
existing projects
- Key Weaknesses: It requires a good understanding of
JavaScript and CSS, and the plugins you need might not
always be available or up-to-date
- Adoption: Used by many developers and companies
7. Sass
- Subscription: Free
 - Open Source or Proprietary: Open Source
- Key Strengths: Allows for rapidly getting started on
new projects and streamlines the maintenance of
existing projects
- Key Weaknesses: It requires time to learn new
features and using Sass may cause losing benefits of
browser’s built-in element inspector
- Adoption: Used by many developers and companies
8. Tailwind CSS
- Subscription: Free and Paid
- Open Source or Proprietary: Open Source
- Key Strengths: Speed, simplicity, and powerful
building capabilities
- Key Weaknesses: Bloated HTML design
- Adoption: Used by many developers and companies
9. Grunt
- Underlying Language: JavaScript
- Subscription: Free
- Open Source or Proprietary: Open Source
- Key Strengths: Fast development workflow, works
effectively with codebases, unifies workflow
- Key Weaknesses: Plugin updates depend on the
author
- Adoption: Used by many developers and companies
10. Yeoman
- Underlying Language: JavaScript
- Subscription: Free
- Open Source or Proprietary: Open Source
- Key Strengths: Rapidly getting started on new
projects and streamlines the maintenance of existing
projects
- Key Weaknesses: There seems to be a lack of
information about Yeoman’s weaknesses. However, as a
scaffolding tool, potential issues could include
maintaining up-to-date templates and compatibility with
evolving technologies
- Adoption: Used by many developers and companies

Q4). List key capabilities • the development

tasks/artefacts we can accomplish using it
1. React:
- Capabilities: Component-based architecture, state
management, lifecycle methods, hooks, context API.
- Development Tasks: Building user interfaces for
single-page applications, creating reusable UI
components, managing application state.
2. VueJS:
 - Capabilities: Reactive two-way data binding,
component-based architecture, Vue Router for routing,
Vuex for state management.
- Development Tasks: Building interactive web
applications, creating reusable UI components, routing,
state management.
3. Angular:
- Capabilities: Two-way data binding, dependency
injection, directives, Angular CLI, RxJS integration.
- Development Tasks: Building single-page
applications, creating reusable components, managing
application state.
4. Svelt:
- Capabilities: Reactive programming model,
component-based architecture, no virtual DOM.
- Development Tasks: Building web applications,
creating reusable components, state management.
5.MUI:
- Capabilities: Predefined components following
Material Design, theming, responsive grid system.
- Development Tasks: Building user interfaces,
creating responsive layouts, customizing themes.
6.PostCSS:
- Capabilities: CSS transformations, plugin ecosystem.
 - Development Tasks: Transforming CSS styles,
autoprefixing, linting, minifying.
7.Sass:
- Capabilities: Variables, nesting, mixins, inheritance.
- Development Tasks: Writing maintainable and
scalable CSS, creating reusable CSS with mixins and
placeholders.
8.Tailwind CSS:
- Capabilities: Utility-first CSS classes, responsive
design, customization.
- Development Tasks: Building user interfaces,
creating responsive designs, customizing styles.
9. Grunt:
- Capabilities: Task automation, plugin ecosystem.
- Development Tasks: Automating repetitive tasks like
minification, compilation, unit testing, linting.
10. Yeoman:
- Capabilities: Scaffolding new projects, generator
ecosystem.
- Development Tasks: Setting up new projects,
generating boilerplate code, maintaining code
consistency.

In Tabular Form:
 Open Source
Underlying
Framework/Tool Subscription or Key Strengths
Language
Proprietary

Flexibility, efficien
React JavaScript Free Open Source and powerful U
Interfaces

Approachable,
performant, versa
VueJS JavaScript Free Open Source framework
building web u
interfaces

A component-ba
framework
Angular TypeScript Free Open Source
building scalable w
applications

Simplicity,
lightweight nat
Svelte JavaScript Free Open Source
and effic
rendering process

Comprehensive s
of free UI tools
MUI JavaScript Free and Paid Open Source
help ship new featu
faster

Allows for rap

getting started on n
projects
PostCSS JavaScript Free Open Source
streamlines
maintenance
existing projects
 Open Source
Underlying
Framework/Tool Subscription or Key Strengths
Language
Proprietary

Allows for rap

getting started on n
projects
Sass Not found Free Open Source
streamlines
maintenance
existing projects

Speed, simplicity,
Tailwind CSS Not found Free and Paid Open Source powerful build
capabilities

Fast developm
workflow, wo
Grunt JavaScript Free Open Source effectively w
codebases, uni
workflow

Rapidly get
started on n
projects
Yeoman JavaScript Free Open Source
streamlines
maintenance
existing projects

Top Three Picks

1. React: React is a popular choice due to its flexibility,
efficiency, and powerful User Interfaces. It's widely
adopted by many developers and companies, making it a
reliable choice. The component-based architecture
allows for reusable code, which can significantly speed
up development time.
2. VueJS: VueJS is known for its approachability,
performance, and versatility in building web user
interfaces. It's designed to be incrementally adoptable,
which means it can be used as a library in projects of any
scale, making it a flexible choice for many developers.
3. Angular: Angular is a comprehensive framework for
building scalable web applications. It's backed by Google
and has a large community, which means it's continually
being improved and updated. Its two-way data binding
and dependency injection features make it a powerful
tool for complex applications.