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.
18.226.4.191