Skip to content

Frontend Architecture

Version: Arctyk ITSM v0.6.0+
Last Updated: 2025

This page documents the frontend architecture of Arctyk ITSM, including templates, SCSS, and JavaScript organization.

Overview

Arctyk ITSM uses a traditional server-rendered approach with progressive enhancement:

  • Django Templates - Server-side HTML rendering
  • SCSS - Modular, compiled stylesheets
  • Vanilla JavaScript - Progressive enhancement for interactivity
  • AJAX - For dynamic form submissions and updates

Template Architecture

See Template Architecture for detailed information.

Key Concepts

  • Inheritance - Base templates extended by page templates
  • Partials - Reusable template fragments
  • Blocks - Override points for child templates
  • Context Processors - Global template variables

SCSS Architecture

Directory Structure

STATIC_SRC/scss/
├── main.scss           # Main entry point
├── base/
│   ├── _reset.scss     # CSS reset
│   ├── _typography.scss
│   └── _variables.scss # Colors, fonts, spacing
├── layout/
│   ├── _sidebar.scss
│   ├── _topbar.scss
│   └── _grid.scss
├── components/
│   ├── _buttons.scss
│   ├── _forms.scss
│   ├── _tables.scss
│   ├── _modals.scss
│   └── _badges.scss
└── views/
    ├── _ticket_list.scss
    ├── _ticket_detail.scss
    └── _dashboard.scss

Build Process

# Compile SCSS to CSS
npm run build:scss

# Watch for changes
npm run watch:scss

See SCSS Structure for details.

JavaScript Architecture

Directory Structure

STATIC_SRC/js/
├── main.js             # Global scripts
├── components/
│   ├── sidebar.js      # Sidebar interactions
│   ├── modal.js        # Modal dialogs
│   └── dropdown.js     # Dropdown menus
└── views/
    ├── ticket_form.js  # Ticket form handling
    └── ticket_list.js  # Ticket list filtering

Patterns

Module Pattern:

// sidebar.js
const Sidebar = (function () {
  "use strict";

  function toggle() {
    document.body.classList.toggle("sidebar-collapsed");
  }

  function init() {
    const toggleBtn = document.querySelector(".sidebar-toggle");
    if (toggleBtn) {
      toggleBtn.addEventListener("click", toggle);
    }
  }

  return {
    init: init,
  };
})();

// Initialize on DOMContentLoaded
document.addEventListener("DOMContentLoaded", Sidebar.init);

AJAX Form Submission:

// ticket_form.js
function submitTicketForm(form) {
  const formData = new FormData(form);

  fetch(form.action, {
    method: "POST",
    body: formData,
    headers: {
      "X-Requested-With": "XMLHttpRequest",
      "X-CSRFToken": formData.get("csrfmiddlewaretoken"),
    },
  })
    .then((response) => response.json())
    .then((data) => {
      if (data.success) {
        window.location.href = data.redirect_url;
      } else {
        displayErrors(data.errors);
      }
    })
    .catch((error) => console.error("Error:", error));
}

See JavaScript Patterns for details.

Static File Serving

Development

Django serves static files directly:

# settings.py
STATIC_URL = '/static/'
STATICFILES_DIRS = [BASE_DIR / 'STATIC_SRC']

Production

Nginx serves static files:

location /static/ {
    alias /var/www/arctyk/static/;
    expires 30d;
    add_header Cache-Control "public, immutable";
}

Collect static files:

python manage.py collectstatic

Asset Pipeline

Build Tools

// package.json
{
  "scripts": {
    "build:scss": "sass STATIC_SRC/scss:static/css --style=compressed",
    "watch:scss": "sass STATIC_SRC/scss:static/css --watch",
    "build": "npm run build:scss"
  }
}

Build Process

  1. Write SCSS in STATIC_SRC/scss/
  2. Run npm run build:scss
  3. CSS output to static/css/
  4. Django serves from static/css/
  5. In production, Nginx serves directly

Performance Optimization

CSS Optimization

  • Minification - Compressed output from Sass
  • Critical CSS - Inline critical styles in <head>
  • Lazy loading - Load non-critical CSS async

JavaScript Optimization

  • Minimize HTTP requests - Concatenate scripts
  • Defer non-critical JS - Use defer attribute
  • Code splitting - Load page-specific scripts only

Image Optimization

  • WebP format - Use modern image formats
  • Lazy loading - Load images on scroll
  • Responsive images - Serve appropriate sizes

Browser Support

Supported Browsers

  • Chrome - Last 2 versions
  • Firefox - Last 2 versions
  • Safari - Last 2 versions
  • Edge - Last 2 versions

Progressive Enhancement

Core functionality works without JavaScript. JavaScript enhances:

  • Form validation
  • AJAX submissions
  • Interactive components
  • Real-time updates