Experimenting Web Dev Via Dart Language Part 2

Introduction

In this part of our exploration into using Dart for web development, we focus on converting an existing project from vanilla JavaScript to Dart. The original project was a simple restaurant page built using JavaScript and webpack, which you can view here.

Opting Out of Flutter for Web-Specific Projects

Flutter is excellent for mobile and cross-platform development but can sometimes be less efficient for web-only applications due to its size and performance constraints. For projects targeting optimal performance on web browsers, pure Dart is often a more effective choice.

Implementing Pure Dart with Advanced Interoperability

For the transition to Dart, I used the Dart webdev package, a powerful tool found at pub.dev/packages/webdev. This package facilitates the building and serving of web applications.

Project Overview: Dart One Page Demo

The new version, "Dart One Page Demo," mirrors the original JavaScript project's functionality while incorporating Dart's robust features. This project is hosted here.

Technical Details and Dart's Compilation Strategy

Project Setup and Compilation:

Dart has evolved its compilation approach. Initially, Dart code was compiled to JavaScript using the Dart2JS tool. Now, for interacting with JavaScript, Dart uses packages like dart:js_interop and dart:js_interop_unsafe libraries. These libraries provide a way to work with JavaScript objects and functions directly, allowing for smoother integration and enhanced performance of web applications.

Ahead-of-Time Compilation:

Unlike TypeScript, which typically relies on just-in-time (JIT) compilation, Dart supports ahead-of-time (AOT) compilation. This results in highly optimized JavaScript that is ready for deployment, enhancing load times and overall web performance. This is a significant edge, particularly in scenarios where performance is critical.

Example:

The original project was a straightforward "About" page for a restaurant, designed using JavaScript. Here’s a snippet of the JavaScript implementation:

import './About.css';
import familyPhoto from '../../assets/family.jpg';

function createAbout() {
    const about = document.createElement('div');
    about.classList.add('about');
    // Additional content manipulation
    return about;
}
export default createAbout;

This code dynamically creates HTML elements, populates them with content and styling, and makes use of an external CSS file to ensure the elements are styled appropriately.

The Transition to Dart

The decision to switch to Dart was motivated by Dart’s robust type system, its ability to compile to highly optimized JavaScript, and its streamlined package management for web projects. Here’s how the same functionality was achieved in Dart:

import 'package:web/web.dart';

HTMLDivElement createAbout() {
  final about = document.createElement('div') as HTMLDivElement;
  about.className = 'about';
  // Additional content manipulation
  return about;
}

Code Comparison and Insights

Both the JavaScript and Dart versions of the code follow a similar logical structure:

• HTML Element Creation: Both versions start by creating a div element that serves as the container for the page content.
• Content Addition: They proceed to populate this container with various elements (headings, paragraphs, images) that provide information about the restaurant.
• Styling Consistency: Both implementations use the same CSS file, About.css, to style these elements, ensuring that the visual presentation is consistent regardless of the underlying technology.

The Dart version introduces type safety and leverages Dart’s development tools for better performance and error handling. Despite these underlying differences, the functional outcome is virtually the same, demonstrating the versatility and compatibility of web development across different languages.

Comparative Insights

• Structural Differences: JavaScript's approach is more procedural and functional, which might be simpler for smaller applications or those with straightforward state management needs. Dart's object-oriented approach provides a more structured framework that can be advantageous for larger, more complex applications.
• Type Safety: Dart’s static typing system helps catch errors at compile time, potentially reducing runtime errors and bugs, a feature not inherently available in JavaScript.
• Development Experience: JavaScript may be more familiar to many web developers, making it easier to adopt and implement quickly. Dart's structure, similar to Java and C#, might appeal to developers with backgrounds in those languages or those seeking robust architectural patterns in their web applications.

Next Part: Diving into Sass and MobX

In the upcoming installment of our blog series, we'll explore the integration of Sass and MobX into our web development projects. This will include a comprehensive breakdown of how these tools can enhance the styling and state management of your applications, especially when transitioning between different programming environments like JavaScript and Dart.

Exploring Sass: Syntactically Awesome Style Sheets

Sass is a powerful extension of CSS that enables a more structured and maintainable approach to managing your stylesheets. It offers features like variables, nested rules, mixins, and inheritance, which facilitate a more dynamic and efficient way to write CSS.

We'll discuss how to set up Sass in both a traditional web project and a Dart environment, and we'll demonstrate the benefits of using Sass over plain CSS through practical examples.

Understanding MobX: State Management Made Simple

MobX is a state management library that makes managing the state in JavaScript applications simpler and more scalable. It employs transparently applying functional reactive programming (FRP), which means that the state is automatically tracked wherever it is used, and computations that rely on the state are updated automatically when the state changes.

We'll explore how MobX can be integrated into a project to provide clear and concise management of the application's state, and how its principles can be applied in a Dart environment, if applicable. This will include a step-by-step guide on setting up MobX, defining stores, and connecting them to your application's components.

Combining Sass and MobX

Integrating Sass and MobX brings styling and state management together seamlessly, providing developers with powerful tools to enhance both the look and functionality of their web applications. The synergy between efficient style management with Sass and robust state handling with MobX can result in more maintainable and scalable applications.

In the next part of our blog series, we will dive deeper into these topics, providing you with the knowledge and practical examples you need to effectively implement Sass and MobX in your projects. Stay tuned for more insights and tips to elevate your web development skills!