Skip to main content

Why Blossom is Switching to Dart

Thomas Schranz, CEO and Founder of Blossom, an online Kanban board for product teams,  explains why switching to Dart was an easy decision for his company.  We wanted to publish excerpts from Thomas Schranz's post, but had trouble figuring out what to leave out! We reproduce his post in its entirety here:

We are Switching to Dart. Why?

So what motivated us to switch to Dart? In this post I’ll try to answer this question and go into how I see Dart as a huge step forward for the web & mobile development ecosystem.
What’s Blossom?
Blossom is a lightweight project management tool for people who craft modern mobile and web applications. It’s basically an online Kanban board for your product team.
From a technical point of view Blossom is a cutting edge single-page web application with Google App Engine as the backend (JSON API).
In the last few years we’ve learned a lot about building non-trivial JavaScript applications and have seen a ton of frameworks & libraries come & go. Yet despite all that innovation building web applications with decent user experience using JavaScript still is really hard and I believe way harder than it should be.
I feel the JavaScript ecosystem suffers from NIH more than any other language community that I know. Here’s why.
JavaScript Plumbing Fragmentation
At Blossom we are huge fans of JavaScript and in many ways it is a wonderful language if you know how to avoid its dark corners. That said, I feel the JavaScript ecosystem is severely lacking in many areas. Especially when it comes to core plumbing.
There are great projects like Underscore, Sugar, Prototype, jQuery, CoffeeScript and many many more that help to work around JavaScript’s language quirks. Unfortunately they don’t mix and match very well. Also, which map() or forEach() implementation should I use if I have multiple available?
This situation causes a lot of confusion, apparently not only for me. I wasn’t surprised to find a ton of StackOverflow questions from people looking for advice. There are also a ton of blog posts that recommend different combinations e.g. mixing CoffeeScript with Sugar.js (love those names).
Higher level frameworks pick different combinations to build their foundation, some even build it completely from scratch.
We also had to go through this decision/evaluation process for Blossom and after weighing the pros and cons of different combinations we went with the following stack.
  • Underscore – utility functions to work around JavaScript language quirks
  • jQuery – a DOM abstraction layer
  • CoffeeScript – classes and lexical scoping
  • Backbone – structure around frontend code and widgets
  • Brunch – an application assembler that ties all of the above components together
While we were pretty pleased with picking this specific set of building blocks over others that we’ve tried, I find it pretty frustrating that you have to jump through so many hoops in order to arrive at a situation where you can start to get things done. I don’t know how this must feel for newbies to the ecosystem, but I guess the learning curve is rather steep and the question marks are plenty.
Also it doesn’t help that some libraries are assuming a certain set of plumbing while others strive to be agnostic and therefore implement their own plumbing. I don’t even want to know how many different forEach implementations from third party libraries there are in our code base.
I don’t see a problem with different choices in frameworks, I believe diversity is very useful – at the right abstraction layer. That said, I don’t think this kind of fragmentation in the plumbing helps the JavaScript community in any way.
And I don’t even want to get into other areas like dependency management between libraries, handling of namespaces or various approaches to modularity (bowercomponent.ionpmcommonjsamdjam, …).
It is a complicated mess. It makes my head swim.
Dart comes with Batteries included
From my point of view Dart solves all of these problems and even goes a few steps further.
So what’s Dart? It’s an object oriented programming language for building modern web and mobile applications. Dart compiles to very efficient JavaScript and therefore supports all modern browsers out of the box. But Dart is not only a very pragmatic programming language, it comes with batteries included.
This makes Dart a cohesive foundation to build upon. A one stop shop if you will.
Also, if you follow the links above and dig in you will find that Dart not only comes with a ton of infrastructure support out of the box – the actual implementations of these parts are very well thought through by smart people with a ton of experience in API design, software engineering and computer science. The parts fit together and make sense. They are pragmatic and unsurprising. Exactly what I need to be productive.
To give you a few examples – Pub,  Dart’s package management tool usessemantic versioning, the Dart compiler uses tree-shaking to reduce code size by getting rid of code that isn’t used, DartDoc supports markdown, the standard library comes with data structures like List, Set, Map and many other wonderful things like Futures.
Dart is built with Performance in Mind
The cohesive development experience of building stuff with Dart was definitely our main motivation to switch. Being able to focus on making your product better without having to fight the ecosystem feels amazing.
That said there is an additional upside on top of that. Dart is built with performance in mind.
John McCutchan recently gave a talk on Dart performance. It is super fun and interesting to watch and well worth the 30 minutes. He explains how Dart as a language makes it comparably easy to do performance optimizations and some of the challenges people face in trying to speed up JavaScript.
He’s also the guy who brought SIMD support to Dart which enables blazing fast CPU supported Vector Math. This will make a huge difference for people who want to create modern games and graphics intensive applications for the web.
Using Dart in Production
Some parts of Blossom are already written in Dart, compiled to JavaScript and deployed to production. One is a very simple web component that calculates and displays the cycle time of a feature card.
The biggest part written in Dart is responsible for handling invitations to organizations and authenticating users in that workflow. This is an essential part of our application which helps hundreds of our paying customers to organize their product teams.
Our migration plan for the whole app is quite pragmatic. Every new feature gets implemented in Dart. If we want to make improvements to parts of the JavaScript code base we rewrite it in Dart (porting from JavaScript to Dart is pretty straight forward). On top of that we have a weekly Dart sprint where we migrate existing code to Dart.
The only scenario where we work with the existing JavaScript code base is when we find bugs that make sense to fix as soon as possible and a Dart rewrite would take longer than acceptable (almost never the case).
Even while some APIs are changing from time to time since the language is in its early days it is a worthwhile trade-off for all the good stuff we get from the ecosystem. So far Dart has been a pleasure to work with.
I can’t describe in words how liberating it feels to have a consistent web development experience that makes sense. Hard to say when the last time was when I felt a similar joy & productivity increase in writing web applications. Probably back when I switched from PHP to Ruby (on Rails).
Getting Started with Dart
Dart is really easy to dive into. You’ll be surprised how fast it is to get up to speed if you come from C#, Java, JavaScript, PHP, Python, Ruby et al.
If you’re curious about giving Dart a try go check out Game of Darts, a set of hands-on tutorials to get you started.
I’m looking forward to a Blossom frontend code base that’s entirely written in Dart. We’ll keep you posted on our progress & also might have some interesting Dart related announcements in the future. Stay tuned :)

