Learn with the rising cross-platform flutter

Transcript

1. 떠오르는 크로스 플랫폼 Flutter 겉핥기로 알아보기 BeomJobs bsjo@teamblind.com
2. 1. What is Flutter ?? 2. Performance in Flutter 3. Code Style Contents
3. 1. What is Flutter ??
4. Google에서 새롭게 선보인 크로스 플랫폼 모바일 앱 개발 프레임워크 2018.02 Mobile World Congress에서 첫 발표됨 모바일 크로스플랫폼 시장의 떠오르는 강자! Flutter의 등장
5. Cross Platform 대표적인 모바일 크로스 플랫폼 하나의 코드로 동시에 Android, iOS 등 개발 가능
6. Mobile Cross Platform Trend 모바일 크로스플랫폼 시장에서의 Flutter는 ???
7. Google Trend - https://trends.google.com/trends/explore?date=today%205-y&q=Flutter,React%20Native,Xamarin,Ionic%20Framework
8. CrossPlatform Live Star Race - https://jhbitencourt.github.io/stars-race/#/
9. Trend 모바일 개발자들에게 많은 관심을 얻으며 꾸준하게 성장하고 있음!
10. 사용하는 언어 2011년 Google이 JavaScript를 대체하기 위해 만든 웹프로그래밍 언어 하지만 ..출시 후 줄곧 외면받아왔음 ❌ Dart
11. Dart의 장점 JavaScript처럼 동적 타입을 이용할 수 있다. 다만 Dart는 강력한 정적 타입 시스템을 지원하는 언어이기 때문에, 동적 타입을 일부러 사용할 이유는 없다. Java나 C# 같은 클래스 기반 객체지향을 지원한다. JavaScript에는 var 전위자의 스코프 함정, this 레퍼런스의 함정, 형변환 함정들이 있고, Dart는 JavaScript에 있는 함정들을 모두 제거하였다. 다른 언어처럼 문자열에 변수와 계산식을 포함시킬 때 매우 편하게 넣을 수 있다. JavaScript로 컴파일이 가능하다!!! 현재 모든 웹 브라우저에서 돌아가게 만들 수
12. 개발자들에게 외면받은 언어 이러한 장점들이 있었지만 왜 외면받았을까??
13. 왜 dart는 외면받았을까? ❗JS를 대체하기 위해서라면 TypeScript등의 다른 언어를 사용할 수 있었음 ❗Dart는 언어적 특성이 그렇게 세련되어보이지 않았음 ❗Dart 만으로 이루어진 구현체가 마땅히 없었음 ❗웹 브라우저에서 바로 Dart가 동작하는 것도 아니었기 때문에 굳이 Dart라는 언어를 배울 필요는 없었음
14. 최악의 언어 ?? 2018년 배우지않아도 될 프로그래밍 언어 1위로 선정.. Codementor- https://www.codementor.io/blog/worst-languages-to-learn-3phycr98zk
15. Flutter 베타 발표 후 2019년 같은 설문에서 14등으로 떨어진 쾌거??를 이루었습니다 Codementor - https://www.codementor.io/blog/worst-languages-2019-6mvbfg3w9x
16. Flutter는 왜 dart를 선택하였을까? 단지 구글에서 개발한 언어라서??
17. 빠른 개발 (핫리로드) 유저의 사용성 초당 60프레임의 훌륭한 애니메이션 선언적인 방식의 레이아웃 Flutter의 핵심기능을 구현하기에 적합
18. 빠른개발 + 유저의 사용성 JIT, AOT 컴파일 방식을 둘 다 지원
19. JIT 컴파일러는 프로그램 실행중에 즉시 컴파일이 가능 코드 수정 때마다 발생하는 빌드 시간을 줄여서 더 빠르고 편한 개발 가능 (Hot Reload) 개발중에는 JIT(Just-In-Time)를 사용
20. Hot Reload - https://flutter.dev/docs/development/tools/hot-reload
21. 실제로 배포할 때에는 AOT 컴파일로 설치시에 미리 컴파일하여 런타임에서 바로 동작하는 코드를 만들어 빠름 실제 배포시 AOT(Ahead-Of-Time) 사용
22. 개발 중 실 배포시 개발자의 생산성 ↗ 유저의 사용성↗‍♂ 컴파일 방식으로 두마리 토끼를 잡다
23. 초당 60프레임의 훌륭한 애니메이션
24. Dart의 여러가지 많은 장점으로 Flutter는 Dart언어를 사용하게됨
25. 앞으로의 Flutter의 방향성 Just ,One Code Base!!
26. 앞으로의 Flutter는 Google이 개발중인 차기 OS Fuchsia의 메인 개발환경
27. 많은 잠재력을 가진 Flutter
28. 2. Performance in Flutter
29. Flutter의 구조
30. Flutter의 구조 Include inside the app App에서 직접위젯을 그림
31. Flutter React Native Framework + Engine
32. Flutter Performance 프레임워크에서 직접 랜더링하기 구조적으로 빠르다
33. Material in iOS Cupertino in Andorid
34. 카운터 앱을 통한 성능 테스트 Performance Test
35. Performance Test Galaxy Note 10+ 기준 / 2분간 / 1초에 5번 + 누름 / Android Studio Profiler C P U % SEC Native Flutter React Native 10 6 6 10 20 4 5.3 10.1 30 3.8 5.6 12.4 40 4 5.2 11.3 50 3.9 5.5 10.1 60 4.2 5.6 11.2 70 3.9 6 13.1 80 4.5 5.1 12 90 2.8 6 11 100 4 6 11.3 110 3.9 6 11 120 3.4 5 11.2 avg 4.03333 3333 5.60833 3333 11.225
36. Performance Test 타이머 앱을 통한 성능 테스트
37. CPU 27% CPU 15% CPU 16% Examining performance differences between Native, Flutter, and React Native mobile development. - https://thoughtbot.com/blog/examining-performance-differences-between-native-flutter-and-react-native-mobile-development-take-two Flutter React Native Native PIXEL 기준 / 1 분15초 / Android Studio Profiler
38. Flutter Performance 네이티브앱에 견줄만한 성능!
39. 3. Code Style
40. Flutter의 UI를 작성하는 방법 모든것은 위젯이다! 위젯의 조합을 통해 어플리케이션을 만드는 구조 (정렬, 패딩, 마진등도 모두 위젯)
43. Flutter, 선언적인 방법의 UI 작성 명령 형 선언 형
44. 선언적인 방법의 UI 작성의 장점 가독성 재사용성 위젯의 상태는 항상 일정하기 때문에 다른 시스템에 영향을 주지 않음
45. Sample
52. Android , iOS, Web, Desktop 모두 동작할 수 있는 Flutter
54. Flutter의 장점 ✨ 생산성 향상 ✨ 빠른개발 ✨ 표현력있고 유연한 UI,애니메이션 ✨ Native급 Performance
55. Flutter의 단점 공식문서는 잘 되어있지만 출시된지 얼마되지않아 레퍼런스가 부족함 기본적인 플러그인이 아직 불안정함 정식버전이아닌 pre버전( 0 버전때)임
57. 감사합니다