Flutter_for_JS_Devs.pdf

A talk about Google's UI toolkit Flutter.

What it is - How it works and Why you should try it out

Demo Code: https://github.com/fjogeleit/flutter-demo

Transcript

1. Flutter Android and iOS Apps with one Codebase? And the answer is JavaScript! … not today sorry :-(
2. Motivation • Comes a customer into his favorite Web Agency …
 You also develop mobile apps right?…No…Maybe…Sure! • PWA’s are great and in many situations are a good alternative but they have limitations like contact or calendar access. • Self improvement
3. What is Flutter? • Flutter is an UI toolkit to build natively-compiled mobile, web (and desktop) apps from one codebase. • It brings an CLI to create / build / run / analyze flutter projects • It comes with a large library for testing, navigation, building UI’s based on the material design and/or cupertino standard • Flutter is an SDK developed with Dart, a programming language created from Google • Flutter doesn’t compile to native Widgets.
 Flutter compiles Dart to C/C++ and use the Skia Engine
 to render the UI
4. Flutter vs JS Frameworks • Flutter has a higher performance because it’s completely compiled. Native Frameworks like React Native or NativeScript execute still JS in its own thread, only UI Elements are compiled • Native API access is well supported and easy to integrate with so called „Channels“ • More Base-Features in comparison with ReactNative • Testing Library / Navigation / State Management
 Widget Library • Direct support for Fuchsia
5. What makes me Happy by working with Flutter • Dart is a strict typed language, no additional tools like TypeScript needed • Large and customizable Widget library for Material Design • Nice Plugin support for the biggest IDE’s like VSCode, Android Studio or IntelliJ • Performant Hot Reloading and Debug Tools for
 Grid’s / FPS / Memory Usage • Animations are simple to implement and with over 60 FPS very smooth
6. What makes me Happy by working with Flutter • Works very well with Streams and Futures (Promises) • Dart is easy to learn • A lot of resources to learn and improve your flutter skills • Many packages provided by Google • Flutter (Dart) has its own package manager pub • Different solutions for State Management like Provider, Redux, BLoC, ScopedModel • Consistent API conventions over many different packages
7. Dart / Flutter specific things • Promises are called Futures in Dart (for any reason…) • Components are so called Widgets. They are very similar to class based components in React • Alternate (easier) way for named arguments in comparison to the object and destructuring way in JS • Default language support for decorators like @required • Dart is strict typed but the initial value of each type is null • Everything started with _ is private scoped
8. How it looks like • A new created app looks like … • Default Material UI • Simple StateManagement with setState • Basic AppBar and FloatingActionButton • And the Code … Demo Time!
9. Who already using it? • Reflecty (Journal for Happiness)
 (Changed in 2018 from React Native to Flutter) • Alibaba (Web Shop) • Abbey Road Studios (Recording Studios) • Dream11 Fantasy Sports App • BMW (in development) • A Short overview: 
 https://www.youtube.com/watch?v=REJDzio_h7o
10. Getting started • Official Flutter documentation:
 https://flutter.dev/docs/get-started/install • Highly recommend the Flutter YouTube Channel
 https://www.youtube.com/channel/UCwXdFgeE9KYzlDdR7TG9cMw • It includes Widget representations (Widget of the Week) • Guides and Explanations and Companies how use flutter and why they use it • Many talks from different conferences
11. Getting started • Some Guide Channels who are focused on Flutter • Fireship
 https://www.youtube.com/channel/UCsBjURrPoezykLs9EqgamOA • Reso Coder
 https://www.youtube.com/channel/UCSIvrn68cUk8CS8MbtBmBkA • FilledStacks
 https://www.youtube.com/channel/UC2d0BYlqQCdF9lJfydl_02Q • MTECHVIRAL
 https://www.youtube.com/channel/UCFTM1FGjZSkoSPDZgtbp7hA