Dart-ing Around the Server Side with Dart Frog

DeveloperSteve
Lumigo
8 min readJul 18, 2023

--

As an ardent follower and user of Flutter and a fervent admirer of the Dart programming language, my excitement is palpable as I delve into a deep discussion on Dart Frog, a groundbreaking backend framework. This innovation, centred on problem-solving for frontend application issues, is truly a new chapter in the realm of app development. With this emerging framework, the artistry and dynamism of Dart, a language that has played a quintessential role in forging highly adaptable and powerful mobile applications, are now making a leap towards the backend. All credit to this ingenious development goes to the forward-thinking team at Very Good Ventures (VGV).

Dart has made a name for itself in the tech industry, primarily for its use in Flutter, Google’s UI toolkit that enables developers to construct aesthetically pleasing and functionally robust applications across various platforms, using a single codebase. The finesse of Dart, which has added a new dimension to the field of mobile app development, particularly shines through Flutter, making it a trusted choice among developers for mobile app development.

However, with the introduction of Dart Frog, a product of the innovative minds at Very Good Ventures Team, Dart’s versatility is reaching new heights. Very Good Ventures Team, a consulting firm that specialises in Flutter applications, has already created waves in the app development world with their remarkable work on the Hamilton app. This was one of the first commercial applications built using Flutter, outside of Google, showcasing the power of Flutter in full swing.

While frontend development plays a crucial role in application creation, the significance of efficient backend management cannot be undermined. Any developer will attest to the fact that issues at the backend can have a profound impact on the overall performance of a mobile application, thereby affecting the end user’s experience. In essence, the smooth operation of the frontend is, in many ways, reliant on the effectiveness of the backend.

With this in mind, Dart Frog was developed to streamline the management of the backend and subsequently ensure a consistent performance at the frontend. It was in this quest that Dart Frog emerged as the solution, creating a seamless bridge between frontend and backend development.

DART ❤

Best known for its role in Flutter, Google’s UI toolkit for building natively compiled applications, Dart has been gaining adoption for its adaptability. Flutter has empowered developers to craft beautiful applications for mobile, web, and desktop from a single codebase. Dart’s excellence shines through Flutter, making it a reliable choice for mobile app development.

Dart’s versatility makes it the ideal choice for backend development. It’s optimised to create swift, efficient apps across any platform. Google already uses Dart on the backend for their package manager, pub.dev, which provides developers with an easy way to upload and integrate packages into their projects. Despite Dart’s capability for backend use, it’s seen limited application due to a lack of tooling and abstraction over low-level components.

With the ability to leap tall stacks in a single bound, Dart can run on a server, generate a native executable, or compile to JavaScript and machine code, enhancing its appeal and flexibility. As Flutter continues to rise in popularity, more developers are likely to desire using Dart on the backend.

Dart Frog

Still in its early stages, Dart Frog is nonetheless a stable open-source framework, with the VGV team working towards a 1.0 release sometime this year. Dart Frog aims to make the developer experience as straightforward as possible while keeping the framework lightweight. It provides a simple core, a set of functions that every developer will need, with additional modules for extra functionalities that can be added later on.

The beauty of Dart Frog lies in its ability to simplify the process of creating endpoints with Dart and offering utilities for developers that make code easily testable and provides hot reloading — a popular feature in Flutter that updates changes in real-time, essential for collaborative app development.

Dart Frog also simplifies the deployment of APIs in the cloud to facilitate communication with a frontend application. The process of generating a new Dart Frog project, defining a couple of endpoints for communication with a frontend application, and then deploying it, takes only a few minutes. Deployment guides are available for popular cloud providers like Google Cloud, AWS, or Digital Ocean.

One of Dart Frog’s significant advantages is the control it offers developers over the communication channels between the mobile app and the backend. As a result, there is no need to push new releases to the App Store every time changes are made to the legacy systems — these changes can be fixed in the middleware, maintaining the same contract and ensuring everyone’s satisfaction.

Deploying a Dart Frog Sample App

To kickstart a new Dart Frog application, open your terminal, navigate to the directory where you wish to create the app, and execute the following command:

dart_frog create my_first_app

You will see an output similar to:

✓ Creating my_first_app (0.2s)
✓ Installing dependencies (1.8s)
Created my_first_app at ./my_first_app.
Get started by typing:
cd ./my_first_app
dart_frog dev

You should now have a directory called my_first_app. Navigate to it with:

cd my_first_app

Then, initiate the development server with the following command:

dart_frog dev

This will start the development server on port 8081:

