.png?w=3840&q=75)
.webp?w=3840&q=75)
.webp?w=3840&q=75)
DhiWise, a growing and globally beloved developer tool with more than 125K users as of today has processed 3M screens in over 200K+ applications since its inception, generating more than 20M lines of code every day. Achieving this milestone was never an easy job. And to celebrate that, this blog is for those curious minds interested in “How did they do it?”
Every day DhiWise can process more than half a million screens, and we are scaling it for more. Not only that, but also generates the entire source code for those Figma designs with the utmost accurate code.
Let’s take an overview of how DhiWise handles such large data and processes them to serve its users without any hurdle. We would also touch on a few points that make it dynamic to scale.
With the rapid growth of users on our platform, applications created by users, and screens being processed over our server daily we were prepared for such a scale. This motivation came from our users who kept building apps on our platform which eventually led us to Sync Design Changes, the most desired feature from our users that we delivered in a very short time, and other features such as more component identification, and modular and readable code. Providing a seamless experience to every user is our priority because developer experience has been a key point for us from day one.
At DhiWise, the process of turning a Figma design into functional code is a journey of precision and technological proficiency. It begins with the user providing us with their Figma URL and Figma authentication and culminates in the generation of clean, efficient code. But what happens in between? This story is about sophisticated algorithms, state-of-the-art cloud services, and a relentless commitment to user experience.
Our users begin their journey through the DhiWise platform or our dedicated Figma plugin. These entry points are designed to be user-friendly and intuitive, ensuring a smooth start to the screen processing experience.
Once on our platform, users provide their Figma URL along with the necessary authentication token. This step is critical for secure access to their Figma resources, laying the groundwork for the subsequent processing stages.
Upon successful authentication, the magic begins. We utilize AWS Lambda to interact with Figma APIs, processing the Figma resources. Lambda's serverless architecture allows us to handle these tasks efficiently, scaling dynamically to the demands of the operation.
In this phase, our custom AI models, running on powerful GPUs, kick into action. These models are designed for AI-based component identification and tagging, ensuring that each element of the Figma design is accurately recognized and categorized.
Next, we apply over 2000 custom in-house algorithms, developed specifically for more precise identification and processing of the components. This extensive suite of algorithms is our secret sauce, enabling us to achieve unparalleled accuracy in our design-to-code conversion.
… and we are working to incorporate more components, in each sprint.
Our users then engage with our micro frontend panel, where they can perform a variety of actions. This includes API integration, navigation adjustments, and modifications in design or components. Here, they can create, update, or delete components as needed, tailoring the outcome to their specific requirements.
Once the users finalize their inputs, our code generators spring into action, translating the processed data into clean, efficient code. This code is then stored securely on a personal secure AWS S3 bucket, ensuring its availability and integrity.
The final step in the journey is the delivery of the output to our users. They can download the generated code directly, sync it with their GitHub repositories, or use it with our VSCode extension. This flexibility allows them to integrate the output seamlessly into their existing workflows.
Throughout this journey, we have embraced a range of technical innovations while overcoming numerous challenges. Our microservices architecture is one such innovation, allowing us to break down the application into smaller, independent services that can be scaled as needed. This architecture is crucial for continuous deployment and integration, enabling us to update services without impacting the entire system.
The implementation of a multi-tenant architecture has also been pivotal. It allows us to serve multiple users and organizations efficiently, ensuring that each tenant's data is securely isolated. Moreover, running over 2000 AI algorithms concurrently, thanks to Kotlin coroutines, has significantly enhanced our ability to process screens rapidly and accurately.
All these technical endeavors boil down to one ultimate goal – enhancing user & developer experience. By streamlining the complex process of design-to-code conversion, we ensure that our users enjoy a seamless, efficient, and cost-effective solution. The low latency and rapid processing capabilities mean that developers can focus on building their apps without unnecessary delays or hitches.
As we look ahead, the future of DhiWise is brimming with potential. Our continuous pursuit of innovation positions us to enhance our AI capabilities and streamline the app development process. We are not just providing a tool; we are shaping a new era in app development, where efficiency, speed, and accuracy are paramount.
In conclusion, the journey of DhiWise in processing half a million screens daily is a testament to our commitment to simplifying complexity. By transforming the intricate dance of design and development into a seamless process, we are not just a tool but a partner for developers worldwide. As we continue to write our story, one screen at a time, we remain dedicated to driving the industry forward, redefining the boundaries of app development with each line of code we generate.
Did you like this blog? Want to read more like this? Let us know on Discord and be part of our community. And yes, we’re hiring!
