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