Technical Coding Practices: A Modern Approach to Web Development

As part of our collective mission to elevate the quality and consistency of UAE government digital services, this guide presents a focused approach to technical coding practices. While the UAE Design System offers a unified visual and experiential foundation, its real strength comes from how well it is implemented — and that begins with clean, structured, and component-driven code.

This document is written for developers, engineering leads, and technology partners delivering websites and web applications for the UAE government. It complements the existing front-end best practices guide by detailing how to write code that is robust, readable, reusable, and maintainable over time.

The Case for Clean Code

Clean code is not just a stylistic preference — it directly influences maintainability, team velocity, onboarding ease, and the long-term sustainability of digital services.

Key Guidelines:

Use Meaningful Naming

Choose clear, descriptive names for variables, functions, and components to improve code readability and understanding.

Avoid Duplication

Apply the DRY (Don't Repeat Yourself) principle to minimize redundancy and keep the codebase maintainable and clean.

Limit Function Complexity

Each function should ideally do one thing. Smaller, focused functions are easier to debug, test, and reuse.

Comment Intentionally

Write code that explains itself. Use comments to provide context or reasoning — not to describe what is already obvious from the code.

Enforce Consistent Formatting

Use tools like Prettier and ESLint to automatically maintain consistent code formatting and reduce code review time.

Keep Files Purposeful

Organise code into purposeful files and modules. Avoid bloated files by grouping related logic and maintaining separation of concerns.

Structure in code

As digital platforms grow, structure becomes critical for collaboration and scaling. Structured code improves:

Readability for new team members
Predictability in large codebases
Reusability and testability

How can you do these?

Follow a practice that follows a standard folder structure. If you are building a website, and using an existing CMS (Content Management System), you most probably are creating a custom theme or a design relevant to that CMS. Here are some patterns to follow:

Place “assets” such as CSS, Javascript, fonts and images in a parent folder

theme/
-- assets/
---- css/
---- js/
---- fonts/
---- images/
---- icons/
... etc

Follow the conventions set by the CMS. Do not invent a new structure or naming convention that a new team member will not understand.

// An ideal structure for a WordPress theme

theme/
-- theme_name
---- assets/
---- includes/
------ hooks
------ modules
... etc
---- functions.php
---- header.php
---- footer.php
---- index.php
---- front-page.php
---- page.php
---- single.php
---- archives.php

When creating a structure in React or Vue.js, aim to have a structure such as this:

src/
├── components/      # Reusable UI elements
├── pages/           # Route-level components
├── services/        # API calls or business logic
├── hooks/           # Reusable stateful logic
├── assets/          # Images, fonts, icons
├── types/           # TypeScript definitions
├── utils/           # Utility functions

Follow a Component-Driven Architecture. The UAE Design System is inherently component-based. Developers should embrace this paradigm fully to ensure modularity, reuse, and consistency across services.

Key elements to follow in this architecture should be:

Single Responsibility

Each component should serve one purpose.

Isolation

Components should manage their own state unless state is shared via props or context.

Reusability

Extract commonly used UI patterns into design system-aligned components.

Testing

Unit test individual components and their logic.

Coding Patterns that Support the Design System

Developers working on government projects must work in a way that enhances — not overrides — the structure provided by the UAE Design System.

Reference base components when creating new modules.

Extend rather than rewrite component styles.

Apply accessibility roles and ARIA attributes natively.

Style 3rd party components to match the UAE Design System.

Override system styles unnecessarily.

Create components without using the UAE Design System library.

Hardcode layout values or colours.

Introduce third-party components that break the visual/system language.

Designing for different browsers and devices

Government digital services must work for everyone — on every device, every browser, and in every location (within UAE as well as from any other location). This guide provides practical advice for designing and developing web services that remain accessible, functional, and consistent across a wide range of platforms, including older devices and low-bandwidth networks.

Following these guidelines ensures inclusivity and aligns with the UAE Design System’s principles of accessibility, performance, and user-centricity.

Support a broad range of browsers

Government websites and applications must support widely used and legacy browsers to ensure access for all users. Adhering to modern standards while gracefully handling older technology is essential for digital inclusivity.

Google Chrome

Support the current and previous major versions on desktop and Android.

Safari

Support Safari on iOS and macOS (latest two major versions).

Microsoft Edge

Support Chromium-based Edge browsers (current and previous version).

Firefox

Support current and previous Firefox versions on desktop and mobile.

Modern Browsers

Ensure compatibility with browsers supporting ECMAScript 2015+ and CSS Grid/Flexbox (e.g., Brave, Opera).

Graceful Degradation

Provide fallback functionality for older browsers (e.g., Internet Explorer 11) where possible.

Key Considerations:

Do not block users from accessing a service based on browser detection.

Test layouts and functionality using a browser matrix.

Avoid browser-specific hacks — use standard, semantic HTML and modern CSS.

Design for a Variety of Screen Sizes

Build responsive layouts starting with the smallest screens first. Use CSS media queries to adapt the interface for larger screens.

A media query is a CSS technique that uses the @media rule to add a block of CSS properties when certain conditions are met. For example, if the screen size reaches a certain point, a media query indicates when to show X instead of Y.

A media query consists of an optional media type (all, handheld, print, TV, and so on) and any number of optional expressions that limit when the query will trigger, such as width, pixel-density or device orientation.

Fallbacks and Graceful Degradation

Services should remain functional, even if some advanced features are not supported

An important upgrade in CSS is the @support API. This has been available in browsers since September 2015. To put that in perspective, Google Chrome has supported this CSS API since version 83 - while in 2025, Chrome has reached version 140. You can learn more about this on https://caniuse.com/mdn-css_at-rules_supports_selector

Example;

@supports not (display: grid) {
.layout { display: block; }
}

Learn more about CSS in detail in our Best Practices for CSS guide

Prioritise Performance on Low-Bandwidth Networks

A significant portion of users may access government services in environments where internet connectivity is slow, unstable, or costly. Optimising performance for low-bandwidth networks ensures inclusivity and prevents digital exclusion. Developers can achieve this by implementing strategies that reduce page weight, minimise unnecessary requests, and load only what is necessary — especially on mobile devices.

Optimisation Techniques:

Use lazy loading for images and scripts
Optimise all media with appropriate formats (e.g., WebP, AVIF)
Implement asset compression (gzip or Brotli)
Use efficient caching headers and CDNs
Reduce dependency on large JavaScript libraries

Test Tools:

Lighthouse (Simulate 3G/4G)
Chrome DevTools (Throttling tab)
WebPageTest.org

Ensure Keyboard and Touch Support

Some users rely exclusively on a keyboard, screen reader, or touchscreen. Your interface should support all input types.

Checklist:

All interactive elements must be reachable by keyboard (Tab key)

Focus states must be visible and distinguishable

Touch targets must be at least 44x44px

Avoid hover-only interactions

Supporting different languages and layouts

A section that gets overlooked by developers is the method to tell the browser or search engines about how to understand the language of the current page.

As a developer working for UAE Government projects, you must ensure all website pages and services work seamlessly in both Arabic and English. You must also ensure that you are adding 2 key elements to your code in regards to language.

Arabic Direction

Use the correct direction attribute for Arabic content:

dir="rtl"

Language Declaration

Set the page language in your HTML element:

<html lang="en">

Additional Best Practices

Mirror layout and navigation for RTL users
Load fonts that support both Latin and Arabic glyphs
Ensure proper alignment and spacing in both directions