| Index: src/site/index.html
|
| diff --git a/src/site/index.html b/src/site/index.html
|
| index 9351dae36d9084bca9e4ebbeeb608e775aa80566..5a099e6a2dced16db8f482be117a360751060263 100644
|
| --- a/src/site/index.html
|
| +++ b/src/site/index.html
|
| @@ -1,77 +1,549 @@
|
| ---
|
| -layout: default
|
| -header:
|
| - css: ["/css/dartboard.css"]
|
| +layout: homepage
|
| ---
|
|
|
| -<h2> A new platform for structured web apps</h2>
|
| +<article class="homepage">
|
|
|
| <section>
|
| -
|
| - <div class="homepage-intro">
|
| - <p>
|
| - With the Dart platform,
|
| - you can write code
|
| - that runs on servers and in modern web browsers.
|
| - Dart compiles to JavaScript,
|
| - so your Dart web apps will work in multiple browsers
|
| - (not just ours).
|
| - </p>
|
| -
|
| - <p>
|
| - The Dart platform includes
|
| - a language, libraries, an editor,
|
| - a virtual machine (VM)
|
| - for both servers and browsers,
|
| - and a compiler to JavaScript.
|
| - </p>
|
| -
|
| - <p>
|
| - Dart is still in preview, so
|
| - try it out and tell us what you think.
|
| - </p>
|
| -
|
| -{% comment %}
|
| -<!-- Important announcement? Put it here. -->
|
| - <p style="border-radius: 5px; background-color: #55DDCA; padding: 5px">
|
| - <strong>New!</strong> ANNOUNCE SOMETHING GREAT AND LINK TO MORE INFO.
|
| - </p>
|
| -{% endcomment %}
|
| +
|
| + <div class="row" id="top-mast">
|
| + <div class="span12 contents">
|
| + <img class="logo" src="/imgs/dart-logo.png" width="268" height="116">
|
| + <h1>
|
| + Build HTML5 apps for the modern web
|
| + </h1>
|
| + <p>
|
| + Dart brings structure to web app engineering
|
| + with a new language, libraries, and tools.
|
| + </p>
|
| + <div>
|
| + <ul class="buttons">
|
| + <li class="download">
|
| + <a href="/downloads.html" class="btn btn-primary btn-large">
|
| + <i class="icon-download-alt"></i>
|
| + Download now
|
| + </a>
|
| + </li>
|
| + <li>
|
| + <div class="g-plus" data-width="170" data-height="69" data-href="//plus.google.com/109866369054280216564?rel=publisher"></div>
|
| + </li>
|
| + <li class="twitter">
|
| + <a href="https://twitter.com/dart_lang" class="twitter-follow-button" data-show-count="false" data-size="large">Follow @dart_lang</a>
|
| + </li>
|
| + </ul>
|
| + </div>
|
| + </div>
|
| </div>
|
|
|
| - <script src="http://feeds.feedburner.com/DartNewsUpdates?format=sigpro" type="text/javascript" ></script><noscript><p>Subscribe to RSS headline updates from: <a href="http://feeds.feedburner.com/DartNewsUpdates"></a></p> </noscript>
|
| </section>
|
|
|
| +<section>
|
| +
|
| + <div class="row callouts">
|
| + <div class="span4">
|
| + <h2><i class="icon-ok"></i> Familiar</h2>
|
| + <p>
|
| + Dart is a <strong>class-based, object-oriented language</strong>
|
| + with lexical scoping, closures, and optional static typing.
|
| + Dart addresses issues with current web programming languages
|
| + and is <strong>easy to learn</strong> for a wide range of developers.
|
| + <a href="#structured-language">Learn more</a>
|
| + </p>
|
| +<div class="visible-desktop">
|
| +{% highlight dart %}
|
| +#import('dart:html');
|
| +
|
| +main() {
|
| + var msg = query('#msg');
|
| + var btn = new ButtonElement();
|
| + btn.on.click.add((e) => msg.text = 'Dart!');
|
| + document.nodes.add(btn);
|
| +}
|
| +{% endhighlight %}
|
| +</div>
|
| +<div class="visible-tablet visible-phone">
|
| +{% highlight dart %}
|
| +#import('dart:html');
|
| +
|
| +main() {
|
| + var msg = query('#msg');
|
| + var btn = new ButtonElement();
|
| + btn.on.click.add((e) {
|
| + msg.text = 'Dart!'
|
| + });
|
| + document.nodes.add(btn);
|
| +}
|
| +{% endhighlight %}
|
| +</div>
|
| + </div>
|
| +
|
| + <div class="span4">
|
| + <h2><i class="icon-cogs"></i> Productive</h2>
|
| + <p>
|
| + Dart Editor and the SDK provide
|
| + an <strong>integrated development and debugging</strong> experience. The editor
|
| + supports refactoring, breakpoints, code completion, code
|
| + navigation, and more. The SDK contains the stand-alone virtual
|
| + machine, a package manager, and Chromium with an embedded
|
| + Dart VM.
|
| + <a href="#productive-tools">Learn more</a>
|
| + </p>
|
| + <p class="img">
|
| + <img src="/imgs/homepage/editor-full.png">
|
| + </p>
|
| + </div>
|
| +
|
| + <div class="span4">
|
| + <h2><i class="icon-globe"></i> Ubiquitous</h2>
|
| + <p>
|
| + Dart can be <strong>compiled to JavaScript</strong>,
|
| + so you can use it for web apps in all modern desktop and mobile browsers.
|
| + Our JavaScript compiler generates minimal code thanks to tree-shaking.
|
| + Dart apps can also <strong>run on the server</strong>, in a stand-alone
|
| + Dart VM.
|
| + </p>
|
| + <p class="img">
|
| + <img src="/imgs/homepage/server-desktop-phone.png">
|
| + </p>
|
| + </div>
|
| + </div> <!-- /.row -->
|
| +
|
| +</section>
|
|
|
| <section>
|
| -<h2>Get started</h2>
|
| -
|
| -<p>
|
| -Read a <a href="/docs/technical-overview/">technical overview</a>,
|
| -take a <a href="/language-tour/">language tour</a>, or
|
| -download <a href="/docs/editor/getting-started/">Dart Editor</a>.
|
| -Or play with Dart code right here in your browser.
|
| -</p>
|
| -
|
| -
|
| -<div id="samples">
|
| -<label for="samples-list" style="display:none">Dart code examples:</label>
|
| - <select id="samples-list">
|
| - <option value="hello">Hello, Dart!</option>
|
| - <option value="fib">Fibonacci</option>
|
| - <option value="point">Point</option>
|
| - </select>
|
| +
|
| + <div class="row callouts">
|
| + <div class="span4">
|
| + <h2><i class="icon-play"></i> Start</h2>
|
| + <ul>
|
| + <li><a href="/docs/editor/">Get the editor and SDK</a></li>
|
| + <li><a href="/docs/technical-overview/">Read the technical overview</a></li>
|
| + <li><a href="/samples/">Tour the samples</a></li>
|
| + <li><a href="http://www.youtube.com/watch?v=vT1KmTQ-1Os"
|
| + title="Introduction to Dart">Watch an intro video</a></li>
|
| + </ul>
|
| + </div>
|
| +
|
| + <div class="span4">
|
| + <h2><i class="icon-book"></i> Learn</h2>
|
| + <ul>
|
| + <li><a href="/docs/language-tour/">Follow the language tour</a></li>
|
| + <li><a href="/docs/library-tour/">Follow the library tour</a></li>
|
| + <li><a href="http://synonym.dartlang.org/">See synonyms to JavaScript</a></li>
|
| + <li><a href="http://shop.oreilly.com/product/0636920025887.do">Read a free eBook</a></li>
|
| + <li><a href="/slides/2012/06/io12/Bullseye-Your-first-Dart-app-Codelab-GoogleIO2012.pdf">Practice a codelab</a></li>
|
| + </ul>
|
| + </div>
|
| +
|
| + <div class="span4">
|
| + <h2><i class="icon-comments"></i> Participate</h2>
|
| + <ul>
|
| + <li><a href="/mailing-list">Send feedback to the mailing list</a></li>
|
| + <li><a href="https://plus.google.com/109866369054280216564/posts">Follow on G+</a>
|
| + and <a href="http://twitter.com/dart_lang">Twitter</a></li>
|
| + <li><a href="http://stackoverflow.com/questions/tagged/dart">Get answers at Stack Overflow</a></li>
|
| + <li><a href="http://dartbug.com/new">File feature requests and bugs</a></li>
|
| + <li><a href="http://code.google.com/p/dart/wiki/Contributing">Submit a patch</a></li>
|
| + </ul>
|
| + </div>
|
| + </div>
|
| +
|
| +</section>
|
| +
|
| +<div class="overview-transition">
|
| + <hr>
|
| + <h1>Overview</h1>
|
| </div>
|
|
|
| -<code id="samples-editor" class="codes for-samples">main() {
|
| - print('Hello, Dart!');
|
| -}</code>
|
| +<section id="structured-language">
|
| +
|
| + <div class="page-header">
|
| + <h1>A structured language <small>that's flexible and familiar</small></h1>
|
| + </div>
|
| +
|
| + <div class="row" id="language-features">
|
| + <div class="span12">
|
| + <p>
|
| + Dart addresses issues with traditional web development languages
|
| + while remaining easy to learn. Thanks to optional static types, Dart
|
| + scales from simple scripts to large apps. Learn more with the
|
| + <a href="/docs/language-tour/" title="Dart Language Tour">language tour</a>, or read the
|
| + <a href="/docs/spec/" title="Dart Language Specification">language spec</a>.
|
| + </p>
|
| +
|
| + <ul class="nav nav-tabs">
|
| + <li class="active"><a href="#lang-classes" data-toggle="tab">Classes</a></li>
|
| + <li><a href="#lang-lexical-closures" data-toggle="tab">Lexical closures</a></li>
|
| + <li><a href="#lang-libraries" data-toggle="tab">Libraries</a></li>
|
| + <li><a href="#lang-optional-static-types" data-toggle="tab">Optional static types</a></li>
|
| + <li><a href="#lang-named-params" data-toggle="tab">Named parameters</a></li>
|
| + <li><a href="#lang-isolates" data-toggle="tab">Isolates</a></li>
|
| + <li><a href="#lang-more" data-toggle="tab">More</a></li>
|
| + </ul>
|
| +
|
| + <div class="tab-content">
|
| + <div class="tab-pane active" id="lang-classes">
|
| + <div class="row">
|
| + <div class="span6">
|
| +{% highlight dart %}
|
| +class Point {
|
| + final num x, y;
|
| +
|
| + Point(this.x, this.y);
|
| + Point.zero() : x = 0, y = 0; // Named constructor
|
| + // with an initializer list.
|
| +
|
| + num distanceTo(Point other) {
|
| + var dx = x - other.x;
|
| + var dy = y - other.y;
|
| + return Math.sqrt(dx * dx + dy * dy);
|
| + }
|
| +}
|
| +{% endhighlight %}
|
| + </div>
|
| + <div class="span6">
|
| + <h2>Classes</h2>
|
| + <p>
|
| + Dart supports classes as a fundamental structural
|
| + building block for libraries and apps. Classes define
|
| + the structure of an object, and you can extend them to create
|
| + more specialized definitions. New features
|
| + such as <a href="/articles/m1-language-changes/#no-explicit-interfaces">implicit interfaces</a> and
|
| + <a href="http://www.dartlang.org/docs/language-tour/#named-constructors">named constructors</a>,
|
| + make it easier to
|
| + say more while typing less.
|
| + Learn more about <a href="/docs/language-tour/#classes">classes in Dart</a>.
|
| + </p>
|
| + </div>
|
| + </div>
|
| + </div> <!-- /.tab-pane -->
|
| +
|
| + <div class="tab-pane" id="lang-lexical-closures">
|
| + <div class="row">
|
| + <div class="span6">
|
| +{% highlight dart %}
|
| +makeAdder(num x) {
|
| + return (num y) => x + y;
|
| +}
|
| +
|
| +main() {
|
| + var add2 = makeAdder(2);
|
| + assert(add2(3) == 5);
|
| +}
|
| +{% endhighlight %}
|
| + </div>
|
| + <div class="span6">
|
| + <h2>Lexical closures</h2>
|
| + <p>
|
| + Dart has lexical scoping and a convenient closure
|
| + mechanism. The <code>makeAdder</code> function returns a
|
| + new function that closes around <code>x</code>.
|
| + The <code>=></code> syntax is syntactic
|
| + sugar for a one-line function with a return value.
|
| + </p>
|
| + </div>
|
| + </div>
|
| + </div> <!-- /.tab-pane -->
|
| +
|
| + <div class="tab-pane" id="lang-libraries">
|
| + <div class="row">
|
| + <div class="span3">
|
| +{% highlight dart %}
|
| +// In widget.dart
|
| +
|
| +#library('widget');
|
| +
|
| +class Widget {
|
| + // ...
|
| +}
|
| +{% endhighlight %}
|
| + </div>
|
| + <div class="span3">
|
| +{% highlight dart %}
|
| +// In toolkit.dart
|
| +
|
| +#library('toolkit');
|
| +#import('widget.dart');
|
| +
|
| +class Window extends Widget {
|
| + // ...
|
| +}
|
| +{% endhighlight %}
|
| + </div>
|
| + <div class="span6">
|
| + <h2>Libraries</h2>
|
| + <p>
|
| + Use libraries to create reusable modules of functionality.
|
| + Libraries can import other libraries, making it easy to
|
| + publish and share code.
|
| + </p>
|
| + </div>
|
| + </div>
|
| + </div> <!-- /.tab-pane -->
|
| +
|
| + <div class="tab-pane" id="lang-optional-static-types">
|
| + <div class="row">
|
| + <div class="span6">
|
| +{% highlight dart %}
|
| +class Point {
|
| + final num x, y;
|
| + Point(this.x, this.y);
|
| +
|
| + // Use static types for
|
| + // the "surface area" of your code.
|
| + num distanceTo(Point other) {
|
| + // var declares an
|
| + // untyped dynamic variable
|
| + var dx = x - other.x;
|
| + var dy = y - other.y;
|
| + return Math.sqrt(dx * dx + dy * dy);
|
| + }
|
| +}
|
| +{% endhighlight %}
|
| + </div>
|
| + <div class="span6">
|
| + <h2>Optional static types</h2>
|
| + <p>
|
| + Think of Dart's static types as annotations and documentation
|
| + that help clearly indicate your intent, without getting in
|
| + your way. Use types when you want more help from your tools,
|
| + or if you want to make it easier to understand how to use your
|
| + code. Omit the type annotations if you're just scripting around or
|
| + if you're trying to express something that is challenging to
|
| + express with a single type annotation.
|
| + Type annotations don't affect the runtime semantics. Learn more about
|
| + <a href="http://www.dartlang.org/articles/optional-types/">optional
|
| + types in Dart</a>.
|
| + </p>
|
| + </div>
|
| + </div>
|
| + </div> <!-- /.tab-pane -->
|
| +
|
| + <div class="tab-pane" id="lang-named-params">
|
| + <div class="row">
|
| + <div class="span6">
|
| +{% highlight dart %}
|
| +flipFlags([bool on, bool up, bool hidden=false]) {
|
| + // ...
|
| +}
|
| +
|
| +flipFlags(on: true, up: false, hidden: true);
|
| +
|
| +// Named params are also optional params
|
| +flipFlags(on: true); // up == null, hidden == false
|
| +{% endhighlight %}
|
| + </div>
|
| + <div class="span6">
|
| + <h2>Named parameters</h2>
|
| + <p>
|
| + The meaning of <code>true</code>
|
| + or <code>false</code> is hard to decipher without context.
|
| + Using named parameters, you can write code that is easier
|
| + to understand.
|
| + As a bonus, named parameters are also optional parameters.
|
| + </p>
|
| + </div>
|
| + </div>
|
| + </div> <!-- /.tab-pane -->
|
| +
|
| + <div class="tab-pane" id="lang-isolates">
|
| + <div class="row">
|
| + <div class="span6">
|
| +{% highlight dart %}
|
| +#import('dart:isolate');
|
| +
|
| +echo() {
|
| + port.receive((msg, SendPort replyTo) {
|
| + replyTo.send("Echo: $msg");
|
| + });
|
| +}
|
| +
|
| +main() {
|
| + SendPort echoService = spawnFunction(echo);
|
| + echoService.call("Hello!").then((answer) => print(answer));
|
| +}
|
| +{% endhighlight %}
|
| + </div>
|
| + <div class="span6">
|
| + <h2>Isolates</h2>
|
| + <p>
|
| + Create isolates for concurrent programming and to
|
| + run third-party code more securely. Communicate between
|
| + isolates by passing messages that are copied before
|
| + received to ensure no state is ever shared. Dart uses
|
| + isolates instead of shared-state threads for safer
|
| + parallel programming.
|
| + </p>
|
| + <p>
|
| + The <code>echo()</code> function is run in an isolate,
|
| + which is created with <code>spawnFunction</code>.
|
| + A message is sent by <code>call</code> and an answer
|
| + is printed.
|
| + </p>
|
| + </div>
|
| + </div>
|
| + </div> <!-- /.tab-pane -->
|
| +
|
| + <div class="tab-pane" id="lang-more">
|
| + <p>
|
| + The Dart language contains many more useful and productive
|
| + features.
|
| + Check out a sample:
|
| + </p>
|
| + <ul>
|
| + <li>better asynchronous programming with
|
| + <a href="/docs/library-tour/#asynchronous-programming">Futures</a></li>
|
| + <li>more explicit collections with <a href="/docs/language-tour/#generics">generics</a></li>
|
| + <li>better <a href="/docs/language-tour/#for-loops">for loops</a></li>
|
| + <li>error handling with <a href="/docs/language-tour/#exceptions">exceptions</a></li>
|
| + </ul>
|
| +
|
| + <p>
|
| + Learn more about the Dart language by taking
|
| + a <a href="/docs/language-tour/">Language Tour</a>,
|
| + or reading the <a href="/docs/spec/">Dart Language Spec</a>.
|
| + </p>
|
| + </div> <!-- /.tab-pane -->
|
| +
|
| + </div> <!-- /.tab-content -->
|
| + </div> <!-- /.span12 -->
|
| + </div> <!-- /#language-features -->
|
|
|
| -{% include samples.html %}
|
| </section>
|
|
|
| -<script async type="text/javascript"
|
| - src="http://try.dartlang.org/dartboard.dart.app.js">
|
| -</script>
|
| +<section id="productive-tools">
|
| +
|
| + <div class="page-header">
|
| + <h1>Productive and integrated tools <small>for faster development</small></h1>
|
| + </div>
|
| +
|
| + <p>
|
| + Gone are the days of building web apps with plain text editors.
|
| + <a href="/docs/editor/">Dart Editor</a>, its static analysis engine,
|
| + and direct integration with Chromium+DartVM
|
| + helps you develop, debug, and maintain your apps.
|
| + </p>
|
| +
|
| + <p>
|
| + Dart also ships a stand-alone
|
| + <a href="/docs/sdk/">Dart SDK</a> that contains the
|
| + <a href="/docs/dart2js/">dart2js compiler</a>,
|
| + the <a href="/docs/standalone-dart-vm/">Dart VM</a>
|
| + for running command-line apps, and the
|
| + <a href="/docs/pub-package-manager/">pub</a> package manager.
|
| + </p>
|
|
|
| + <div class="row">
|
| + <div class="span12">
|
| + <ul class="thumbnails">
|
| + <li class="span6">
|
| + <div class="thumbnail">
|
| + <img src="/imgs/homepage/editor-code-completion.png" alt="Code completion in Dart Editor">
|
| + <h5>Code completion</h5>
|
| + <p>
|
| + Explore the methods and fields
|
| + available to the object you're working on.
|
| + </p>
|
| + </div>
|
| + </li>
|
| +
|
| + <li class="span6">
|
| + <div class="thumbnail">
|
| + <img src="/imgs/homepage/editor-refactor.png" alt="Refactoring in Dart Editor">
|
| + <h5>Refactoring</h5>
|
| + <p>
|
| + Change your code structure
|
| + without changing the behavior.
|
| + </p>
|
| + </div>
|
| + </li>
|
| + </ul>
|
| + </div>
|
| + </div>
|
| +
|
| + <div class="row">
|
| + <div class="span12">
|
| + <ul class="thumbnails">
|
| + <li class="span6">
|
| + <div class="thumbnail">
|
| + <img src="/imgs/homepage/editor-outline.png" alt="Code completion in Dart Editor">
|
| + <h5>Outline view</h5>
|
| + <p>
|
| + List the classes,
|
| + methods, and functions
|
| + in a simple tree display.
|
| + </p>
|
| + </div>
|
| + </li>
|
| +
|
| + <li class="span6">
|
| + <div class="thumbnail">
|
| + <img src="/imgs/homepage/editor-debug.png" alt="Debugging in Dart Editor">
|
| + <h5>Debugger</h5>
|
| + <p>
|
| + Set breakpoints, inspect variables,
|
| + and step over, into, and out of code.
|
| + </p>
|
| + </div>
|
| + </li>
|
| + </ul>
|
| + </div>
|
| + </div>
|
| +
|
| + <div class="row">
|
| + <div class="span12">
|
| + <ul class="thumbnails">
|
| +
|
| + <li class="span6">
|
| + <div class="thumbnail">
|
| + <img src="/imgs/homepage/editor-warnings.png" alt="Static analysis warnings in Dart Editor">
|
| + <h5>Static analysis</h5>
|
| + <p>
|
| + See warnings when inconsistencies and potential problems are detected.
|
| + </p>
|
| + </div>
|
| + </li>
|
| +
|
| + <li class="span6">
|
| + <div class="thumbnail">
|
| + <img src="/imgs/homepage/editor-callers.png" alt="Find callers for methods in Dart Editor">
|
| + <h5>Open callers</h5>
|
| + <p>
|
| + Quickly find all callers for a method, and easily jump to those locations.
|
| + </p>
|
| + </div>
|
| + </li>
|
| + </ul>
|
| + </div>
|
| + </div>
|
| +
|
| +</section>
|
| +
|
| +<section id="get-started-now">
|
| + <div class="page-header">
|
| + <h1>Get Started Now</h1>
|
| + </div>
|
| +
|
| + <ul class="buttons">
|
| + <li>
|
| + <a href="/docs/editor/getting-started/" class="btn btn-primary btn-large">
|
| + <i class="icon-download-alt"></i>
|
| + Download Dart Editor
|
| + </a>
|
| + </li>
|
| + <li>
|
| + <a href="/docs/technical-overview/" class="btn btn-primary btn-large">
|
| + <i class="icon-book"></i>
|
| + Read the Technical Overview
|
| + </a>
|
| + </li>
|
| + <li>
|
| + <a href="/mailing-list" class="btn btn-primary btn-large">
|
| + <i class="icon-comments-alt"></i>
|
| + Join the Mailing List
|
| + </a>
|
| + </li>
|
| + </ul>
|
| +</section>
|
|
|
| +</article> <!-- /.homepage -->
|
|
|
Chromium Code Reviews
