Skip to content

Rewrite fossology UI into angular proposal

Jump to bottom
Vivek Kumar edited this page Feb 17, 2021 · 1 revision

Project Introduction

The Document outlines the feasibility over the implementation of the project making it easy for the students to learn the code design and flow of the project, that can be taken into consideration for the implementation of the project.

Angular is mainly used to divide the UI components and make them flexible to update and as reusable as possible. Based on the Angular framework all the components of the UI will be separate component.

Current Implementation:

  • Fossology has UI based on symfony twig.
  • As the application is growing, more and more templates are added.
  • Common operations are not common.
  • Component re-usability is limited to certain extent.
  • Adaptation of new design is likely difficult.
  • Two different ways of managing the rendering ( script, UI.php).

How framework can be better ?

  • Everything is component, and these components are not limited.
  • Similar to twig we have if else, for loop and different operations that we can perform in UI Components.
  • For every component HTML, CSS, Script and Test Cases are stored in different files.
  • Components Re-usability.
  • Common operations of UI can be exposed as a service to different components.
  • Use of two way binding keeps the UI always in sync with the script.
  • Gives more layered and component driven approach to UI code.
  • We can give the power of node engine to our UI. Making all NPM accessible.

Proposed code design:

FOSSology can expose SLIM based REST API, to communicate with the UI.

Development of all the components and functionality follows below architecture in the project, This architecture leads to create of component or functionality end to end without any dependency with other components thus making it very flexible to work on.

Reading FOSSology Updating FOSSology

Based on the above design the project can be divided into components and all the components must follow the above flow.

How we can do it ?

  1. We can create a set of UI pages which are tightly coupled.
  2. Separate everything into component and sub components.
  3. Code the UI.
  4. Make an API Call accordingly in FOSSology.
  5. Work on the API to Integrate it completely with the UI.

Look into demo project:

Please get demo code from here

For More Information or help please feel free to reach anytime:

@viv9k

Clone this wiki locally