Frontend Stacks
Any application with a frontend benefits from the recommendations in this article.
The Administrative Systems Seal of Approval
These recommendations in this article serve as a good set of "default" options for things.
There may be use-cases where something else is better, but unless & until a justification can be made to use something else, you should draw from this list.
Using the same libraries will allow AS developers to transfer between projects more easily, as technical competencies developed in one project will be transferrable to other projects.
CSS Frameworks
There are three main CSS frameworks to choose from: Bootstrap, Tailwind, and the NU department templates:
| Package | Language | Purpose |
|---|---|---|
| Bootstrap 5 | SCSS | General purpose UI toolkit |
| Tailwind CSS | CSS | Bespoke website design |
| Northwestern Department Templates | SCSS | Official NU theme |
Bootstrap is a good 'default' choice for an application: it provides many ready-made UI elements, which will be consistent across all of our Bootstrap applications.
The NU department templates have a smaller number of UI components available, but will yield a look similar to northwestern.edu.
Tailwind should only be chosen for bespoke designs. For example, the alumni dev team used Tailwind to replicate designs provided by the Alumni Relations & Development marketing group. Replicating those precise mockup designs in Bootstrap would have been impossible.
Frontend Frameworks
There are a number of frontend JavaScript frameworks available.
| Package | Language | Purpose |
|---|---|---|
| None | JS | Simple apps may not need a framework |
| Vue | JS | Application framework |
| jQuery | JS | Building rich UIs |
| Livewire | Laravel (PHP) | Rich UI w/out writing JavaScript, but depends on AJAX/server round-trips |
| AlpineJS | JS | Rich UIs, all client-side, with tight integration into Livewire |
If your frontend needs are simple, consider vanilla JavaScript. A few form field dependencies or a single AJAX call likely do not merit bringing an entire framework into your frontend.
When your needs are more complex, Vue is the framework of choice. Vue is the recommendation for single-page applications (SPAs).
When working with our Laravel stack, Livewire is the "frontend" framework of choice, despite being a backend component.
Phasing Out jQuery
The use of jQuery in your application should be phased out.
jQuery served an important role as a cross-browser adapter & enhancement to what JavaScript functions were available to developers. In this current era, browser support for JavaScript language features is consistent, and enhancements have been made to the language that make many of jQuery's features redundant. This change will be reflected by Bootstrap in the upcoming v5 release.
There may still be UI components that depend on jQuery. Many of the Bootstrap 4-themed UI components (like bootstrap-select) rely on jQuery. This is a reasonable design choice for them in the Bootstrap 4 era, since Bootstrap itself depends on jQuery. Bootstrap 5 no longer depends on jQuery, so most of these components have stopped working with it.
UI Widgets
These are ready-made UI widgets like form controls.
| Package | Type | Purpose |
|---|---|---|
| AutoNumeric | Vanilla JS | Improved number input for forms, esp. for money |
| DataTables.net | jQuery | Rich table UI w/ AJAX support |
| bootstrap-datepicker | jQuery | Date field w/ calendar pop-up |
| bootstrap-select | jQuery | Filterable <select> w/ great multiple support |
| TinyMCE | Vanilla JS | Rich text editor |
| Font Awesome | CSS | Icons |