Improve your DX to boost team productivity
Tags: webdev, productivity, frontend, development
Published: 2024-04-10 17:29:41

## What is DX (Developer Experience)

In simple terms, "DX" stands for **_"Developer Experience."_** It refers to how easy and pleasant it is for software developers to work with a particular tool, framework, or platform. Just like User Experience (UX) focuses on how users interact with a product, DX focuses on the experience of developers who are building that product. 

Good DX means developers have clear documentation, helpful error messages, easy-to-understand APIs (Application Programming Interfaces), and efficient tools that help them write, test, and deploy code smoothly. In essence, DX aims to make the developer's job easier, more efficient, and more enjoyable.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/35i1lkektebt37zicb8y.jpeg)

_Image Credits : [Addy Osmani](https://addyosmani.com/dx/)_

---



## How it's important for [Intigral](https://www.intigral.net/)

As a leading OTT app provider in the MENA region, Intigral's OTT Platform is powering 2 leading OTT apps [STC TV](http://web.stctv.com/) and [Jawwy TV](http://web.jawwy.tv/) for 15 different countries and it's integrated with major telcos in the MENA region.

As part of this offering and to bring the best "User Experience (UX)" to end-users, we need to iterate the ideas quickly and promote the best offering to clients with the best onboarding experience.

### Some of the challenges in the development cycle

- **_Distributed team across the globe_** (Dubai, Riyad, Ukraine, Pakistan, India, Germany)
- **_People rotation and replacements_** which leads to non-avoidable onboarding and knowledge transfer process
- **_Continuous Project re-prioritization and KPIs adjustments_** based on market feedback and competitor analysis
- **_Maintainability of a large number of Use Cases_** across 2 apps and different telco bundles
- **_Tech depts_** - Feature Vs Improvements prioritization

### Overcoming the challenges - **_First Principles_** 

To tackle the challenges 1 year back we started to adopt the First Principle practices and started treating "DX" as a core feature to build into our Dev Sprints along with the Feature Epics.

### What is **_First Principles_** ?

- Fast is better than slow
- Friction must be zero from the start
- Allow developers to take incremental steps
- Enable developers to learn by doing
- Decide for me, but let me have the final say
- Fight uncertainty, don't leave the developer hanging
- Show code in context, not just a "hello world" app
- Create magical moments using **<u>secret</u>** sauce

Purposefully eliminate speed bumps. You really want to create pathways that encourage developers to apply their energy more precisely on creativity, ingenuity and app logic instead of _solving the same problems again and again_.

## How the **_First Principles_** is implemented in project


### **_Continuous Improvements_** - Step by Step approach

For a product with more than a Million existing customer base, we have adopted a **_Continuous Improvements_** approach to refactoring, like introducing a new Web Tech stack in a step-by-step approach without impacting the planned deliverables.

"DX" has played a pivotal role in this journey. It has helped the web team adapt to the process with **_guards_** in place, which empowers the team to ship confidently and eliminate friction.

#### What are the **_Guards_**

1. **Monorepo** - no more standalone code repos for design, dev testing, Ops team.

- **Eliminated** the Design hands-off process
- **Automation for manual tasks** - no more copy & paste 
  between multiple code repos.
- **Easy Project Onboarding** - Any new developer can 
  setup the developer matching in 10 minutes with 1 
  automation command compared to the previous manual 
  process of setting up the dev environment with different 
  servers and lengthy setup process.
- **Unified coding standard and linting rules** - 1 repo 1 
  coding standard for the entire team


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4itxn4a4wsz19hwrdu1g.png)


2. **Unit Testing** as part of the PR approval process.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sdhw93gdnser9ihhdg8n.png)


### Web component Library - for supporting Web Apps

- **_Reusable, Testable & Modular_** component Lib
- Increase the **_reusability_**
- **_Storybook integration_** with Visual testing for multiple resolutions and localizations
- **_Theming support_** - Can adopt and test with new theming in an isolated approach
- **_Rapid UI Use case adaption_** - Decreased the feature completion timeline by 40% and UI bugs by 70% 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/abe4ju76vgouu4ykg5hh.png)


### Data Domain (DD) Library - for supporting multiple web clients

As part of the project restructuring/refactoring efforts, we have developed a Data Domain (DD) Library based on the [Onion Architecture](https://medium.com/expedia-group-tech/onion-architecture-deed8a554423). 
The primary objective of this DD Lib is to create a **_separation of concern_** from the UI Logic and the Business Use Cases including the Network calls are handled inside this separate lib.

This architectural pattern has significantly reduced the Bugs peaking in the UI Layer and reduced the bugs fix cycle to 50%

- **_Data encapsulation_** - This fully Unit tested lib is responsible for providing data and handling use cases.
- High Unit Test coverage with a layered architecture.

### Documentation

Effective documentation practices are indispensable for the seamless operation of DX principles. Without them, the collaborative efforts of developers can quickly become encumbered, leading to inefficiencies and potential conflicts among team members.

A significant challenge inherent in documentation is its tendency to become quickly outdated, rendering it less reliable over time.

To address this issue, our strategy involves the implementation of the auto-generation of documents from code. Coupled with comprehensive code comments, this approach proves to be a transformative tool, enabling developers to efficiently search, reference, and repurpose information as needed.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nokzvqqqjsijz50iqphm.png)


## Conclusion

The foundational principle of commencing with First Principles lies in taking the **initial step**. In the backdrop of continuously evolving dynamics and emerging web standards, it is crucial to adapt to new benchmarks continually. For developers, there is no greater satisfaction than witnessing the deployment of their work in live environments, with Developer Experience (DX) serving as a pivotal aspect of fostering and development.