-
Notifications
You must be signed in to change notification settings - Fork 0
Technology Decisions
- Angular is an application design framework and development platform for creating efficient and sophisticated single-page apps, and the latest version is using typescript. Our sibling team uses Angular for their application FOM with an initial reason of reusing some of the previous code. It uses the 2-way data binding which is a big advantage we love
- React is a JavaScript library for building user interface, which also supports the typescript. We met other teams using react and leaflet map. It's lightweight and uses virtual dom which makes refreshing data faster in web pages
- Vue.js is a JavaScript framework for building user interfaces. It builds on top of standard HTML, CSS and JavaScript, and provides a declarative and component-based programming model that helps efficiently develop user interfaces. The latest version supports typescript, and it combines the advantages of both Angular and React
Here there is a good documentation about the comparison of the aforementioned frameworks
Our decision for frontend framework is Vue.js. Vue3 combines the advantages of angular and react, also supports the features our team members like. It supports typescript, and the code style has the similarity as angular and react, which is easier for developers from different background to quickly get start. All of the three framework are good options, we select based on our preference :D
- Arcgis javascript api allows us to build maps with all the features supported by Arcgis online. Our TAP data is supported by arcgis, and it doesn't need extra packages for drawing and geo searching. But we might have license issues along the way
- Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps. We like that it's open source, and has many plugin options. The drawing and geo searching need extra packages, but could get recommendations from the leaflet official plugin page
Here, there is a good documentation for map framework comparison. We select leaflet at his momement because it's open source and has a large community
- formsflow.ai is a super powerful tool that supports form building, workflow, security and it's open source. It seems a little bit complicate to integrate with, but we could always request a demo and onboarding session with the AOT team
- Common Hosted Form Service (CHEFS) supports form building, easy to use and supports the form submission and review, but seems like not support file upload
- Plain form written in vue and bootstrap, use the html2pdf node package to convert the webform to the pdf format. It works as doing a screenshot, and save it as a pdf file, so it won't display any hidden html element. It can be converted to the format of a data url string, and then saved as a variable or send through email, and this is our choice
- Common Hosted Email Service (CHES) provides the api for us to send email with attachments, onboarding details are documented in this closed issue
We use Bootstrap for creating UI components, it's really powerful and supports vue3
We chose Axios as our promised-based HTTP client because it supports all browsers, automatically stringifies the data when sending requests and it is very easy to use
Vue3 recommends Vitest for unit test and cypress for end to end tests. They are builtin frameworks from Vue build tool - Vite
We want to use a node.js backend so we only need one package manage tool. We select NestJs, which is a framework for building efficient, scalable Node.js server-side applications. It uses progressive JavaScript, is built with and fully supports TypeScript and combines elements of OOP (Object Oriented Programming). Our sibling team uses it and we have the Greenfield-template using it. It also supports an integration with OpenAPI. It also provides an integration package @nestjs/typeorm which makes the connection with database easier
We selected the OpenAPI as it works well with our backend framework nestjs and also allow us to try the execution and the requests through the web, which is really helpful and convenient
PostgreSQL and PostGIS
- Github Issue: create issues for Jira tickets in the format of "[jira_number]: [issue name]", like "FSADT1-171: data validation", and put jira ticket url in the comment
- Branch: create a new branch with the Jira number, for example "FSADT1-171"
- Commit message:
git commit -m "[commit convention, feat/fix/debug/doc/refactor/test]/[frontend,backend,database,pipeline]: message, refs: #[github issue number]", likegit commit -m "feat/frontend: updated web form, refs: #35" - Pull request:
- pull request (to dev) name in the format of "Merge [github_issue_number]: message", like "Merge #37: enable data validation"
- pull request (to main) name as "Merge to main: merge sprint 3"
[ ] User login - Authentication (keycloak)
[ ] Add check of file size, upload loading time
[ ] Add restriction for clicking submit button, check if all required field are entered, in correct format
[ ] Add feedback page, show the user the form got sent out or having error what they should do
[ ] Add some testing for both frontend and backend
[ ] Check how to store files
[ ] Create required tables
[ ] Update the pipeline to create/store db data
[ ] Format the development convention, branch name, pull request name, how to connect to jira ticket, commit message, place for learning doc
[x] Contribute on Greenfield template to provide a sample connection between backend and database, and update our repo to match this update
[x] Explore how to make a production deploy, we current don't have a prod namespace to play around: moved the deployment to new namespace, need to run the network policy config yaml to setup the namespace
[x] Frontend can successfully get response from backend through api calls: added frontend urls to cors whitelist in backend to avoid the cors issue; use ConfigMap and volume mount to pass env variables to frontend as in this pull request