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