Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Effective Dart for mobile developers

Jorge Coca
December 20, 2019

Effective Dart for mobile developers

Dart is a client-optimized language for fast apps on any platform. It is mainly known for powering Flutter, a portable UI toolkit that lets you build mobile, desktop and web applications from a single codebase, but also can be found in Aqueduct, a server side framework written in Dart.
As an engineer, it is very important to understand how Dart works to offer some of those tools that everyone loves: hot reload, ahead of time compilation, just in time compilation, tree shaking... while also knowing those amazing syntactic sugar features that make writing Dart code such as pleasant experience!
During this talk, I will explain how Dart works, how it integrates with UI frameworks like Flutter, and the commonalities and differences with Kotlin and Swift.

Jorge Coca

December 20, 2019
Tweet

More Decks by Jorge Coca

Other Decks in Programming

Transcript

  1. A little bit of history 2 — Jorge Coca, Very

    Good Ventures @ Droidcon Madrid 2019
  2. A little bit of history → Client-optimized language for fast

    apps on any platform 2 — Jorge Coca, Very Good Ventures @ Droidcon Madrid 2019
  3. A little bit of history → Client-optimized language for fast

    apps on any platform → Inspired by JS, Java, C#... 2 — Jorge Coca, Very Good Ventures @ Droidcon Madrid 2019
  4. A little bit of history → Client-optimized language for fast

    apps on any platform → Inspired by JS, Java, C#... → Released in October 2011 2 — Jorge Coca, Very Good Ventures @ Droidcon Madrid 2019
  5. A little bit of history → Client-optimized language for fast

    apps on any platform → Inspired by JS, Java, C#... → Released in October 2011 → v1.0 released in November 2013 2 — Jorge Coca, Very Good Ventures @ Droidcon Madrid 2019
  6. A little bit of history → Client-optimized language for fast

    apps on any platform → Inspired by JS, Java, C#... → Released in October 2011 → v1.0 released in November 2013 → v2.0 released in December 2018 2 — Jorge Coca, Very Good Ventures @ Droidcon Madrid 2019
  7. A little bit of history → Client-optimized language for fast

    apps on any platform → Inspired by JS, Java, C#... → Released in October 2011 → v1.0 released in November 2013 → v2.0 released in December 2018 → Currently in v2.7 2 — Jorge Coca, Very Good Ventures @ Droidcon Madrid 2019
  8. 3

  9. Everyone knows Dart already void main() => print('Hello Droidcon Madrid

    '); 4 — Jorge Coca, Very Good Ventures @ Droidcon Madrid 2019
  10. Everyone knows Dart already // hello.dart void main(List<String> args) {

    var name = args[0] ?? 'John Doe'; print('Hello $name'); } // from your terminal $> dart hello.dart Droicon $> Hello Droidcon 5 — Jorge Coca, Very Good Ventures @ Droidcon Madrid 2019
  11. Everyone knows Dart already Future<Post> fetchPost() async { final response

    = await http.get('https://myblog.com/posts/1'); if (response.statusCode == 200) { return Post.fromJson(json.decode(response.body)); } else { throw Exception('Failed to load post'); } } 6 — Jorge Coca, Very Good Ventures @ Droidcon Madrid 2019
  12. Everyone knows Dart already Future<Post> fetchPost() async { final response

    = await http.get('https://myblog.com/posts/1'); if (response.statusCode == 200) { return Post.fromJson(json.decode(response.body)); } else { throw Exception('Failed to load post'); } } 6 — Jorge Coca, Very Good Ventures @ Droidcon Madrid 2019
  13. Optimized for UI ! 8 — Jorge Coca, Very Good

    Ventures @ Droidcon Madrid 2019
  14. Optimized for UI → Isolate-based concurrency 9 — Jorge Coca,

    Very Good Ventures @ Droidcon Madrid 2019
  15. Optimized for UI → Isolate-based concurrency → Event-loop execution model

    9 — Jorge Coca, Very Good Ventures @ Droidcon Madrid 2019
  16. Optimized for UI → Isolate-based concurrency → Event-loop execution model

    → Future & Stream API 9 — Jorge Coca, Very Good Ventures @ Droidcon Madrid 2019
  17. Optimized for UI → Isolate-based concurrency → Event-loop execution model

    → Future & Stream API → UI-driven features: spread operator, collection if... 9 — Jorge Coca, Very Good Ventures @ Droidcon Madrid 2019
  18. Isolate-based concurrency → Space on the machine with: 10 —

    Jorge Coca, Very Good Ventures @ Droidcon Madrid 2019
  19. Isolate-based concurrency → Space on the machine with: → its

    own private memory 10 — Jorge Coca, Very Good Ventures @ Droidcon Madrid 2019
  20. Isolate-based concurrency → Space on the machine with: → its

    own private memory → single thread running an event loop 10 — Jorge Coca, Very Good Ventures @ Droidcon Madrid 2019
  21. Isolates are different than what we are used to 11

    — Jorge Coca, Very Good Ventures @ Droidcon Madrid 2019
  22. Isolates are different than what we are used to →

    Javascript is single threaded 11 — Jorge Coca, Very Good Ventures @ Droidcon Madrid 2019
  23. Isolates are different than what we are used to →

    Javascript is single threaded → No shared memory => no locks! 11 — Jorge Coca, Very Good Ventures @ Droidcon Madrid 2019
  24. Isolates are different than what we are used to →

    Javascript is single threaded → No shared memory => no locks! → Go, Rust do not share memory 11 — Jorge Coca, Very Good Ventures @ Droidcon Madrid 2019
  25. Isolates are different than what we are used to →

    Javascript is single threaded → No shared memory => no locks! → Go, Rust do not share memory → Low level => you will rarely use them (only w ßhen needing big computation that will drop frames) 11 — Jorge Coca, Very Good Ventures @ Droidcon Madrid 2019
  26. Isolates Threads No shared memory Shared memory Communication via messages

    Communicatio n via messages or shared memory Processor time is equally shared Processor time is equally shared 12 — Jorge Coca, Very Good Ventures @ Droidcon Madrid 2019
  27. Productive development → Hot-reload to see changes taking effect instantly

    17 — Jorge Coca, Very Good Ventures @ Droidcon Madrid 2019
  28. Productive development → Hot-reload to see changes taking effect instantly

    → Incredible tooling out of the box 17 — Jorge Coca, Very Good Ventures @ Droidcon Madrid 2019
  29. Productive development → Hot-reload to see changes taking effect instantly

    → Incredible tooling out of the box → DartPad to try Dart on your browser 17 — Jorge Coca, Very Good Ventures @ Droidcon Madrid 2019
  30. Productive development → Hot-reload to see changes taking effect instantly

    → Incredible tooling out of the box → DartPad to try Dart on your browser → A package manager called pub 17 — Jorge Coca, Very Good Ventures @ Droidcon Madrid 2019
  31. Hot-reload for instant feedback → Thanks to Just-in-time compilation (JIT)

    19 — Jorge Coca, Very Good Ventures @ Droidcon Madrid 2019
  32. Hot-reload for instant feedback → Thanks to Just-in-time compilation (JIT)

    → This is how Javascript compiles 19 — Jorge Coca, Very Good Ventures @ Droidcon Madrid 2019
  33. Incredible tooling out of the box: Timeline view 20 —

    Jorge Coca, Very Good Ventures @ Droidcon Madrid 2019
  34. Incredible tooling out of the box: Timeline view 21 —

    Jorge Coca, Very Good Ventures @ Droidcon Madrid 2019
  35. Incredible tooling out of the box: Timeline view 22 —

    Jorge Coca, Very Good Ventures @ Droidcon Madrid 2019
  36. Incredible tooling out of the box: Timeline view 23 —

    Jorge Coca, Very Good Ventures @ Droidcon Madrid 2019
  37. Incredible tooling out of the box: Logger 24 — Jorge

    Coca, Very Good Ventures @ Droidcon Madrid 2019
  38. Incredible tooling out of the box: Debugger 25 — Jorge

    Coca, Very Good Ventures @ Droidcon Madrid 2019
  39. DartPad to try Dart on your browser 26 — Jorge

    Coca, Very Good Ventures @ Droidcon Madrid 2019
  40. DartPad to try Dart on your browser 27 — Jorge

    Coca, Very Good Ventures @ Droidcon Madrid 2019
  41. Dependencies with pubspec.yaml name: she_said_yes_flutter description: My wedding has turned

    into an open source project version: 1.0.0+1 environment: sdk: ">=2.5.0 <3.0.0" dependencies: flutter: sdk: flutter bloc: 2.0.0 equatable: 1.0.1 flutter_bloc: 2.1.1 flutter_secure_storage: 3.3.1+1 dev_dependencies: flutter_test: sdk: flutter bloc_test: 2.2.0 mockito: 4.1.1 29 — Jorge Coca, Very Good Ventures @ Droidcon Madrid 2019
  42. Dependencies with pubspec.yaml name: she_said_yes_flutter description: My wedding has turned

    into an open source project version: 1.0.0+1 environment: sdk: ">=2.5.0 <3.0.0" dependencies: flutter: sdk: flutter bloc: 2.0.0 equatable: 1.0.1 flutter_bloc: 2.1.1 flutter_secure_storage: 3.3.1+1 dev_dependencies: flutter_test: sdk: flutter bloc_test: 2.2.0 mockito: 4.1.1 29 — Jorge Coca, Very Good Ventures @ Droidcon Madrid 2019
  43. Fast on all platforms ! 30 — Jorge Coca, Very

    Good Ventures @ Droidcon Madrid 2019
  44. Fast on all platforms 31 — Jorge Coca, Very Good

    Ventures @ Droidcon Madrid 2019
  45. Fast on all platforms → Ahead-of-time compilation to native machine

    code (AOT) 31 — Jorge Coca, Very Good Ventures @ Droidcon Madrid 2019
  46. Fast on all platforms → Ahead-of-time compilation to native machine

    code (AOT) → Target the web with its Javascript compiler 31 — Jorge Coca, Very Good Ventures @ Droidcon Madrid 2019
  47. Fast on all platforms → Ahead-of-time compilation to native machine

    code (AOT) → Target the web with its Javascript compiler → Run backend code as well 31 — Jorge Coca, Very Good Ventures @ Droidcon Madrid 2019
  48. Ahead-of-time compilation (AOT) → Needed to ship to the AppStore

    32 — Jorge Coca, Very Good Ventures @ Droidcon Madrid 2019
  49. Ahead-of-time compilation (AOT) → Needed to ship to the AppStore

    → Compile to x64 machine code using dart2native 32 — Jorge Coca, Very Good Ventures @ Droidcon Madrid 2019
  50. Javascript: dart2js → Use dart2js to compile Dart code to

    deployable Javascript 33 — Jorge Coca, Very Good Ventures @ Droidcon Madrid 2019
  51. Run backend code as well 34 — Jorge Coca, Very

    Good Ventures @ Droidcon Madrid 2019
  52. Run backend code as well 35 — Jorge Coca, Very

    Good Ventures @ Droidcon Madrid 2019
  53. What makes Dart so easy? ! 36 — Jorge Coca,

    Very Good Ventures @ Droidcon Madrid 2019
  54. What makes Dart so easy? 37 — Jorge Coca, Very

    Good Ventures @ Droidcon Madrid 2019
  55. What makes Dart so easy? → final vs var 37

    — Jorge Coca, Very Good Ventures @ Droidcon Madrid 2019
  56. What makes Dart so easy? → final vs var →

    Optional and named parameters 37 — Jorge Coca, Very Good Ventures @ Droidcon Madrid 2019
  57. What makes Dart so easy? → final vs var →

    Optional and named parameters → Easy to work with collections 37 — Jorge Coca, Very Good Ventures @ Droidcon Madrid 2019
  58. What makes Dart so easy? → final vs var →

    Optional and named parameters → Easy to work with collections → Extension methods (as of v2.7) 37 — Jorge Coca, Very Good Ventures @ Droidcon Madrid 2019
  59. What makes Dart so easy? → final vs var →

    Optional and named parameters → Easy to work with collections → Extension methods (as of v2.7) → Nullability (in preview now) 37 — Jorge Coca, Very Good Ventures @ Droidcon Madrid 2019
  60. final vs var // can change values var name =

    'Jorge'; name = 'George'; dynamic age = 21; age = 31; double pi = 3.14; pi = 3.14159; // can't change value once assigned final fullName = 'Jorge Coca'; const siblingName = 'Clara Coca'; 38 — Jorge Coca, Very Good Ventures @ Droidcon Madrid 2019
  61. final vs var // can change values var name =

    'Jorge'; name = 'George'; dynamic age = 21; age = 31; double pi = 3.14; pi = 3.14159; // can't change value once assigned final fullName = 'Jorge Coca'; const siblingName = 'Clara Coca'; 38 — Jorge Coca, Very Good Ventures @ Droidcon Madrid 2019
  62. final vs var // can change values var name =

    'Jorge'; name = 'George'; dynamic age = 21; age = 31; double pi = 3.14; pi = 3.14159; // can't change value once assigned final fullName = 'Jorge Coca'; const siblingName = 'Clara Coca'; 38 — Jorge Coca, Very Good Ventures @ Droidcon Madrid 2019
  63. Optional and named parameters Future<void> authenticate({String username, String password}) {

    ... } authenticate(username: 'jorge', password: '1234'); Future<void> tweet({@required String message, File image}) { ... } tweet(message: 'Droidcon Madrid!'); // tweet without media tweet(message: 'Droidcon Madrid!', image: File('selfie.png')); bool enableFeature(String featureName, bool darkMode = false) { ... } enableFeature('music_playlist'); // darkMode not enabled enableFeature('posts', true); 39 — Jorge Coca, Very Good Ventures @ Droidcon Madrid 2019
  64. Optional and named parameters Future<void> authenticate({String username, String password}) {

    ... } authenticate(username: 'jorge', password: '1234'); Future<void> tweet({@required String message, File image}) { ... } tweet(message: 'Droidcon Madrid!'); // tweet without media tweet(message: 'Droidcon Madrid!', image: File('selfie.png')); bool enableFeature(String featureName, bool darkMode = false) { ... } enableFeature('music_playlist'); // darkMode not enabled enableFeature('posts', true); 39 — Jorge Coca, Very Good Ventures @ Droidcon Madrid 2019
  65. Optional and named parameters Future<void> authenticate({String username, String password}) {

    ... } authenticate(username: 'jorge', password: '1234'); Future<void> tweet({@required String message, File image}) { ... } tweet(message: 'Droidcon Madrid!'); // tweet without media tweet(message: 'Droidcon Madrid!', image: File('selfie.png')); bool enableFeature(String featureName, bool darkMode = false) { ... } enableFeature('music_playlist'); // darkMode not enabled enableFeature('posts', true); 39 — Jorge Coca, Very Good Ventures @ Droidcon Madrid 2019
  66. Optional and named parameters Future<void> authenticate({String username, String password}) {

    ... } authenticate(username: 'jorge', password: '1234'); Future<void> tweet({@required String message, File image}) { ... } tweet(message: 'Droidcon Madrid!'); // tweet without media tweet(message: 'Droidcon Madrid!', image: File('selfie.png')); bool enableFeature(String featureName, bool darkMode = false) { ... } enableFeature('music_playlist'); // darkMode not enabled enableFeature('posts', true); 39 — Jorge Coca, Very Good Ventures @ Droidcon Madrid 2019
  67. Working with collections: spread operator final firstFive = [1, 2,

    3, 4, 5]; final completeList = [0, ...firstFive, 6, 7, 8, 9]; assert(completeList.length == 10); //true 40 — Jorge Coca, Very Good Ventures @ Droidcon Madrid 2019
  68. Working with collections: spread operator final firstFive = [1, 2,

    3, 4, 5]; final completeList = [0, ...firstFive, 6, 7, 8, 9]; assert(completeList.length == 10); //true 40 — Jorge Coca, Very Good Ventures @ Droidcon Madrid 2019
  69. Working with collections: collection if final tabs = [ 'Artists',

    'Playlists', if (socialFeatureEnabled) 'Social', ]; 41 — Jorge Coca, Very Good Ventures @ Droidcon Madrid 2019
  70. Working with collections: collection for final bonusTracks = [ 'My

    Shot', 'The Story of Tonight', ]; final hamiltonAlbum = [ 'Alexander Hamilton', 'Aaron Burr, Sir', for (var bonus in bonusTracks) 'Bonus: $bonus', ]; main() => print(hamiltonAlbum); // [Alexander Hamilton, Aaron Burr, Sir, // Bonus: My Shot, Bonus: The Story of Tonight] 42 — Jorge Coca, Very Good Ventures @ Droidcon Madrid 2019
  71. Working with collections: collection for final bonusTracks = [ 'My

    Shot', 'The Story of Tonight', ]; final hamiltonAlbum = [ 'Alexander Hamilton', 'Aaron Burr, Sir', for (var bonus in bonusTracks) 'Bonus: $bonus', ]; main() => print(hamiltonAlbum); // [Alexander Hamilton, Aaron Burr, Sir, // Bonus: My Shot, Bonus: The Story of Tonight] 42 — Jorge Coca, Very Good Ventures @ Droidcon Madrid 2019
  72. Extension methods extension MyString on String { int plusLength(int number)

    => this.length + number; } void main() { final result = "Droidcon".plusLength(3); print(result); // 11 } 43 — Jorge Coca, Very Good Ventures @ Droidcon Madrid 2019
  73. Extension methods extension MyString on String { int plusLength(int number)

    => this.length + number; } void main() { final result = "Droidcon".plusLength(3); print(result); // 11 } 43 — Jorge Coca, Very Good Ventures @ Droidcon Madrid 2019
  74. Extension methods extension MyString on String { int plusLength(int number)

    => this.length + number; } void main() { final result = "Droidcon".plusLength(3); print(result); // 11 } 43 — Jorge Coca, Very Good Ventures @ Droidcon Madrid 2019
  75. Nullability (in preview mode) class Person { final String firstName;

    DateTime? birthday; Person(this.firstName, this.birthday); int? get year => birthday?.year; } 44 — Jorge Coca, Very Good Ventures @ Droidcon Madrid 2019
  76. Nullability (in preview mode) class Person { final String firstName;

    DateTime? birthday; Person(this.firstName, this.birthday); int? get year => birthday?.year; } 44 — Jorge Coca, Very Good Ventures @ Droidcon Madrid 2019
  77. Nullability (in preview mode) class Person { final String firstName;

    DateTime? birthday; Person(this.firstName, this.birthday); int? get year => birthday?.year; } 44 — Jorge Coca, Very Good Ventures @ Droidcon Madrid 2019
  78. Recap → Easy, familiar syntax 45 — Jorge Coca, Very

    Good Ventures @ Droidcon Madrid 2019
  79. Recap → Easy, familiar syntax → Multiplatform, AOT, JIT 45

    — Jorge Coca, Very Good Ventures @ Droidcon Madrid 2019
  80. Recap → Easy, familiar syntax → Multiplatform, AOT, JIT →

    Optimized for UI 45 — Jorge Coca, Very Good Ventures @ Droidcon Madrid 2019
  81. Recap → Easy, familiar syntax → Multiplatform, AOT, JIT →

    Optimized for UI → Isolate, event-loop 45 — Jorge Coca, Very Good Ventures @ Droidcon Madrid 2019
  82. Recap → Easy, familiar syntax → Multiplatform, AOT, JIT →

    Optimized for UI → Isolate, event-loop → Modern feature set 45 — Jorge Coca, Very Good Ventures @ Droidcon Madrid 2019
  83. If you liked this talk 48 — Jorge Coca, Very

    Good Ventures @ Droidcon Madrid 2019
  84. If you liked this talk → Very Good Ventures, ex-BMW

    48 — Jorge Coca, Very Good Ventures @ Droidcon Madrid 2019
  85. If you liked this talk → Very Good Ventures, ex-BMW

    → ! @jcocaramos 48 — Jorge Coca, Very Good Ventures @ Droidcon Madrid 2019
  86. If you liked this talk → Very Good Ventures, ex-BMW

    → ! @jcocaramos → ☕ jorgecoca.dev 48 — Jorge Coca, Very Good Ventures @ Droidcon Madrid 2019
  87. If you liked this talk → Very Good Ventures, ex-BMW

    → ! @jcocaramos → ☕ jorgecoca.dev → Say hi! 48 — Jorge Coca, Very Good Ventures @ Droidcon Madrid 2019