Google Flutter
Mobile DevOps pipeline
By
Ahmed Abu Eldahab
/dahabdev /dahabdev

Ahmed Abu Eldahab
Senior Technical Consultant
Google Developer Expert in Flutter
Flutter Egypt founder @FlutterEgypt
/Dahabdev /Dahabdev /Dahabit/Dahabdev

About Us
FlutterEgypt
- World first Flutter community ( our first meetup was 27th
january 2018)
- World first Flutter community that join Together with Google
Developers (30th april 2018)
/FlutterEgypt
@dahabdev@FlutterEgypt

@dahabdev@FlutterEgypt
● Mobile applications development in 2019
● Understand the fundamentals of the Flutter framework.
● Write real Flutter code
● Use Flutter's tools to enhance your development process.
● Understand how to apply DevOps pipeline using Flutter
● CI/CD integration with Flutter
WHY ARE WE HERE?

Mobile Platforms

Mobile Platforms

Mobile Platforms

Mobile Platforms

Mobile Platforms

IOS
Kernel and Device Drivers
Core OS
Core Services & Media
OEM Widget (Material Design - Cupertino)
Android

Mobile Development Approaches

OEM Widgets
Cupertino
Material Design
Canvas
Events
Location Bluetooth
Camera Sensors
Java
Kotlin
Swift
Objective-c
Application
Services
Native Approach (Single Platform)

Cross-Platform Approach

Hybrid Approach
Web View
Canvas
Events
Location Bluetooth
Camera Sensors
JavaScript
HTML
CSS
Application
Services
Bridge

Canvas
Events
Location Bluetooth
Camera Sensors
Transferred
Native Code
Application
Services
FrameworklibrariesSDK
OEM Widgets
Cupertino
Material Design
Cross-Platform Approach
C#
JavaScript

Canvas
Events
Location Bluetooth
Camera Sensors
Javascript
Application
Services
JavascriptBridge
OEM Widgets
Cupertino
Material Design
Cross-Platform Approach
JavaScript

Flutter
Approach
Canvas
Events
Location Bluetooth
Camera Sensors
Native ARM
Binary
Code
Application
Services
Platform
Channels
Flutter Widgets
Cupertino
Material Design

What is Flutter?
Flutter is the next step in
App development
Speed and performance
Fast , smooth performance
Flexibility
Customize anything - Brand
first design
Native look and feel
Familiarity , ease of use
Rapid Development
Easy to learn , predictable

Productive
Open
Beautiful
Fast

Proprietary + Confidential
ProductiveBeautiful
Fast Open

Control every pixel on the screen
Make your brand come to life
Never say "no" to your designer
Stand out in the marketplace
Win awards with beautiful UI
Beautiful

Proprietary + Confidential
ProductiveBeautiful
Fast Open

Fast
Brings the power of a games engine to
user experience development
60fps, GPU accelerated
Compiled to native machine code

Proprietary + Confidential
ProductiveBeautiful
Fast Open

Sub-second reload times
Paint your app to life
Iterate rapidly on features
Test hypotheses quicker than ever
More time to experiment & test
features
Single-codebase for faster collab
3X Productivity Gains
Productive

Proprietary + ConfidentialProprietary + Confidential
Productive
Open
Beautiful
Fast

Everything is free and open source
Layered architecture: easy to extend
Deep platform integrations
Hundreds of third-party packages
(ads, videos, database, cloud etc.)
Open

What makes Flutter unique?
- Compiles to Native Code (ARM Binary code)
- No reliance on OEM widgets
- No bridge needed
- No markup language (only Dart)

● Language and Libraries
● Packages manager https://pub.dartlang.org/
● Virtual machine
● Compile to Javascript dart2js
Batteries included

HTML/CSS Analogs in Flutter
var container = new Container( // grey box
child: new Text(
"Lorem ipsum",
style: new TextStyle(
fontSize: 24.0
fontWeight: FontWeight.w900,
fontFamily: "Georgia",
),
),
width: 320.0,
height: 240.0,
color: Colors.grey[300],
);
<div class="greybox">
Lorem ipsum
</div>
.greybox {
background-color: #e0e0e0; /* grey 300 */
width: 320px;
height: 240px;
font: 900 24px Georgia;
}

Who use Dart?
https://www.dartlang.org/community/who-uses-dart
Google AdWords Google Fuchsia
AdSense
performance reports
Google Fiber
Mandrill AdWords for video
Google internal
sales tool
Google internal
CRM
Adobe

Google Fuchsia
Fuchsia is a capability-based, real-time operating system (RTOS)
currently being developed by Google.
https://github.com/fuchsia-mirror/

Great looking and fast Widgets

Everything is a Widget

App Widget
Material Widget
Scaffold Widget
Column
Container
Text
Button
Render Tree
Everything is a Widget

https://flutter.io/widgets/

HotReload

$ flutter doctor
Checks your environment and displays a report to the terminal window
$ flutter upgrade
Updates both the Flutter SDK and your packages

FlutterWidgetInspector

Test
https://flutter.io/testing/
- Unit testing
- Widget testing
- Integration testing

How To install ?
https://flutter.io/get-started/install/

IDE Support?

Flutter Showcase
https://flutter.io/showcase https://itsallwidgets.com

Flutter Showcase
https://flutter.io/showcase https://itsallwidgets.com

Flutter Showcase
https://flutter.io/showcase https://itsallwidgets.com

DevOps LifeCycle

Applying DevOps LifeCycle

#6 Let’s Code!

What Next ?

Applying DevOps LifeCycle

I'm a professional show me the hard way

Continuous Delivery using Fastlane
https://flutter.io/fastlane-cd/

https://fastlane.tools/ https://flutter.io/fastlane-cd/
Continuous Delivery using Fastlane

Continuous Delivery using Fastlane
https://flutter.io/fastlane-cd/

Continuous Delivery using Fastlane
https://flutter.io/fastlane-cd/

How to start ?

How to start ?

https://docs.fastlane.tools/best-practices/continuous-integration

https://codemagic.io/
Continuous integration use codemagic

DevOps Is
A Mindset

DevOps Is
A Culture

Thanks