Tech & Work

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