More Related Content


Recently uploaded(20)

Mobile development with Flutter

  1. Part-time online Product Management courses and Corporate Training
  2. +10,000 alumni graduated worldwide
  3. COURSES Product Management Learn the skills you need to land a product manager job
  4. COURSES Corporate Training Level up your team’s product management skills
  5. Mobile Technologies What’s next ? By Karim Magdy @KarimMagddi
  6. Development Approaches. Single Platform (Native Approach) Cross-Platform : Hybrid Approach Cross-Platform : Native Approach
  7. 1Mobile Development Approaches. ● Single Platform ● Multi-Platform ● Google Flutter SDK.
  8. Single Platform : OEM SDK, How it works ? Pros: Fast, responsive, continuous support and wide variety of features in SDKs Cons: When a product is present on more than one platform, maintaining two different codebase, respective developers and synchronising features across applications becomes a bottleneck in most setups.
  9. Multiplatform
  10. Cross Platform : Hybrid Approach Pros: Continuous integration like a web application where any changes to the application can be deployed as and when required. The same application can be used on web platform. Cons: It uses native browser which is relatively slower and results in bad user experience due to the bottlenecks it comes with. It’s also uses a BRIDGE to interact with native services that is even slower.
  11. Cross Platform : Native Approach
  12. Cross-Platform - Google Flutter 2Flutter
  13. Flutter Approach Pros: Speed, performance, flexibility, native look and feel, rapid development. Cons: Its relatively new in comparison to other options in the list. The apk/ipa size is relatively large as it is shipped with the native code, the render engine and platform channel which is a problem for all cross-platform application approach. Alpha launched : 2015 Beta released : 2018
  14. What is Flutter ? Flutter is the next Step in App Development. ● Speed and Performance ○ Fast, Smooth Performance. ● Flexibility ○ Brand first design. ● Native Look and Feel. ○ Familirty, ease of use. ● Rapid Development ○ Easy to learn.
  15. What makes flutter Unique ? ● Compile native code. (ARM binary code). ● No Reliance on OEM Widgets. ● No Bridge needed. ● Only One Language (Dart), No Markup Language.
  16. Html and CSS in Flutter
  17. Expressive and flexible UI
  18. Great Looking and Fast Apps.
  19. Everything is Widget
  20. No Global Layouts
  21. Hot Reload
  22. Access native features and SDKs Future<void> getBatteryLevel() async { var batteryLevel = 'unknown'; try { int result = await methodChannel.invokeMethod('getBatteryLevel'); batteryLevel = 'Battery level: $result%'; } on PlatformException { batteryLevel = 'Failed to get battery level.'; } setState(() { _batteryLevel = batteryLevel; }); }
  23. The same app UI on older devices Your new app will look the same, even on old versions of Android and iOS systems. There are no additional costs for supporting older devices. Flutter runs on Android Jelly Bean or newer, as well as iOS 8 or newer.
  24. Designs which your users will love Flutter is designed to make it easy to create your own widgets or customize the existing widgets. Here. you can browse a catalog of Flutter’s widgets and view, for example, Material Design widgets and Cupertino widgets.
  25. Perfect for MVP
  26. DevOps Support ● There is a new CI/CD system for Flutter applications called Codemagic that was announced at Flutter Live 2018. ● In January 2019, Bitrise announced the full-featured Flutter CI.
  27. Flutter Architecture Customise everything in Green
  28. One code for 2 platforms Developers write just one codebase for your 2 apps – covering both Android and iOS platforms. Flutter doesn’t depend on the platform, because it has its own widgets and designs. This means that you have the same app on two platforms. Yet what’s important is that, if you want to differentiate your apps – it’s possible.
  29. Google : Dart 3Dart
  30. Dart : Started in 2011, ● Open Source. ● Multi-Platform (Web, Mobile, Desktop, Embedded, Server Side). ● Support Interfaces, Strong typing (Dart 2) ● Batteries included ● Package Manager. ● Compile To Javascript.
  31. Why Flutter Uses Dart ● Dart is AOT (Ahead Of Time). ● Dart can also be JIT (Just In Time) compiled. ● Standalone VM. ● Create smooth animations and transitions. ● Object allocation and garbage collection without locks. ● Dart avoids preemptive scheduling and shared memory. ● Start up much faster. ● Avoid Separate declarative layout language like JSX or XML or Builder. ● Dart is particularly easy to learn The Combination of them hits a sweet spot that makes Dart uniquely powerful for implementing Flutter
  32. Compilation and execution ● Dart is one of very few languages (and perhaps the only “mainstream” language) that is well suited to being compiled both AOT and JIT. ● Supporting both kinds of compilation provides significant advantages to Dart and (especially) Flutter. ● JIT compilation is used during development, ● Then, when an app is ready for release, it is compiled AOT.
  33. Avoiding jank A Fast app is great, but a smooth app is even better. Even a super fast animation will look bad if it is jerky. However, preventing jank can be difficult because there are so many different causes. Dart has a number of features to avoid many of the common things that cause jank.
  34. AOT compilation and the “bridge No Bridge
  35. Preemptive scheduling, time slicing, and shared resources Dart took a different approach to this problem. Threads in Dart, calledisolates, do not share memory, which avoids the need for most locks. Isolates communicate by passing messages over channels, which is similar to actors in Erlang or web workers in JavaScript.
  36. Unified layout Another benefit of Dart is that Flutter doesn’t split layout between your program and an additional templating or layout language like JSX or XML, nor does it require separate visual layout tools. Here’s a simple Flutter view, written in Dart: new Center(child: new Column(children: [ new Text('Hello, World!'), new Icon(, color:, ]) )
  37. Is Dart a proprietary language? No, Dart (like Flutter) is completely open source with a clean license, and is also an ECMA standard. Dart is popular inside and outside of Google. Inside Google it is one of the fastest growing languages and is used by Adwords, Flutter, Fuchsia and others; outside, the Dart repository has more than 100 external committers.
  38. Will Dart programmers be easy to find? Programmers who already know languages like Java, JavaScript, Kotlin, C#, or Swift can start programming in Dart almost immediately On top of that, hot reload encourages users to play with Dart and try new things Why Flutter Will Take Off in 2018 The hard part about learning a new system is typically not learning the language, it is learning all the libraries, frameworks, tools, patterns, and best practices for writing good code As direct evidence, a large project inside of Google wanted to port their mobile app to iOS. They were about to hire some iOS programmers but instead decided to try Flutter. They monitored how long it took to get developers up to speed on Flutter. Their results showed that a programmer could learn Dart and Flutter and become productive in three weeks
  39. Dart 2 : New ● A sound type system ● Type inferencing ● new keyword optional. Focused on improving the experience of building client apps, including developer velocity, improved developer tooling, and type safety for example: The secret is focus
  40. Why Dart? Productive ● Syntax is clear and concise ● Dart has battle-hardened. Fast Optimizing ahead-of-time compilation. Portable ● Compiles to ARM and x86 ● transpiled to JavaScript Create high-quality, mission-critical apps for iOS, Android, and the web. With features aimed at client-side development, Dart is a great fit for both mobile and web apps. Approachable ● C++, C#, or Java ● Learn in few days. Reactive ● Reactive programming. ● Fast object allocation ● Asynchronous prmg. Platforms ● Mobile Apps. ● Web App. ● Server Side App
  41. Who use Dart ? Google Fuchsia. AdSense performance reports Mandrill Adobe Google internal sales tool WebStorm Ascentis Blossom
  42. Google Fuchsia Fuchsia is a capability-based, real time OS aka (RTOS). By Google In Progress.
  43. Why Flutter ? 1. Faster code writing 2. One code for 2 platforms 3. Less testing 4. Faster apps 5. Designs which your users will love 6. The same app UI on older devices 7. Perfect for MVP.
  44. Does Flutter have any cons? 3 risks for mobile App Owners 1. Flutter is still in beta : No already released. a. Flutter is no longer in beta 2. Libraries & support – impressive, but still not so rich as for the native development. a. Here you can find Flutter Packages – a list of features 3. Continuous Integration support a. Flutter applications called Codemagic that was announced at Flutter Live 2018.
  45. Is Flutter a good idea for every kind of mobile app? There are a few cases when you should not consider if Flutter is the proper solution: 1. Progressive Web Apps & Instant Apps. 2. Apps which communicate with any hardware via Bluetooth. 3. Apps demanding rare, little-known native libraries.
  46. Learning Curve ● Setup is Very Easy. ● Editors ○ IntelliJ, Android Studio, VC Code. ● Start by Learning Dart : few days. ● Flutter Architecture. ● Design Patterns ( Block, Redex, etc ). ● Flutter & Firebase. ● Flutter Packages. No Limitation with Flutter
  47. Useful links about Flutter Articles ● Official Flutter website ● Dart language ● Announcing Flutter 1.0 (Flutter Live, Keynote Part 1) ● Material Components Widgets ● Cupertino (iOS-style) Widgets ● Flutter Gallery ● Flutter Packages ● Flutter issues requested on GitHub ● Build step on Bitrise.
  48. Wrap up & our recommendation In our opinion, Flutter has many more advantages for business and development teams than risks. It’s a great chance to build beautiful, high-performance and outstanding mobile apps which fit your custom needs and requirements. It’s worth considering Flutter, especially if you want an app both for iOS and Android.
  49. What’s Next ● Development Approaches. ○ Flutter ● Code Architecture & Design Patterns. ● Art of Testing. ● DevOps. ● Release Management. ● Mobile First - Cloud First. ● Rest Apis. ● Team KPIs.
  50. Thank You No Limitations with Flutter /flutteruae /flutteruae /flutteruae