Maintaining Dart and JavaScript Side by Side
As Dart and dart2js evolve, the performance of the generated JavaScript will improve. At this early stage, Dart code compiled to JavaScript rivals and sometimes surpasses code a typical JavaScripter might write.[12] But as fast as the compiled JavaScript gets, it will never be as fast as running Dart natively.
The question then becomes, how can we send Dart code to Dart-enabled browsers and send the compiled JavaScript to other browsers?
The answer is relatively simple: include a small JavaScript snippet that detects the absence of Dart and loads the corresponding JavaScript. As you saw in the previous section, if we compile a main.dart script, then dart2js will produce a corresponding main.dart.js JavaScript version.
The following JavaScript snippet will do the trick (placed after the closing </body> tag):
| | if (!/Dart/.test(navigator.userAgent)) { |
| | loadJsEquivalentScripts(); |
| | } |
| | |
| | function loadJsEquivalentScripts() { |
| | var scripts = document.getElementsByTagName('script'); |
| | for (var i=0; i<scripts.length; i++) { |
| | loadJsEquivalent(scripts[i]); |
| | } |
| | } |
| | |
| | function loadJsEquivalent(script) { |
| | if (!script.hasAttribute('src')) return; |
| | if (!script.hasAttribute('type')) return; |
| | if (script.getAttribute('type') != 'application/dart') return; |
| | |
| | var js_script = document.createElement('script'); |
| | js_script.setAttribute('src', script.getAttribute('src') + '.js'); |
| | document.body.appendChild(js_script); |
| | } |
There is a similar script in Dart core.[13] In most cases, that script should be preferred over ours because it does other things (such as start the Dart engine).
The check for an available Dart engine is a simple matter of checking the user agent string. If it contains the word “Dart,” then it is Dart-enabled.
| | if (!/Dart/.test(navigator.userAgent)) |
That may come in handy elsewhere in our Dart adventures.
The remainder of the JavaScript is fairly simple. The loadJsEquivalentScripts function invokes loadJsEquivalent for every <script> tag in the DOM. This method has a few guard clauses to ensure that a Dart script is in play. It then appends a new js <script> to the DOM to trigger the equivalent JavaScript load.
To use that JavaScript detection script, we save it as dart.js and add it to the web page containing the Dart <script> tag.
| | <script src="/scripts/dart.js"></script> |
| | |
| | <script src="/scripts/main.dart" |
| | type="application/dart"></script> |
A Dart-enabled browser will evaluate and execute main.dart directly. Other browsers will ignore the unknown "application/dart" type and instead execute the code in dart.js, creating new <script> tags that source the main.dart.js file that we compiled with dart2js.
In the end, we have superfast code for browsers that support Dart. For both Dart and non-Dart browsers, we have elegant, structured, modern code. Even this early in Dart’s evolution, we get the best of both worlds.