A presentation at MobiConf in in Kraków, Poland by Horacio Gonzalez
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
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
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
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
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
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
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
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
What’s that Flutter everybody in mobile development is talking about these days? Another new thing that will be forgotten by this time next year or a true revolution in mobile apps development? Is it really worth my time?
In this talk I’m going to introduce you to Flutter, Google’s mobile app SDK for crafting high-quality native interfaces for iOS and Android in record time. Flutter works with existing code, is used by developers and organizations around the world, and is a free and open source.
O.K., I recognize that was the commercial pitch… but I am going way further that commercial pitch. I am going to show you the features that make Flutter one of the most pleasant and productive development platforms I’ve seen, I am going to show you how you can use Flutter to create beautiful UI with fewer lines of code and minimal boilerplate. And I will also show the points where Flutter needs improvement, and what the Flutter team and community is doing to address them.
The following resources were mentioned during the presentation or are useful additional information.
Here’s what was said about this presentation on social media.