✓ Running on http://localhost:8081 (1.4s)
The Dart VM service is listening on http://127.0.0.1:8182/YKEF_nbwOpM=/
The Dart DevTools debugger and profiler is available at: http://127.0.0.1:8182/YKEF_nbwOpM=/devtools/#/?uri=ws%3A%2F%2F127.0.0.1%3A8182%2FYKEF_nbwOpM%3D%2Fws
[hotreload] Hot reload is enabled.

To verify if everything is running correctly, open http://localhost:8080 in your browser or use cURL:

curl http://localhost:8080

If the setup is successful, you will see Hello from Dart Frog App!.

Congratulations, you’ve now created your first application using Dart Frog. Check out the full source code to learn more about how the project is structured and get inspiration for your own applications.

This simple app serves as a stepping stone, and you’re encouraged to expand it further. Dart Frog is designed to be scalable and adaptable, allowing you to build robust backend systems that perfectly complement your Flutter frontend.

Delving a little deeper into the Dart Frog world

What is exceptionally fun here is that not only do you get a working app backend with the power of Dart’s hot reload (by default!), but you also get some basic debugging tools to go with it.

Looking back at that server start message you’ll notice the following local devtools complete with a debugging url and token

The Dart VM service is listening on http://127.0.0.1:8181/t7weioq8gmg=/
The Dart DevTools debugger and profiler is available at: http://127.0.0.1:8181/t7weioq8gmg=/devtools?uri=ws://127.0.0.1:8181/t7weioq8gmg=/ws

Opening that in a browser will then give you a host of local debugging options

Debugging to the Moon!

In an era where software complexity is continuously increasing, the need for proficient debugging and observability has never been more paramount. This is particularly the case when deploying applications, where unseen challenges may potentially interrupt or degrade the user experience. Here is where Open Telemetry, a set of APIs, libraries, agents, and instrumentation, comes into play. It’s a pillar of the modern observability stack, designed to provide developers with insights into their applications’ inner workings.

One potent way to ramp up your debugging game is by integrating Open Telemetry into your Dart project. Dart’s burgeoning ecosystem boasts of numerous open-source projects that facilitate this, with one of the most notable being ‘opentelemetry-dart’. This tool bridges the gap between Dart and Open Telemetry, enabling you to seamlessly collect and send telemetry data from your Dart applications. Its user-friendly nature and extensibility make it a worthwhile addition to your tool belt, especially if you’re keen on maximising the observability of your applications.

To harness the full power of Open Telemetry, it’s a fantastic idea to pair it with a third-party distributed tracing and debugging tool such as Lumigo. Lumigo specialises in providing automated monitoring for serverless and container architectures, shining light on potential issues that may impact your applications.

By integrating Lumigo with your Dart Frog project through Open Telemetry, you can reap the benefits of distributed tracing, a technique that can map and trace your application as it interacts with the various managed services throughout its execution journey.

The end result? A dramatically enhanced debugging and observability process that can help you to troubleshoot issues faster, optimise your application’s performance, and ultimately keep those end users happy with an exceptional app experience.

Check out the Lumigo Open Telemetry docs to find out more and see how it can help with your deployments.

The Future of Dart Frog

As we peek into the future of Dart Frog, we can see that its evolution is far from complete. The potential expansion for Dart Frog is not only foreseeable but incredibly promising. As the open-source landscape continues to flourish, Dart Frog is poised to become an integral part of this movement, growing and evolving in tandem with the needs and contributions of its community.

While these plans paint a promising picture, Dart Frog’s future ultimately lies in the hands of its community. The project’s progress thus far wouldn’t have been possible without the open-source communities around Flutter, Dart, and Dart Frog itself. These communities have been the bedrock supporting the development and enhancement of these technologies, contributing code, flagging issues, suggesting improvements, and, perhaps most importantly, utilising these projects in real-world scenarios. This shout-out goes to them — to each contributor, big or small, who has played a part in shaping the world of open-source software.

But what does this mean for you? If you’re a developer who sees the potential in Dart Frog, there’s no better time to get involved. Dart Frog is under the MIT license, which gives you the freedom to contribute and help shape its future. Every contribution, regardless of its size, can have a significant impact on the project. Whether it’s by adding a new feature, improving existing ones, writing documentation, or even reporting bugs — your input is valuable.

In the spirit of open-source software, this is not just an invitation but a call to action. There’s no telling how far Dart Frog can go with your help. Regardless of whether you’re a seasoned open-source contributor or someone interested in making their first contribution, new contribs are always welcome.

If you found this writeup useful remember to drop a clap and share it with someone else that might find it useful, Also remember to subscribe to get the latest content as it comes out.

--

--

DeveloperSteve
Lumigo

Lilypad Network Chief Innovation Officer | Director The Coochin Company | 30+ years Developer | 10+ years Data Analyst | 10+ years Devrel