Software Architectures (S1-24_SEZG651) Assignment 2 PDF

Software Architectures (S1-24_SEZG651) Ankita Khurana Roll no. : 2024TM93013 BITS Pilani Company : Adobe Assignment 2 Objective: o To gain experience in architecting real life applications...

Software Architectures (S1-24_SEZG651) Ankita Khurana Roll no. : 2024TM93013 BITS Pilani Company : Adobe Assignment 2 Objective: o To gain experience in architecting real life applications in domains such as Retail, Transportation, Healthcare, Hospitality, etc. Example systems: Swiggy, Uber, an IoT system to monitor health of industrial air conditioners. o Architecture Selected : Adobe’s Web UI Architecture Activity: 1. Identify top 3 Architecturally Significant Requirements (ASRs) and write them in the form of a Utility tree. Why are these architecturally significant? 2. Describe in detail, the tactics you recommend for each ASR. For example, if caching is a tactic you recommend, please mention what you will cache, what tool you would use, how it will work, etc. 3. Draw 2 software architecture diagrams – component & connection view and deployment view – to understand how the system works. 4. Indicate important messages between components by labelling the connections in the C&C view. Also indicate the communication method used. 5. Draw sequence diagram for one major scenario (use case). Mention the scenario. 6. State the architecture patterns used. Explain, where in the architecture, these patterns have been used. 7. What did you learn by doing this assignment? Mention 3 key learnings. 2 BITS Pilani, Deemed to be University under Section 3 of UGC Act, 1956 Contents S.No Title Slide No. 1 Purpose of the System [Introduction to the System] 4 2 Key requirements of the system 5 3 ASR 6 - 14 1. Utility Tree 2. Top 3 ASR Utility Tree shredded 3. Architectural Significance 4. Tactics used to achieve ASR 4 Software Architecture Diagram 15 - 17 1. Component & Connection View 2. Deployment View 3. Sequence Diagram [Zoom Feature] 5 Software Architecture Diagram : Architecture Patterns Used 18 - 19 6 How the system works 20 - 22 1. LLD 2. HLD 3. Explanation 7 Key Learnings 23 8 Glossary 24 3 BITS Pilani, Deemed to be University under Section 3 of UGC Act, 1956  Purpose of the system (Goal) : Adobe's Web PDF Rendering System A generic frontend that can be used as both an external and internal frontend rendering API platform for smooth PDF Rendering. The system includes features such as PDF preview, annotations, sidebar with comments, thumbnails, user profiles, upsell capabilities, support for protected and linearized PDFs, e- sign PDFs, and document sharing. BITS Pilani Key requirements of the system Functional Non-Functional PDF preview in different screen sizes High performance specially for 1st Annotation Tools (Draw, Highlight page etc) Better rendering of PDFs than native Sidebar with comments browser capabilities Thumbnails Usability, good UX for customers User profile management Security for Protected Pdfs Upsell for anon and free users Support for all screen sizes Support for protected and linearized APIs available for both internal and PDFs external tools to integrate the system E-sign PDFs Document sharing BITS Pilani Utility tree of Architecturally Significant Requirements(ASR) BITS Pilani Top 3 : Utility tree of Architecturally Significant Requirements(ASR) BITS Pilani Why these 3 are Architecturally significant Interoperability Significant as Adobe Pdf is not just a single product, but a product used in multiple integrations like acrobat.com, chrome extension, edge Addon, Microsoft team's app, Google Drive Integration, customizable Pdf viewer etc. To support such a vast application base we must create a single robust solution and creating a single standardises application which supports interoperability is a must. Common Plugin API Enables different clients (internal/external) to consume a uniform plugin structure, enhancing maintainability and ensuring a consistent user experience. Module and Iframe Embedding Allows integration with external marketing sites and third-party tools, increasing the application’s flexibility and reach. Performance All web products combined user base is above 90+ Million, and the experience which we should provide should be smooth enough to retain such a large-scale customer. Specially the “PDF Render” as people are more interested in reading the content first than to start using any tools on the pdf. Additionally in case of any lags they might fallback to native experience of opening pdf in desktop or browser. First Page Load Optimization This feature minimizes the time to the initial response, which is also very important in retaining users and makes the time to load the app embedded in app More responsive. First Action Availability (Select Tool) Allows users to access the most relevant tools with the load which improves how users interact with the app and decreases bar riers. Modifiability UI which we support keeps changing constantly with respect to new features added , A/B tests done to update the UI and constantly improving user experience, such a dynamic product needs architecture which is very extensible and easily modifiable. Additionally, around 20+ teams work on var ious drop-ins[features], core , integrations projects. Any one change should not break things for others. New Drop-In Feature Addition Supports the rapid addition of new features for testing or production, essential for agile development and iterative testing. Existing Feature Removal Allows agile teams to remove features seamlessly without disrupting the user experience, which supports A/B testing and feature flexibility. BITS Pilani Tactics used to achieve : Interoperability (Common Plugin API) Standardized Protocols What The Common Plugin API enables multiple plugins to operate across the application ecosystem using a standard interface that provides features such as authorization, sharing data, and navigating the system. Why To make sure that each of the drop-ins contributes to building composite applications by making the best of available shared services and data, we offer joint approaches for constituents’ inclusion. How The developers are integrating other plugins in their drop-ins through the Common Plugin API by employing the provider methods and structures which are intended for discoverability during the dc-discovery project. Further, each drop-in package should be accompanied with a bootstrap file such that it describes the attributes and how it gets loaded. Tools Custom tool called dc-discovery for registering and discovering drop-ins dc-core: A common library that all components (apps, drop-ins, providers) link to. It serves as a wrapper around third-party libraries (like React), providing a dynamic link library (DLL) bundle. The version of dc-core linked by an app determines the compatible versions of drop-ins and providers that can be loaded. Testing frameworks like Jest employed to ensure reliability and performance during the integration process. BITS Pilani Tactics used to achieve : Interoperability (Module and Iframe) Modular "Drop-In" Architecture What Dropins can be grouped to create a cohesive website or web application that serves as an iframe. Dropins have a standard structure and the bootstrap.js is the main provider for each dropin initialization. Why Modules promote reusability and maintainability, enabling independent feature development. Iframes are ideal for embedding third- party content without altering the parent application whereas the Dropins that are grouped are all-encompassing. How To make use of a Module, developers add it in to their application and utilize the API or its components. To use an Iframe, developers embed it using the tag with the appropriate attributes like src, width, height. Tools Bundlers: Webpack, Rollup. Package Managers: npm, Yarn. Frameworks: React HTML/CSS: For embedding Iframes. BITS Pilani Tactics used to achieve : Performance (First Page Load) Performance Optimization What It is the first load time, which is the initial time taken by a website or application to be loaded into a user's device when the user accesses it. Why It affects user experience; if the load time is high, then satisfaction and the bounce rate decrease. How Optimize Assets: Reduce the size of CSS, JavaScript, and images. Lazy Loading: Non-critical resources load when required. Asynchronous Loading: Loads JavaScript files without waiting for rendering. Tools Performance Monitoring: Google Lighthouse. Asset Optimization: UglifyJS. CDN Services: Akamai. BITS Pilani Tactics used to achieve : Performance (First Action Availability) Immediate Tool Accessibility What The time to get a PDF available for users after its content is rendered, which is derived from the time taken for a webpage to load. Why Users can speedily access content and, therefore, reduce frustration and boost productivity by fast rendering of a PDF. How: Dropins: Asynchronous loads if the dropin doesn't need to be loaded with rendering Library t5: Make the pdf rendering engine such that library does not block when loading. Use of Thumbnails Display a thumbnail on Organise section to provide a "loaded" feel for UX Tools: Loading : React async imports Performance Testing: Google Lighthouse BITS Pilani Tactics used to achieve : Modifiability (New Drop-In Feature Addition) Dropin in Components What It is the introduction of new functionalities in the existing Drop-ins to improve their capabilities and the user experience. Why Improve application flexibility to serve user needs and be competitive through offering latest features and integrations. How Proper Versioning: This gives integration of various applications so that you can choose the correct versions Dropin Discovery : Proper single source of truth for the providers and dropins each repository creates Plug and play : All dropin have the same "executeAction", "initialize" etc methods that makes easy to plug it as new feature, without the need to touch existing architecture Tools Development Frameworks: React for building user interfaces. Testing Frameworks: Jest for unit testing and integration testing. Version Control: Git for tracking changes and collaborating on development. BITS Pilani Tactics used to achieve: Modifiability (Remove Existing Features) Feature flags gradually removing the dropin What Enable easy feature removal for streamlined functionality and user experiences Why With large number of A/B tests going on live on production and constantly switching between what must be provided at what time example “Offers” etc, we need an architecture that enables us to handle these constant changes without code update and redeployments. We could do immediate adaptation to user feedback or changes to business needs by stripping features off without changing the general layout and functionality of the site, and also facilitate continuous A/B testing and agile development practices. How Establish a feature flagging system that enables features to be turned off and hidden without modifying the underlying core c ode base, which ensures that user experience is not adversely impacted by the change. Tool Feature management tools: Sophia is an internal feature flag tool from which feature flags are managed effectively. BITS Pilani Software Architecture Diagram – Component & Connection View BITS Pilani Software Architecture Diagram – Deployment View BITS Pilani Software Architecture Diagram – Sequence Diagram [ Page Zoom Functionality ] BITS Pilani  Architecture Patterns Used - 1 There are multiple variants of architecture used in the system 1. Plug-and-Play Architecture (Drop-ins) This architecture supports dynamic, replaceable parts that can include additional functionality without interfering with the core system. Where Used: Plug-and-play architecture throughout Viewer Drop-in, Preview Drop-in and Rendition Drop-in where the modular components can be plugged in or updated without changing the main code. For example, DC Web integrates the features of annotation and commenting as a drop-in and hence it is very flexible and easy to extend. 2. Layers Pattern System components are organized into a structured stack of layers, each of which is dependent on the level below, which promotes very clear responsibility and maintainability. Where Used: Implemented from Layer 0 (T5), the rendering engine, up to Layer 6 (DC Web, Embed Apps), which delivers the end-user experience. Each layer relies on the one below to perform specific tasks, such as: Layer 0 (T5): Core PDF rendering engine written in C++. Layer 1 (WASM Files): Allows PDF processing in the browser, interacting with T5. Layer 2 (Rendition Drop-in): Translates PDF data to a viewable format in-browser. Layer 3 (Preview Drop-in): Adds interactive features like annotations. Layer 4 (view-sdk-bundle): Combines drop-ins into a cohesive viewer. Layer 5 (Viewer Drop-in): Provides a fully configured viewer. Layer 6 (DC Web, Embed Apps): Exposes the viewer as an application interface for users. BITS Pilani  Architecture Patterns Used - 2 There are multiple variants of architecture used in the system 3. Client-Side Rendering (CSR) CSR renders data at the client's side thus reducing the server's workload and improving real-time interactions. Where Used: At Layers 2 and 3 (Rendition and Preview Drop-ins), which render PDFs within the browser using WASM. This way, direct zooming and annotations directly at the client side with improved user responsiveness without going for round-trips to the server. 4. Event-Driven Architecture Event-driven architecture asynchronously initiates actions when users perform interactions, hence making the systems more interactive and responsive. Where Used: Critical within Viewer Drop-ins and Preview Drop-ins; the pattern deals with the processing of triggered events in an asynchronous manner. The observer pattern is critical for ensuring that all UI elements such as sidebars and annotation tools have real-time updates while providing collaborative editing capabilities. BITS Pilani How the system works Layer Library structure Layer 6 DC Web[adobe.acrobat.com] Embed Apps[eg. Extension] Layer 5 Viewer Dropin - Used by DC- Embed Viewer - highly configurable sdk Web. Depends on view-sk-bundle. stitching up a bunch of dropins to create a viewer with tools/upsell Layer 4 view-sdk-bundle - sdk comprising a bunch of dropins like side-nav, global- nav, comments, preview, stitching them and creating a basic viewer Layer 3 Preview Dropin - interactable components on top pdf like annotations, comments, etc Layer 2 Rendition Dropin - Interacts with wasm files to paint an image of the PDF on the canvas Layer 1 WASM Files - Layer of code written for browsers to understand T5 https://developer.mozilla.org/en-US/docs/WebAssembly Layer 0 T5 - The Engine powering our PDF rendering (written in C++) BITS Pilani How the system works [HLD] BITS Pilani How the system works Explanation 1. The architecture picked for this assignment deals with the core "Embed SDK". 2. Embed SDK is consumed by various clients such as extensions, gdrive , ms team etc to render the Adobe's PDF Application 3. Embed internally consumed the view-sdk-bundle which bundles in all the dropins. 4. Every feature is bootstrapped from their "dropin" using the view-sdk-bundle 5. The view-sdk-bundle is responsible for creating the basic structure with most important preview dropin 6. When a user opens an embed app, the Embed Viewer initialises the react app which internally gets the viewer context and sets up the view sdk bundle to load the viewer and many other necessary features 7. Asynchronously the other dropins are bootstrapped for features on the viewer after the skeletal structure BITS Pilani  Key Learnings 1. I searched my company's history of architecture, understanding why the design decisions made at the present have been conceived in the past and how they evolve. 2. I was able to represent architecture in more than one context to be consumed by different views and various stakeholders. 3. I learned how to see my system through the architect's eyes; I learned how deployments occur and how to view a system from a bird's eye view. 4. I learned also how tactics are being done within designs, in a way that even those obvious solutions can be measured. 5. Therefore, by developing better insight into how different system components interact in a comprehensive system, I enhanced my critical analysis and recording of such complex architectures. BITS Pilani  Glossary 1. Dropin : Individual Testable and deployable repositories or modules responsible for a feature on the pdf application 2. Preview: Main area where pdf renders in the applictaion 3. Bootstraping: Loading of the Dropin, using common interface which all features inherits from 4. Ethos: It is an internal GitOps based Kubernetes-native CI/CD solution which offers the best of both CaaS and PaaS 5. Drop-In: A modular component that can be integrated into applications to extend functionality, typically providing specific features or services. 6. Provider: A service that provides some specific functionality or information to applications, typically designed to be used in conjunction with Drop-Ins. 7. dc-core: Core library to use as the core structure in building and integration of Drop-Ins and Providers into an application. 8. dc-discovery: It will help to discover as well as manage Drop-In along with Providers so that the same applications may be able to discover them. 9. Moonbeam: That is a type of deployment pipeline for controlling deployments of Drop-Ins and Providers in multiple environments. 10. DropinHarness: A local development harness for testing Drop-Ins, which lets developers first deploy in a controlled environment. BITS Pilani, Deemed to be University under Section 3 of UGC Act, 1956  Thank you ! Ankita Khurana 2024TM93013 BITS Pilani