At Blossom we are using Dart in production since about two months now and it has been a real pleasure to use. Since most of our Dart code-base is using Web UI we’ve been migrating many of our interaction elements over to become Web UI components to make them easier to reuse.

After using them for some time we thought it might be useful to extract some of the more generic components from our code base and make them accessible to the whole Dart community so that others don’t have to reinvent the wheel.

Today we are releasing a very early version of Bee – a collection of lightweight Web UI components. The initial batch of components includes buttons, popovers, overlays, a loading indicator and a password input field. We intend to expand, refine and improve the collection going forward.

Why Web UI

Web UI is Dart’s implementation of Model Driven Views on top of Web Components. It basically is HTML with a few powerful additional features like data binding, conditions, loops and event listeners. If you are familiar with Angular.js you will love Web UI.

The best thing about Web UI is that you can use it to encapsulate data, behaviour & appearance. This helps a lot if you want to build on top of robust building blocks.

On top of that components built with Web UI are incredibly simple to use for Frontend Designers compared to other approaches like jQuery UI or traditional JavaScript frameworks. For an end-user perspective it fits the mental model of HTML – you just have additional specialized tags in your toolbox.

You can learn more about Web UI on the Dart website.

Why Bee

Bee uses Web UI to provide some common interaction elements so you don’t have to reinvent the wheel. For now Bee comes with components for buttons, overlays & popovers but we’ll add more like tooltips and date pickers going forward.

Here is an example of how to use the Bee component for password input fields.

One simple tag and we get show/hide functionality for free. Awesome isn’t it?

Demos & Example Code

You can find more demos and example code on the Bee project website.

Shipping great products goes hand in hand with a lot of things. One of them is to be aware when things go wrong.

Gladly today almost every backend architecture and framework has a pretty decent error logging system, but unfortunately that’s not the case when we take a look at the frontend. When somebody uses your web application and a JavaScript error occurs you won’t get notified.

With more and more business logic moving to the browser this becomes a huge issue. Fortunately we can set up error tracking for the frontend without much effort.

How to Setup JavaScript Error Tracking with Sentry

1. Sign up on getsentry.com and create a project. (Disclaimer: this is an affiliate link. Your sign up will get me some additional free events)

2. Add your domains to “Allowed Domains” in project settings.

3. Get your public URL for error tracking. You can find it in “Client Configuration” under “All Platforms”. The URL should look something like this

   https://ac459699bb384140a7e69a3d15890000@app.getsentry.com/3100
   

4. Add these lines to your html files and replace the config URL with the one you got in Step 3.

Good Job. You are all set :)

Test your setup by sending a message from your browsers console.

UPDATE To capture meaningful stack traces the documentation recommends wrapping your application code with a try-catch block. Thanks to Matt Robenolt for this tip.

When the script captures an error it sends the exception data to the Sentry backend.

Why should I log JavaScript Errors?

The error log will help you to find bugs you might not have been aware of. It’s way easier to track them down using the meta data which gets collected:

• URL
• User-Agent
• Stacktrace
• Browser
• OS
• First Seen
• Last Seen

This is really useful already but you can even add custom meta data like which customer was affected:

Example Screenshot

Conclusion

The time it takes to set up JavaScript error logging is nothing compared to the value you get out of it.

Further reading

• https://github.com/getsentry/sentry
• https://github.com/occ/TraceKit
• https://developer.mozilla.org/en/docs/DOM/window.onerror
• http://dev.opera.com/articles/view/better-error-handling-with-window-onerror/
• http://devblog.xing.com/frontend/how-to-log-javascript-errors/
• http://backstage.soundcloud.com/2011/11/front-end-javascript-bug-tracking/
• http://dev.opera.com/articles/view/client-side-error-logging/