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 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, | |
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> |
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" | |
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> |
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 Pub package manager</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> |
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> |
sethladd
2012/12/14 17:34:35
what about just putting small examples for these f
| |
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—up | 184 including edit-and-continue debugging and beyond—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>—including | 208 <b>full range of devices on the web</b>—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—they’re | 221 large web applications with no apparent structure—they’re |
129 hard to debug and difficult to maintain. | 222 hard to debug and difficult to maintain. |
130 In addition, these monolithic apps can’t be split up | 223 In addition, these monolithic apps can’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’s difficult to be productive | 225 It’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’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’s interfaces and classes provide you with | 260 Dart’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>—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’s option, | 306 Dart provides, at the programmer’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’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> | 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 <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 <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> |
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+ |
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 -> either [Dart VM] or [dart2js -> JavaScript source -> Br owser (JavaScript Engine)]"> |
401 width="266" height="417" > | 487 </p> |
488 | |
489 <p> | |
490 Running an app is easy—a single click—when you use Dart Editor. | |
491 For example, clicking the Run button while you're editing a web app | |
492 either runs it in Dartium | |
493 or compiles it to JavaScript | |
494 and runs it in the browser you've chosen. | |
495 </p> | |
496 </section> | |
497 | |
498 <section id="editor"> | |
499 <h3>Dart Editor</h3> | |
500 | |
501 <p> | |
502 Dart Editor is based on Eclipse components, | |
503 but it has a simplified user interface. | |
504 </p> | |
505 | |
506 <aside> | |
507 <div class="alert alert-info"> | |
508 <strong>Note:</strong> | |
509 You aren't limited to using Dart Editor. | |
510 If you prefer Eclipse, IntelliJ, or WebStorm, | |
511 you can download Dart plugins for those IDEs. | |
512 Dart configurations also exist for popular text editors | |
513 such as Vim, Emacs, TextMate, and Sublime. | |
514 </div> | |
515 </aside> | |
516 | |
517 <p> | |
518 Features of Dart Editor include: | |
519 </p> | |
520 | |
521 <ul> | |
522 <li> Static analysis to catch errors and potential problems </li> | |
523 <li> Code completion </li> | |
524 <li> Code navigation </li> | |
525 <li> Refactoring </li> | |
526 <li> Launch management </li> | |
527 <li> Auto-update of the editor, SDK, and Dartium </li> | |
528 <li> Code update help for breaking changes | |
529 to the language and core libraries </li> | |
530 <li> Interactive debugging of both web apps (with Dartium) | |
531 and command-line apps </li> | |
532 </ul> | |
533 | |
534 <p> | |
535 The following screenshot shows | |
536 Dart Editor being used to debug a web app. | |
537 </p> | |
538 | |
539 <p> | |
540 <img src="images/DartEditor-debugger.png" | |
541 alt="screenshot of Dart Editor debugging a web app"> | |
542 </p> | |
543 | |
544 <p> | |
545 To get the tools and find more information, go to the | |
546 <a href="/downloads.html">downloads page</a>.</p> | |
547 | |
548 </section> | |
549 | |
550 <section id="pub"> | |
551 <h3>The Pub package manager</h3> | |
552 | |
553 <p> | |
554 Pub is a package mananger for Dart. | |
555 It helps developers reuse existing Dart code | |
556 and bundle Dart apps and libraries | |
557 for reuse and sharing with other people. | |
558 Pub handles versioning and dependency management. | |
559 </p> | |
560 | |
561 <p> | |
562 You can use Pub either at the command line | |
563 or through Dart Editor. | |
564 Because Pub is part of the SDK, | |
565 it's updated whenever Dart Editor or the SDK is updated. | |
566 </p> | |
567 | |
568 <p> | |
569 For more information, go to | |
570 <a href="http://pub.dartlang.org/">pub.dartlang.org</a>. | |
571 </p> | |
572 | |
573 </section> | |
402 </section> | 574 </section> |
403 | 575 |
404 | 576 |
405 <section id="libraries"> | 577 <section id="libraries"> |
406 <h2>Libraries</h2> | 578 <h2>Libraries</h2> |
407 | 579 |
408 <p> | 580 <p> |
409 Dart provides the following libraries | 581 Dart provides several libraries |
410 to support web and web server development: | 582 to support web and web server development. |
583 The | |
584 <a href="/docs/dart-up-and-running/ch03.html">library tour</a> | |
585 and the | |
586 <a href="http://api.dartlang.org">API reference</a> | |
587 have details on all the bundled Dart libraries. | |
588 Bundled libraries include: | |
411 </p> | 589 </p> |
412 | 590 |
413 <dl> | 591 <dl> |
414 <dt> <a href="http://api.dartlang.org/dart_core.html">Core Library</a> </dt> | 592 <dt> <a href="http://api.dartlang.org/dart_core.html">Core library</a> </dt> |
415 <dd> Contains interfaces to support | 593 <dd> Common data structures and operations. |
416 common data structures and operations. | |
417 </dd> | 594 </dd> |
418 <dt> <a href="http://api.dartlang.org/html.html">HTML Library</a> </dt> | 595 <dt> <a href="http://api.dartlang.org/dart_html.html">HTML library</a> </dt> |
419 <dd> Contains interfaces to the HTML5 DOM, | 596 <dd> The interface to the HTML5 DOM, |
420 loosely based on the proposed HTML5 standard | 597 loosely based on the proposed HTML5 standard |
421 as specified by the W3C/WHATWG. | 598 as specified by the W3C/WHATWG. |
422 These interfaces will evolve in parallel with | 599 This library is evolving in parallel with |
423 the HTML5 standards.</dd> | 600 the HTML5 standards.</dd> |
424 | 601 |
425 <dt> <a href="http://api.dartlang.org/io.html">I/O Library</a> </dt> | 602 <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, | 603 <dd> Server-side support for I/O: |
427 open network sockets, and run HTTP servers. This library is for | 604 read and write files, open directories, |
428 command-line Dart programs. | 605 open network sockets, and run HTTP servers. |
429 </dd> | 606 </dd> |
430 | 607 |
431 <dt> <a href="http://api.dartlang.org/dart_isolate.html">Isolate Library</a> < /dt> | 608 <dt> <a href="http://api.dartlang.org/dart_isolate.html">Isolate library</a> < /dt> |
432 <dd> | 609 <dd> |
433 Contains interfaces for spawning and communicating with isolates, | 610 Support for spawning and communicating with isolates, |
434 the mechanism for concurrency and security in a Dart program. | 611 the mechanism for concurrency and security in a Dart program. |
435 </dd> | 612 </dd> |
436 | 613 |
437 <dt> <a href="http://api.dartlang.org/crypto.html">Crypto Library</a> </dt> | 614 <dt> <a href="http://api.dartlang.org/dart_json.html">JSON library</a> </dt> |
438 <dd> | 615 <dd> |
439 Contains interfaces for creating one-way hashes (SHA1, MD5, SHA256) | 616 Support for parsing and producing JSON-encoded text. |
440 and HMAC support. | |
441 </dd> | 617 </dd> |
442 | 618 |
443 <dt> <a href="http://api.dartlang.org/json.html">JSON Library</a> </dt> | 619 <dt> <a href="http://api.dartlang.org/dart_math.html">Math library</a> </dt> |
444 <dd> | 620 <dd> |
445 Contains the ability to parse and produce JSON-encoded text. | 621 Common functionality such as sine and cosine, |
446 </dd> | 622 maximum and minimum, |
447 | 623 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> | 624 </dd> |
452 </dl> | 625 </dl> |
453 | 626 |
454 <p> | 627 <p> |
455 See the | 628 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> | 629 has many additional libraries and tools. |
457 and the | 630 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> | 631 </p> |
462 | 632 |
633 <dl> | |
634 <dt> <a href="http://pub.dartlang.org/packages/js">JavaScript Interop</a> | |
635 </dt> | |
636 <dd> Use JavaScript from Dart code. </dd> | |
637 | |
638 <dt> <a href="http://pub.dartlang.org/packages/unittest">Unit test</a> </dt> | |
639 <dd> Write unit tests for Dart code. </dd> | |
640 | |
641 <dt> <a href="http://pub.dartlang.org/packages/web_ui">Web UI</a> </dt> | |
642 <dd> Build web apps using an API based on Web Components, | |
643 with additional features inspired by model-driven views. </dd> | |
644 | |
645 <dt> <a href="http://pub.dartlang.org/packages/meta">Meta</a> </dt> | |
646 <dd> Use annotations to give tools | |
647 additional semantic information about your program. </dd> | |
648 | |
649 <dt> {PENDING: We could add many more, such as logging, intl, args, oauth2, | |
650 benchmark_harness, vector_math, spectre, ... but should we?} </dt> | |
651 <!-- | |
652 <dt> <a href="http://pub.dartlang.org/packages/XYZ">XYZ</a> </dt> | |
653 <dd> XYZ. </dd> | |
654 --> | |
655 </dl> | |
656 | |
463 </section> <!-- libraries --> | 657 </section> <!-- libraries --> |
464 | 658 |
465 | 659 |
466 <section id="involved"> | 660 <section id="involved"> |
467 <h2>Get involved</h2> | 661 <h2>Get involved</h2> |
468 | 662 |
469 <p> | 663 <p> |
470 This project is open source | 664 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 | 665 Here are some additional links for learning more about Dart |
476 and providing your feedback: | 666 and providing your feedback: |
477 </p> | 667 </p> |
478 | 668 |
479 <ul> | 669 <ul> |
480 <li> | 670 <li> |
481 Other pages in the Dart website, | 671 Other pages in the Dart website, |
sethladd
2012/12/14 17:39:01
This is really "Learning More" not "Get Involved"
| |
482 such as the <a href="/docs/dart-up-and-running/ch02.html">language tour</a>, | 672 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>, | 673 <a href="/docs/dart-up-and-running/ch03.html">library tour</a>, |
484 tutorials, and <a href="/docs/spec/">language specification</a>. | 674 <a href="/docs/tutorials/">tutorials</a>, |
675 and <a href="/docs/dart-up-and-running/ch05.html">Dart Chat walkthrough</a> | |
485 </li> | 676 </li> |
486 <li> | 677 <li> |
487 <a href="https://code.google.com/p/dart/">Dart project</a> | 678 The Dart open-source project at |
488 with issue tracker and source code </li> | 679 <a href="https://code.google.com/p/dart/">code.google.com/p/dart/</a>, |
680 as well as additional open-source projects from the Dart team at | |
681 <a href="https://github.com/dart-lang">github.com/dart-lang</a> </li> | |
489 <li> | 682 <li> |
490 <a href="https://groups.google.com/a/dartlang.org/group/misc/">Dart | 683 <a href="https://groups.google.com/a/dartlang.org/group/misc/">Dart |
491 discussion group</a> (misc at dartlang.org) </li> | 684 discussion group</a> (misc at dartlang.org) and |
685 <a href="https://plus.google.com/+dartlang">Dart on Google+</a> </li> | |
492 <li> | 686 <li> |
493 <a href="https://plus.google.com/109866369054280216564/">+Dart</a> on Google + </li> | 687 <a href="http://stackoverflow.com/questions/tagged/dart">Dart on Stack Overf low</a> </li> |
494 </ul> | 688 </ul> |
495 | 689 |
sethladd
2012/12/14 17:39:01
Let's add an explicit "Get Started" section with c
| |
496 </section> <!-- involved --> | 690 </section> <!-- involved --> |
497 | |
498 | |
OLD | NEW |