Learn How Dart Can Help Build Modern Web Apps
•
2 recomendaciones•2,603 vistas
- Dart is a programming language developed by Google that compiles to JavaScript and allows developers to write web applications using modern web development techniques. - Dart aims to make web development simpler and more productive by having clean semantics, simple syntax inspired by C/Java, and allowing compilation to JavaScript for cross-browser compatibility. - Dart is used by companies like Google, Soundtrap, and Montage to build web applications and is gaining adoption due to its productive development experience and ability to write code that scales from small to large applications.
Recomendados
Más contenido relacionado
Similar a Learn How Dart Can Help Build Modern Web Apps
Similar a Learn How Dart Can Help Build Modern Web Apps (20)
Último
Último (20)
Learn How Dart Can Help Build Modern Web Apps
- 3. #dartlang ✔ Improved productivity ✔ Increased performance
- 4. #dartlang Compile to JavaScript, runs across the modern web
- 5. #dartlang
- 6. #dartlang Run Dart on the server with the Dart VM
- 7. #dartlang require.js Backbone Backbone Marionette jQuery Modernizr moment.js dest templates PhantomJS Jasmine Docs Docs Docs Docs Docs Docs Docs Docs Docs "I just want to write web apps!" "Hi, I want to build a web app"
- 8. #dartlang Unit test Dart SDK Polymer Intl Packages "Things are consistent and clear."
- 9. #dartlang Apps start small, but grow and scale
- 10. #dartlang Simple syntax, ceremony free class Hug { Familiar
- 11. #dartlang Simple syntax, ceremony free class Hug { num strength; Hug(this.strength); Terse
- 12. #dartlang Simple syntax, ceremony free class Hug { num strength; Hug(this.strength); Hug operator +(Hug other) { return new Hug(strength + other.strength); } Operator overriding
- 13. #dartlang Simple syntax, ceremony free class Hug { num strength; Hug(this.strength); Hug operator +(Hug other) { return new Hug(strength + other.strength); } void patBack({int hands: 1}) { // ... } Named, optional params w/ default value
- 14. #dartlang Simple syntax, ceremony free // ... Hug operator +(Hug other) { return new Hug(strength + other.strength); } void patBack({int hands: 1}) { // ... } String toString() => "Embraceometer reads $strength"; } One-line function
- 15. #dartlang Simple syntax, ceremony free // ... Hug operator +(Hug other) { return new Hug(strength + other.strength); } void patBack({int hands: 1}) { // ... } String toString() => "Embraceometer reads $strength"; } String Interpolation
- 16. #dartlang main() => print('Hello, World!');
- 17. #dartlang Clean semantics and behavior
- 18. #dartlang Clean semantics and behavior ● Only true is truthy ● There is no undefined, only null ● No type coercion with ==, + Examples:
- 19. #dartlang Missing getter? "hello".missing // ?? Class 'String' has no instance getter 'missing'. NoSuchMethodError : method not found: 'missing' Receiver: "hello" Arguments: [] Logical
- 20. #dartlang String compared to number? 'hello' > 1 // ?? Class 'String' has no instance method '>'. Logical
- 21. #dartlang Variable scope? var foo = 'top-level'; main() { if (true) { var foo = 'inside'; } print(foo); // ?? What will this print? } top-level Logical No hoisting
- 22. #dartlang Scope of this? class AwesomeButton { AwesomeButton(button) { button.onClick.listen((Event e) => this.atomicDinosaurRock()); } atomicDinosaurRock() { /* ... */ } } Lexical this
- 23. #dartlang Scalable structure Functions Classes Libraries Packages Mixins Interfaces library games; import 'dart:math'; import 'players.dart'; class Darts { // ... } class Bowling { // ... } Player findOpponent(int skillLevel) { // ... }
- 24. #dartlang var button = new ButtonElement(); button.id = 'fancy'; button.text = 'Click Point'; button.classes.add('important'); button.onClick.listen((e) => addTopHat()); parentElement.children.add(button); Yikes! Button is repeated 6 times! Too many buttons
- 25. #dartlang Method cascades var button = new ButtonElement() ..id = 'fancy' ..text = 'Click Point' ..classes.add('important') ..onClick.listen((e) => addTopHat()); parentElement.children.add(button);
- 26. #dartlang Inline initialization parentElement.children.add( new ButtonElement()..text = 'Click Point');
- 27. #dartlang One of these things is not like the other Object Persistable Hug Hug is not is-a Persistable Don't pollute your inheritance tree!
- 29. #dartlang Mixins abstract class Persistable { save() { ... } load() { ... } toJson(); } class Hug extends Object with Persistable { Map toJson() => {'strength':10}; } main() { var embrace = new Hug(); embrace.save(); } Extend object & no constructors? You can be a mixin! Apply the mixin. Use methods from mixin.
- 30. #dartlang Context switching considered harmful, Iterate quickly
- 32. #dartlang
- 34. #dartlang Demo New Dart Project + Packages
- 35. #dartlang Compile Dart to JavaScript with dart2js
- 36. #dartlang main Library baz foo bar boo imports calls baz main foo bar Tree shaking dart2js
- 37. #dartlang Our challenge ... clean semantics and unsurprising behavior without extra checks when compiled to JavaScript
- 38. #dartlang
- 39. #dartlang
- 40. #dartlang
- 41. #dartlang
- 42. #dartlang
- 43. #dartlang Old 'n busted New hotness <messages> <message> <subject> Please fill out the TPS report </subject> <sent>2012-10-03</sent> <summary> I'm going to have to ask you to come in... </summary> </message> <message> <subject> Reminder: fill out that TPS report! </subject> <sent>2012-10-04</sent> <summary> It's been 24 hours... </summary> </message> ... </messages>
- 44. #dartlang <custom-element> Structure Behavior Styles <div> <input> <p> <span></span> </p> </div> tag.verifyAccount(); <style> p { color: red; } </style> Encapsulated
- 45. #dartlang Reusable Custom Element HTML Page import import import HTML Page HTML Page
- 46. #dartlang Data binding Data model DOM Nodes Data model DOM Nodes
- 49. #dartlang Custom elements everywhere! <body> <persistable-db dbname="game" storename="sologames"></persistable-db> <game-assets></game-assets> <game-app></game-app> <google-signin clientId="250963735330.apps.googleusercontent.com" signInMsg="Please sign in"></google-signin>
- 50. #dartlang Angular is ported to Dart!
- 51. #dartlang <div my-controller> <div class="well"> <click-counter count="{{ctrl.count}}"></click-counter> </div> </div> Angular and Polymer together Polymer element Angular controller
- 53. #dartlang "Dart allows for quick prototyping as well as robust code that is easy to refactor" - Soundtrap
- 54. #dartlang "Dart's familiar language, and cohesive set of libraries, allowed the team to start building very quickly." - Montage
- 55. #dartlang "Dart offers a sane and consistent development experience for modern web applications." - Blossom
- 56. #dartlang "The source code for this game (Escape) is 20% smaller compared to the ActionScript version (69.6 KB vs 86.5 KB). The port took only 6 hours." -- Author of StageXL
- 57. #dartlang #dartlang Export Flash movies/games to Dart from Flash Pro
- 58. #dartlang "We rewrote Google's internal CRM app in 6 months, from scratch, with Dart and Angular." - Internal team at Google
- 59. #dartlang TC52 to standardize Dart language
- 60. #dartlang Ready to get started? Write a Dart app! dartlang.org/codelabs/darrrt/
- 61. #dartlang Dart - for the modern web ● Platform you can use today ● Easy to get started - dartlang.org ● Compiles to JavaScript