GDG DevFest Suwon 2018 - Flutter 101 (Jake Yoon)

GDG DefFest Suwon Flutter 101 - Jake Yoon

Transcript

1. Jake Yoon, GDG Suwon yjaeseok Suwon Flutter 101 a.k.a. Flutter for Android Devs
2. Goal of Session 1. 요즘 모바일 개발 트랜드 알기 2. Flutter는 그래서 등장했구나 3. Flutter 데모를 보며, 실제로 쓰면 이렇구나 Flutter 101 a.k.a. Flutter for Android Devs Suwon
3. Current mobile landscape Flutter 101 a.k.a. Flutter for Android Devs Suwon
4. Global App Economy Growing from $1.31tn to $6.35tn Between 2016 and 2021 Source: App Annie Estimated / Forecasts. Numbers include mobile commerce, app store, in-app purchases. $0.22tn ‘17 revenue of year $1.53th ‘17 GDP of South Korea * 28 * 4 Flutter 101 a.k.a. Flutter for Android Devs Suwon
5. Number of mobile app downloads worldwide In 2017, 2018 and 2022 Source: App Annie Forecast 2017-2022, Statista 15% ▲ 25% ▲ Flutter 101 a.k.a. Flutter for Android Devs Suwon
6. User Session Length: Apps vs. Mobile Web Source: comScore Mobile App Report, U.S., Age 18+, June 2017 Apps Mobile Web 186.9 Average minutes per visitor 15.7 10x ▲ Flutter 101 a.k.a. Flutter for Android Devs Suwon
7. What boosts app usage ? Source: Think with Google 63% Simplification, design and UX boost app usage Make my life easier 63% Clear instructions for using app 57% Appealing design and aesthetic 57% Consistent experience on multiple devices 47% Always has new content 43% Brand I interact with offline Flutter 101 a.k.a. Flutter for Android Devs Suwon
8. Suwon 다시 정리해보면 … - 모바일 시장은 아직 끝나지 않았고, - 모바일 웹 보다는 네이티브 앱을 더 오랜시간 사용하며, - 앱을 더 사용하게 하려면 디자인을 심플하게 해야 한다. Flutter 101 a.k.a. Flutter for Android Devs Suwon
9. 돌발 퀴즈 33개의 상자 중에 정답을 맞춰주세요. Source: AppsFlyer Suwon Flutter 101 a.k.a. Flutter for Android Devs Suwon
10. 1 9 17 25 33 2 10 18 26 3 11 19 27 4 12 20 28 5 13 21 29 6 14 22 30 7 15 23 31 8 16 24 32 확률에 도전하세요. (1) Suwon Flutter 101 a.k.a. Flutter for Android Devs Suwon
11. Flutter 101 a.k.a. Flutter for Android Devs Suwon Suwon 1 9 17 25 33 2 10 18 26 3 11 19 27 4 12 20 28 5 13 21 29 6 14 22 30 7 15 23 31 8 16 24 32 정답 : 1
12. Suwon 1 9 17 25 33 2 10 18 26 3 11 19 27 4 12 20 28 5 13 21 29 6 14 22 30 7 15 23 31 8 16 24 32 확률에 도전하세요. (1) Flutter 101 a.k.a. Flutter for Android Devs Suwon
13. Flutter 101 a.k.a. Flutter for Android Devs Suwon Suwon 1 9 17 25 33 2 10 18 26 3 11 19 27 4 12 20 28 5 13 21 29 6 14 22 30 7 15 23 31 8 16 24 32 정답 : 1
14. Suwon 3% of new mobile app users remain active after 30 days Source: AppsFlyer Flutter 101 a.k.a. Flutter for Android Devs Suwon
15. Source: CommitStrip http://www.commitstrip.com/en/2014/08/18/the-dilemna-of-mobile-apps-development/ The dilemma of Mobile apps development Flutter 101 a.k.a. Flutter for Android Devs Suwon
16. Source: Slideshare https://www.slideshare.net/abueldahab/google-flutter-and-why-does-it-matter Flutter 101 a.k.a. Flutter for Android Devs Suwon
17. Source: Slideshare https://www.slideshare.net/abueldahab/google-flutter-and-why-does-it-matter Flutter 101 a.k.a. Flutter for Android Devs Suwon
18. Source: Slideshare https://www.slideshare.net/abueldahab/google-flutter-and-why-does-it-matter Flutter 101 a.k.a. Flutter for Android Devs Suwon
19. Source: Slideshare https://www.slideshare.net/abueldahab/google-flutter-and-why-does-it-matter Flutter 101 a.k.a. Flutter for Android Devs Suwon
20. Suwon 다시 한번 더 정리해보면 … - 모바일 시장은 아직 끝나지 않았고, - 모바일 웹 보다는 네이티브 앱을 더 오랜 시간 사용하며, - 앱을 더 사용하게 하려면 디자인을 심플하게 해야 한다. - 새롭게 출시된 앱이 30일 뒤에도 사용될 확률은 3% 이다. - 네이티브로 만들면 너무 많은 것을 유지보수 해야 하고, 네이티브가 아니면 제대로 만들기 어렵다. - 크로스플랫폼이 대세이다. Flutter 101 a.k.a. Flutter for Android Devs Suwon
21. Suwon 다시 한번 더 정리해보면 … 즉, 사용자는 웹 보단 네이티브 이면서, 디자인도 심플한 앱을 원하며 모바일 개발자는 너무 많은 것을 유지보수 하지 않아도 되는 것을 원한다 Flutter 101 a.k.a. Flutter for Android Devs Suwon
22. What is Flutter? Flutter 101 a.k.a. Flutter for Android Devs Suwon
23. - 구글의 모바일 SDK - 크로스 플랫폼을 위한 모바일 UI 프레임워크 - 언어 : 다트(Dart) - 오픈소스 프로젝트 (https://github.com/flutter) What is Flutter? Flutter 101 a.k.a. Flutter for Android Devs Suwon
24. 네이티브 성능 빠른 속도의 개발 풍부하고 아름다운 UI What makes Flutter unique? Flutter 101 a.k.a. Flutter for Android Devs Suwon
25. 빠른 속도의 개발 Hot Reload 를 통해 매우 짧은 시간 내에 코드 반영 결과를 확인해볼 수 있음 Flutter's hot reload helps you quickly and easily experiment, build UIs, add features, and fix bugs faster. Experience sub-second reload times, without losing state, on emulators, simulators, and hardware for iOS and Android. Flutter 101 a.k.a. Flutter for Android Devs Suwon
26. 빠른 속도의 개발 Android Studio, IntelliJ, Visual Studio Code 를 IDE로 지원하여 보다 익숙한 환경에서 빠르게 시작 가능 Flutter 101 a.k.a. Flutter for Android Devs Suwon
27. 풍부하고, 아름다운 UI Delight your users with Flutter's built-in beautiful Material Design and Cupertino (iOS-flavor) widgets, rich motion APIs, smooth natural scrolling, and platform awareness. Google의 머터리얼 디자인과 iOS향 쿠퍼티노 위젯을 제공하여, 풍부하고 아름다운 UI를 쉽게 구현 가능 Flutter 101 a.k.a. Flutter for Android Devs Suwon
28. 네이티브 성능 Flutter’s widgets incorporate all critical platform differences such as scrolling, navigation, icons and fonts to provide full native performance on both iOS and Android. Scrolling, Navigation, Icons, Fonts와 같은 중요한 모든 기능을 네이티브의 성능으로 제공한다. Flutter 101 a.k.a. Flutter for Android Devs Suwon
29. 이 외에도.. - Flutter는 브릿지가 필요하지 않다. - Google이 주도하고 있다. Flutter 101 a.k.a. Flutter for Android Devs Suwon
30. Dart - 구글이 개발한 웹 프로그래밍 언어 - AOT (Ahead Of Time), JIT (Just In Time) 지원 - React 관련 기능 (Future, Stream) 제공 - 오픈 소스 프로젝트 (https://github.com/dart-lang) Flutter 101 a.k.a. Flutter for Android Devs Suwon
31. Why Flutter Uses Dart - AOT와 JIT을 지원하기 때문에 (생산성△) - Dart는 60FPS의 Animation을 구현하기에 적합했기 때문에 (성능△) - Layout이 하나의 코드로 통합 되어있어, 모든 코드를 한 눈에 볼 수 있기 때문에 (?!) - Dart는 Java, C# 등과 유사하여 개발자가 쉽게 배울 수 있기 때문에 Source: Hackernoon https://hackernoon.com/why-flutter-uses-dart-dd635a054ebf Flutter 101 a.k.a. Flutter for Android Devs Suwon
32. Flutter for Android Devs Flutter 101 a.k.a. Flutter for Android Devs Suwon
33. What is the equivalent of a View in Flutter? - In short, the equivalent of a View is a Widget. - Everything is a Widget. Flutter 101 a.k.a. Flutter for Android Devs Suwon
34. Everything is a Widget. Source: flutter.io https://flutter.io/docs/resources/technical-overview Flutter 101 a.k.a. Flutter for Android Devs Suwon
35. Source: flutter.io https://flutter.io/docs/reference/widgets Flutter 101 a.k.a. Flutter for Android Devs Suwon
36. Flutter 101 a.k.a. Flutter for Android Devs Suwon
37. - Stateless Widget is immutable and not updated directly. - for update we should use StatefulWidget. Source: Slideshare https://www.slideshare.net/abueldahab/google-flutter-and-why-does-it-matter What is the equivalent of a View in Flutter? Flutter 101 a.k.a. Flutter for Android Devs Suwon
38. StatelessWidget - 고정된 Text나 Icon, Button 처럼 더이상 갱신이 되지 않는 Widget Flutter 101 a.k.a. Flutter for Android Devs Suwon
39. class MyStatelessWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Text( ”I like Flutter!”, style: TextStyle(fontWeight: FontWeight.bold), ); // Text } } Flutter 101 a.k.a. Flutter for Android Devs GDG Suwon StatelessWidget
40. StatefulWidget - 컨텐츠가 변경되거나 사용자의 Interaction등으로 인해 다시 그려져야 하는 Widget - createState를 재 정의해서 State를 할당 - setState를 호출해서 state의 변경을 알림 Flutter 101 a.k.a. Flutter for Android Devs Suwon
41. class MyStatefulWidget extends StatefulWidget { @override State<StatefulWidget> createState() => MyWidgetState(); } class MyWidgetState extends State<MyStatefulWidget> { … // next page } Flutter 101 a.k.a. Flutter for Android Devs GDG Suwon StatelessWidget
42. class MyWidgetState extends State<MyStatefulWidget> { String textToShow = “I like Flutter!”; void updateText() { setState(() { textToShow = “Flutter is Awesome!”; } } @override Widget build(BuildContext context) { return Text( textToShow ); // Text } Flutter 101 a.k.a. Flutter for Android Devs GDG Suwon StatelessWidget
43. How do I lay out my widgets? Where is my XML layout file? - In short, there is no XML file in Flutter. - In Flutter you write your layouts with a widget tree. Flutter 101 a.k.a. Flutter for Android Devs Suwon
44. @override Widget build(BuildContext context) { return Scaffold ( appBar : AppBar ( title : Text(“Sample App”); ), // AppBar body : Center ( child : MaterialButton ( onPressed : () {}, child : Text(“Hello”); padding : EdgeInsets.only(left: 10.0, right: 10.0), ), // MaterialButton ), // Center ); // Scaffold } Flutter 101 a.k.a. Flutter for Android Devs GDG Suwon
45. Suwon Let’s start Flutter with Demo Source: Let's live code in Flutter (DartConf 2018)
46. Suwon Q & A
47. Suwon Thank you! Jake Yoon, GDG Suwon yjaeseok