Universal Framework for Consistent Campus Web Apps

Sydney Heller / Nathan Lai
-
Proctor

The IWE Framework project focuses on facilitating application development across the UCLA campus by providing services and tools available to all developers in order to create consistency throughout applications within the MyUCLA umbrella hassle-free. The MyUCLA web portal houses many applications for virtually every type of campus affiliate, justifying a need for a centralized utility to handle the diversity in functionality and user base. The approach of the IWE Framework project in order to aid in campus-wide MyUCLA development has two main facets: the first being the Menu Data & Layout API (also referred to as just the “Framework”) and the IWE Style Guide web components (also referral to as the “Style Guide”).

From the perspective of the “Framework”, our goal was to enable developers to quickly and easily create a web page, using any technology stack, without having to worry about 3 key aspects of the MyUCLA ecosystem: the header, the footer and the complex mega menu. MyUCLA users can immediately recognize MyUCLA web features based on these three elements and are accustomed to using them, thus we deemed it pertinent to create a way for developers to create the MyUCLA layout on their page while only doing minimal groundwork upfront. In short, the API we created allows a developer to quickly and painlessly retrieve the entire basic layout of a MyUCLA feature, including the header, footer and rendering of the MyUCLA mega menu via a custom HTML Element and simple API call.

While the Framework deals with MyUCLA branding outside of the main content area, the Style Guide targets the actual content of an application. The IWE Style Guide is a library of plug and play web components built on the Google Polymer Project platform for the consumption of MyUCLA developers in order to create a consistent and coherent look and feel throughout different MyUCLA web features. Ranging from simple text guidelines and link styling to custom HTML inputs, autocompletes, buttons and dropdowns, the Style Guide focuses on creating distributed, reusable components to not only ensure consistent styling and functionality across MyUCLA features but also to incorporate blanketed adherence to modern W3C accessibility standards.

Both the Framework and Style Guide include all appropriate design and implementation documentation.

Previous Knowledge

No previous knowledge is strictly required, although at least some basic knowledge of HTML and Web Development would facilitate understanding of the content.