20. Integrating Dart with JavaScript

---

Why Integrate Dart with JavaScript?

1. Access to Established Libraries and Frameworks: JavaScript boasts a vast ecosystem of libraries and frameworks, many of which can complement Dart applications.

2. Enhanced Compatibility: Interoperation allows developers to integrate Dart into existing JavaScript-heavy projects without rewriting core functionalities.

3. Expanded Functionality: By interfacing with JavaScript, Dart applications can leverage browser-specific APIs or third-party JavaScript libraries.

---

How Dart Interacts with JavaScript

The JavaScript Interop Library

Dart provides the dart:js library and the js package for seamless interaction with JavaScript. These tools allow Dart code to:

• Call JavaScript functions.

• Access JavaScript objects and their properties.

• Work with JavaScript promises and convert them into Dart futures.

Setting Up

To use JavaScript interop in Dart:

1. Add the js package to your project:

    dependencies:
      js: ^0.6.1
   

2. Import the library:

    import 'dart:js' as js;
   

---

Calling JavaScript Functions

Dart can call JavaScript functions using the callMethod method of the js.context object, which represents the global JavaScript execution context.

Example

Suppose a JavaScript function sayHello is defined globally:

function sayHello(name) {
  console.log("Hello, " + name);
}

You can call it from Dart:

void main() {
  js.context.callMethod('sayHello', ['Dart']);
}

---

Accessing JavaScript Objects

JavaScript objects can be accessed and manipulated in Dart as dynamic types.

Example

Given a global JavaScript object:

var person = { name: "Alice", age: 30 };

Access it in Dart:

void main() {
  var person = js.context['person'];
  print("Name: ${person['name']}, Age: ${person['age']}");
}

---

Handling JavaScript Promises

Dart provides the js.promiseToFuture function to convert JavaScript promises into Dart futures, making it easier to integrate asynchronous JavaScript APIs.

Example

For a JavaScript function that returns a promise:

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve("Data fetched!"), 2000);
  });
}

Handle it in Dart:

import 'dart:js' as js;
import 'dart:js_util' as js_util;

void main() async {
  var jsPromise = js.context.callMethod('fetchData');
  var result = await js_util.promiseToFuture(jsPromise);
  print(result); // Output: Data fetched!
}

---

Interop Best Practices

1. Type Safety:

   • Use Dart’s null safety features to handle JavaScript’s dynamic typing.

   • Validate data types when interfacing with JavaScript.

2. Debugging:

   • Use browser developer tools to debug JavaScript code.

   • Leverage Dart DevTools to debug Dart code.

3. Performance Considerations:

   • Minimize interop calls to reduce overhead.

   • Cache frequently accessed JavaScript objects in Dart.

4. Error Handling:

   • Handle errors from JavaScript promises explicitly in Dart using try-catch.

---

Practical Use Cases

1. Using Third-Party JavaScript Libraries:

   • Libraries like D3.js or Chart.js can be integrated into Dart applications for advanced data visualization.

2. Custom JavaScript APIs:

   • Build JavaScript APIs for platform-specific functionality and use them in Dart.

3. Browser-Specific APIs:

   • Access browser features like localStorage or Geolocation through JavaScript.

Example: Accessing Browser Storage

void main() {
  var localStorage = js.context['localStorage'];
  localStorage.callMethod('setItem', ['key', 'value']);
  print(localStorage.callMethod('getItem', ['key'])); // Output: value
}

---

Conclusion

Integrating Dart with JavaScript opens up a world of possibilities, enabling developers to leverage the strengths of both ecosystems. Whether it's accessing established libraries, enhancing compatibility, or expanding functionality, Dart’s interop capabilities make it a powerful choice for modern web development.

By mastering the techniques and best practices outlined in this guide, developers can build robust and efficient applications that seamlessly bridge Dart and JavaScript.