Flutter talkshow
Download as PPTX, PDF0 likes1,424 views
Flutter is an open-source mobile app SDK developed by Google that allows building high-performance apps for iOS and Android from a single codebase. It uses Dart as its programming language, has beautiful Material and Cupertino widgets, supports hot reload for fast development, and compiles to native ARM code for high performance across both platforms. Flutter apps are fully reactive and use widgets to define all visual elements, making for a simple and consistent development experience.
![https://flutter.io/
Nhan Cao [April 13, 2018]](https://image.slidesharecdn.com/flutter-talkshow-180423014842/85/Flutter-talkshow-1-320.jpg)
![DART LANGUAGE
- Developed by Google
- Open-source with BSD license
- A very asynchronous language. With
this, it uses isolates for concurrency.
[First appeared October 10, 2011, Ecma International approved the Dart
language specification first edition in July 2014, Stable release 1.24 / June
12, 2017]
6](https://image.slidesharecdn.com/flutter-talkshow-180423014842/85/Flutter-talkshow-6-320.jpg)
Flutter talkshow
- 2. 2
- 3. WHAT IS FLUTTER? • Open-source mobile app SDK • Developed by Google • Building high-performance apps for iOS and Android, from a single codebase 3
- 4. WHY USE FLUTTER? Flutter makes it easy and fast to build beautiful mobile apps. • Reactive framework • Material and Cupertino widgets • Hot reload • Dart language and core libs • Interop with mobile SDKs • Android Studio/IntelliJ official IDE 4
- 6. DART LANGUAGE - Developed by Google - Open-source with BSD license - A very asynchronous language. With this, it uses isolates for concurrency. [First appeared October 10, 2011, Ecma International approved the Dart language specification first edition in July 2014, Stable release 1.24 / June 12, 2017] 6
- 8. DART LANGUAGE • Productive. Syntax must be clear and concise, tooling simple. • Fast. Runtime performance and startup must be great and predictable even on small mobile devices. • Portable. Client developers have to think about three platforms today: iOS, Android, and Web. The language needs to work well on all of them. • Approachable. The language can’t stray too far from the familiar if it wishes to be relevant for millions of developers. • Reactive. A reactive style of programming should be supported by the language. https://gist.github.com/nhancv/8ffce966d63becded05da6db3e778be7 8
- 10. DART LANGUAGE Guys, this is an exciting time for Dart. 10
- 11. FLUTTER IS ALL DART • For smart compiler: • With production: Dart is AOT (Ahead Of Time) compiled to fast, predictable, native code. • With dev mode serve hot reload: Dart can also be JIT (Just In Time) compiled for exceptionally fast development cycles. 11
- 12. FLUTTER IS ALL DART • Consistent 60 FPS (frames per second) performance: • With smart compiler above Dart makes it easier to create smooth animations and transitions that run at 60fps. • Dart can do object allocation and garbage collection without locks. 12
- 13. FLUTTER IS ALL DART • Use Dart for Unified layout. • Everything is a Widget. • Flutter support full set of Material Design widgets already; also support different themes for Android/iOS. Not care about XML or JSX anymore. 13
- 14. DESIGN-ORIENTED DEVELOPMENT FLOW 14 Similar with web app design. Just a Container, Row, Col, Flex, ….
- 16. REACTIVE 16 Reactive Frameworks on the Web Reactive Frameworks on Mobile
- 20. PERFORMANCE • Flutter with high performance compare with React Native and Native • Compiles to Native Code • No reliance on OEM widgets • No bridge needed • Structural Repainting 20
- 22. PERFORMANCE 22 Cross-platform using webview Cross-platform using React Native
- 24. PLATFORM CHANNELS 24 Flutter uses a flexible system that allows you to call platform-specific APIs whether available in Java or Kotlin code on Android, or in ObjectiveC or Swift code on iOS.
- 25. DEBUGGING TOOL Begin with efficient tooling You can start with cli or just using official IDE for Flutter is Android studio. Easy and useful. $ flutter doctor $ flutter upgrade $ flutter packages get $ flutter packages upgrade $ flutter format 25
- 26. DEBUGGING TOOL Flutter support hot reload and you can easy debug UI, Mem, CPU, GPU, …. and execution with Android studio. It’s really good and better than React Native. 26
- 27. 27
- 28. APK SIZE 28
- 30. APK SIZE 30 With dev mode Flutter: ARM, x86 and x86_64 React Native: ARM, x86. The apk size minimum build by Flutter is 21 MB initial.
- 31. APK SIZE 31 With release mode The apk size reduce appreciably on Flutter from 25.8 MB (dev) to 8 MB (release). But lib only generated for ARM, so that it’s only able to install on ARM device.
- 32. SUMMARIZE • The advantages of reactive views, with no JavaScript bridge • Fast, smooth, and predictable; code compiles AOT to native (ARM) code • The developer has full control over the widgets and layout • Comes with beautiful, customizable widgets • Great developer tools, with amazing hot reload • More performance, more compatibility, more fun 32
- 33. OPPORTUNITY • Google’s product • Huge dev fan of google • Free and Open source • Rich documents • You will be hunted in next few year. :D 33
- 34. CHALLENGES • Quite new • Beta version but let’s trust at Google bro. :D • Dart lang is not almost popular 34
- 35. BEGINNER FIRST STEPS • Why I move to Flutter: https://medium.com/@nhancv/why-i-move-to- flutter-34c4005b96ef • Complete Dart from Java if you are Java developer: https://codelabs.developers.google.com/codelabs/from- java-to-dart/#0 • Read Dart convention: https://www.dartlang.org/guides/language/effective- dart/style • Complete simple Flutter lab: https://codelabs.developers.google.com/codelabs/flutter • Learn building layouts in Flutter: https://flutter.io/tutorials/layout/ • Use Cookbook to make your awesome apps: https://flutter.io/cookbook/ 35
- 36. REFERENCES • What’s Revolutionary about Flutter: https://hackernoon.com/whats- revolutionary-about-flutter-946915b09514 • Why I moved from java to dart: https://hackernoon.com/why-i- moved-from-java-to-dart-8f3802b1d652 • Why Flutter uses Dart: https://hackernoon.com/why-flutter-uses-dart- dd635a054ebf • Why native app developers should take a serious look at Flutter: https://hackernoon.com/why-native-app-developers-should- take-a-serious-look-at-flutter-e97361a1c073 • Flutter — 5 reasons why you may love it: https://hackernoon.com/flutter-5-reasons-why-you-may-love-it- 55021fdbf1aa 36
- 37. DEMO • https://medium.com/@nhancv/flutter-simple-particle-motion- 3b48fd1f182 • https://medium.com/@nhancv/flutter-custom-indicator-animation- simple-2c487489040b • https://github.com/nhancv/nc_flutter_util 37
Editor's Notes
- #5: What are some advantages of Flutter? It helps you: Be highly productive — Develop for iOS and Android from a single codebase — Do more with less code, even on a single OS, with a modern, expressive language and a declarative approach — Prototype and iterate easily: * Experiment by changing code and reloading as your app runs (with hot reload) * Fix crashes and continue debugging from where the app left off Create beautiful, highly-customized user experiences — Benefit from a rich set of Material Design and Cupertino (iOS-flavor) widgets built using Flutter’s own framework — Realize custom, beautiful, brand-driven designs, without the limitations of OEM widget sets Technology Build - Beautiful app UIs * Rich 2D GPU-accelerated APIs * Reactive framework * Animation/motion APIs * Material Components and Cupertino widgets - Fluid coding experience * Sub-second, stateful hot reload * IntelliJ: refactor, code completion, etc * Dart language and core libs * Package manager - Full-features apps * Interop with mobile OS APIs & SDKs * Maven/Java * Cocoapods/ObjC/Swift Optimize - Test * Unit testing * Integration testing * On-device testing - Debug * IDE debugger * Web-based debugger * async/await aware * Expression evaluator - Profile * Timeline * CPU and memory * In-app perf charts Deploy - Compile * Native ARM code * Dead code elimination - Distribution * App Store * Play Store
- #6: https://docs.google.com/presentation/d/1cw7A4HbvM_Abv320rVgPVGiUP2msVs7tfGbkgdrTy0I/edit?usp=sharing
- #7: https://www.dartlang.org/
- #8: https://www.dartlang.org/ IOE: http://www.bkacad.com/upload_images/3_value_index_survey_marquee_3.png https://blog.cloudrail.com/internet-of-everything-vs-internet-of-things/
- #9: https://www.dartlang.org/ Productive. Syntax must be clear and concise, tooling simple, and dev cycles near-instant and on-device. Fast. Runtime performance and startup must be great and predictable even on small mobile devices. Portable. Client developers have to think about three platforms today: iOS, Android, and Web. The language needs to work well on all of them. Approachable. The language can’t stray too far from the familiar if it wishes to be relevant for millions of developers. Reactive. A reactive style of programming should be supported by the language. https://medium.com/dartlang/announcing-dart-2-80ba01f43b6
- #10: https://www.dartlang.org/ Should move from java to Dart? Look some points: Short syntax Public by default, private by prefixing “_” Collection literals; Everything’s an object — no “primitives” Named parameters, optional parameters, defaults; Properties — no need to write “get” methods everywhere Cascades — everything’s a builder Type inference with strong mode — just write “var” for locals Named constructors, auto assignment to fields; String interpolation, several types of string literal; dartfmt — worries about formatting so you don’t have to Async running, thus it performs way better java, php
- #11: https://www.dartlang.org/
- #12: Same with ReactNative using all in Javascript. Some points why Flutter using Dart
- #13: Same with ReactNative using all in Javascript. Some points why Flutter using Dart
- #14: Same with ReactNative using all in Javascript. Some points why Flutter using Dart
- #19: Widgets are now part of the app. We can customize it with your own style by using set of material widgets or access to painter and canvas to make awesome shape.
- #20: Widgets are now part of the app. We can customize it with your own style by using set of material widgets or access to painter and canvas to make awesome shape.
- #25: You will not be limited customizing native platform by using platform channel. Flutter uses a flexible system that allows you to call platform-specific APIs whether available in Java or Kotlin code on Android, or in ObjectiveC or Swift code on iOS. Messages and responses are passed asynchronously, to ensure the user interface remains responsive. [https://flutter.io/platform-channels/]
- #29: In FAQ’s Flutter: https://flutter.io/faq/#how-big-is-the-flutter-engine
- #30: In FAQ’s Flutter: https://flutter.io/faq/#how-big-is-the-flutter-engine
- #31: In FAQ’s Flutter: https://flutter.io/faq/#how-big-is-the-flutter-engine
- #32: In FAQ’s Flutter: https://flutter.io/faq/#how-big-is-the-flutter-engine