logo
  • Products
  • Resource
  • Pricing
  • Login
DhiWise Logo

Design Converter

  • Technologies
  • Resource
  • Pricing

Engineering

Fundamentals: How DhiWise Generates 20M+ Lines of Code Daily

Authore Name
Bhavesh Bheda

Engineering Manager

Authore Name
Prashant Dodia

Engineering Manager

Last updated on May 2, 2024

Detail Image

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.

DhiWise Code Generation.png

Motivation

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.

The Process Overview

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.

Step 1: Entry Points - DhiWise Platform/Figma Plugin

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.

Step 2: Authentication and Figma URL Submission

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.

Step 3: Processing Figma Resources with AWS Lambda

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.

Figma Screen Process.jpg

Step 4: AI-Based Component Identification with GPU-Powered Models

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.

Step 5: Application of 2000+ Custom In-House Algorithms

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.

List of components DhiWise supports for Flutter and Web:
  1. Button
  2. EditText
  3. TextArea
  4. SearchView
  5. DropDown
  6. RadioButton
  7. CheckBox
  8. Floating Button
  9. IconButton
  10. Switch
  11. Progressbar
  12. Seekbar
  13. RangeSeekBar
  14. RattingBar
  15. Textview
  16. ImageView
  17. CircleImageView
  18. Line
  19. HorizontalScrollView
  20. Row
  21. Column
  22. Stack
  23. RadioGroup
  24. ListView
  25. GridView
  26. StaggeredGridView
  27. ExpandableList
  28. TabBar
  29. Pagger
  30. ImageSlider
  31. Indicator
  32. Drawer
  33. Dialog
  34. Read More Text
  35. Map
Additional List of components DhiWise supports only for Flutter:
  1. FloatingTextField
  2. OTPView
  3. ScrollView
  4. ChipView
  5. AppBar
  6. BottomBar
  7. BottomSheet
  8. Phone Number Input with country picker
  9. Section List
  10. Slidable List
  11. CalendarViewStepper
  12. Selection List
  13. QrCode
  14. Barcode
  15. Fragment/Widget
  16. WebView
  17. AutoCompleteTextView
Additional List of components DhiWise supports only for Web:
  1. Header
  2. Header Menu
  3. Header MenuItem
  4. Header SubMenuItem
  5. Footer
  6. Sidebar
  7. Sidebar Menu
  8. Sidebar SubMenu
  9. Table
  10. Table Header
  11. Table Data
  12. PreviousSliderControl
  13. NextSliderControl
  14. Links in Header/Footer

… and we are working to incorporate more components, in each sprint.

Step 6: User Interaction and Customization on Our Micro Frontend Panel

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.

Step 7: Code Generation and Storage

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.

Step 8: Final Output - Download, Sync with GitHub, or Use with VSCode Extension

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.

Technical Innovations and Challenges

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.

User & Developer Experience and Efficiency

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.

Future Directions and Vision

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.

Simplifying Complexity

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!

Read More