Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(34)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: src/site/index.html

Issue 10788006: new site (Closed) Base URL: https://code.google.com/p/dartlang-site/@master
Patch Set: final patch Created 8 years, 5 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « src/site/imgs/homepage/server-desktop-phone.png ('k') | src/site/js/bootstrap-collapse.js » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 --- 1 ---
2 layout: default 2 layout: homepage
3 header:
4 css: ["/css/dartboard.css"]
5 --- 3 ---
6 4
7 <h2> A new platform for structured web apps</h2> 5 <article class="homepage">
8 6
9 <section> 7 <section>
10 » » 8
11 <div class="homepage-intro"> 9 <div class="row" id="top-mast">
12 <p> 10 <div class="span12 contents">
13 With the Dart platform, 11 <img class="logo" src="/imgs/dart-logo.png" width="268" height="116">
14 you can write code 12 <h1>
15 that runs on servers and in modern web browsers. 13 Build HTML5 apps for the modern web
16 Dart compiles to JavaScript, 14 </h1>
17 so your Dart web apps will work in multiple browsers 15 <p>
18 (not just ours). 16 Dart brings structure to web app engineering
19 </p> 17 with a new language, libraries, and tools.
20 18 </p>
21 <p> 19 <div>
22 The Dart platform includes 20 <ul class="buttons">
23 a language, libraries, an editor, 21 <li class="download">
24 a virtual machine (VM) 22 <a href="/downloads.html" class="btn btn-primary btn-large">
25 for both servers and browsers, 23 <i class="icon-download-alt"></i>
26 and a compiler to JavaScript. 24 Download now
27 </p> 25 </a>
28 26 </li>
29 <p> 27 <li>
30 Dart is still in preview, so 28 <div class="g-plus" data-width="170" data-height="69" data-href="//p lus.google.com/109866369054280216564?rel=publisher"></div>
31 try it out and tell us what you think. 29 </li>
32 </p> 30 <li class="twitter">
33 31 <a href="https://twitter.com/dart_lang" class="twitter-follow-button " data-show-count="false" data-size="large">Follow @dart_lang</a>
34 {% comment %} 32 </li>
35 <!-- Important announcement? Put it here. --> 33 </ul>
36 <p style="border-radius: 5px; background-color: #55DDCA; padding: 5px"> 34 </div>
37 <strong>New!</strong> ANNOUNCE SOMETHING GREAT AND LINK TO MORE INFO. 35 </div>
38 </p> 36 </div>
39 {% endcomment %} 37
40 </div>
41
42 <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>
43 </section> 38 </section>
44 39
45
46 <section> 40 <section>
47 <h2>Get started</h2> 41
48 42 <div class="row callouts">
49 <p> 43 <div class="span4">
50 Read a <a href="/docs/technical-overview/">technical overview</a>, 44 <h2><i class="icon-ok"></i> Familiar</h2>
51 take a <a href="/language-tour/">language tour</a>, or 45 <p>
52 download <a href="/docs/editor/getting-started/">Dart Editor</a>. 46 Dart is a <strong>class-based, object-oriented language</strong>
53 Or play with Dart code right here in your browser. 47 with lexical scoping, closures, and optional static typing.
54 </p> 48 Dart addresses issues with current web programming languages
55 49 and is <strong>easy to learn</strong> for a wide range of developers.
56 50 <a href="#structured-language">Learn more</a>
57 <div id="samples"> 51 </p>
58 <label for="samples-list" style="display:none">Dart code examples:</label> 52 <div class="visible-desktop">
59 <select id="samples-list"> 53 {% highlight dart %}
60 <option value="hello">Hello, Dart!</option> 54 #import('dart:html');
61 <option value="fib">Fibonacci</option> 55
62 <option value="point">Point</option> 56 main() {
63 </select> 57 var msg = query('#msg');
58 var btn = new ButtonElement();
59 btn.on.click.add((e) => msg.text = 'Dart!');
60 document.nodes.add(btn);
61 }
62 {% endhighlight %}
64 </div> 63 </div>
65 64 <div class="visible-tablet visible-phone">
66 <code id="samples-editor" class="codes for-samples">main() { 65 {% highlight dart %}
67 print('Hello, Dart!'); 66 #import('dart:html');
68 }</code> 67
69 68 main() {
70 {% include samples.html %} 69 var msg = query('#msg');
70 var btn = new ButtonElement();
71 btn.on.click.add((e) {
72 msg.text = 'Dart!'
73 });
74 document.nodes.add(btn);
75 }
76 {% endhighlight %}
77 </div>
78 </div>
79
80 <div class="span4">
81 <h2><i class="icon-cogs"></i> Productive</h2>
82 <p>
83 Dart Editor and the SDK provide
84 an <strong>integrated development and debugging</strong> experience. The editor
85 supports refactoring, breakpoints, code completion, code
86 navigation, and more. The SDK contains the stand-alone virtual
87 machine, a package manager, and Chromium with an embedded
88 Dart VM.
89 <a href="#productive-tools">Learn more</a>
90 </p>
91 <p class="img">
92 <img src="/imgs/homepage/editor-full.png">
93 </p>
94 </div>
95
96 <div class="span4">
97 <h2><i class="icon-globe"></i> Ubiquitous</h2>
98 <p>
99 Dart can be <strong>compiled to JavaScript</strong>,
100 so you can use it for web apps in all modern desktop and mobile browsers .
101 Our JavaScript compiler generates minimal code thanks to tree-shaking.
102 Dart apps can also <strong>run on the server</strong>, in a stand-alone
103 Dart VM.
104 </p>
105 <p class="img">
106 <img src="/imgs/homepage/server-desktop-phone.png">
107 </p>
108 </div>
109 </div> <!-- /.row -->
110
71 </section> 111 </section>
72 112
73 <script async type="text/javascript" 113 <section>
74 src="http://try.dartlang.org/dartboard.dart.app.js"> 114
75 </script> 115 <div class="row callouts">
76 116 <div class="span4">
77 117 <h2><i class="icon-play"></i> Start</h2>
118 <ul>
119 <li><a href="/docs/editor/">Get the editor and SDK</a></li>
120 <li><a href="/docs/technical-overview/">Read the technical overview</a>< /li>
121 <li><a href="/samples/">Tour the samples</a></li>
122 <li><a href="http://www.youtube.com/watch?v=vT1KmTQ-1Os"
123 title="Introduction to Dart">Watch an intro video</a></li>
124 </ul>
125 </div>
126
127 <div class="span4">
128 <h2><i class="icon-book"></i> Learn</h2>
129 <ul>
130 <li><a href="/docs/language-tour/">Follow the language tour</a></li>
131 <li><a href="/docs/library-tour/">Follow the library tour</a></li>
132 <li><a href="http://synonym.dartlang.org/">See synonyms to JavaScript</a ></li>
133 <li><a href="http://shop.oreilly.com/product/0636920025887.do">Read a fr ee eBook</a></li>
134 <li><a href="/slides/2012/06/io12/Bullseye-Your-first-Dart-app-Codelab-G oogleIO2012.pdf">Practice a codelab</a></li>
135 </ul>
136 </div>
137
138 <div class="span4">
139 <h2><i class="icon-comments"></i> Participate</h2>
140 <ul>
141 <li><a href="/mailing-list">Send feedback to the mailing list</a></li>
142 <li><a href="https://plus.google.com/109866369054280216564/posts">Follow on G+</a>
143 and <a href="http://twitter.com/dart_lang">Twitter</a></li>
144 <li><a href="http://stackoverflow.com/questions/tagged/dart">Get answers at Stack Overflow</a></li>
145 <li><a href="http://dartbug.com/new">File feature requests and bugs</a>< /li>
146 <li><a href="http://code.google.com/p/dart/wiki/Contributing">Submit a p atch</a></li>
147 </ul>
148 </div>
149 </div>
150
151 </section>
152
153 <div class="overview-transition">
154 <hr>
155 <h1>Overview</h1>
156 </div>
157
158 <section id="structured-language">
159
160 <div class="page-header">
161 <h1>A structured language <small>that's flexible and familiar</small></h1>
162 </div>
163
164 <div class="row" id="language-features">
165 <div class="span12">
166 <p>
167 Dart addresses issues with traditional web development languages
168 while remaining easy to learn. Thanks to optional static types, Dart
169 scales from simple scripts to large apps. Learn more with the
170 <a href="/docs/language-tour/" title="Dart Language Tour">language tour< /a>, or read the
171 <a href="/docs/spec/" title="Dart Language Specification">language spec< /a>.
172 </p>
173
174 <ul class="nav nav-tabs">
175 <li class="active"><a href="#lang-classes" data-toggle="tab">Classes</a> </li>
176 <li><a href="#lang-lexical-closures" data-toggle="tab">Lexical closures< /a></li>
177 <li><a href="#lang-libraries" data-toggle="tab">Libraries</a></li>
178 <li><a href="#lang-optional-static-types" data-toggle="tab">Optional sta tic types</a></li>
179 <li><a href="#lang-named-params" data-toggle="tab">Named parameters</a>< /li>
180 <li><a href="#lang-isolates" data-toggle="tab">Isolates</a></li>
181 <li><a href="#lang-more" data-toggle="tab">More</a></li>
182 </ul>
183
184 <div class="tab-content">
185 <div class="tab-pane active" id="lang-classes">
186 <div class="row">
187 <div class="span6">
188 {% highlight dart %}
189 class Point {
190 final num x, y;
191
192 Point(this.x, this.y);
193 Point.zero() : x = 0, y = 0; // Named constructor
194 // with an initializer list.
195
196 num distanceTo(Point other) {
197 var dx = x - other.x;
198 var dy = y - other.y;
199 return Math.sqrt(dx * dx + dy * dy);
200 }
201 }
202 {% endhighlight %}
203 </div>
204 <div class="span6">
205 <h2>Classes</h2>
206 <p>
207 Dart supports classes as a fundamental structural
208 building block for libraries and apps. Classes define
209 the structure of an object, and you can extend them to create
210 more specialized definitions. New features
211 such as <a href="/articles/m1-language-changes/#no-explicit-in terfaces">implicit interfaces</a> and
212 <a href="http://www.dartlang.org/docs/language-tour/#named-con structors">named constructors</a>,
213 make it easier to
214 say more while typing less.
215 Learn more about <a href="/docs/language-tour/#classes">classe s in Dart</a>.
216 </p>
217 </div>
218 </div>
219 </div> <!-- /.tab-pane -->
220
221 <div class="tab-pane" id="lang-lexical-closures">
222 <div class="row">
223 <div class="span6">
224 {% highlight dart %}
225 makeAdder(num x) {
226 return (num y) => x + y;
227 }
228
229 main() {
230 var add2 = makeAdder(2);
231 assert(add2(3) == 5);
232 }
233 {% endhighlight %}
234 </div>
235 <div class="span6">
236 <h2>Lexical closures</h2>
237 <p>
238 Dart has lexical scoping and a convenient closure
239 mechanism. The <code>makeAdder</code> function returns a
240 new function that closes around <code>x</code>.
241 The <code>=&gt;</code> syntax is syntactic
242 sugar for a one-line function with a return value.
243 </p>
244 </div>
245 </div>
246 </div> <!-- /.tab-pane -->
247
248 <div class="tab-pane" id="lang-libraries">
249 <div class="row">
250 <div class="span3">
251 {% highlight dart %}
252 // In widget.dart
253
254 #library('widget');
255
256 class Widget {
257 // ...
258 }
259 {% endhighlight %}
260 </div>
261 <div class="span3">
262 {% highlight dart %}
263 // In toolkit.dart
264
265 #library('toolkit');
266 #import('widget.dart');
267
268 class Window extends Widget {
269 // ...
270 }
271 {% endhighlight %}
272 </div>
273 <div class="span6">
274 <h2>Libraries</h2>
275 <p>
276 Use libraries to create reusable modules of functionality.
277 Libraries can import other libraries, making it easy to
278 publish and share code.
279 </p>
280 </div>
281 </div>
282 </div> <!-- /.tab-pane -->
283
284 <div class="tab-pane" id="lang-optional-static-types">
285 <div class="row">
286 <div class="span6">
287 {% highlight dart %}
288 class Point {
289 final num x, y;
290 Point(this.x, this.y);
291
292 // Use static types for
293 // the "surface area" of your code.
294 num distanceTo(Point other) {
295 // var declares an
296 // untyped dynamic variable
297 var dx = x - other.x;
298 var dy = y - other.y;
299 return Math.sqrt(dx * dx + dy * dy);
300 }
301 }
302 {% endhighlight %}
303 </div>
304 <div class="span6">
305 <h2>Optional static types</h2>
306 <p>
307 Think of Dart's static types as annotations and documentation
308 that help clearly indicate your intent, without getting in
309 your way. Use types when you want more help from your tools,
310 or if you want to make it easier to understand how to use your
311 code. Omit the type annotations if you're just scripting aroun d or
312 if you're trying to express something that is challenging to
313 express with a single type annotation.
314 Type annotations don't affect the runtime semantics. Learn mor e about
315 <a href="http://www.dartlang.org/articles/optional-types/">opt ional
316 types in Dart</a>.
317 </p>
318 </div>
319 </div>
320 </div> <!-- /.tab-pane -->
321
322 <div class="tab-pane" id="lang-named-params">
323 <div class="row">
324 <div class="span6">
325 {% highlight dart %}
326 flipFlags([bool on, bool up, bool hidden=false]) {
327 // ...
328 }
329
330 flipFlags(on: true, up: false, hidden: true);
331
332 // Named params are also optional params
333 flipFlags(on: true); // up == null, hidden == false
334 {% endhighlight %}
335 </div>
336 <div class="span6">
337 <h2>Named parameters</h2>
338 <p>
339 The meaning of <code>true</code>
340 or <code>false</code> is hard to decipher without context.
341 Using named parameters, you can write code that is easier
342 to understand.
343 As a bonus, named parameters are also optional parameters.
344 </p>
345 </div>
346 </div>
347 </div> <!-- /.tab-pane -->
348
349 <div class="tab-pane" id="lang-isolates">
350 <div class="row">
351 <div class="span6">
352 {% highlight dart %}
353 #import('dart:isolate');
354
355 echo() {
356 port.receive((msg, SendPort replyTo) {
357 replyTo.send("Echo: $msg");
358 });
359 }
360
361 main() {
362 SendPort echoService = spawnFunction(echo);
363 echoService.call("Hello!").then((answer) => print(answer));
364 }
365 {% endhighlight %}
366 </div>
367 <div class="span6">
368 <h2>Isolates</h2>
369 <p>
370 Create isolates for concurrent programming and to
371 run third-party code more securely. Communicate between
372 isolates by passing messages that are copied before
373 received to ensure no state is ever shared. Dart uses
374 isolates instead of shared-state threads for safer
375 parallel programming.
376 </p>
377 <p>
378 The <code>echo()</code> function is run in an isolate,
379 which is created with <code>spawnFunction</code>.
380 A message is sent by <code>call</code> and an answer
381 is printed.
382 </p>
383 </div>
384 </div>
385 </div> <!-- /.tab-pane -->
386
387 <div class="tab-pane" id="lang-more">
388 <p>
389 The Dart language contains many more useful and productive
390 features.
391 Check out a sample:
392 </p>
393 <ul>
394 <li>better asynchronous programming with
395 <a href="/docs/library-tour/#asynchronous-programming">Futures</a> </li>
396 <li>more explicit collections with <a href="/docs/language-tour/#g enerics">generics</a></li>
397 <li>better <a href="/docs/language-tour/#for-loops">for loops</a>< /li>
398 <li>error handling with <a href="/docs/language-tour/#exceptions"> exceptions</a></li>
399 </ul>
400
401 <p>
402 Learn more about the Dart language by taking
403 a <a href="/docs/language-tour/">Language Tour</a>,
404 or reading the <a href="/docs/spec/">Dart Language Spec</a>.
405 </p>
406 </div> <!-- /.tab-pane -->
407
408 </div> <!-- /.tab-content -->
409 </div> <!-- /.span12 -->
410 </div> <!-- /#language-features -->
411
412 </section>
413
414 <section id="productive-tools">
415
416 <div class="page-header">
417 <h1>Productive and integrated tools <small>for faster development</small></h 1>
418 </div>
419
420 <p>
421 Gone are the days of building web apps with plain text editors.
422 <a href="/docs/editor/">Dart Editor</a>, its static analysis engine,
423 and direct integration with Chromium+DartVM
424 helps you develop, debug, and maintain your apps.
425 </p>
426
427 <p>
428 Dart also ships a stand-alone
429 <a href="/docs/sdk/">Dart SDK</a> that contains the
430 <a href="/docs/dart2js/">dart2js compiler</a>,
431 the <a href="/docs/standalone-dart-vm/">Dart VM</a>
432 for running command-line apps, and the
433 <a href="/docs/pub-package-manager/">pub</a> package manager.
434 </p>
435
436 <div class="row">
437 <div class="span12">
438 <ul class="thumbnails">
439 <li class="span6">
440 <div class="thumbnail">
441 <img src="/imgs/homepage/editor-code-completion.png" alt="Code compl etion in Dart Editor">
442 <h5>Code completion</h5>
443 <p>
444 Explore the methods and fields
445 available to the object you're working on.
446 </p>
447 </div>
448 </li>
449
450 <li class="span6">
451 <div class="thumbnail">
452 <img src="/imgs/homepage/editor-refactor.png" alt="Refactoring in Da rt Editor">
453 <h5>Refactoring</h5>
454 <p>
455 Change your code structure
456 without changing the behavior.
457 </p>
458 </div>
459 </li>
460 </ul>
461 </div>
462 </div>
463
464 <div class="row">
465 <div class="span12">
466 <ul class="thumbnails">
467 <li class="span6">
468 <div class="thumbnail">
469 <img src="/imgs/homepage/editor-outline.png" alt="Code completion in Dart Editor">
470 <h5>Outline view</h5>
471 <p>
472 List the classes,
473 methods, and functions
474 in a simple tree display.
475 </p>
476 </div>
477 </li>
478
479 <li class="span6">
480 <div class="thumbnail">
481 <img src="/imgs/homepage/editor-debug.png" alt="Debugging in Dart Ed itor">
482 <h5>Debugger</h5>
483 <p>
484 Set breakpoints, inspect variables,
485 and step over, into, and out of code.
486 </p>
487 </div>
488 </li>
489 </ul>
490 </div>
491 </div>
492
493 <div class="row">
494 <div class="span12">
495 <ul class="thumbnails">
496
497 <li class="span6">
498 <div class="thumbnail">
499 <img src="/imgs/homepage/editor-warnings.png" alt="Static analysis w arnings in Dart Editor">
500 <h5>Static analysis</h5>
501 <p>
502 See warnings when inconsistencies and potential problems are detec ted.
503 </p>
504 </div>
505 </li>
506
507 <li class="span6">
508 <div class="thumbnail">
509 <img src="/imgs/homepage/editor-callers.png" alt="Find callers for m ethods in Dart Editor">
510 <h5>Open callers</h5>
511 <p>
512 Quickly find all callers for a method, and easily jump to those lo cations.
513 </p>
514 </div>
515 </li>
516 </ul>
517 </div>
518 </div>
519
520 </section>
521
522 <section id="get-started-now">
523 <div class="page-header">
524 <h1>Get Started Now</h1>
525 </div>
526
527 <ul class="buttons">
528 <li>
529 <a href="/docs/editor/getting-started/" class="btn btn-primary btn-large">
530 <i class="icon-download-alt"></i>
531 Download Dart Editor
532 </a>
533 </li>
534 <li>
535 <a href="/docs/technical-overview/" class="btn btn-primary btn-large">
536 <i class="icon-book"></i>
537 Read the Technical Overview
538 </a>
539 </li>
540 <li>
541 <a href="/mailing-list" class="btn btn-primary btn-large">
542 <i class="icon-comments-alt"></i>
543 Join the Mailing List
544 </a>
545 </li>
546 </ul>
547 </section>
548
549 </article> <!-- /.homepage -->
OLDNEW
« no previous file with comments | « src/site/imgs/homepage/server-desktop-phone.png ('k') | src/site/js/bootstrap-collapse.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698