Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Single page app front end conversion, diary and targets management #13

Open
wants to merge 49 commits into
base: master
Choose a base branch
from

Conversation

AustinGrey
Copy link
Contributor

Merry Christmas! As my local government issued a shutdown for the holidays I've had plenty of time to get my ideas coded for the diary and targets.

  • After nearly finishing the diary in the existing front-end, I realized I had taken a bad direction by trying to integrate a chart to display targets, and that the UI with a chart was far too hover based to be remotely useable on a touch device.
  • I have also been using vue again in other paid projects (it's been a few years), and I realized that I could rapidly develop the diary and targets management and improve maintainability if I used vue rather than pure js components.

So I scrapped it all and rewrote it in Vue. With that in place the whole frontend is now so decoupled from the backend that I have had success running them on separate servers. Realistically the only benefit having Django serve the front end is so that the front end can take advantage of Django's built in authentication system. But if you have PANTS served over HTTPS, then the front end can safely send credentials with each request to authenticate. Everything transitions faster in vue, and the JS api for PANTS has been refactored to provide a much more semantic syntax. I'd love to hear feedback if you have any on how the front end works, or if you have experience with Vue components and want to look at the code I'd appreciate code feedback too.

I was not convinced this code was actually the direction I wanted to take. Sure a chart seemed useful, but it relied on hovers to provide valuable information, which is not a long term viable strategy.
Dealing with 1 non UTC timezone is hard, dealing with 2 arbitrary non UTC timezones is harder.
…not shown on load, allow selects to not require a label.
…alue

To later allow highlighting a specific constituent part
…for release.

npm run build -- --mode staging will need to be run before every new release of the frontend to ensure it gets compiled to the right directory. See https://www.valentinog.com/blog/vue-django/
@AustinGrey
Copy link
Contributor Author

Please note that as part of this PR, I've changed the server timezone to UTC. This could be a breaking change for your django admin backend work. But converting from local time to an arbitrary timezone and vice versa in JS is a nightmare, while converting from local time to UTC and vice versa is pretty well supported. Let me know what your thoughts are.

@dylanleigh
Copy link
Owner

Hi @AustinGrey

Thanks for the PR, I'm excited to have a responsive single-page app frontend running. I haven't used Vue before but will look into it.

Sorry its taken me so long to respond, I've been unwell and offline for a while. I'll take a detailed look at everything as soon as I can.

-- Dylan

@dylanleigh dylanleigh self-assigned this Jan 10, 2021
@AustinGrey
Copy link
Contributor Author

@dylanleigh good to hear from you. No rush on this. It's a lot of change and I had the gall to scrap the entire front end after you no doubt took the work to review it the last time I submitted. If you have any declarative js framework experience like react or angular 2+, then that translates pretty well to vue. If not there is a lot to digest there, but I personally feel like I moved twice as fast in the development of the diary and targets compared to the previous front end pages despite having what amounts to only 4 months of vue experience, so I consider the switch worth it.

Additionally there is little change in the existing UI's, they have just been translated to Vue. I'm working on responsive designs for everything down to something as small as 320px wide in a separate branch that's not yet at the point I'd like to make a pull request.

Hope you are feeling better soon.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants