SlideShare una empresa de Scribd logo
1 de 37
https://flutter.io/
Nhan Cao [April 13, 2018]
2
WHAT IS FLUTTER?
• Open-source mobile app SDK
• Developed by Google
• Building high-performance apps for iOS and Android, from a
single codebase
3
WHY USE FLUTTER?
Flutter makes it easy and fast
to build beautiful
mobile apps.
• Reactive framework
• Material and Cupertino
widgets
• Hot reload
• Dart language and core libs
• Interop with mobile SDKs
• Android Studio/IntelliJ
official IDE 4
ARCHITECTURE
5
DART LANGUAGE
- Developed by Google
- Open-source with BSD license
- A very asynchronous language. With
this, it uses isolates for concurrency.
[First appeared October 10, 2011, Ecma International approved the Dart
language specification first edition in July 2014, Stable release 1.24 / June
12, 2017]
6
DART PLATFORMS
7
DART LANGUAGE
• Productive. Syntax must be clear and concise, tooling
simple.
• Fast. Runtime performance and startup must be great and
predictable even on small mobile devices.
• Portable. Client developers have to think about three
platforms today: iOS, Android, and Web. The language
needs to work well on all of them.
• Approachable. The language can’t stray too far from the
familiar if it wishes to be relevant for millions of
developers.
• Reactive. A reactive style of programming should be
supported by the language.
https://gist.github.com/nhancv/8ffce966d63becded05da6db3e778be7
8
9
JAVA
VS
DART
DART LANGUAGE
Guys, this is an exciting time for
Dart.
10
FLUTTER IS ALL DART
• For smart compiler:
• With production: Dart is AOT (Ahead Of Time)
compiled to fast, predictable, native code.
• With dev mode serve hot reload: Dart can also be
JIT (Just In Time) compiled for exceptionally fast
development cycles.
11
FLUTTER IS ALL DART
• Consistent 60 FPS (frames per second) performance:
• With smart compiler above Dart makes it easier to
create smooth animations and transitions that run
at 60fps.
• Dart can do object allocation and garbage
collection without locks.
12
FLUTTER IS ALL DART
• Use Dart for Unified layout.
• Everything is a Widget.
• Flutter support full set of Material Design widgets
already; also support different themes for
Android/iOS. Not care about XML or JSX anymore.
13
DESIGN-ORIENTED DEVELOPMENT
FLOW
14
Similar with web app
design. Just a
Container, Row, Col,
Flex, ….
DESIGN-ORIENTED DEVELOPMENT
FLOW
15
REACTIVE
16
Reactive Frameworks on the Web
Reactive Frameworks on Mobile
REACTIVE
17
With Flutter
WIDGET
18
Widget state lifecycle
WIDGET
19
State<T> lifecycle
PERFORMANCE
• Flutter with high performance compare with React
Native and Native
• Compiles to Native Code
• No reliance on OEM widgets
• No bridge needed
• Structural Repainting
20
PERFORMANCE
21
Native view
PERFORMANCE
22
Cross-platform using webview
Cross-platform using React Native
PERFORMANCE
23
With Flutter
PLATFORM CHANNELS
24
Flutter uses a flexible
system that allows you
to call platform-specific
APIs whether available
in Java or Kotlin code on
Android, or in
ObjectiveC or Swift code
on iOS.
DEBUGGING TOOL
Begin with efficient tooling
You can start with cli or just using official IDE for Flutter is Android studio.
Easy and useful.
$ flutter doctor
$ flutter upgrade
$ flutter packages get
$ flutter packages upgrade
$ flutter format
25
DEBUGGING TOOL
Flutter support hot reload and you can easy debug UI,
Mem, CPU, GPU, …. and execution with Android
studio. It’s really good and better than React Native.
26
27
APK SIZE
28
APK SIZE
29
https://flutter.io/faq/#how-big-is-the-flutter-engine
APK SIZE
30
With dev mode
Flutter: ARM, x86 and
x86_64
React Native: ARM,
x86. The apk size
minimum build by
Flutter is 21 MB
initial.
APK SIZE
31
With release mode
The apk size reduce
appreciably on
Flutter from 25.8 MB
(dev) to 8 MB
(release). But lib only
generated for ARM,
so that it’s only able
to install on ARM
device.
SUMMARIZE
• The advantages of reactive views, with no JavaScript
bridge
• Fast, smooth, and predictable; code compiles AOT to
native (ARM) code
• The developer has full control over the widgets and
layout
• Comes with beautiful, customizable widgets
• Great developer tools, with amazing hot reload
• More performance, more compatibility, more fun 32
OPPORTUNITY
• Google’s product
• Huge dev fan of google
• Free and Open source
• Rich documents
• You will be hunted in next few year. :D
33
CHALLENGES
• Quite new
• Beta version but let’s trust at Google bro. :D
• Dart lang is not almost popular
34
BEGINNER FIRST STEPS
• Why I move to Flutter: https://medium.com/@nhancv/why-i-move-to-
flutter-34c4005b96ef
• Complete Dart from Java if you are Java
developer: https://codelabs.developers.google.com/codelabs/from-
java-to-dart/#0
• Read Dart
convention: https://www.dartlang.org/guides/language/effective-
dart/style
• Complete simple Flutter
lab: https://codelabs.developers.google.com/codelabs/flutter
• Learn building layouts in Flutter: https://flutter.io/tutorials/layout/
• Use Cookbook to make your awesome
apps: https://flutter.io/cookbook/
35
REFERENCES
• What’s Revolutionary about Flutter: https://hackernoon.com/whats-
revolutionary-about-flutter-946915b09514
• Why I moved from java to dart: https://hackernoon.com/why-i-
moved-from-java-to-dart-8f3802b1d652
• Why Flutter uses Dart: https://hackernoon.com/why-flutter-uses-dart-
dd635a054ebf
• Why native app developers should take a serious look at
Flutter: https://hackernoon.com/why-native-app-developers-should-
take-a-serious-look-at-flutter-e97361a1c073
• Flutter — 5 reasons why you may love
it: https://hackernoon.com/flutter-5-reasons-why-you-may-love-it-
55021fdbf1aa 36
DEMO
• https://medium.com/@nhancv/flutter-simple-particle-motion-
3b48fd1f182
• https://medium.com/@nhancv/flutter-custom-indicator-animation-
simple-2c487489040b
• https://github.com/nhancv/nc_flutter_util
37

Más contenido relacionado

La actualidad más candente

What and Why Flutter? What is a Widget in Flutter?
What and Why Flutter? What is a Widget in Flutter?What and Why Flutter? What is a Widget in Flutter?
What and Why Flutter? What is a Widget in Flutter?MohammadHussain595488
 
Flutter festival - Write your first Flutter application
Flutter festival - Write your first Flutter applicationFlutter festival - Write your first Flutter application
Flutter festival - Write your first Flutter applicationApoorv Pandey
 
The magic of flutter
The magic of flutterThe magic of flutter
The magic of flutterShady Selim
 
A flight with Flutter
A flight with FlutterA flight with Flutter
A flight with FlutterAhmed Tarek
 
Introduction to Flutter
Introduction to FlutterIntroduction to Flutter
Introduction to FlutterApoorv Pandey
 
Getting started with flutter
Getting started with flutterGetting started with flutter
Getting started with flutterrihannakedy
 
DSC IIITL Flutter Workshop
DSC IIITL Flutter WorkshopDSC IIITL Flutter Workshop
DSC IIITL Flutter WorkshopDSCIIITLucknow
 
Developing Cross platform apps in flutter (Android, iOS, Web)
Developing Cross platform apps in flutter (Android, iOS, Web)Developing Cross platform apps in flutter (Android, iOS, Web)
Developing Cross platform apps in flutter (Android, iOS, Web)Priyanka Tyagi
 
Building beautiful apps with Google flutter
Building beautiful apps with Google flutterBuilding beautiful apps with Google flutter
Building beautiful apps with Google flutterAhmed Abu Eldahab
 
Building beautiful apps using google flutter
Building beautiful apps using google flutterBuilding beautiful apps using google flutter
Building beautiful apps using google flutterAhmed Abu Eldahab
 
Flutter session 01
Flutter session 01Flutter session 01
Flutter session 01DSC IEM
 
Introduction to Flutter.pptx
Introduction to Flutter.pptxIntroduction to Flutter.pptx
Introduction to Flutter.pptxDiffouoFopaEsdras
 

La actualidad más candente (20)

What and Why Flutter? What is a Widget in Flutter?
What and Why Flutter? What is a Widget in Flutter?What and Why Flutter? What is a Widget in Flutter?
What and Why Flutter? What is a Widget in Flutter?
 
Flutter festival - Write your first Flutter application
Flutter festival - Write your first Flutter applicationFlutter festival - Write your first Flutter application
Flutter festival - Write your first Flutter application
 
The magic of flutter
The magic of flutterThe magic of flutter
The magic of flutter
 
Flutter
FlutterFlutter
Flutter
 
A flight with Flutter
A flight with FlutterA flight with Flutter
A flight with Flutter
 
Flutter workshop
Flutter workshopFlutter workshop
Flutter workshop
 
Introduction to Flutter
Introduction to FlutterIntroduction to Flutter
Introduction to Flutter
 
Getting started with flutter
Getting started with flutterGetting started with flutter
Getting started with flutter
 
Flutter
FlutterFlutter
Flutter
 
DSC IIITL Flutter Workshop
DSC IIITL Flutter WorkshopDSC IIITL Flutter Workshop
DSC IIITL Flutter Workshop
 
Flutter
FlutterFlutter
Flutter
 
Developing Cross platform apps in flutter (Android, iOS, Web)
Developing Cross platform apps in flutter (Android, iOS, Web)Developing Cross platform apps in flutter (Android, iOS, Web)
Developing Cross platform apps in flutter (Android, iOS, Web)
 
Building beautiful apps with Google flutter
Building beautiful apps with Google flutterBuilding beautiful apps with Google flutter
Building beautiful apps with Google flutter
 
Building beautiful apps using google flutter
Building beautiful apps using google flutterBuilding beautiful apps using google flutter
Building beautiful apps using google flutter
 
Flutter
FlutterFlutter
Flutter
 
Flutter beyond hello world
Flutter beyond hello worldFlutter beyond hello world
Flutter beyond hello world
 
Flutter session 01
Flutter session 01Flutter session 01
Flutter session 01
 
Introduction to Flutter.pptx
Introduction to Flutter.pptxIntroduction to Flutter.pptx
Introduction to Flutter.pptx
 
Animations in Flutter
Animations in FlutterAnimations in Flutter
Animations in Flutter
 
Flutter Bootcamp
Flutter BootcampFlutter Bootcamp
Flutter Bootcamp
 

Similar a Flutter talkshow

Mobile Web Apps and the Intel® XDK
Mobile Web Apps and the Intel® XDKMobile Web Apps and the Intel® XDK
Mobile Web Apps and the Intel® XDKIntel® Software
 
What makes Flutter the best cross platform sdk
What makes Flutter the best cross platform sdkWhat makes Flutter the best cross platform sdk
What makes Flutter the best cross platform sdkExpeed Software
 
Enhancing and modifying_the_core_android_os
Enhancing and modifying_the_core_android_osEnhancing and modifying_the_core_android_os
Enhancing and modifying_the_core_android_osArnav Gupta
 
Enhancing and modifying_the_core_android_os
Enhancing and modifying_the_core_android_osEnhancing and modifying_the_core_android_os
Enhancing and modifying_the_core_android_osArnav Gupta
 
Green flag Wrap up Google Solution Challenge.pdf
Green flag Wrap up Google Solution Challenge.pdfGreen flag Wrap up Google Solution Challenge.pdf
Green flag Wrap up Google Solution Challenge.pdfGoogleDeveloperStude22
 
Cross platform mobile application devlopment
Cross platform mobile application devlopmentCross platform mobile application devlopment
Cross platform mobile application devlopmentPrabhat gangwar
 
Synapse india reviews on asp.net mobile application
Synapse india reviews on asp.net mobile applicationSynapse india reviews on asp.net mobile application
Synapse india reviews on asp.net mobile applicationsaritasingh19866
 
Mobile development with Flutter
Mobile development with FlutterMobile development with Flutter
Mobile development with FlutterAwok
 
Cross-Platform Development using Angulr JS in Visual Studio
Cross-Platform Development using Angulr JS in Visual StudioCross-Platform Development using Angulr JS in Visual Studio
Cross-Platform Development using Angulr JS in Visual StudioMizanur Sarker
 
Embarcadero's Connected Development
Embarcadero's Connected DevelopmentEmbarcadero's Connected Development
Embarcadero's Connected DevelopmentJim McKeeth
 
Kotlin native for iOS and Android
Kotlin native for iOS and AndroidKotlin native for iOS and Android
Kotlin native for iOS and AndroidShady Selim
 
Tehran's 1st Android bootcamp - Part1
Tehran's 1st Android bootcamp - Part1Tehran's 1st Android bootcamp - Part1
Tehran's 1st Android bootcamp - Part1Mohsen Mirhoseini
 
INTRODUCTION TO FLUTTER BASICS.pptx
INTRODUCTION TO FLUTTER BASICS.pptxINTRODUCTION TO FLUTTER BASICS.pptx
INTRODUCTION TO FLUTTER BASICS.pptx20TUCS033DHAMODHARAK
 
7 IDEs Every React Native App Development Company Must Use (2).pptx
7 IDEs Every React Native App Development Company Must Use (2).pptx7 IDEs Every React Native App Development Company Must Use (2).pptx
7 IDEs Every React Native App Development Company Must Use (2).pptxSoftprodigy
 
Native mobile application development with Flutter (Dart)
Native mobile application development with Flutter (Dart)Native mobile application development with Flutter (Dart)
Native mobile application development with Flutter (Dart)Randal Schwartz
 
Introduction to flutter's basic concepts
Introduction to flutter's basic conceptsIntroduction to flutter's basic concepts
Introduction to flutter's basic conceptsKumaresh Chandra Baruri
 
Mobile Development
Mobile DevelopmentMobile Development
Mobile DevelopmentAlan Uthoff
 
Advance C# Programming Part 1.pptx
Advance C# Programming Part 1.pptxAdvance C# Programming Part 1.pptx
Advance C# Programming Part 1.pptxpercivalfernandez3
 

Similar a Flutter talkshow (20)

Why Flutter.pdf
Why Flutter.pdfWhy Flutter.pdf
Why Flutter.pdf
 
Mobile Web Apps and the Intel® XDK
Mobile Web Apps and the Intel® XDKMobile Web Apps and the Intel® XDK
Mobile Web Apps and the Intel® XDK
 
What makes Flutter the best cross platform sdk
What makes Flutter the best cross platform sdkWhat makes Flutter the best cross platform sdk
What makes Flutter the best cross platform sdk
 
Enhancing and modifying_the_core_android_os
Enhancing and modifying_the_core_android_osEnhancing and modifying_the_core_android_os
Enhancing and modifying_the_core_android_os
 
Enhancing and modifying_the_core_android_os
Enhancing and modifying_the_core_android_osEnhancing and modifying_the_core_android_os
Enhancing and modifying_the_core_android_os
 
Green flag Wrap up Google Solution Challenge.pdf
Green flag Wrap up Google Solution Challenge.pdfGreen flag Wrap up Google Solution Challenge.pdf
Green flag Wrap up Google Solution Challenge.pdf
 
Cross platform mobile application devlopment
Cross platform mobile application devlopmentCross platform mobile application devlopment
Cross platform mobile application devlopment
 
Synapse india reviews on asp.net mobile application
Synapse india reviews on asp.net mobile applicationSynapse india reviews on asp.net mobile application
Synapse india reviews on asp.net mobile application
 
Mobile development with Flutter
Mobile development with FlutterMobile development with Flutter
Mobile development with Flutter
 
Cross-Platform Development using Angulr JS in Visual Studio
Cross-Platform Development using Angulr JS in Visual StudioCross-Platform Development using Angulr JS in Visual Studio
Cross-Platform Development using Angulr JS in Visual Studio
 
Embarcadero's Connected Development
Embarcadero's Connected DevelopmentEmbarcadero's Connected Development
Embarcadero's Connected Development
 
Kotlin native for iOS and Android
Kotlin native for iOS and AndroidKotlin native for iOS and Android
Kotlin native for iOS and Android
 
Tehran's 1st Android bootcamp - Part1
Tehran's 1st Android bootcamp - Part1Tehran's 1st Android bootcamp - Part1
Tehran's 1st Android bootcamp - Part1
 
INTRODUCTION TO FLUTTER BASICS.pptx
INTRODUCTION TO FLUTTER BASICS.pptxINTRODUCTION TO FLUTTER BASICS.pptx
INTRODUCTION TO FLUTTER BASICS.pptx
 
7 IDEs Every React Native App Development Company Must Use (2).pptx
7 IDEs Every React Native App Development Company Must Use (2).pptx7 IDEs Every React Native App Development Company Must Use (2).pptx
7 IDEs Every React Native App Development Company Must Use (2).pptx
 
Native mobile application development with Flutter (Dart)
Native mobile application development with Flutter (Dart)Native mobile application development with Flutter (Dart)
Native mobile application development with Flutter (Dart)
 
Introduction to flutter's basic concepts
Introduction to flutter's basic conceptsIntroduction to flutter's basic concepts
Introduction to flutter's basic concepts
 
Mobile Development
Mobile DevelopmentMobile Development
Mobile Development
 
Advance C# Programming Part 1.pptx
Advance C# Programming Part 1.pptxAdvance C# Programming Part 1.pptx
Advance C# Programming Part 1.pptx
 
Firefox os
Firefox osFirefox os
Firefox os
 

Más de Nhan Cao

Android asynchronous programming
Android asynchronous programmingAndroid asynchronous programming
Android asynchronous programmingNhan Cao
 
Android component programming
Android component programmingAndroid component programming
Android component programmingNhan Cao
 
OOp, core language & principles
OOp, core language & principlesOOp, core language & principles
OOp, core language & principlesNhan Cao
 
Android tdd
Android tddAndroid tdd
Android tddNhan Cao
 
React native starter
React native starterReact native starter
React native starterNhan Cao
 

Más de Nhan Cao (6)

Android asynchronous programming
Android asynchronous programmingAndroid asynchronous programming
Android asynchronous programming
 
Android component programming
Android component programmingAndroid component programming
Android component programming
 
OOp, core language & principles
OOp, core language & principlesOOp, core language & principles
OOp, core language & principles
 
Ar
ArAr
Ar
 
Android tdd
Android tddAndroid tdd
Android tdd
 
React native starter
React native starterReact native starter
React native starter
 

Último

Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfAlex Barbosa Coqueiro
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):comworks
 
SAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxSAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxNavinnSomaal
 
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsVertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsMiki Katsuragi
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Manik S Magar
 
Story boards and shot lists for my a level piece
Story boards and shot lists for my a level pieceStory boards and shot lists for my a level piece
Story boards and shot lists for my a level piececharlottematthew16
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc
 
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupStreamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupFlorian Wilhelm
 
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii SoldatenkoFwdays
 
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfAddepto
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Commit University
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
Search Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfSearch Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfRankYa
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsSergiu Bodiu
 
H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo Day
H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo DayH2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo Day
H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo DaySri Ambati
 
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxArtificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxhariprasad279825
 
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubKalema Edgar
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek SchlawackFwdays
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationSlibray Presentation
 

Último (20)

Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdf
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):
 
SAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxSAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptx
 
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsVertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering Tips
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!
 
Story boards and shot lists for my a level piece
Story boards and shot lists for my a level pieceStory boards and shot lists for my a level piece
Story boards and shot lists for my a level piece
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
 
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupStreamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project Setup
 
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko
 
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdf
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
Search Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfSearch Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdf
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
 
H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo Day
H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo DayH2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo Day
H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo Day
 
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxArtificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptx
 
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding Club
 
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptxE-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck Presentation
 

Flutter talkshow

  • 2. 2
  • 3. WHAT IS FLUTTER? • Open-source mobile app SDK • Developed by Google • Building high-performance apps for iOS and Android, from a single codebase 3
  • 4. WHY USE FLUTTER? Flutter makes it easy and fast to build beautiful mobile apps. • Reactive framework • Material and Cupertino widgets • Hot reload • Dart language and core libs • Interop with mobile SDKs • Android Studio/IntelliJ official IDE 4
  • 6. DART LANGUAGE - Developed by Google - Open-source with BSD license - A very asynchronous language. With this, it uses isolates for concurrency. [First appeared October 10, 2011, Ecma International approved the Dart language specification first edition in July 2014, Stable release 1.24 / June 12, 2017] 6
  • 8. DART LANGUAGE • Productive. Syntax must be clear and concise, tooling simple. • Fast. Runtime performance and startup must be great and predictable even on small mobile devices. • Portable. Client developers have to think about three platforms today: iOS, Android, and Web. The language needs to work well on all of them. • Approachable. The language can’t stray too far from the familiar if it wishes to be relevant for millions of developers. • Reactive. A reactive style of programming should be supported by the language. https://gist.github.com/nhancv/8ffce966d63becded05da6db3e778be7 8
  • 10. DART LANGUAGE Guys, this is an exciting time for Dart. 10
  • 11. FLUTTER IS ALL DART • For smart compiler: • With production: Dart is AOT (Ahead Of Time) compiled to fast, predictable, native code. • With dev mode serve hot reload: Dart can also be JIT (Just In Time) compiled for exceptionally fast development cycles. 11
  • 12. FLUTTER IS ALL DART • Consistent 60 FPS (frames per second) performance: • With smart compiler above Dart makes it easier to create smooth animations and transitions that run at 60fps. • Dart can do object allocation and garbage collection without locks. 12
  • 13. FLUTTER IS ALL DART • Use Dart for Unified layout. • Everything is a Widget. • Flutter support full set of Material Design widgets already; also support different themes for Android/iOS. Not care about XML or JSX anymore. 13
  • 14. DESIGN-ORIENTED DEVELOPMENT FLOW 14 Similar with web app design. Just a Container, Row, Col, Flex, ….
  • 16. REACTIVE 16 Reactive Frameworks on the Web Reactive Frameworks on Mobile
  • 20. PERFORMANCE • Flutter with high performance compare with React Native and Native • Compiles to Native Code • No reliance on OEM widgets • No bridge needed • Structural Repainting 20
  • 24. PLATFORM CHANNELS 24 Flutter uses a flexible system that allows you to call platform-specific APIs whether available in Java or Kotlin code on Android, or in ObjectiveC or Swift code on iOS.
  • 25. DEBUGGING TOOL Begin with efficient tooling You can start with cli or just using official IDE for Flutter is Android studio. Easy and useful. $ flutter doctor $ flutter upgrade $ flutter packages get $ flutter packages upgrade $ flutter format 25
  • 26. DEBUGGING TOOL Flutter support hot reload and you can easy debug UI, Mem, CPU, GPU, …. and execution with Android studio. It’s really good and better than React Native. 26
  • 27. 27
  • 30. APK SIZE 30 With dev mode Flutter: ARM, x86 and x86_64 React Native: ARM, x86. The apk size minimum build by Flutter is 21 MB initial.
  • 31. APK SIZE 31 With release mode The apk size reduce appreciably on Flutter from 25.8 MB (dev) to 8 MB (release). But lib only generated for ARM, so that it’s only able to install on ARM device.
  • 32. SUMMARIZE • The advantages of reactive views, with no JavaScript bridge • Fast, smooth, and predictable; code compiles AOT to native (ARM) code • The developer has full control over the widgets and layout • Comes with beautiful, customizable widgets • Great developer tools, with amazing hot reload • More performance, more compatibility, more fun 32
  • 33. OPPORTUNITY • Google’s product • Huge dev fan of google • Free and Open source • Rich documents • You will be hunted in next few year. :D 33
  • 34. CHALLENGES • Quite new • Beta version but let’s trust at Google bro. :D • Dart lang is not almost popular 34
  • 35. BEGINNER FIRST STEPS • Why I move to Flutter: https://medium.com/@nhancv/why-i-move-to- flutter-34c4005b96ef • Complete Dart from Java if you are Java developer: https://codelabs.developers.google.com/codelabs/from- java-to-dart/#0 • Read Dart convention: https://www.dartlang.org/guides/language/effective- dart/style • Complete simple Flutter lab: https://codelabs.developers.google.com/codelabs/flutter • Learn building layouts in Flutter: https://flutter.io/tutorials/layout/ • Use Cookbook to make your awesome apps: https://flutter.io/cookbook/ 35
  • 36. REFERENCES • What’s Revolutionary about Flutter: https://hackernoon.com/whats- revolutionary-about-flutter-946915b09514 • Why I moved from java to dart: https://hackernoon.com/why-i- moved-from-java-to-dart-8f3802b1d652 • Why Flutter uses Dart: https://hackernoon.com/why-flutter-uses-dart- dd635a054ebf • Why native app developers should take a serious look at Flutter: https://hackernoon.com/why-native-app-developers-should- take-a-serious-look-at-flutter-e97361a1c073 • Flutter — 5 reasons why you may love it: https://hackernoon.com/flutter-5-reasons-why-you-may-love-it- 55021fdbf1aa 36

