Skip to content
Ashley-Kapaso edited this page Aug 30, 2024 · 3 revisions

Architectural Design Strategy

The chosen architectural design strategy is design based on quality requirements. This approach focuses on ensuring the system meets the key quality attributes and non-functional requirements that are most critical for ClassConnect's success. By prioritizing scalability, performance, usability, and other quality attributes from the start, the architectural design can be optimized to fulfill these needs.

Architectural Patterns

  • Service-Oriented Pattern: ClassConnect will implement a service-oriented architecture to promote scalability and performance. The system will be divided into two main services: the Learning Hub and the 3D Environment. This approach allows for independent deployment, and scaling of each service.

  • Client-Server Pattern: ClassConnect will follow the client-server architectural pattern, with a centralized server application and multiple client applications (web browsers) connecting to it. This separates the concerns of providing services and rendering the user interface.

  • Peer-to-Peer Pattern: For the real-time communication in the 3D environment, a peer-to-peer (P2P) pattern using WebRTC will be used. This avoids the need for a central server to stream data to each client. Instead, clients will connect directly and stream environment updates between each other in a mesh network.

Architectural Quality Requirements

  • Scalability: The system should be able to scale to handle an increasing number of users/organizations with minimal impact on performance. Since ClassConnect is built for educational institutions which tend to have a large number of students this quality requirement is important.

  • Performance: The 3D environment rendering and streaming must have low latency and maintain a high framerate to provide a smooth user experience and make the learning experience pleasant.

  • Usability: The system should be intuitive and easy to use for both lecturers and students, regardless of their technical expertise. As ClassConnect aims to enhance the learning experience, a user-friendly interface is crucial for widespread adoption and effective use in educational settings.

  • Availability: The platform should maintain high uptime and be accessible to users whenever needed, as educational activities often have strict schedules. ClassConnect should aim for 99.9% availability to ensure that classes and learning materials are accessible at all times.

  • Security: The system must implement robust security measures to protect user data, intellectual property, and ensure the integrity of the learning environment. As ClassConnect will handle sensitive educational information, strong security protocols are essential to maintain trust and comply with data protection regulations.

Architectural Design and Pattern

Client-Server

Client-Server Diagram

Peer-to-Peer

Peer-to-Peer Diagram

Technology Choices

Options

User Interface:

React

Overview: React is a popular JavaScript library for building user interfaces, particularly single-page applications. It's maintained by Facebook and a community of individual developers and companies.

Pros:

  • Large ecosystem and community support
  • Virtual DOM for efficient updates
  • Reusable components

Cons:

  • Steeper learning curve compared to vanilla JavaScript
  • Requires additional libraries for state management and routing
  • Can be overkill for simple websites

Architectural Fit: React aligns well with the client-server architecture, providing a robust framework for building interactive UIs. Its component-based structure supports modular design and reusability, fitting well with our architectural strategies.

Vue.js

Overview: Vue.js is a progressive JavaScript framework for building user interfaces. It's designed to be incrementally adoptable and can easily scale between a library and a full-featured framework.

Pros:

  • Gentle learning curve
  • Flexible and easy to integrate with existing projects
  • Good performance and small size

Cons:

  • Smaller ecosystem compared to React
  • Less suitable for large-scale applications
  • Potential over-flexibility leading to inconsistent code practices

Architectural Fit: Vue.js's lightweight nature and flexibility align well with our client-server architecture. Its progressive framework approach allows for scalability as the project grows, supporting our design patterns and constraints.

Backend Services:

Express.js

Overview: Express.js is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.

Pros:

  • Minimalist and unopinionated, allowing developers to structure applications as they see fit
  • Large ecosystem of middleware
  • Easy to learn and use

Cons:

  • Lack of built-in structure can lead to inconsistent code organization in large projects
  • No built-in support for more advanced features like WebSockets
  • Requires manual setup for many common tasks

Architectural Fit: Express.js's flexibility aligns well with our client-server architecture, allowing us to structure our backend as needed. Its minimalist approach supports our design patterns and constraints while providing the necessary tools for API development.

Django

Overview: Django is a high-level Python web framework that encourages rapid development and clean, pragmatic design.

Pros:

  • Batteries-included approach with many built-in features
  • Strong ORM for database interactions
  • Built-in admin interface

Cons:

  • Can be overkill for smaller projects
  • Less flexibility compared to more minimalist frameworks
  • Steeper learning curve for developers not familiar with Python

Architectural Fit: While Django introduces a different language (Python) to our stack, its robust features and built-in security measures align well with our architectural strategies. Its ORM and admin interface could potentially streamline development processes.

