Share

FSU Online Directory

//FSU Online Directory

Client Details

I just finished helping Frostburg State University with their major site wide redesign. Now it was time to look at individual applications and optimize each app. View project
18.

An Upgrade to Real Time

  • Date : Oct. 17, 2017
  • Client : Beth Thomas
  • Location : Frostburg, MD
Beth Thomas

[The Frostburg State University] Online Directory looks good and the new features are very helpful.

Overview

Frostburg State University had a previous Online Directory built on an ASP/.NET stack. They had initially chosen this stack for the easy integration with IIS and Active Directory due to having a limited web team. The previous online directory had a very cluttered design; there were multiple form fields for searching each individual AD Attribute (one for first name, last name, etc) and multiple checkboxes for options like case sensitivity. The form also had a hidden priority, so filling in one field would override another without any warning. After about two years of being on the FSU Web Team I was tasked with redesigning the entire system from scratch to fit the new website and server architecture I had also recently planned and rebuilt.

Overview
0
Seconds to Load
0
Avg. Requests Per-Day
0
% Avg. Down Time

The Objectives

  • Easy to Use - Universities can struggle to adapt to new technology so the new product needed to be simple and easy to use. The previous directory had tons of check boxes and switches for filters, which caused numerous complaints.
  • Speed - the previous directory could take upwards of 2 minutes to entirely search all users and groups.
  • Efficiency - the previous system, due to the way it was programmed made multiple, sometimes upwards of 10-15, AD calls per-search. With 2K searches a day this adds up quickly!

Visual Design

In order to simplify the directory as much as possible I wanted to remove as much user interaction as possible. The previous form had so many additional fields, buttons, checkboxes, and drop downs that it easily overwhelmed people. We had many complaints of users not being able to find the proper filter or toggle for something. Early on I realized this was due to the cluttered visual design and decided a minimalist approach would probably be best.

In order to meet that end I decided to do some User Experience research (UX) on simple searching options. In the end I decided to go with a solution commonly called an "OmniBar." An Omnibar is just one search field that intelligently searches everything. Google Chrome was the first large software project to implement this design type and it was extremely popular due to its simplicity.

online-dir-compare.png

Even the need for clicking the "Search" button was removed with Javascript. All users have to do is start typing. Once the typing stops a search is automatically launched in the background. The page doesn't reload and takes less than 0.5 seconds to update with the new information. The new information of Departments and User is gently pulled from off screen and slides into place.

All of this is accomplished with a single Active Directory call which is wrapped in two GraphQL calls.

Technology

GraphQL

During the full website redesign a GraphQL interface was setup to handle all web data transactions. To maintain this a new GraphQL Query Schema was written to allow users to search AD. The Query was written to accept a raw Active Directory Query that VueJS would generate and search based on that query.

As the Active Directory query is being ran, the GraphQL Schema starts working on the Department List as well. The Department list is generated based off a Django Database and then joined together with the AD Query. Everything is serialized as JSON and sent back to VueJS to be displayed.


Python + Django

A new app was added to Frostburg's Django instance to handle all of the GraphQL and Python logic needed for this project. This app handled the primary GraphQL Queries as well as a number of helper functions and the Department List. Previously the Department List was read directly out of a CSV text file. For our new application, this file was converted to a Postgres Database drastically decreasing loading times.

This application also handled all of the Active Directory integration. While Django does not support AD integration out of the box, multiple great OSS projects have worked to provide this functionality. After a thorough review, I decided to use django-python3-ldap because at the time, it was the only project I could find that supported Python3.


VueJS

VueJS was chosen because of its low barrier to entry and easy of use. With minimal setup I was able to get the other developers, who were mostly inexperienced with Javascript, into the environment and helping finish this project. The primary purpose of the VueJS library was to handle the Asynchronous/AJAX calls for data, handle the OmniBar updating, and to handle the rendering and animations. VueJS excelled in all aspects keeping our code library extremely small and readable.

The VueJS app follows a very simple implementation, just utilizing a debounce function on the Omnibar. With that function, as soon as the user breaks in typing, the entire search function is launched in the background. An Active Directory Query is built on demand based off of the users input, sent to the GraphQL API, and returned all under a second!


Frostburg State University saw real results! You can too! Contact me about your project now!

Post Mortem

This project was an overwhelming success. When large projects like this are launched we generally expect a push back a few users, however in this case there were no issues. Surveys given to students through the Student Government Association rated the update as a 5/5 in 100% of responses!

Post Mortem
0
Seconds to Load
0
Avg New Sessions

Frostburg State University saw real results! You can too! Contact me about your project now!

© Jeremy Spencer 2018 / All rights reserved.
Connect
Close