What's Flutter and why should I try it?

What's Flutter and why should I try it? Horacio Gonzalez @LostInBrittany What's Flutter? @LostInBrittany

Horacio Gonzalez Developer Evangelist, OVH GDE in Flutter & Web Spaniard lost in Brittany (France) @ horacio.gonzalez@gmail.com @LostInBrittany LostInBrittany c What's Flutter? @LostInBrittany

OVH Innovation is Freedom What's Flutter? @LostInBrittany

OVH : Key Figures 1.3M Customers worldwide in 138 Countries 4 DC under construction 1.5 Billions of investment over five years + 2 000 Employees 27 Datacenters 18 Years of Innovation 2 DC in project 19 Countries 350k Dedicated Servers 13 Tbps bandwith capacity 200k Private cloud VMs running 33 Points of presence 500k Public cloud Instances created in a month Hosting capacity : 1.3M Physical Servers What's Flutter? @LostInBrittany

OVH: Our solutions Cloud Web Hosting Mobile Hosting Telecom VPS Containers ▪ Dedicated Server Domain names VoIP Public Cloud Compute ▪ Data Storage Email SMS/Fax Private Cloud ▪ Network and Database CDN Virtual desktop Serveur dédié Security Object Storage Web hosting Cloud HubiC Over theBox ▪ Licences Cloud Desktop Securities MS Office Hybrid Cloud Messaging MS solutions What's Flutter? @LostInBrittany

OVH & Poland ● Klaba family comes from Poland ● OVH data center in Warsaw ● OVH office in Wroclaw What's Flutter? @LostInBrittany

What's Flutter? Yet another mobile solution? What's Flutter? @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 c What's Flutter? @LostInBrittany What's Flutter? @LostInBrittany

Looking back Diving into the history of mobile app development What's Flutter? @LostInBrittany

At the beginning there were the SDKs Your app Platform Canvas OEM Widgets Events Services Native Code What's Location Bluetooth Audio Sensors Camera etc, Flutter? @LostInBrittany

Then the Webviews... Your app Platform Canvas WebView Events Services Bridge JavaScript What's Location Bluetooth Audio Sensors Camera etc, Flutter? @LostInBrittany

And the Reactive views Your app Platform Canvas JavaScript Bridge OEM Widgets What's Events Services Location Bluetooth Audio Sensors Camera etc, Flutter? @LostInBrittany

Enter Flutter Your app Platform Canvas Widgets, Rendering Events Services Native Code Platform Channels What's Location Bluetooth Audio Sensors Camera etc, Flutter? @LostInBrittany

Flutter architecture What's Flutter? @LostInBrittany

But why Dart? Because Google, duh! …or maybe there are good reasons? What's Flutter? @LostInBrittany

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

Dart's allocation and GC ● Many new objects: ○ Lock-free, fast allocation ● Short-lived objects: ○ Precise, generational garbage collection What's Flutter? @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 What's Flutter? @LostInBrittany

Widgets Why does Flutter use its own widgets, instead of OEM? What's Flutter? @LostInBrittany

Widgets make or break an app ● They need to look good ● They need to feel natural ● They need to be fast ● They need to be extensible and customizable And Flutter widgets are all that! What's Flutter? @LostInBrittany

Widgets are raised into the app Your app Platform Canvas Widgets, Rendering Events Services Native Code Platform Channels What's Location Bluetooth Audio Sensors Camera etc, Flutter? @LostInBrittany

Small tradeoff on app size Your app Widgets, Rendering Having the widgets and rendering in the app have a cost: Minimal app size ~7 MB Native Code Platform Channels What's But the benefices are great Flutter? @LostInBrittany

Layout How Flutter does layout? CSS like? XML like? What's Flutter? @LostInBrittany

Traditional rule based layouts Large set of rules ● Fixed ● Applied to all the widgets Cascading application ● Interactions & conflicts ● Low performance What's Flutter? @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 What's Flutter? @LostInBrittany

