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

Effective Dart for mobile developers

C887ad592770a197f114d0a1d3e3a5a7?s=47 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.

C887ad592770a197f114d0a1d3e3a5a7?s=128

Jorge Coca

December 20, 2019
Tweet

Transcript

  1. Effective Dart for mobile developers Jorge Coca, Very Good Ventures

    @ Droidcon Madrid 2019
  2. A little bit of history 2 — Jorge Coca, Very

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

    apps on any platform 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#... 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 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 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 2 — Jorge Coca, Very Good Ventures @ Droidcon Madrid 2019
  8. 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
  9. 3

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

    '); 4 — Jorge Coca, Very Good Ventures @ Droidcon Madrid 2019
  11. 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
  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. 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
  14. What makes Dart special? 7 — Jorge Coca, Very Good

    Ventures @ Droidcon Madrid 2019
  15. Optimized for UI ! 8 — Jorge Coca, Very Good

    Ventures @ Droidcon Madrid 2019
  16. Optimized for UI 9 — Jorge Coca, Very Good Ventures

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

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

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

    → Future & Stream API 9 — Jorge Coca, Very Good Ventures @ Droidcon Madrid 2019
  20. 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
  21. Isolate-based concurrency 10 — Jorge Coca, Very Good Ventures @

    Droidcon Madrid 2019
  22. Isolate-based concurrency → Space on the machine with: 10 —

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

    own private memory 10 — Jorge Coca, Very Good Ventures @ Droidcon Madrid 2019
  24. 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
  25. Isolates are different than what we are used to 11

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

    Javascript is single threaded 11 — Jorge Coca, Very Good Ventures @ Droidcon Madrid 2019
  27. 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
  28. 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
  29. 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
  30. 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
  31. Event-loop execution model 13 — Jorge Coca, Very Good Ventures

    @ Droidcon Madrid 2019
  32. Future API 14 — Jorge Coca, Very Good Ventures @

    Droidcon Madrid 2019
  33. Stream API 15 — Jorge Coca, Very Good Ventures @

    Droidcon Madrid 2019
  34. Productive development ! 16 — Jorge Coca, Very Good Ventures

    @ Droidcon Madrid 2019
  35. Productive development 17 — Jorge Coca, Very Good Ventures @

    Droidcon Madrid 2019
  36. Productive development → Hot-reload to see changes taking effect instantly

    17 — Jorge Coca, Very Good Ventures @ Droidcon Madrid 2019
  37. 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
  38. 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
  39. 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
  40. Hot-reload for instant feedback 18 — Jorge Coca, Very Good

    Ventures @ Droidcon Madrid 2019
  41. Hot-reload for instant feedback 19 — Jorge Coca, Very Good

    Ventures @ Droidcon Madrid 2019
  42. Hot-reload for instant feedback → Thanks to Just-in-time compilation (JIT)

    19 — Jorge Coca, Very Good Ventures @ Droidcon Madrid 2019
  43. 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
  44. Incredible tooling out of the box: Timeline view 20 —

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

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

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

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

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

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

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

    Coca, Very Good Ventures @ Droidcon Madrid 2019
  52. Package manager: pub.dev 28 — Jorge Coca, Very Good Ventures

    @ Droidcon Madrid 2019
  53. 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
  54. 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
  55. Fast on all platforms ! 30 — Jorge Coca, Very

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

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

    code (AOT) 31 — Jorge Coca, Very Good Ventures @ Droidcon Madrid 2019
  58. 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
  59. 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
  60. Ahead-of-time compilation (AOT) 32 — Jorge Coca, Very Good Ventures

    @ Droidcon Madrid 2019
  61. Ahead-of-time compilation (AOT) → Needed to ship to the AppStore

    32 — Jorge Coca, Very Good Ventures @ Droidcon Madrid 2019
  62. 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
  63. Javascript: dart2js 33 — Jorge Coca, Very Good Ventures @

    Droidcon Madrid 2019
  64. Javascript: dart2js → Use dart2js to compile Dart code to

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

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

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

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

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

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

    Optional and named parameters 37 — Jorge Coca, Very Good Ventures @ Droidcon Madrid 2019
  71. 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
  72. 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
  73. 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
  74. 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
  75. 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
  76. 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
  77. 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
  78. 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
  79. 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
  80. 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
  81. 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
  82. 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
  83. Working with collections: collection if final tabs = [ 'Artists',

    'Playlists', if (socialFeatureEnabled) 'Social', ]; 41 — Jorge Coca, Very Good Ventures @ Droidcon Madrid 2019
  84. 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
  85. 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
  86. 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
  87. 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
  88. 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
  89. 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
  90. 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
  91. 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
  92. Recap 45 — Jorge Coca, Very Good Ventures @ Droidcon

    Madrid 2019
  93. Recap → Easy, familiar syntax 45 — Jorge Coca, Very

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

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

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

    Optimized for UI → Isolate, event-loop 45 — Jorge Coca, Very Good Ventures @ Droidcon Madrid 2019
  97. 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
  98. Dart powers... 46 — Jorge Coca, Very Good Ventures @

    Droidcon Madrid 2019
  99. Flutter powers... flutter.dev/showcase 47 — Jorge Coca, Very Good Ventures

    @ Droidcon Madrid 2019
  100. If you liked this talk 48 — Jorge Coca, Very

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

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

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

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

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