Frontend web frameworks

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