Pages

Using Sass (Scss) in Dart project

Friday, June 20, 2014

Recently I'm trying to configure Dart development environment like everyday I do with JS Grunt (or Gulp).

Dart has a default tool to get the work done -- Pub. Pub is not just for Package manager like bower. The `pub serve` and `pub build` are like `grunt serve` and `grunt build`.


In the grunt tasks you can define actual sequences of tasks. While Pub has a more conventional way to get the similar stuff done. The Pub Transformer can process some transformations in the build. Dart to JS transformation is the typical one as explained the introduction of Pub on dartlang.org. CSS preprocessing is another typical one and I'd like to introduce the example in this post.


There are two popular CSS pre-processors -- Sass(Scss) and Less. Here I'd like to introduce Sass example.
There is already a nice Sass(Scss) transformation package http://pub.dartlang.org/packages/sass and the examples at my github repo https://github.com/ntaoo/dart_sass_example.  You can try and confirm how it works.


You get the git clone, and do `pub serve` where pubspec.yaml exists. Then open http://localhost:8080 on your Dartium. The transformer runs on the startup and you can see the "Build completed successfully" message on your console.
You don't see any output CSS files in the directories, since they are included into the pub dev server, but not put in the project directories.


And don't worry, every time you save the source code, Pub watches the changes and automatically runs the transformation again.


That's it. Pretty easy.

By the way, actually I prefer to use Less for my development, not Sass. So next time I would try Less transformation.
Read more ...

Web Worker and current Dartlang

Friday, June 13, 2014
Recently I've been researching WebAudio and WebRTC getUserMedia for my personal project.
I googled, then I found the library which really fits my need. http://audior.ec/recordmp3js/ aaaa http://nusofthq.com/blog/recording-mp3-using-only-html5-and-javascript-recordmp3-js/
The library uses WebWorker for audio recording and mp3 conversion to (I guess and probably true) offload the CPU intensive works. I want to write webapp in Dartlang, and it's not serious project, so I'm trying to port this JS library to Dart for my study. (Yes, you know, probably I can (should?) just use this library by dart:js.) So I have a chance to try Web Worker in Dart.
Without much thought, I tried the porting, wrote the WebWorkers in Dart, and I stumbled into that a WebWorker itself should be written in JS, not Dart.
Here is the simple sample code. https://github.com/ntaoo/web_worker_sample
The JS version WebWorker should work normally, and Dart version raises an error (in Dartium).
I found the article mentioned about it.
What if you have a compute-intensive task to run? To keep your app responsive, you should put the task into its own isolate or worker. Isolates might run in a separate process or thread, depending on the Dart implementation. In 1.0 we don’t expect web apps to support isolates or Dart-language workers. However, you can use the dart:html Worker class to add a JavaScript worker to a Dart web app. https://www.dartlang.org/articles/event-loop/
https://api.dartlang.org/apidocs/channels/stable/dartdoc-viewer/dart:html.Worker
Please anyone tell me if I'm misunderstanding something.
Read more ...