Notas del editor

  1. What are some advantages of Flutter? It helps you: Be highly productive  — Develop for iOS and Android from a single codebase  — Do more with less code, even on a single OS, with a modern, expressive language and a declarative approach  — Prototype and iterate easily: * Experiment by changing code and reloading as your app runs (with hot reload) * Fix crashes and continue debugging from where the app left off Create beautiful, highly-customized user experiences  — Benefit from a rich set of Material Design and Cupertino (iOS-flavor) widgets built using Flutter’s own framework  — Realize custom, beautiful, brand-driven designs, without the limitations of OEM widget sets Technology Build - Beautiful app UIs * Rich 2D GPU-accelerated APIs * Reactive framework * Animation/motion APIs * Material Components and Cupertino widgets - Fluid coding experience * Sub-second, stateful hot reload * IntelliJ: refactor, code completion, etc * Dart language and core libs * Package manager - Full-features apps * Interop with mobile OS APIs & SDKs * Maven/Java * Cocoapods/ObjC/Swift Optimize - Test * Unit testing * Integration testing * On-device testing - Debug * IDE debugger * Web-based debugger * async/await aware * Expression evaluator - Profile * Timeline * CPU and memory * In-app perf charts Deploy - Compile * Native ARM code * Dead code elimination - Distribution * App Store * Play Store
  2. https://docs.google.com/presentation/d/1cw7A4HbvM_Abv320rVgPVGiUP2msVs7tfGbkgdrTy0I/edit?usp=sharing
  3. https://www.dartlang.org/
  4. https://www.dartlang.org/ IOE: http://www.bkacad.com/upload_images/3_value_index_survey_marquee_3.png https://blog.cloudrail.com/internet-of-everything-vs-internet-of-things/
  5. https://www.dartlang.org/ Productive. Syntax must be clear and concise, tooling simple, and dev cycles near-instant and on-device. Fast. Runtime performance and startup must be great and predictable even on small mobile devices. Portable. Client developers have to think about three platforms today: iOS, Android, and Web. The language needs to work well on all of them. Approachable. The language can’t stray too far from the familiar if it wishes to be relevant for millions of developers. Reactive. A reactive style of programming should be supported by the language. https://medium.com/dartlang/announcing-dart-2-80ba01f43b6
  6. https://www.dartlang.org/ Should move from java to Dart? Look some points: Short syntax Public by default, private by prefixing “_” Collection literals; Everything’s an object — no “primitives” Named parameters, optional parameters, defaults; Properties — no need to write “get” methods everywhere Cascades — everything’s a builder Type inference with strong mode — just write “var” for locals Named constructors, auto assignment to fields; String interpolation, several types of string literal; dartfmt — worries about formatting so you don’t have to Async running, thus it performs way better java, php
  7. https://www.dartlang.org/
  8. Same with ReactNative using all in Javascript. Some points why Flutter using Dart
  9. Same with ReactNative using all in Javascript. Some points why Flutter using Dart
  10. Same with ReactNative using all in Javascript. Some points why Flutter using Dart
  11. Widgets are now part of the app. We can customize it with your own style by using set of material widgets or access to painter and canvas to make awesome shape.
  12. Widgets are now part of the app. We can customize it with your own style by using set of material widgets or access to painter and canvas to make awesome shape.
  13. You will not be limited customizing native platform by using platform channel. Flutter uses a flexible system that allows you to call platform-specific APIs whether available in Java or Kotlin code on Android, or in ObjectiveC or Swift code on iOS. Messages and responses are passed asynchronously, to ensure the user interface remains responsive. [https://flutter.io/platform-channels/]
  14. In FAQ’s Flutter: https://flutter.io/faq/#how-big-is-the-flutter-engine
  15. In FAQ’s Flutter: https://flutter.io/faq/#how-big-is-the-flutter-engine
  16. In FAQ’s Flutter: https://flutter.io/faq/#how-big-is-the-flutter-engine
  17. In FAQ’s Flutter: https://flutter.io/faq/#how-big-is-the-flutter-engine