If you’re trying to build a web front-end in 2019, JavaScript is the undisputed king of the roost. As a friend puts it, “if you think you can build a decent web app without JavaScript, you need to think a little harder.”

But what should you do if, for whatever reason, you don’t enjoy writing JavaScript? (I should caveat this by saying that a *lot* of people seem to enjoy it just fine. If you’re one of them — welcome, I mean you no disrespect). But maybe you are confused by the tooling (webpack, babel, grunt, create-react-app…), or overwhelmed by the dependency sprawl in node_modules, or have trouble reasoning about Object.prototype, or generally distrust type coercions (1 + “1” = “11”), or feel like you’re constantly looking up gotchas on Stack Overflow. And maybe you also want to catch more errors with static type checking and a compiler, but find that TypeScript just deepens the tooling challenge.

Could your relationship with JavaScript on the web become similar to your relationship with machine code everywhere else: you know it’s always going to be there, but you don’t have to fool around with it yourself if you don’t want to?

With Dart v2, I think the answer has changed from “definitely not” to “maybe.” Dart is a statically typed language actively maintained by Google and designed for developing user interfaces. It is probably best known as the language behind Flutter, a framework for cross-platform mobile app development. But it is deepening its support for the web as well. The official Dart page has a tutorial series about “low level web programming” that shows off the built-in dart:html package and was an inspiration for this project.

But suppose you wanted to experiment with making a web app in Dart. You’d probably expect reactive best practices. Things like components and state and event listeners that re-render specific elements without refreshing the whole page. After all, there’s a reason React and Vue.js are two of the most important open source projects of the last decade. You could try AngularDart or over_react, but suppose you don’t want to shoulder an entire framework and would prefer to hew closer to pure Dart.

If this is your situation, you might try reactify.

The philosophy of reactify is to give web developers a typed, tested, and tiny package (not a framework) for composing a UI from reactive components. Write code in Dart, transpile it to JavaScript using built-in tooling (either dart2js or webdev serve), and then use it in HTML just like you’d expect.

Reactify in action

Reactify exposes just two classes: UserInterface and Component. Root components are arranged in a list inside the UserInterface, and may hold sub-components of their own.

Here’s a simple example.

index.html

<!DOCTYPE html>

<head>

<script type="text/javascript" defer src="main.dart.js"></script></head> <body>

<div id="root"></div>

</body> --- main.dart

import 'dart:html';

import 'package:reactify/reactify.dart' as reactify; void main() {

document.getElementById('root').replaceWith(

ExampleUI.initialize()

);

} final ExampleUI = reactify.UserInterface(

components: [ExampleComponent]

); final ExampleComponent = reactify.Component(

id: 'sample'

template: (self) => DivElement()..text = self.getState('static'),

state: {'static': 'This is a sample Component'}

);

Your html now renders as:

<div> This is a sample Component </div>

Using these same principles, you can easily make an app with global state, one or more root components, computed state, handlers, multiple sub-components, hidden elements, conditional logic, and CSS styling.

Catch Me If You Can! is a number search game written with 0 lines of JavaScript. Because it transpiles to JavaScript, it can run in any web browser.

Breakdown of the game:

If you want to plumb further, check out the source code. It is open source, so code contributions are welcome.

Conclusion

If the idea of a typed, reactive web front-end written in pure Dart with no framework strikes you as a terrible and pointless idea because TypeScript and React already exist, I understand. You are probably in the majority of web developers and I mean you no disrespect. Otherwise, please give reactify a spin and let me know how it goes!