SSB9 Tech Stack: Step 5 ‐ HTML Rendering and User Interface - Arch-Node/personal_studies GitHub Wiki

Back to SSB9 Tech Stack Overview

The Ellucian Self-Service Banner 9 (SSB9) user interface is designed to provide an intuitive, accessible, and responsive experience for students, faculty, and administrators. The UI is built using modern web technologies that interact with backend services to deliver real-time information and seamless navigation.

SSB9's frontend is developed using Angular and React, which offer:

• Component-based architecture for reusable and maintainable UI elements.
• Efficient state management with Angular Services and React Context API (Redux and NgRx may be used in complex applications but are not universally implemented).
• Client-side routing for a smooth single-page application (SPA) experience.
• API integration to dynamically fetch and render data from backend microservices.

1. User Requests a Page

   • The browser loads the index.html file.
   • JavaScript bundles (Angular or React) are fetched and executed.

2. Component Rendering & API Calls

   • UI components (e.g., dashboard, student records, financial services) are initialized.
   • API calls are made to backend microservices to retrieve user-specific data.

3. Dynamic Content Update

   • Data is rendered dynamically within UI components.
   • Changes in data trigger state updates, ensuring a real-time user experience.

4. User Interaction & Navigation

   • Users interact with the application via buttons, forms, and menu selections.
   • Client-side routing ensures a seamless, app-like navigation experience.

• The UI follows Ellucian's Design System (EDS), ensuring consistency and usability.
• CSS styling primarily leverages EDS components, while additional customization can be applied using CSS/SCSS.
• ARIA roles and WCAG compliance ensure accessibility for all users.
• Custom theming options allow institutions to align the UI with their branding.

• Lazy loading ensures that only necessary components are loaded initially, improving page speed.
• Minified JavaScript and CSS reduce load times.
• Caching strategies for UI assets improve performance, but full offline support via service workers is not a core feature.
• CDN-based delivery for static assets optimizes loading but may be managed through Ellucian's proprietary infrastructure.

Example of a React component rendering student records:

import React, { useEffect, useState } from 'react';
import axios from 'axios';

const StudentRecords = () => {
    const [records, setRecords] = useState([]);

    useEffect(() => {
        axios.get('/api/student/records')
            .then(response => setRecords(response.data))
            .catch(error => console.error('Error fetching records:', error));
    }, []);

    return (
        <div>
            <h2>Student Records</h2>
            <ul>
                {records.map(record => (
                    <li key={record.id}>{record.course}: {record.grade}</li>
                ))}
            </ul>
        </div>
    );
};

export default StudentRecords;

User → Browser Requests UI → Angular/React Loads → API Calls to Backend → Data Rendered → User Interaction

The SSB9 UI layer is a modern, scalable, and accessible frontend solution designed to enhance user engagement. By leveraging Angular/React, REST APIs, and the Ellucian Design System (EDS), SSB9 delivers an intuitive and seamless self-service experience for higher education institutions. While state management varies by implementation, React Context API and Angular Services are commonly used, and caching strategies primarily optimize UI performance rather than full offline support.