As always, view the changelog for the full list of changes, and to get started with the Editor, see our tutorial.


Post a Comment

Popular posts from this blog

Const, Static, Final, Oh my!

Posted by Seth Ladd

(This is an "oldie but a goodie" post originally written by Bob Nystrom. It is being posted here as the explanations still ring true.)

Bob writes:

"static", "final", and "const" mean entirely distinct things in Dart:

"static" means a member is available on the class itself instead of on instances of the class. That's all it means, and it isn't used for anything else. static modifies *members*.

"final" means single-assignment: a final variable or field *must* have an initializer. Once assigned a value, a final variable's value cannot be changed. final modifies *variables*.

"const" has a meaning that's a bit more complex and subtle in Dart. const modifies *values*. You can use it when creating collections, like const [1, 2, 3], and when constructing objects (instead of new) like const Point(2, 3). Here, const means that the object's entire deep state can be determ…

The new AdWords UI uses Dart — we asked why

Google just announced a re-designed AdWords experience. In case you’re not familiar with AdWords: businesses use it to advertise on and partner websites. Advertising makes up majority of Google’s revenue, so when Google decides to completely redo the customer-facing front end to it, it’s a big deal. The Dart team is proud to say that this new front end is built with Dart and Angular 2. Whenever you asked us whether Google is ‘even using Dart for anything,’ this is what we had in mind but couldn’t say aloud. Until now. We asked Joshy Joseph, the primary technical lead on the project, some questions. Joshy is focusing on things like infrastructure, application latency and development velocity, so he’s the right person to ask about Dart.Q: What exactly did we launch on Monday?It’s a complete redesign of the AdWords customer experience that is rolling out slowly as a test to a small initial set of advertisers. The most noticeable thing is probably the Material Design look and f…

Dart 1.12 Released, with Null-Aware Operators and more

Dart 1.12.0 is now released! It contains the new null-aware operators language feature, and enhancements to pub, Observatory, dartdoc, and much more.

Null-aware operators

The new null-aware operators help you reduce the amount of code required to work with references that are potentially null. This feature is a collection of syntactic sugar for traversing (potentially null) object calls, conditionally setting a variable, and evaluating two (potentially null) expressions.

Click or tap the red Run button below to see them in action.


  if null operator. `expr1 ?? expr2` evaluates to `expr1` if not `null`, otherwise `expr2`.


  null-aware assignment. `v ??= expr` causes `v` to be assigned `expr` only if `v` is `null`.


  null-aware access. `x?.p` evaluates to `x.p` if `x` is not `null`, otherwise evaluates to `null`.


  null-aware method invocation. `x?.m()` invokes `m` only if `x` is not `null`.

Learn more about Dart's null-aware operators in our Language Tour.

.packages fi…