Skip to main content

D2. Design Document

Platform Selection

  • Programming languages: JavaScript, TypeScript
  • Front-end technologies: React.js
  • Back-end technologies: Node.js, Express.js, MongoDB, SalesForce API, ITI API
  • Development tools: GitHub, Jira, VS Code

Documentation

The previous group decided on the MERN stack which we will probably still use since it’s already implemented on the website but it’s good to look at the alternative as well and compare between them.

Reflecting on the choice of the MERN (MongoDB, Express.js, React.js, Node.js) stack for Buckner’s website, it’s worth considering how Angular, as an alternative to React.js within a MEAN stack (MongoDB, Express.js, Angular, Node.js), could potentially offer benefits that align closely with specific project requirements or team strengths.

Angular within the MEAN Stack
Pros:

  • Framework vs. Library: Angular is a comprehensive framework that provides a more structured
    and maintainable way of building web applications. This includes built-in solutions for routing,
    form validation, and state management, which might reduce the need for additional libraries
    and ensure a more uniform development process.
  • TypeScript-based: Angular is built on TypeScript, offering stronger type-checking and object-oriented programming features. This can lead to more robust and error-free code, especially in
    complex or large-scale applications.
  • Material Design: Angular has a close integration with Material Design, providing a suite of well designed UI components out of the box. This can significantly speed up the development of
    visually appealing and responsive interfaces.
  • Opinionated Architecture: Angular’s opinionated nature about how applications should be
    structured can lead to more consistent codebases, especially in teams with multiple developers.
    This could enhance maintainability and scalability of the application over time.

Cons:

  • Learning Curve: Angular’s comprehensive nature means a steeper learning curve, particularly for
    developers not familiar with TypeScript or the framework’s extensive list of concepts and
    features.
  • Performance: For very simple or small-scale projects, Angular’s size and complexity could result
    in slower initial load times compared to more lightweight solutions like React.
  • Less Flexibility: The opinionated approach of Angular means less flexibility in choosing different
    ways of doing things. Developers might find this restrictive, especially if they prefer a more
    “build-it-your-way” approach that libraries like React offer.

Reflections

Upon reflection, Angular could have been a strong contender for Buckner’s website for several reasons.
Its integrated approach could simplify the development process by reducing the decision-making
overhead associated with selecting and integrating various libraries. For a team well-versed in TypeScript and object-oriented programming principles, Angular could offer a more intuitive and streamlined development experience. Moreover, Angular’s Material Design integration could be particularly beneficial for rapidly developing a consistent and attractive UI without extensive customization or additional design resources. This could be crucial for projects with tight deadlines or specific aesthetic requirements.

However, the choice of Angular and the MEAN stack would ultimately depend on the project’s specific needs and the development team’s expertise. While Angular offers significant benefits in terms of structure and maintainability, the MERN stack’s flexibility and the widespread popularity of React may better serve projects requiring rapid development and a more extensive ecosystem of libraries and tools. In conclusion, while the MERN stack remains an excellent choice for Buckner’s website, considering Angular within the MEAN stack framework could provide valuable insights into alternative development methodologies.

Client requirements

There wasn’t really any requirements the client gave us. They gave us free reign to implement this however we want but since we were given a pre-existing website that uses React, JavaScript, Typescript, Node.js, Express.js, and MongoDB, we decided to keep using the MERN stack instead of recreating the whole website from scratch.

The client told us that we will have to figure out how to integrate a Salesforce API to connect to the Buckner Website. The API call will allow you to grab data from their database and show it on the frontend screen.

Sources:

Architectural Design