Hey GDEs, I think you should look at Flutter

Hey GDEs, I think you should look at Flutter Horacio Gonzalez @LostInBrittany GDE Summit 2018 @LostInBrittany

Horacio Gonzalez @LostInBrittany Spaniard lost in Brittany, developer, dreamer and all-around geek GDE Summit 2018 @LostInBrittany

What's Flutter? Yet another mobile solution? GDE Summit 2018 @LostInBrittany

Flutter Flutter is Google's new open-source mobile UI toolkit, helping developers to craft high-quality native experiences across mobile platforms in record time GDE Summit 2018 @LostInBrittany

Flutter Flutter is Google's new open-source mobile UI toolkit, helping developers to craft high-quality native experiences across mobile platforms in record time GDE Summit 2018 @LostInBrittany

Flutter Flutter is Google's new open-source mobile UI toolkit, helping developers to craft high-quality native experiences across mobile platforms in record time GDE Summit 2018 @LostInBrittany

Flutter Flutter is Google's new open-source mobile UI toolkit, helping developers to craft high-quality native experiences across mobile platforms in record time GDE Summit 2018 @LostInBrittany

Flutter Flutter is Google's new open-source mobile UI toolkit, helping developers to craft high-quality native experiences across mobile platforms in record time GDE Summit 2018 @LostInBrittany

Flutter Flutter is Google's new open-source mobile UI toolkit, helping developers to craft high-quality native experiences across mobile platforms in record time GDE Summit 2018 @LostInBrittany

Flutter Flutter is Google's new open-source mobile UI toolkit, helping developers to craft high-quality native experiences across mobile platforms in record time GDE Summit 2018 @LostInBrittany

Flutter Flutter is Google's new open-source mobile UI toolkit, helping developers to craft high-quality native experiences across mobile platforms in record time GDE Summit 2018 @LostInBrittany

Looking back Diving into the history of mobile app development GDE Summit 2018 @LostInBrittany

At the beginning there were the SDKs Your app Platform Canvas OEM Widgets Events Services Native Code Location Bluetooth Audio Sensors Camera etc, GDE Summit 2018 @LostInBrittany

Then the Webviews... Your app Platform Canvas WebView Events Services Bridge JavaScript Location Bluetooth Audio Sensors Camera etc, GDE Summit 2018 @LostInBrittany

And the Reactive views Your app Platform Canvas JavaScript Bridge OEM Widgets Events Services Location Bluetooth Audio Sensors Camera etc, GDE Summit 2018 @LostInBrittany

Enter Flutter Your app Platform Canvas Widgets, Rendering Events Services Native Code Platform Channels Location Bluetooth Audio Sensors Camera etc, GDE Summit 2018 @LostInBrittany

Flutter architecture GDE Summit 2018 @LostInBrittany

But why Dart? Because Google, duh! …or maybe there are good reasons? GDE Summit 2018 @LostInBrittany

Dart can be compiled AOT or JIT Development builds: Custom VM offers super fast hot reload change cycle Release builds: Full AOT-compilation to native machine code offers super fast startup and execution GDE Summit 2018 @LostInBrittany

Dart's allocation and GC ● Many new objects: ○ Lock-free, fast allocation ● Short-lived objects: ○ Precise, generational garbage collection GDE Summit 2018 @LostInBrittany

Dart is an easy, familiar language An easy language: ● No exotic syntax ● Easy to read, easy to write ● Very expressive A familiar language: ● JavaScript devs find it easy to learn ● Java / C# devs even more GDE Summit 2018 @LostInBrittany

Layout How Flutter does layout? CSS like? XML like? GDE Summit 2018 @LostInBrittany

Traditional rule based layouts Large set of rules ● Fixed ● Applied to all the widgets Cascading application ● Interactions & conflicts ● Low performance GDE Summit 2018 @LostInBrittany

Chrome team experiment Could a different layout model allow faster rendering? ● Each widget specifies its own simple layout model ● Less rules, heavily optimized ● Complex layouts are turned into widgets GDE Summit 2018 @LostInBrittany

Everything is a widget Layouts Margin Padding Themes Application are widgets even scrolling is a widget! Navigation GDE Summit 2018 @LostInBrittany

Le Layout GDE Summit 2018 @LostInBrittany

Le Layout GDE Summit 2018 @LostInBrittany

Le Layout class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { Widget titleSection = new Container( padding: const EdgeInsets.all(32.0), child: new Row( children: [ new Expanded( child: new Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ new Container( padding: const EdgeInsets.only(bottom: 8.0), child: new Text( 'Oeschinen Lake Campground', style: new TextStyle( fontWeight: FontWeight.bold, ), ), ), new Text( 'Kandersteg, Switzerland', style: new TextStyle( color: Colors.grey[500], ), ), ], ), ), new Icon( Icons.star, color: Colors.red[500], ), new Text('41'), ], ), ); } GDE Summit 2018 @LostInBrittany

Le Layout class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { Widget titleSection = new Container( padding: const EdgeInsets.all(32.0), child: new Row( children: [ new Expanded( child: new Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ new Container( padding: const EdgeInsets.only(bottom: 8.0), child: new Text( 'Oeschinen Lake Campground', style: new TextStyle( fontWeight: FontWeight.bold, ), ), ), new Text( 'Kandersteg, Switzerland', style: new TextStyle( color: Colors.grey[500], ), ), ], ), ), new Icon( Icons.star, color: Colors.red[500], ), new Text('41'), ], ), ); } GDE Summit 2018 @LostInBrittany

Widget Inspector GDE Summit 2018 @LostInBrittany

Responsive ? GDE Summit 2018 @LostInBrittany

Responsive ! Scaffold Scaffold Row ListView GridView GDE Summit 2018 @LostInBrittany

Gestion des thèmes GDE Summit 2018 @LostInBrittany

Material Design 2.0 GDE Summit 2018 @LostInBrittany

Blazing fast and flexible layouts GDE Summit 2018 @LostInBrittany

Why to choose Flutter? OK, so it's a new technology to build mobile apps, rather cool, yeah… but why should I choose it? GDE Summit 2018 @LostInBrittany

Why choose Flutter? Beautiful Productive Fast Extensible GDE Summit 2018 @LostInBrittany

Beautiful 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 GDE Summit 2018 @LostInBrittany

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

Productive 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 GDE Summit 2018 @LostInBrittany

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

A wonderful time to begin with Flutter Flutter is getting momentum, and the 1.0 is around the corner... GDE Summit 2018 @LostInBrittany

Flutter 1.0 on the starting blocks Latest release: Flutter Release Preview 2 GDE Summit 2018 @LostInBrittany

Getting momentum StackOverflow Question Views GDE Summit 2018 @LostInBrittany

Integration with popular tools 3rd-part y Android SDKs Android Studio Xcode VS Code Firebase 3rd-part y iOS SDKs Android APIs iOS APIs Material Design GDE Summit 2018 Redux @LostInBrittany

Thank you! GDE Summit 2018 @LostInBrittany