The Hydra

I created a .Net Core site last month that despite meticulous detail to trying to keep my architecture tight, my database and API interaction and as clear as possible, I felt there was one large portion of my site needing attention: the front-end.

Being full stack often feels like wrestling a hydra. Just when I feel I’ve gotten the gnarly heads of database control, service interaction, dependencies under better control – there’s always at least one head loose, biting away at me. That currently, for me, is JQuery.

Your basic .NET Core application template contains the JQuery validation script, but it seems every feature I might want thereafter requires me to add a JQuery plugin. Animation? Add a plugin. Not to mention if I want responsive design, we’re looking at Bootstrap, which of course, requires JQuery. Javascript error? Good luck finding which plugin is at fault.

Done, so done with this. I need to improve my front-end game!

My Game Plan

• For design: Bulma
• For everything else: VueJS

Why Bulma

I’ve been hearing about this for awhile on dotnet hangouts and loved it’s easy to read naming conventions. It’s documentation is clean and it’s style resembled enough of Bootstrap for me to feel comfy and move forward. I also liked that it was pure CSS, NO JS!

Why VueJS

This just felt very light and clean. I skimmed through the guide and really enjoyed Matt Rothenberg’s “A Vue.js introduction for people who know just enough jQuery to get by”. Using that as tutorial as a reference, I dove into my first attempt at VueJS.

Guinea Pig

Requirements

• a login form
• if the user selects I am… “a dealer”, the account number field is required
• if the user selects I am… “an employee”, account number field is disabled
• password required
• trim all text input fields

Code

Explanation

VueJS

First, I set the account field to :disabled=”isDisabled”, in my Vue, I set toggle to false (for initial load) and then in computed the isDisabled value by returning the value of toggle (false).

Then, I used v-on:change to call a method called “notNeeded” and pass it its own values. In my notNeeded method, I retrieve the value of that select, check for “E” (employee) and set toggle accordingly. Value runs through computed, setting “isDisabled” and enabling/disabling the account field.

I made some noobie errors, like I didn’t declare my variables in data (ex: selected: ”) and I added v-model to the div instead of actual input, but overall a good experience!

I finished off by adding a simple HTML required to my required fields and v-model.trim to get rid of trailing spaces on my text inputs.

Bulma

I actually just started with a section, using columns to divide my screen into 3’s and then use the middle column for my login “box”. I used the guide for the rest of the form setup and then finished off by encasing everything in a “hero” background (the first div) in a “is-light” color.