UI Choices are hard⌗

For slate bench I always knew the type of things I wanted the UI to do.

• Workflow based
  • No Edit User, instead do ChangeAddress, ChangeName ect.
• Avoid Dark Patterns
  • Ad Networks
  • Javascript not related to business needs
  • Newsletters that auto-sign you up

What was really hard has been figuring out what to use. I come from experience of Angular. I knew I didn’t want to use Angular. I also would really like to be able to use ASP.NET core to do some of the heavy lifting.

Queue 3 prototypes⌗

Vue.js SPA Vuetify⌗

This was my initial approach. And I really really liked it, until I didn’t. It felt fast but when I started keeping a lot of state and calling the graphql things got blocky quick. I also hated when things would go sideways and it would take me forever to track them down.

I probably spent 30 hours working on this. Got 6 pages done and it felt good but I didn’t think it would scale well given the people who would be working on it.

Bootstrap Asp.Net⌗

Quick, easy to setup and I hated making the UI. The UI felt stodgy and wasn’t what I wanted. I knew I would still be writing a lot of js to support interactivity so steered awayh from this one.

Vue.js non-SPA with Asp.Net Vuetify⌗

To be fair I made 3 approaches on this one before finding something I like. In this each page has a standalone Vue app that loads and the data is passed from the Razor Page to the data field in the Vue app. That way all my interactivity is through Vue. It also means that if I ever want to transition to Vue SPA then that road is available. The loading of data is all done through the dotnet code and then passed has json to the app.

Problems⌗

Things like color, menu options are all in a base class and having each Vue app be duplicated means changing something fundamental is a huge PITA. I also don’t get server side rendering, which if this was highly SEO driven project would be a problem.

Findings⌗

In a future entry I will post up a sample of the code, and would love any feedback to mattdurham@ppog.org