Everything is a widget Layouts Margin Padding Themes are widgets Application even scrolling is a widget! Navigation What's Flutter? @LostInBrittany

Blazing fast and flexible layouts What's Flutter? @LostInBrittany

Show us some code There are developers in the room, you know... What's Flutter? @LostInBrittany

Let's begin with a Hello World... import 'package:flutter/material.dart'; void main() { runApp( new Center( child: new Text( 'Hello, world!', textDirection: TextDirection.ltr, ), ), ); } You will never do that IRL... What's Flutter? @LostInBrittany

Extending Stateless Widget import 'package:flutter/material.dart'; class MyAppBar extends StatelessWidget { @override Widget build(BuildContext context) { return new Center( child: new Text( 'Hello, world!', textDirection: TextDirection.ltr, ), ); } } void main() { runApp(new MyAppBar()); } A widget’s main job is to implement a build function What's Flutter? @LostInBrittany

Complex layouts column body: new Column( children: [ imageSection( path: 'images/lake.jpg', ), titleSection( heading: 'Oeschinen Lake Campground', subtitle: 'Kandersteg, Switzerland', stars: stars, ), buttonSection(), textSection( text: 'Lake Oeschinen lies at the...'), ], ), image titles actions text c What's Flutter? @LostInBrittany What's Flutter? @LostInBrittany

‘UI-as-code’ new Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ new IconAction(icon: Icons.call, label: 'CALL'), new IconAction(icon: Icons.near_me, label: 'ROUTE'), new IconAction(icon: Icons.share, label: 'SHARE'), ]) c What's Flutter? @LostInBrittany What's Flutter? @LostInBrittany

Composability class IconAction extends StatelessWidget { const IconAction({this.icon, this.label, this.onTap}); Widget build(BuildContext context) { return new InkWell( child: new Column( children: [ new Icon(icon, color: primaryColor), new Container( margin: const EdgeInsets.only(top: 8.0), child: new Text( Label style: new TextStyle(color: primaryColor), ), ), ], ), onTap: onTap, ); } } c What's Flutter? @LostInBrittany What's Flutter? @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? What's Flutter? @LostInBrittany

Why choose Flutter? Beautiful Productive Fast Extensible What's Flutter? @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 c What's Flutter? @LostInBrittany What's Flutter? @LostInBrittany

Fast Brings the power of a games engine to user experience development 60fps, GPU accelerated Compiled to native machine code c What's Flutter? @LostInBrittany What's Flutter? @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 c What's Flutter? @LostInBrittany What's Flutter? @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.) c What's Flutter? @LostInBrittany What's Flutter? @LostInBrittany

What's Flutter? @LostInBrittany Confidential + Proprietary

A wonderful time to begin with Flutter Flutter is getting momentum, and the 1.0 is around the corner... What's Flutter? @LostInBrittany

Flutter 1.0 on the starting blocks Latest release: Flutter Release Preview 2 What's Flutter? @LostInBrittany

Getting momentum StackOverflow Question Views What's Flutter? @LostInBrittany

Integration with popular tools 3rd-party Android SDKs Android Studio VS Code Xcode Firebase 3rd-party iOS SDKs Android APIs Material Design iOS APIs What's Flutter? Redux @LostInBrittany

I want to try it! How could you use Flutter today? What's Flutter? @LostInBrittany

Get started now: flutter.io Start a new app from scratch Build your new idea in Flutter, and reach both iOS and Android at the same time. Prototype a new app idea Use Flutter to test out an app concept or idea in record time. What's Bring your app to the the other platform Use Flutter for a part of your app You already have an iOS or Android app? Use Flutter to build for the other platform. Combine codebases when you’ve proven your Flutter app. Test Flutter in production with one or two screens in your existing app. Flutter? @LostInBrittany

Conclusion That's all folks! What's Flutter? @LostInBrittany

Thank you! What's Flutter? @LostInBrittany