Modern frontend applications are no longer limited to simple webpages and forms. Nowadays, they handle large datasets, complex user interactions, and intensive computations, all inside a single browser.
And I believe it is a good idea to understand the basic types of applications and their nature, so that whenever you start working on an application, a problem, or even a feature, you already have some foundational understanding in place. This helps guide your intuition and enables you to architect better, more scalable applications.
So, Let's learn these types:
Data Heavy Applications
These are the applications that deals with massive datasets and presentation of the data in different kinds of visualizations such as charts and tables.
Example:
- Finance trading and banking dashboards
- Social media feeds such as facebook, instagram, reddit and even dev.to
- Analytics dashboards and Log processing systems
- Ecommerce platforms such as Amazon, Flipkart, EBay
Common problems:
- performance issue due to large lists of data
- rendering a large number of DOM elements can be time-consuming and resource-intensive for browser
- UI freezing issues
- Complexity of data structure and data management and state
Common solutions: Our goal is to reduce the memory usage and page load times while keeping the UI responsive
- pagination
- infinite scroll or lazy loading for on demand data.
- windowing: Windowing is rendering only the visible portion of a list to the screen. react window or react-virtualized are two libraries used in react to achieve this.
- web workers: Offloading heavy data processing or sorting tasks to a background thread to prevent the UI from freezing
Compute heavy applications
Applications that require intensive data processing, calculations and heavy rendering, comes under compute heavy applications category. These are often CPU and GPU heavy.
Example:
- video rendering: Youtube, photo editors, video editors
- Google Maps
- 3D Modeling tools such as AutoCAD web
- Scientific simulations apps
- AI/ML apps running inference with TensorFlow.js
- Browser games
Common Problems: The primary bottleneck is often the single-threaded nature of JavaScript as it is handling both rendering and business logic
- Main thread blocking (intensive computations run on same thread as UI rendering)
- Frame drops and slow rendering
- DOM overload, Memory leaks due to unreleased listeners
- Browser and device variabilities
Common Solutions:
- Using web workers to offload heavy computations to background thread to keep UI free
- Windowing
- Throttle and debounce
- Memoization of expensive functions and calculations
Realtime Application
Applications that process inputs and outputs instantaneously within a strict time frame and with minimum latency.
Example:
- Chat apps like whatsapp, telegram
- Video conferencing apps like zoom, google meet
- Online games and IoT apps
- Transportation and logistics like Uber, Swiggy etc.
Common problems:
- Latency issues: delay between an action and its result
- High CPU and memory usage due to always-on nature of realtime apps
- Ordering of events and state synchronization
- Security risks
Common solutions:
- Optimistic updates: updating UI immediately assuming server request will succeed
- Using centralized state to maintain a single source of truth
- Throttle and debounce
- Web workers to offload data to background thread
Content Driven Applications
These are not typical applications that focus on high interactivity. Instead, these apps focus on fast delivery of content and readability of information. These employ strategies such as Static Site Generation (SSG) or Server-Side Rendering (SSR) for fast loading and SEO.
Examples:
- Blogs and new websites and web apps
- E-Commerce and Product catalog apps
- Documentations
- Marketing apps, Video streaming apps (youtube), etc.
Common Problems:
- SEO + Web Vitals for increased visibility on search engines
- Asset heavy nature forces you to deal with large images, videos and unoptimized media.
- Managing third party scripts and large frameworks, making sure you don't choke the browser and cause slow interactivity
- Rendering optimizations to support display of thousands of items
- Unpredictable traffic, Responsive design, Accessibility, and data managements are crucial things that you need to keep in check.
Common Solutions:
- Performance: Lazy loading for images, code splitting for reduced bundle size and use of modern formats for both images and videos such as Webp and avif.
- Utilizing rendering strategies such as SSG and SSR
- Virtualization and caching for large data sets rendering
- Using headless CMS and frontend application to decouple data management layer and presentation layer.
Transactional applications
Applications such as payment gateways, booking and banking systems are covered in this category. These require high security, robust state management and realtime updates.
Example:
- Payment gateways like stripe, paypal, razorpay
- Booking systems
- Online banking systems
Common Problems:
- High security and dealing with sensitive data + compliance requirements (PCI Compliance)
- Robust state management to maintain consistency
- Error handling and safe retry logics
- Race conditions and duplicate submissions
Common Solutions:
- Tokenization: Instead of sending raw credit card numbers, frontends use tokens provided by the gateway. This secures the data and limits compliance scope.
- use of SSL and HTTPS
- Introducing strict validations on both Frontend and Backend
- Implement Idempotency Keys: Ensure the frontend sends a unique key for each transaction to prevent double-charging in case of retries.
CRUD heavy applications
CRUD heavy applications focus on data management through Create, Read, Update and Delete operations. They require robust form handling, data tables, validations and filtering options.
Example:
- Admin panels and dashboards
- Inventory management systems, and CMS (e.g. Wordpress)
- Helpdesk portals,
- CRMs
- Task management and project management tools like Jira, Trello
Common Problems:
- Rendering massive datasets in the form of grids and tables
- Overfetching and underfetching of data
- Complex form states and overall state management
- Validations and sanitization of form data
- Filtering, sorting and search requirements across app
Common Solutions:
- Virtualization and pagination of data
- Debounce and throttle for search bars and inputs
- Using optimistic UI updates
- Decoupling UI and Data structures
- Consistency in both form validation and feedback when handling data
Event Driven Applications
Applications that rely on event based models such as notification systems, IoT modules, Microservices, comes under this category. Events are constantly produces and consumed in these kinds of applications and they use Pub/Sub Pattern to communicate
Example:
- Realtime order tracking
- Collaborative editors like Google Docs, Figma
- IoT control panels
- Stocks and trading platforms
- Notification systems in social media platforms
Common Problems:
- Order of events, race conditions, state sync
- High volume of events can flood the UI thread
- Debugging and state management
- Handling network failures
Common Solutions:
- Strict state management to keep UI predictable
- Implement idempotent consumers to allow safe processing of the same event multiple times
- Using timestamps and versions for maintaining event orders
- Using Optimistic UI updates
- Avoid blocking UI thread by using Server Sent Events, Websockets, and data filtering.
Hybrid applications
Applications that are a combination of above mentioned apps, example, E-Commerce Applications such as Amazon, Flipkart, eBay etc. They have all sorts of features ranging from chat solutions, transactional layers, data heavy UIs and have tons of features running parallelly in foreground and background.
Every frontend application has different priorities, constraints, and engineering trade-offs. A realtime chat system cannot be optimized the same way as a content-driven website. Knowing the nature of your application or even the feature, helps you take the right approach from the beginning.
Ultimately, great frontend architecture is not about using every advanced technique, it's more about brainstorming and apply the right solutions to the right kind of problem.