Skip to content

Frontend Architecture

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