The document provides an overview and comparison of various popular frontend web frameworks, including React, NextJS, Remix, Angular, Svelte, Astro, Vue, and SolidJS. For each framework, the summary highlights their key features, pros, and tradeoffs. The document aims to help developers choose the right tool for their web projects and discusses factors like capabilities, learning curve, ecosystem support, and suitability for different types of applications.

1. Choosing your
frontend web
framework
Nabeel Shakeel
Staff Software Engineer,
Techwards
NEDUET

2. What to expect?
● Broad overviews of various frameworks
● Key features and functionality of each
● Tradeoffs that come with each option
● What tool should you choose for your web projects??

3. REACT JS
The Ol’ Reliable
NEDUET

4. YES WE KNOW ITS A
LIBRARY NOT A
FRAMEWORK
NEDUET

5. Overview
● An Open Source JavaScript ‘Library’ for building Complex UIs
● Developed by Meta (Facebook) & released in 2013
● Component focused approach via State, Props and Hooks
● Uses JSX Syntax - a combo of HTML + JS
● One-Way Data flow - from parent to child.
NEDUET

6. Pros
● Reusability: Components can be reused throughout the
application, reducing redundancy
● Flexibility in State Management: Offers multiple options
for state management, catering to different application
needs
● Large and Active Community: Access to a wealth of
resources, libraries, and community support
● Maintained by Meta (Facebook): Continuous updates
and improvements, ensuring the framework's evolution
NEDUET

7. Tradeoffs
● Complexity: Not understanding proper usage, for e.g.
useEffect, may lead to pulling your hair out solving bugs.
● SEO Challenges: Single-page applications (SPAs) built
with React may face SEO challenges without additional
configuration.
● Potential Overhead for Small Projects: The overhead of
setting up a React application might be seen as
unnecessary.
● Choice Paralysis: Too many options to choose from
NEDUET

8. NEXT JS
Next Level React
NEDUET

9. Overview
● Full-stack capabilities - client & server side rendering
● Powerful Rust based tooling - fattest build and dev server
● Next.js is maintained by Vercel
● Focus on Developer Experience (DX)
NEDUET

10. Key Features
1. Client and Server Rendering (CSR, SSR):
Renders pages on the server for improved performance and SEO
1. Static Site Generation (SSG)
Generates static HTML at build time for faster loading
3. Incremental Static Regeneration (ISR):
Updates static pages at runtime without rebuilding the entire site
4. React Server Components
NEDUET

11. Pros
● Great for SEO
● Great User Experience
● Fast time-to-market
● Strong community
NEDUET
Tradeoffs
● No built-in state management
● Steeper learning curve
● Can be slow for dynamic routing
● Vendor lock in (Vercel)

12. NEDUET
REMIX
The OG “Files as Routes”
SSR framework

13. NEDUET
Overview
● Full-stack React framework with nested routing
● Focuses on web standards and modern web app to build fast web
apps
● Remix is maintained by Shopify
● Break your app into nested parts that can load data in parallel an
refresh in response to the user actions.

14. NEDUET
Features
● Promotes a clean and organized code structure.
● Utilizes server-side rendering (SSR) for fast initial page loads and
improved SEO
● Optimizes performance by combining the strengths of both
rendering approach.

15. NEDUET
Trade Offs
● Remix introduces new concepts and methodologies, which may
have a learning curve for developers accustomed to traditional
React or other frameworks.
● Remix may have a less mature ecosystem compared to more
established alternatives, potentially affecting the availability of third-
party libraries and tools.
● While server-side rendering enhances performance, it may
introduce additional server-side overhead

16. Angular
The choice for enterprise

17. NEDUET
Overview
● Angular is a robust front-end framework developed and maintained
by Google.
● Provides a comprehensive set of tools and libraries for building
dynamic, single-page web applications with modularity.
● Popular choice for ERPs and enterprise software solutions.

18. NEDUET
Features
● Component-based architecture which is a hierarchy of reusable components.
Each component encapsulates its own logic, styles, and templates, making it
modular and easy to maintain.
● Two-way data binding, allowing synchronization between the model (business
logic) and the view (UI), reducing boilerplate code for handling UI updates.
● Dependency injection system that facilitates modular and testable code.
Services, components, and other dependencies can be injected
into each other.

19. NEDUET
Tradeoffs
● Not a popular choice for quickly bootstrapping applications, more commonly
used for large scale and already built applications.
● The transition from AngularJS to Angular (1.6 to 2 and later) was a substantial
rewrite and introduced several breaking changes. (Angular ivy 9+ too)
● Steeper learning curve.

20. SVELTE KIT
The modern metaframework
NEDUET

21. Overview
● Provides universal rendering of Svelte on JavaScript
runtimes like Node.js, near to JavaScript.
● Browser receives server rendered HTML and JS hydrates
● Built-in router with URLs based on components
NEDUET

22. Key Features
● Compiles to vanilla JS instead of a runtime which reduces JS
bundle size
● Data Fetching through the component’s JS file
● Exported load function can be imported and accessed
● Data available on Svelte Store, accessible from any component,
eliminating the need for complex state management
● Can handle server side actions, like form submissions, using zero
client-side JS
NEDUET

23. Pros
● Less verbose than React - feels like vanilla JS
● Unlike JSX, you bring JS into your HTML templating system
● Zero boilerplate compared to React
Tradeoffs
● Less market share
● Not so great for backend. Akin to using pure Node.js instead of
Express
NEDUET

24. Astro
The superfast web framework
NEDUET

25. NEDUET
Overview
● Fast and performant websites by default due to quick page loads
and experiences.
● It utilizes a "static-first" approach, where most of the site is pre-built
as static HTML during the build process.
● Selective addition of client side interaction by dynamically loading
javascript.

26. NEDUET
Features
● Framework agnostic, allowing developers to use their preferred
JavaScript framework or library, such as React, Vue, or Svelte.
● Island architecture results in "partial hydration," allowing for selective
client-side rendering of JavaScript for specific parts of the site.
● Optimized SSG to deliver fast-loading websites. During the build
process, it generates static HTML pages for most of the content,
ensuring rapid page loads and improved performance.

27. NEDUET
Tradeoffs
● Not a preferable option for heavily client centric applications, tools like
react and angular are more preferred there.
● The plugin ecosystem for Astro a bit less mature compared to more
established static site generators or client-side frameworks.
Wordpress, Shopify etc.

28. VUE JS
● Progressive JavaScript framework designed to be incrementally
adoptable, allowing Vue.js integration into existing projects gradually.
● Declarative approach to define the UI.
● Reactive data binding, to establish a dynamic connection between the
model and the view. Changes in the underlying data automatically
trigger updates in the UI, simplifying the state management.
● Rich ecosystem with official libraries and tools, such as
Vue Router for routing and Vuex for state management.
NEDUET

29. NEDUET
SOLID JS
● A declarative framework for building fast UI with maximum
control over reactivity.
● Similar to React, but uses a svelte style compiler instead of Virtual
DOM.
● Lacks industrial maturity.
● Lack of UI component library support.

30. “What should you choose for
your next project??”

31. “Thanks for joining.”
NEDUET