Database:

PostgreSQL Overview: PostgreSQL is a powerful, open-source object-relational database system with a strong reputation for reliability, feature robustness, and performance.

Pros:

  • ACID compliant with strong data integrity
  • Supports both relational and non-relational data models
  • Excellent for complex queries and data analysis

Cons:

  • Can be more complex to set up and maintain compared to some NoSQL databases
  • May require more resources for simple, high-read scenarios
  • Vertical scaling can be more challenging than with some NoSQL solutions

Architectural Fit: PostgreSQL's robust features align well with our client-server architecture, particularly if our application requires complex queries or transactions. Its support for both relational and non-relational data models provides flexibility in our data design.

Redis

Overview: Redis is an open-source, in-memory data structure store, used as a database, cache, and message broker.

Pros:

  • Extremely fast performance due to in-memory operations
  • Supports various data structures
  • Great for caching and real-time applications

Cons:

  • Limited persistence options compared to traditional databases
  • Data size limited by available memory
  • Less suitable for complex queries or large datasets

Architectural Fit: Redis could complement our architecture as a caching layer or for handling real-time features, enhancing the performance of our application. Its speed aligns well with our focus on creating a responsive user experience.

Final Choices

User Interface:

SvelteKit

Overview: SvelteKit is a framework for building web applications using Svelte, a modern JavaScript compiler. It provides server-side rendering, routing, and code-splitting out of the box.

Pros:

  • Fast performance due to compile-time optimizations
  • Small bundle sizes
  • Simple and intuitive syntax

Cons:

  • Smaller community compared to React or Vue
  • Fewer third-party libraries and components

Architectural Fit: SvelteKit aligns seamlessly with our client-server architecture, serving as an ideal frontend solution. Its lightweight and efficient nature enables us to create a highly responsive client-side application, complementing our server infrastructure.

Reasoning for Final Choice: SvelteKit is selected as the final choice for the user interface due to its excellent performance characteristics and simplicity. While React and Vue.js offer larger ecosystems, SvelteKit's compile-time optimizations and smaller bundle sizes align better with our goal of creating a fast, efficient user interface. The intuitive syntax will likely lead to faster development cycles and easier maintenance, outweighing the drawbacks of a smaller community and fewer third-party libraries.

Backend Services:

NestJS

Overview: NestJS is a progressive Node.js framework for building efficient and scalable server-side applications. It uses TypeScript and combines elements of OOP, FP, and FRP.

Pros:

  • Modular architecture promotes code reusability
  • Built-in dependency injection for better testability
  • Strong TypeScript support enhances developer productivity

Cons:

  • Steeper learning curve for developers new to TypeScript or decorators
  • Can be overkill for simple applications
  • Performance overhead due to abstractions (though generally negligible)

Architectural Fit: NestJS provides a robust and structured backend that complements our SvelteKit frontend. Its modular design allows for scalable and maintainable server-side code, supporting our client-server architecture with powerful API development capabilities.

Reasoning for Final Choice: NestJS is chosen as the backend framework due to its strong TypeScript support and modular architecture. While Express.js offers more flexibility and Django provides a batteries-included approach, NestJS strikes a balance between structure and scalability. Its use of TypeScript aligns well with modern development practices, enhancing code quality and maintainability. The built-in features for dependency injection and modular design will support the application's growth and complexity over time, making it a more suitable choice for our project's long-term goals.

Database:

MongoDB

Overview: MongoDB is a document-oriented NoSQL database that offers high performance, high availability, and easy scalability.

Pros:

  • Flexible schema design allows for agile development
  • Horizontal scalability through sharding
  • Rich query language and indexing capabilities

Cons:

  • Lack of built-in joins can complicate some queries
  • Higher storage requirements compared to normalized relational databases
  • Not ideal for applications requiring complex transactions across multiple documents

Architectural Fit: MongoDB's document model aligns well with JavaScript objects, making it a natural fit for our Node.js-based backend. Its scalability and flexibility support our application's potential growth, while its performance characteristics complement our focus on creating a responsive user experience.

Reasoning for Final Choice: MongoDB is selected as the primary database due to its flexibility and scalability, which align well with the potentially changing requirements of our application. While PostgreSQL offers robust relational capabilities and Redis excels in caching scenarios, MongoDB's document model provides a good balance between structure and flexibility. Its ability to scale horizontally through sharding is particularly valuable for future growth. The seamless integration with JavaScript objects also complements our Node.js backend, potentially simplifying data handling and reducing impedance mismatch. However, we may consider incorporating Redis as a caching layer in the future to further enhance performance for specific use cases.