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

Side by Side Diff: src/site/docs/technical-overview/index.html

Issue 11366023: Updated tech overview (Closed) Base URL: git@github.com:dart-lang/dartlang.org.git@master
Patch Set: incorporate review comments; update related pages/lists Created 8 years 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/docs/technical-overview/images/perf-chart.png ('k') | src/site/support/index.html » ('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: default
3 title: "Technical Overview" 3 title: "Technical Overview"
4 --- 4 ---
5 <h1>Technical Overview </h1> 5 <h1>Technical Overview </h1>
6 6
7 <section> 7 <section>
8 <p> 8 <p>
9 Dart is a new class-based programming language 9 Dart helps developers build high-performance apps for the modern web.
10 for creating structured web applications. 10 Targeting modern desktop and mobile browsers,
11 Dart apps can run natively in a Dart virtual machine (VM)
12 or be compiled to JavaScript.
13 </p>
14
15 <p>
11 Developed with the goals of simplicity, efficiency, and scalability, 16 Developed with the goals of simplicity, efficiency, and scalability,
12 the Dart language combines powerful new language features 17 the Dart language combines powerful new features
13 with familiar language constructs into a clear, readable syntax. 18 with familiar language constructs into a clear, readable syntax.
19 But Dart's not just a language.
20 The Dart open-source project includes libraries, a package manager,
sethladd 2012/12/14 17:28:14 should we add "also includes" here? otherwise, I f
Kathy Walrath 2012/12/14 22:51:41 Done.
21 and tools such as a full-featured editor.
14 </p> 22 </p>
15 23
16 <aside> 24 <aside>
17 <div class="alert alert-info"> 25 <div class="alert alert-info">
18 <strong>Note:</strong> 26 <strong>Note:</strong>
sethladd 2012/12/14 17:28:14 This should be a "project status" top-level sectio
Kathy Walrath 2012/12/14 22:51:41 I don't know... It seems like we ought to warn peo
19 This document is part of an early preview of 27 The M1 release (October 2012)
20 the Dart language and programming environment. 28 established a stable basis for the Dart language.
21 Some elements are missing from the current release, 29 The language will continue to change,
22 and the details are subject to change based on the feedback we receive. 30 but we expect the changes to be backward compatible.
31 The Dart libraries, on the other hand,
32 are not yet stable.
23 </div> 33 </div>
24 </aside> 34 </aside>
25 35
36 <p>
37 Additional open-source projects and the Pub package manager
38 help developers be even more productive.
39 For example, developers can use Pub to get packages for
40 JavaScript interoperability,
41 a web UI framework,
42 a unit testing library,
43 libraries for game development,
44 and much more.
45 </p>
46
47 <p>
48 Now that the language has stabilized,
49 the Dart team is working on performance.
50 As the following chart shows,
51 the Dart VM is already much faster than Chrome’s JavaScript engine, V8,
52 on two important benchmarks.
53 See the <a href="/performance/">performance page</a>
54 for the latest measurements of Dart and JavaScript code.
55 </p>
56
57 <p>
58 <a href="/performance/">
59 <img src="images/perf-chart.png"
sethladd 2012/12/14 17:28:14 this chart will get out of date pretty fast. let's
Kathy Walrath 2012/12/14 22:51:41 Done.
60 alt="a performance chart"
61 style="border: 1px solid black">
62 </a>
63 </p>
64 </section>
65
66
26 <h4> Contents </h4> 67 <h4> Contents </h4>
27 68
28 <ol class="toc"> 69 <ol class="toc">
29 <li> <a href="#key">Key features</a> </li> 70 <li> <a href="#key">Language features</a>
71 <ol>
72 <li> <a href="#lang-classes">Classes </a></li>
73 <li> <a href="#lang-optional-types">Optional types</a> </li>
74 <li> <a href="#lang-lexical-scope">Lexical scoping</a> </li>
75 <li> <a href="#lang-libraries">Libraries</a> </li>
76 <li> <a href="#lang-isolates">Isolates</a> </li>
77 <li> <a href="#lang-tooling">Toolability</a> </li>
78 </ol> </li>
30 <li> <a href="#goals">Design goals</a> </li> 79 <li> <a href="#goals">Design goals</a> </li>
sethladd 2012/12/14 17:28:14 Shouldn't Design Goals go before Language features
Kathy Walrath 2012/12/14 22:51:41 Yeah, probably. Especially since it uses bold font
31 <li> <a href="#code">Show me the code </a> 80 <li> <a href="#code">Examples of Dart code</a>
32 <ol> 81 <ol>
33 <li> <a href="#classes">Classes and interfaces </a> </li> 82 <li> <a href="#classes">Using classes </a></li>
34 <li> <a href="#optional-types">Optional types </a> </li> 83 <li> <a href="#optional-types">Adding types</a> </li>
84 <li> <a href="#browser">Writing web apps</a> </li>
35 </ol> 85 </ol>
36 </li> 86 </li>
37 <li> <a href="#howtouse">How can I use Dart? </a> 87 <li> <a href="#tools">Tools</a>
38 <ol> 88 <ol>
89 <li> <a href="#running">Dart code execution</a> </li>
39 <li> <a href="#editor">Dart Editor</a> </li> 90 <li> <a href="#editor">Dart Editor</a> </li>
40 <li> <a href="#mimetype">New MIME type </a> </li> 91 <li> <a href="#pub">The Dart Package Manager: pub</a> </li>
41 </ol> 92 </ol></li>
42 </li> 93 <li> <a href="#libraries">Libraries</a> </li>
43 <li> <a href="#tools">Tools </a> </li> 94 <li> <a href="#involved">Get involved</a> </li>
44 <li> <a href="#libraries">Libraries </a> </li>
45 <li> <a href="#involved">Get involved </a> </li>
46 </ol> 95 </ol>
47 </section> 96 </section>
48 97
49 98
50 <section id="key"> 99 <section id="key">
51 <h2> Key features </h2> 100 <h2> Language features </h2>
sethladd 2012/12/14 17:28:14 More cool features to pick from: http://programme
Kathy Walrath 2012/12/14 22:51:41 There are many, but this is already a laundry list
52 101
53 <p> 102 <p>
54 Key features of the Dart language include: 103 Key features of the Dart language include
104 classes, optional types, lexical scoping, libraries, isolates, and toolability .
105 </p>
106
107 <p>
108 Although Dart is designed to be familiar,
109 we took the opportunity to fix
110 some problematic features of common languages.
111 We also introduced a few good features from lesser known languages.
112 Some Dart features you might not expect include
113 top-level functions,
114 optional parameters,
115 string interpolation,
116 multi-line strings,
117 dynamic method handling (<code>noSuchMethod</code>),
118 a cascade operator (<code>..</code>), and
119 a function shorthand syntax (<code>=></code>).
120 Details are in the
121 <a href="/docs/dart-up-and-running/ch02.html">language tour</a>.
55 </p> 122 </p>
56 123
57 124
58 <h3>Classes</h3> 125 <h3 id="lang-classes">Classes</h3>
59 <p> 126 <p>
60 Classes and interfaces provide a well understood mechanism 127 Classes provide a well understood mechanism
61 for efficiently defining APIs. 128 for efficiently defining APIs.
62 These constructs enable encapsulation and reuse of methods and data. 129 Each class implicitly defines an interface.
130 Together, classes and interfaces
131 enable encapsulation and reuse of methods and data.
63 </p> 132 </p>
64 133
65 <h3>Optional types</h3> 134 <h3 id="lang-optional-types">Optional types</h3>
66 <p> 135 <p>
67 Dart programmers can optionally add static types to their code. 136 Optional types can help a Dart program scale from a quick prototype
68 Depending on programmer preference and stage of application development, 137 into a complex, modular application.
69 the code can migrate from a simple, untyped experimental prototype 138 While a small program or prototype might not have type annotations,
70 to a complex, modular application with typing. 139 you always have the option of adding them.
71 Because types state programmer intent, 140 Types make the code's intent clearer,
72 less documentation is required to explain what is happening in the code, 141 which helps developers to understand the code.
73 and type-checking tools can be used for debugging. 142 Types also enable more powerful tools
143 for writing and debugging code.
74 </p> 144 </p>
75 145
76 <h3>Libraries</h3> 146 <h3 id="lang-lexical-scope">Lexical scoping</h3>
147 <p>
148 Scoping rules in Dart make sense.
149 Each identifier is scoped to the block it's declared in,
150 which means that you can tell a variable's scope
151 by looking at the braces in your code <code>{...}</code>.
152 Even in a closure within a loop,
153 the value of a variable is what you intuitively expect.
154 </p>
155
156
157 <h3 id="lang-libraries">Libraries</h3>
77 <p> 158 <p>
78 Developers can create and use libraries 159 Developers can create and use libraries
79 that are guaranteed not to change during runtime. 160 that are guaranteed not to change during runtime.
80 Independently developed pieces of code can therefore 161 Independently developed pieces of code can therefore
81 rely on shared libraries. 162 rely on shared libraries.
82 </p> 163 </p>
83 164
84 <h3>Tooling</h3> 165 <h3 id="lang-isolates">Isolates</h3>
85 <p> 166 <p>
86 Dart will include a rich set of 167 Modern web browsers, even on mobile platforms,
87 execution environments, libraries, and development tools 168 run on multi-core CPUs.
88 built to support the language. 169 To take advantage of all those cores,
89 These tools will enable productive and dynamic development, 170 developers traditionally use shared-memory threads running concurrently.
171 However, shared-state concurrency is error prone
172 and can lead to complicated code.
173 Instead of threads, all Dart code runs inside of isolates.
174 Each isolate has its own memory heap,
175 ensuring that no isolate’s state is accessible from any other isolate.
176 </p>
177
178 <h3 id="lang-tooling">Toolability</h3>
179 <p>
180 Dart is designed to work well with tools.
181 A rich set of execution environments, libraries, and development tools
182 have already been built to support the language.
183 Dart's toolability enables productive and dynamic development,
90 including edit-and-continue debugging and beyond&mdash;up 184 including edit-and-continue debugging and beyond&mdash;up
91 to a style where you program an application outline, run it, 185 to a style where you program an application outline, run it,
92 and fill in the blanks as you run. 186 and fill in the blanks as you run.
93 </p> 187 </p>
94 </section> 188 </section>
95 189
96 190
97 <section id="goals"> 191 <section id="goals">
98 <h2> Design goals </h2> 192 <h2> Design goals </h2>
99 193
100 <p> 194 <p>
101 The Dart programming language is presented here in its early stages. 195 The following design goals guide
102 The following design goals will guide 196 the continued evolution and refinement of this project:
103 the continued evolution and refinement of this open source project:
104 </p> 197 </p>
105 198
106 <ul> 199 <ul>
107 <li>Create a <b>structured yet flexible</b> 200 <li>Create a <b>structured yet flexible</b>
108 programming language for the web.</li> 201 programming language for the web.</li>
109 <li>Make Dart feel <b>familiar and natural</b> to programmers 202 <li>Make Dart feel <b>familiar and natural</b> to programmers
110 and thus easy to learn.</li> 203 and thus easy to learn.</li>
111 <li>Ensure that all Dart language constructs allow 204 <li>Ensure that all Dart language constructs allow
112 <b>high performance</b> and 205 <b>high performance</b> and
113 <b>fast application startup</b>.</li> 206 <b>fast application startup</b>.</li>
114 <li>Make Dart appropriate for the 207 <li>Make Dart appropriate for the
115 <b>full range of devices on the web</b>&mdash;including 208 <b>full range of devices on the web</b>&mdash;including
116 phones, tablets, laptops, and servers.</li> 209 phones, tablets, laptops, and servers.</li>
117 <li>Provide tools that make Dart run fast 210 <li>Provide tools that make Dart run fast across
118 <b>across all major modern browsers</b>. </li> 211 <b>all major modern browsers</b>. </li>
119 </ul> 212 </ul>
120 213
121 <p> 214 <p>
122 These design goals address the following problems 215 These design goals address the following problems
123 currently facing web developers: 216 currently facing web developers:
124 </p> 217 </p>
125 218
126 <ul> 219 <ul>
127 <li>Small scripts often evolve into 220 <li>Small scripts often evolve into
128 large web applications with no apparent structure&mdash;they&rsquo;re 221 large web applications with no apparent structure&mdash;they&rsquo;re
129 hard to debug and difficult to maintain. 222 hard to debug and difficult to maintain.
130 In addition, these monolithic apps can&rsquo;t be split up 223 In addition, these monolithic apps can&rsquo;t be split up
131 so that different teams can work on them independently. 224 so that different teams can work on them independently.
132 It&rsquo;s difficult to be productive 225 It&rsquo;s difficult to be productive
133 when a web application gets large.</li> 226 when a web application gets large.</li>
134 <li>Scripting languages are popular 227 <li>
135 because their lightweight nature makes it easy to write code quickly. 228 In scripting languages, the contracts with other parts of an application
136 Generally, the contracts with other parts of an application 229 are usually conveyed in comments rather than in the language structure its elf.
137 are conveyed in comments rather than in the language structure itself. 230 As a result, it can be difficult for someone other than the author
138 As a result, it&rsquo;s difficult for someone other than the author
139 to read and maintain a particular piece of code.</li> 231 to read and maintain a particular piece of code.</li>
140 <li>With existing languages, 232 <li>Before Dart,
141 the developer is forced to make a choice between 233 the developer was forced to make a choice between
142 static and dynamic languages. 234 static and dynamic languages.
143 Traditional static languages require heavyweight toolchains 235 Traditional static languages require heavyweight toolchains
144 and a coding style that can feel inflexible and overly constrained.</li> 236 and a coding style that can feel inflexible and overly constrained.</li>
145 <li>Developers have not been able to create homogeneous systems 237 <li>Developers have not been able to create homogeneous systems
146 that encompass both client and server, 238 that encompass both client and server,
147 except for a few cases such as Node.js and Google Web Toolkit (GWT). 239 except for a few cases such as Node.js and Google Web Toolkit (GWT).
148 </li> 240 </li>
149 <li>Different languages and formats entail context switches 241 <li>Different languages and formats entail context switches
150 that are cumbersome and add complexity to the coding process.</li> 242 that are cumbersome and add complexity to the coding process.</li>
151 </ul> 243 </ul>
244
152 </section> 245 </section>
153 246
154 247
155 <section id="code"> 248 <section id="code">
156 <h2>Show me the code</h2> 249 <h2>Examples of Dart code</h2>
157 250
158 <p> 251 <p>
159 Here are several code snippets 252 Here are some code snippets
160 to give you a feel for what Dart code looks like. 253 to give you a feel for what Dart code looks like.
161 </p> 254 </p>
162 255
163 <section id="classes"> 256 <section id="classes">
164 <h3>Classes and interfaces</h3> 257 <h3>Using classes</h3>
165 258
166 <p> 259 <p>
167 Dart&rsquo;s interfaces and classes provide you with 260 Dart&rsquo;s classes provide
168 a set of reusable and extensible building blocks. 261 a set of reusable and extensible building blocks.
169 An <em>interface</em> defines a basic set of methods and constants, 262 A <em>class</em> defines methods and data
170 sometimes by inheriting from other interfaces. 263 and can provide method implementations.
171 A <em>class</em> can implement multiple interfaces, 264 Every <em>object</em> is an instance of a class.
172 but it only inherits from a single superclass.
173 </p> 265 </p>
174 266
175 <p> 267 <p>
176 The following example defines an interface, 268 Each class implicitly defines an <em>interface</em>.
177 along with a class and subclass that implement it: 269 A class can implement multiple interfaces,
270 but it only <em>extends</em>—inherits implementation from—a
271 single superclass.
272 </p>
273
274 <p>
275 The following example shows the code for three classes.
276 The first class, Shape, is an <em>abstract class</em>&mdash;a
277 class that can't be instantiated.
278 The second class, Rectangle,
279 implements the interface defined by Shape.
280 The third class, Square, is a subclass of Rectangle.
178 </p> 281 </p>
179 282
180 {% highlight dart %} 283 {% highlight dart %}
181 interface Shape { 284 abstract class Shape {
182 num perimeter(); 285 num perimeter();
183 } 286 }
184 287
185 class Rectangle implements Shape { 288 class Rectangle implements Shape {
186 final num height, width; 289 final num height, width;
187 Rectangle(num this.height, num this.width); // Compact constructor syntax. 290 Rectangle(this.height, this.width); // Compact constructor syntax.
188 num perimeter() => 2*height + 2*width; // Short function syntax. 291 num perimeter() => 2*height + 2*width; // Shorthand function syntax.
189 } 292 }
190 293
191 class Square extends Rectangle { 294 class Square extends Rectangle {
192 Square(num size) : super(size, size); 295 Square(num size) : super(size, size);
193 } 296 }
194 {% endhighlight %} 297 {% endhighlight %}
195 298
196 </section> <!-- classes --> 299 </section> <!-- classes -->
197 300
198 301
199 <section id="optional-types"> 302 <section id="optional-types">
200 <h3>Optional types</h3> 303 <h3>Adding types</h3>
201 304
202 <p> 305 <p>
203 Dart provides, at the programmer&rsquo;s option, 306 Dart provides, at the programmer&rsquo;s option,
204 a mixture of static and dynamic checking. 307 a mixture of static and dynamic checking.
205 When experimenting, 308 When experimenting,
206 the programmer can write untyped code for simple prototyping. 309 the programmer can write untyped code for simple prototyping.
207 As the application becomes larger and more stable, 310 As the application becomes larger and more stable,
208 types can be added to aid debugging and impose structure where desired. 311 types can be added to aid debugging and impose structure.
209 </p> 312 </p>
210 313
211 <p> 314 <p>
212 For example, here is a sample of untyped code in Dart 315 For example, here is a sample of untyped code in Dart
213 that creates a new Point class that has parameters 316 that creates a new Point class that has two instance variables
214 <code>x</code> and <code>y</code> 317 (<code>x</code> and <code>y</code>)
215 and two methods: 318 and two methods
216 <code>scale()</code> and <code>distance()</code>. 319 (<code>scale()</code> and <code>distance()</code>).
217 </p> 320 </p>
218 321
219 {% highlight dart %} 322 {% highlight dart %}
220 import 'dart:math'; 323 import 'dart:math';
221 324
222 class Point { 325 class Point {
223 var x, y; 326 var x, y;
224 Point(this.x, this.y); 327 Point(this.x, this.y);
225 scale(factor) => new Point(x*factor, y*factor); 328 scale(factor) => new Point(x*factor, y*factor);
226 distance() => sqrt(x*x + y*y); 329 distance() => sqrt(x*x + y*y);
227 } 330 }
228 331
229 main() { 332 main() {
230 var a = new Point(2,3).scale(10); 333 var a = new Point(2,3).scale(10);
231 print(a.distance()); 334 print(a.distance());
232 } 335 }
233 {% endhighlight %} 336 {% endhighlight %}
234 337
235 <p> 338 <p>
236 Here is what this code looks like with types added 339 Here is what this code looks like with a few types added
237 that ensure that 340 to make the API of Point clearer.
238 <code>x</code>, <code>y</code>, and <code>factor</code> 341 For example, this code specifies that
239 are of type <code>num</code>, 342 <code>x</code> and <code>y</code>
240 and that a <code>Point</code> contains two values 343 are of type <code>num</code>.
241 of type <code>num</code>:
242 </p> 344 </p>
243 345
244 {% highlight dart %} 346 {% highlight dart %}
245 import 'dart:math'; 347 import 'dart:math';
246 348
247 class Point { 349 class Point {
248 num x, y; 350 num x, y;
249 Point(num this.x, num this.y); 351 Point(this.x, this.y);
250 Point scale(num factor) => new Point(x*factor, y*factor); 352 Point scale(num factor) => new Point(x*factor, y*factor);
251 num distance() => sqrt(x*x + y*y); 353 num distance() => sqrt(x*x + y*y);
252 } 354 }
253 355
254 void main() { 356 main() {
255 Point a = new Point(2,3).scale(10); 357 var a = new Point(2,3).scale(10);
256 print(a.distance()); 358 print(a.distance());
257 } 359 }
258 {% endhighlight %} 360 {% endhighlight %}
259 361
260 </section> <!-- optional types --> 362 </section> <!-- optional types -->
261 </section> <!-- code -->
262 363
263 <section id="howtouse"> 364 <section id="browser">
264 <h2>How can I use Dart?</h2> 365 <h3>Writing web apps</h3>
265 366
266 <p> 367 <p>
267 You can run Dart code in several ways: 368 Dart code can be compiled to JavaScript
268 </p> 369 that runs in any modern browser.
269 370 Dart code can also run directly in browsers that have a Dart VM,
270 <ul> 371 including Dartium and eventually Chrome.
271 <li> 372 Here's an example of an HTML file that loads Dart code:
272 <p>
273 Compile Dart code to JavaScript that can run in any modern browser:<br />
274 Chrome, Safari 5+, and Firefox 4+ (more browser support coming shortly)
275 </p>
276 </li>
277 <li>
278 <p>
279 Execute Dart code directly in a VM on your computer
280 </p>
281 </li>
282 <li>
283 <p>
284 With a <a href="#mimetype">new MIME type</a>,
285 use Dart in a browser
286 without first compiling to JavaScript
287 </p>
288 </li>
289 </ul>
290
291 <section id="editor">
292 <h3>Dart Editor</h3>
293
294 <p>
295 Dart Editor is a tool for
296 creating, modifying, and launching Dart web apps.
297 With one click, you can compile a Dart web app to JavaScript
298 and launch the app in a browser.
299 Taking advantage of Dart&rsquo;s structured nature,
300 Dart Editor supports method name completion and refactoring.
301 </p>
302
303 <p>
304 For information about downloading and using Dart Editor, see the
305 <a href="/docs/editor/getting-started/">Dart Editor tutorial</a>.
306 </p>
307 </section>
308
309 <section id="mimetype">
310 <h3>New MIME type</h3>
311
312 <p>
313 You will be able to link to a Dart program directly from an HTML page.
314 Here is the proposed new MIME type,
315 &ldquo;application/dart&rdquo;:
316 </p> 373 </p>
317 374
318 {% highlight html %} 375 {% highlight html %}
319 <!DOCTYPE html> 376 <!DOCTYPE html>
377 <html>
378 <head> <title>Simple Dart Web App</title> </head>
379 <body>
380 <h1>Simple Dart Web App</h1>
381 <button id="button-text"></button>
382 <output id="msg"></output>
320 383
321 <html> 384 <script type="application/dart" src="app.dart"></script>
322 <head> 385 <script src="https://dart.googlecode.com/svn/branches/bleeding_edge/dart/cli ent/dart.js"></script>
323 <title>Simple Dart Web App</title> 386
324 </head>
325 <body>
326 <h1>Simple Dart Web App</h1>
327 <h2 id="status">dart is starting up...</h2>
328 <script type="application/dart" src="SimpleDartWebApp.dart"></script>
329 <script src="http://dart.googlecode.com/svn/branches/bleeding_edge/dart/clie nt/dart.js"></script>
330 </body> 387 </body>
331 </html> 388 </html>
332 {% endhighlight %} 389 {% endhighlight %}
333 390
334 <p> 391 <p>
335 The dart.js file above will swap out the <code>application/dart</code> 392 The first &lt;script> tag in this example
336 tag with a <code>text/javascript</code> tag if the browser does not 393 loads the code from app.dart.
337 have an embedded Dart virtual machine. 394 If the browser has an embedded Dart VM,
395 then the browser loads Dart code,
396 which has the MIME type <code>application/dart</code>.
397 Otherwise, the browser loads the code's JavaScript equivalent,
398 thanks to the <code>dart.js</code> script
399 in the second &lt;script> tag.
338 </p> 400 </p>
339 401
340 <p> 402 <p>
341 The following is the Dart code for the page above: 403 Here is the code in app.dart:
342 </p> 404 </p>
343 405
344 {% highlight dart %} 406 {% highlight dart %}
345 import 'dart:html'; 407 import 'dart:html';
346 408
347 class SimpleDartWebApp { 409 main() {
348 void run() { 410 query('#button-text')
349 write("Hello World!"); 411 ..text = "Click me!"
350 } 412 ..on.click.add(respond);
351
352 void write(String message) {
353 // the HTML library defines a global "document" variable
354 document.query('#status').innerHTML = message;
355 }
356 } 413 }
357 414
358 void main() { 415 respond(event) {
359 new SimpleDartWebApp().run(); 416 query("#msg").text = "You clicked the button!";
360 } 417 }
361 {% endhighlight %} 418 {% endhighlight %}
362 </section> <!-- howtouse --> 419
363 </section> <!-- mimetype --> 420 <p>
421 The main() function's call to query()
422 returns the HTML element that has the ID "button-text".
423 The code then uses the cascade operator (<code>..</code>)
424 to perform multiple operations on that element.
425 The first operation initializes
426 the element's <code>text</code> property,
427 and the second adds an event handler to the element.
428 </p>
429
430 <p>
431 Libraries and frameworks will
432 ease the task of developing sophisticated web apps.
433 For example, the libraries and tools in the
434 <a href="http://www.dartlang.org/articles/dart-web-components/">Web UI</a>
435 package provide web components, templates, data binding,
436 and encapsulation.
437 </p>
438
439 </section> <!-- browser -->
440
441 </section> <!-- code -->
364 442
365 443
366 <section id="tools"> 444 <section id="tools">
367 <h2>Tools</h2> 445 <h2>Tools</h2>
368 446
369 <p> 447 <p>
370 The Dart language is accompanied by a set of tools 448 The Dart language is accompanied by a set of tools
371 to aid rapid prototyping, coding, and debugging 449 to aid rapid prototyping, coding, and debugging
372 for the entire development cycle. 450 for the entire development cycle.
373 Offerings include: 451 Offerings include:
374 </p> 452 </p>
375 453
376 <ul> 454 <ul>
377 <li>The Dart Editor</li> 455 <li><b>Dart Editor:</b> A Dart-savvy editor that supports creating, modifying, running, and debugging Dart apps</li>
sethladd 2012/12/14 17:28:14 savvy. I like it! :)
378 <li>The dart2js compiler</li> 456 <li><b>pub:</b> A package manager that features libraries published on <a href ="http://pub.dartlang.org/">pub.dartlang.org</a></li>
379 <li>The Dart VM</li> 457 <li><b>dart2js:</b> The Dart-to-JavaScript compiler</li>
380 <li>Dartium: Chromium with an embedded Dart VM</li> 458 <li><b>dart:</b> The Dart VM</li>
459 <li><b>Dartium:</b> Chromium with an embedded Dart VM</li>
381 </ul> 460 </ul>
382 461
462 <section id="running">
463 <h3>Dart code execution</h3>
464
383 <p> 465 <p>
384 On the client side, you can deploy Dart apps in two ways. 466 On the client side, you can deploy Dart apps in two ways.
385 For browsers without an embedded Dart VM, 467 For browsers without an embedded Dart VM,
386 you can compile the Dart code to JavaScript, 468 you can compile the Dart code to JavaScript,
387 using the dart2js compiler. This compiler generates ECMAScript5-compatible 469 using the <b>dart2js</b> compiler.
388 JavaScript from the Dart code. Dart code can run 470 This compiler generates ECMAScript5-compatible
389 directly in browsers that have a Dart VM, 471 JavaScript from the Dart code.
390 including Dartium (a special build of Chromium) 472 This JavaScript code works in Chrome, Safari 5+, and Firefox 4+
sethladd 2012/12/14 17:28:14 probably more accurate to say: latest Chrome, lat
Kathy Walrath 2012/12/14 22:51:41 Done.
391 and eventually Chrome. 473 (with more to come).
474 <b>{PENDING: is the browser list accurate?
475 Do we want it here?}</b>
392 </p> 476 </p>
393 477
394 <p> 478 <p>
395 On the server side, the Dart code runs directly on the command line, 479 On the server side, the Dart code runs directly on the command line,
480 using the <b>dart</b> tool,
396 for fast iteration and for cloud-based tasks. 481 for fast iteration and for cloud-based tasks.
397 </p> 482 </p>
398 483
484 <p>
399 <img src="images/source-flow.png" 485 <img src="images/source-flow.png"
400 alt="Dart source -> Dart Editor; Dart Editor -> either [Dart VM] or [JavaSc ript source -> Browser (JavaScript Engine)]" 486 alt="Dart source -> Dart Editor; Dart Editor -> either [Dart VM] or [JavaSc ript source -> Browser (JavaScript Engine)]"
401 width="266" height="417" > 487 width="266" height="417" >
488 <br>
489 <b>{PENDING: update the above figure to remove the "Dart Editor" box;
490 we don't want to imply that the editor is required.}</b>
491 </p>
492
493 <p>
494 Running an app is easy—a single click—when you use Dart Editor.
sethladd 2012/12/14 17:28:14 I think you can remove this section
Kathy Walrath 2012/12/14 22:51:41 Done. To compensate, I added a bit more about laun
495 For example, clicking the Run button while you're editing a web app
496 either runs it in Dartium
497 or compiles it to JavaScript
498 and runs it in the browser you've chosen.
499 </p>
500 </section>
501
502 <section id="editor">
503 <h3>Dart Editor</h3>
504
505 <p>
506 Dart Editor is based on Eclipse components,
507 but it has a simplified user interface.
508 </p>
509
510 <aside>
511 <div class="alert alert-info">
512 <strong>Note:</strong>
513 You aren't limited to using Dart Editor.
514 If you prefer Eclipse, IntelliJ, or WebStorm,
515 you can download Dart plugins for those IDEs.
516 Dart configurations also exist for popular text editors
517 such as Vim, Emacs, TextMate, and Sublime.
518 </div>
519 </aside>
520
521 <p>
522 Features of Dart Editor include:
523 </p>
524
525 <ul>
526 <li> Static analysis to catch errors and potential problems </li>
527 <li> Code completion </li>
528 <li> Code navigation </li>
529 <li> Refactoring </li>
530 <li> Launch management </li>
531 <li> Auto-update of the editor, SDK, and Dartium </li>
532 <li> Code update help for breaking changes
533 to the language and core libraries </li>
534 <li> Interactive debugging of both web apps (with Dartium)
535 and command-line apps </li>
536 </ul>
537
538 <p>
539 The following screenshot shows
540 Dart Editor being used to debug a web app.
541 </p>
542
543 <p>
544 <img src="images/DartEditor-debugger.png"
sethladd 2012/12/14 17:28:14 we should take high dpi screenshots for these. I c
Kathy Walrath 2012/12/14 22:51:41 If you could, that'd be great. Then you can show m
545 alt="screenshot of Dart Editor debugging a web app">
546 </p>
547
548 <p>
549 To get the tools and find more information, go to the
550 <a href="/downloads.html">downloads page</a>.</p>
551
552 </section>
553
554 <section id="pub">
555 <h3>The Dart Package Manager: pub</h3>
556
557 <p>
558 Pub is a package mananger for Dart.
559 It helps developers reuse existing Dart code
560 and bundle Dart apps and libraries
561 for reuse and sharing with other people.
562 Pub handles versioning and dependency management.
563 </p>
564
565 <p>
566 You can use Pub either at the command line
567 or through Dart Editor.
568 Because Pub is part of the SDK,
569 it's updated whenever Dart Editor or the SDK is updated.
570 </p>
571
572 <p>
573 For more information, go to
574 <a href="http://pub.dartlang.org/">pub.dartlang.org</a>.
575 </p>
576
577 </section>
402 </section> 578 </section>
403 579
404 580
405 <section id="libraries"> 581 <section id="libraries">
406 <h2>Libraries</h2> 582 <h2>Libraries</h2>
407 583
408 <p> 584 <p>
409 Dart provides the following libraries 585 Dart provides several libraries
410 to support web and web server development: 586 to support web and web server development.
587 The
588 <a href="/docs/dart-up-and-running/ch03.html">library tour</a>
589 and the
590 <a href="http://api.dartlang.org">API reference</a>
591 have details on all the bundled Dart libraries.
592 Bundled libraries include:
411 </p> 593 </p>
412 594
413 <dl> 595 <dl>
414 <dt> <a href="http://api.dartlang.org/dart_core.html">Core Library</a> </dt> 596 <dt> <a href="http://api.dartlang.org/dart_core.html">Core library</a> </dt>
415 <dd> Contains interfaces to support 597 <dd> Common data structures and operations.
416 common data structures and operations.
417 </dd> 598 </dd>
418 <dt> <a href="http://api.dartlang.org/html.html">HTML Library</a> </dt> 599 <dt> <a href="http://api.dartlang.org/dart_html.html">HTML library</a> </dt>
419 <dd> Contains interfaces to the HTML5 DOM, 600 <dd> The interface to the HTML5 DOM,
420 loosely based on the proposed HTML5 standard 601 loosely based on the proposed HTML5 standard
421 as specified by the W3C/WHATWG. 602 as specified by the W3C/WHATWG.
422 These interfaces will evolve in parallel with 603 This library is evolving in parallel with
423 the HTML5 standards.</dd> 604 the HTML5 standards.</dd>
424 605
425 <dt> <a href="http://api.dartlang.org/io.html">I/O Library</a> </dt> 606 <dt> <a href="http://api.dartlang.org/dart_io.html">I/O library</a> </dt>
426 <dd> Contains interfaces to read and write files, open directories, 607 <dd> Server-side support for I/O:
427 open network sockets, and run HTTP servers. This library is for 608 read and write files, open directories,
428 command-line Dart programs. 609 open network sockets, and run HTTP servers.
429 </dd> 610 </dd>
430 611
431 <dt> <a href="http://api.dartlang.org/dart_isolate.html">Isolate Library</a> < /dt> 612 <dt> <a href="http://api.dartlang.org/dart_isolate.html">Isolate library</a> < /dt>
432 <dd> 613 <dd>
433 Contains interfaces for spawning and communicating with isolates, 614 Support for spawning and communicating with isolates,
434 the mechanism for concurrency and security in a Dart program. 615 the mechanism for concurrency and security in a Dart program.
435 </dd> 616 </dd>
436 617
437 <dt> <a href="http://api.dartlang.org/crypto.html">Crypto Library</a> </dt> 618 <dt> <a href="http://api.dartlang.org/dart_json.html">JSON library</a> </dt>
438 <dd> 619 <dd>
439 Contains interfaces for creating one-way hashes (SHA1, MD5, SHA256) 620 Support for parsing and producing JSON-encoded text.
440 and HMAC support.
441 </dd> 621 </dd>
442 622
443 <dt> <a href="http://api.dartlang.org/json.html">JSON Library</a> </dt> 623 <dt> <a href="http://api.dartlang.org/dart_math.html">Math library</a> </dt>
444 <dd> 624 <dd>
445 Contains the ability to parse and produce JSON-encoded text. 625 Common functionality such as sine and cosine,
446 </dd> 626 maximum and minimum,
447 627 and constants such as <em>pi</em> and <em>e</em>.
448 <dt> <a href="http://api.dartlang.org/unittest.html">Unit Test Library</a> </d t>
449 <dd>
450 Contains functions and classes for writing unit tests in Dart.
451 </dd> 628 </dd>
452 </dl> 629 </dl>
sethladd 2012/12/14 17:28:14 Add "and more" ? How do we convey there are more l
Kathy Walrath 2012/12/14 22:51:41 Done.
453 630
454 <p> 631 <p>
455 See the 632 The <a href="http://pub.dartlang.org">pub.dartlang.org</a> site
456 <a href="/docs/dart-up-and-running/ch03.html">library tour</a> 633 has many additional libraries and tools.
457 and the 634 Here are just a few:
458 <a href="http://api.dartlang.org">API reference</a> docs for
459 details on all the bundled
460 Dart libraries.
461 </p> 635 </p>
462 636
637 <dl>
638 <dt> <a href="http://pub.dartlang.org/packages/js">JavaScript Interop</a>
639 </dt>
640 <dd> Use JavaScript from Dart code. </dd>
641
642 <dt> <a href="http://pub.dartlang.org/packages/unittest">Unit test</a> </dt>
643 <dd> Write unit tests for Dart code. </dd>
644
645 <dt> <a href="http://pub.dartlang.org/packages/web_ui">Web UI</a> </dt>
646 <dd> Build web apps using an API based on Web Components,
647 with additional features inspired by model-driven views. </dd>
648
649 <dt> <a href="http://pub.dartlang.org/packages/meta">Meta</a> </dt>
650 <dd> Use annotations to give tools
651 additional semantic information about your program. </dd>
652
653 <dt> {PENDING: We could add many more, such as logging, intl, args, oauth2,
654 benchmark_harness, vector_math, spectre, ... but should we?} </dt>
655 <!--
656 <dt> <a href="http://pub.dartlang.org/packages/XYZ">XYZ</a> </dt>
657 <dd> XYZ. </dd>
658 -->
659 </dl>
660
463 </section> <!-- libraries --> 661 </section> <!-- libraries -->
464 662
465 663
466 <section id="involved"> 664 <section id="involved">
467 <h2>Get involved</h2> 665 <h2>Get involved</h2>
468 666
469 <p> 667 <p>
470 This project is open source 668 This project will evolve with feedback and participation from the community.
471 and will evolve with feedback and participation from the community.
472 We have released the draft language specification at an early stage
473 to gather responses from the developers
474 who will be using this new language and infrastructure for web programming.
475 Here are some additional links for learning more about Dart 669 Here are some additional links for learning more about Dart
476 and providing your feedback: 670 and providing your feedback:
477 </p> 671 </p>
478 672
479 <ul> 673 <ul>
480 <li> 674 <li>
481 Other pages in the Dart website, 675 Other pages in the Dart website,
482 such as the <a href="/docs/dart-up-and-running/ch02.html">language tour</a>, 676 such as the <a href="/docs/dart-up-and-running/ch02.html">language tour</a>,
483 <a href="/docs/dart-up-and-running/ch03.html">library tour</a>, 677 <a href="/docs/dart-up-and-running/ch03.html">library tour</a>,
484 tutorials, and <a href="/docs/spec/">language specification</a>. 678 <a href="/docs/tutorials/">tutorials</a>,
679 and <a href="/docs/dart-up-and-running/ch05.html">Dart Chat walkthrough</a>
485 </li> 680 </li>
486 <li> 681 <li>
487 <a href="https://code.google.com/p/dart/">Dart project</a> 682 The Dart open-source project at
488 with issue tracker and source code </li> 683 <a href="https://code.google.com/p/dart/">code.google.com/p/dart/</a>,
684 as well as additional open-source projects from the Dart team at
685 <a href="https://github.com/dart-lang">github.com/dart-lang</a> </li>
489 <li> 686 <li>
490 <a href="https://groups.google.com/a/dartlang.org/group/misc/">Dart 687 <a href="https://groups.google.com/a/dartlang.org/group/misc/">Dart
491 discussion group</a> (misc at dartlang.org) </li> 688 discussion group</a> (misc at dartlang.org) and
689 <a href="https://plus.google.com/+dartlang">Dart on Google+</a> </li>
sethladd 2012/12/14 17:28:14 let's also mention the Dartisans community https:
Kathy Walrath 2012/12/14 22:51:41 Done.
492 <li> 690 <li>
493 <a href="https://plus.google.com/109866369054280216564/">+Dart</a> on Google + </li> 691 <a href="http://stackoverflow.com/questions/tagged/dart">Dart on Stack Overf low</a> </li>
494 </ul> 692 </ul>
495 693
496 </section> <!-- involved --> 694 </section> <!-- involved -->
497
498
OLDNEW
« no previous file with comments | « src/site/docs/technical-overview/images/perf-chart.png ('k') | src/site/support/index.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698