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.

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
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 !