feat: use JS library for front end
mtfoley opened this issue · 5 comments
Based on conversations in discord and twitch streams, it sounds like the use of Vue or Angular could be on the roadmap. Also on the roadmap could be turning some of the tau front-end aspects into an NPM package. For a little discussion, see PR #33 .
@FiniteSingularity @0-vortex I managed to get webpack and vue going in a different one my branches. Still loads of work to do with it, but neat nonetheless.
Required Reading:
TODO:
- change destination file locations
- work build step into docker-compose (?)
webpack is potentially difficult for new users but generally solid in support and lambda compatibility of providers - technically speaking my active background is nodejs backend and devops tooling so I would ask a couple of questions related to:
- how do you envision application deployment for your own stream
- are current tau users accustomed to a certain pattern (have a moderate answer for django but depending on client direction apps can be built static or require some processing)
- is the scope of the client immediate in nature or do you want to focus on tau backend/functionality with a minimal mvp and let users build multiple clients going further
Frontend architecture is a thing but it needs to follow a certain observable ancestor - in this case the tau django business logic itself. I believe the frontends should not be too complicated right now and would treasure user and contributor consensus over future proofing - concrete example regarding vue, it has some drawbacks if there is only one contributor able to write it comfortably, same thing can apply to react and X ui framework.
Not trying to go off topic but the client has a lot of potential deployed as a managed instance at some point - disconnecting the visual client from tau you could host some in the cloud for users and spare them the entire deployment saga - people interested in the client could contribute and focus solely on it so it's an exciting topic to say the least !
Didn't really prove as much concept this time (I know even less what I'm doing 🤷 ) but I've got a branch going to stand up angular here.
Steps were:
- in main directory run
npm init - install angular CLI globally.
- run
ng add tau-ui - setup npm script to put built files:
cd tau-ui && ng build --output-path ../tau/templates/static/ng --output-hashing none - add built files to
tau/templates/base.html
So for contributing, users would need to also install angular cli globally.
after brief convo on Discord yesterday, just wanted to leave a note here about bootstrap-vue. Here are the requirements noted for it:
- Vue.js v2.6 is required, v2.6.12 is recommended
- Bootstrap v4.3.1 is required, v4.5.3 is recommended
- Popper.js v1.16 is required for dropdowns (and components based on dropdown), tooltips, and popovers. v1.16.1 is recommended
- PortalVue v2.1 is required by Toasts, v2.1.7 is recommended
- jQuery is not required
I'm going to try and take a few minutes to look at the existing dashboard and map these out to which components we might use from bootstrap-vue.
Vue.js 3 is now being used (along with the primevue UI kit) for the frontend, as of PR #81