Flutter 알아보기
Flutter 소개
Flutter는 Google에서 출시하고 오픈 소스로 만든 모바일 애플리케이션 개발 프레임 워크로, 크로스 플랫폼, 고 충실도 및 고성능에 중점을 둡니다. 개발자는 iOS 및 Android 플랫폼에서 동시에 실행되는 코드 세트 인 Dart 언어를 통해 앱을 개발할 수 있습니다. Flutter는 풍부한 구성 요소와 인터페이스를 제공하며 개발자는 Flutter에 네이티브 확장을 빠르게 추가 할 수 있습니다. 동시에 Flutter는 네이티브 엔진을 사용하여 뷰를 렌더링하므로 의심 할 여지없이 사용자에게 좋은 경험을 제공합니다.
크로스 플랫폼 셀프 드로잉 엔진
Flutter는 WebView 나 운영 체제의 기본 컨트롤을 사용하지 않기 때문에 모바일 애플리케이션을 빌드하는 데 사용되는 대부분의 다른 프레임 워크와 다릅니다. 대신 Flutter는 자체 고성능 렌더링 엔진을 사용하여 위젯을 그립니다. 이는 Android 및 iOS에서 UI의 일관성을 보장 할뿐만 아니라 기본 컨트롤에 대한 의존성으로 인한 제한 및 높은 유지 관리 비용을 방지합니다.
Flutter는 Skia를 2D 렌더링 엔진으로 사용합니다. Skia는 Google의 2D 그래픽 처리 라이브러리입니다. 여기에는 글꼴, 좌표 변환, 고성능 및 간결한 성능의 비트 맵이 포함되어 있습니다. Skia는 크로스 플랫폼이며 매우 친숙한 API를 제공합니다. 현재 둘 다 Google 크롬과 Android는 Skia를 그리기 엔진으로 사용합니다. Android 시스템에는 Skia가 내장되어 있으므로 Flutter는 APK (Android 애플리케이션 설치 패키지)를 패키징 할 필요가 없습니다. Skia는 APK에 포함되어 있지만 iOS 시스템에는 Skia가 내장되어 있지 않으므로 iPA를 구축 할 때 Skia를 함께 패키징해야합니다. 이것이 Flutter APP의 Android 설치 패키지가 iOS 설치 패키지보다 작은 주된 이유입니다.
고성능
Flutter의 고성능은 주로 두 가지로 보장되며, 첫째, Flutter APP는 Dart 언어로 개발되었습니다. JIT (Just-in-time compilation) 모드에서 Dart의 속도는 기본적으로 JavaScript와 동일합니다. 그러나 Dart는 AOT를 지원하며 AOT 모드에서 실행하면 JavaScript가 훨씬 뒤처집니다. 속도 증가는 높은 프레임 속도에서 뷰 데이터 계산에 매우 유용합니다. 둘째, Flutter는 자체 렌더링 엔진을 사용하여 UI를 그리며 레이아웃 데이터는 Dart 언어에 의해 직접 제어되므로 레이아웃 과정에서 JavaScript와 RN과 같은 Native간에 통신 할 필요가 없습니다. 이는 일부 슬라이딩 및 드래그 방식입니다. 슬라이딩 및 드래그 과정은 레이아웃 변경을 자주 발생하기 때문에 자바 스크립트는 레이아웃 정보를 Native와 지속적으로 동기화해야하는데, 이는 브라우저에서 DOM을 자주 운영 할 때 발생하는 문제와 동일합니다., 상당한 성능을 가져올 것입니다. 간접비.
Dart 언어로 개발
이것은 매우 흥미롭지 만 논란의 여지가있는 문제입니다. Flutter가 JavaScript 대신 Dart를 선택한 이유를 이해하기 전에 JIT와 AOT라는 두 가지 개념을 소개하겠습니다.
현재 프로그램을 실행하는 주요 방법은 정적 컴파일과 동적 해석의 두 가지입니다. 정적으로 컴파일 된 프로그램은 실행 전에 모두 기계 코드로 변환됩니다.이 유형은 일반적으로 AOT (Ahead of time) 또는 "사전에 컴파일 됨"이라고합니다. 해석 및 실행은 실행 중에 문장별로 번역하는 반면, 일반적으로이 유형입니다. 이 유형은 JIT (Just-in-time) 또는 "Just-in-time 컴파일"이라고합니다. AOT 프로그램의 대표적인 대표자는 C / C ++로 개발 된 애플리케이션으로 실행 전에 기계어 코드로 컴파일해야하는 반면 JavaScript, python 등과 같은 JIT의 대표자가 많습니다. 실제로 모든 스크립팅 언어는 JIT를 지원합니다. 방법. 그러나 JIT와 AOT는 프로그램 동작 모드를 의미하며 프로그래밍 언어와 강하게 관련이 없습니다. 일부 언어는 JIT 모드 또는 AOT 모드 (예 : Java 및 Python)에서 실행할 수 있으며 실행할 수 있습니다. 처음으로 프로그램을 실행하면 중간 바이트 코드로 컴파일 한 다음 나중에 실행하면 바이트 코드를 직접 실행할 수 있습니다. 어떤 사람들은 중간 바이트 코드가 기계 코드가 아니고 바이트 코드가 필요하다고 말할 수 있습니다. 프로그램 실행 중에 기계 코드로 동적으로 변환됩니다. 예, 이것은 잘못된 것은 아니지만 일반적으로 AOT인지 여부를 구별하는 표준은 실행 전에 코드를 컴파일해야하는지 여부를 확인하는 것입니다. 컴파일이 필요한 경우 , 컴파일 된 제품이 바이트 코드이든 기계 코드이든 상관없이 AOT에 속합니다. 여기에서 독자는 개념에 얽매일 필요가 없으며 독자가 원리를 이해하고 그 형태를 잊을 수있는 한 정신 전달을 목적으로 개념이 고안되었습니다.
이제 Flutter가 Dart 언어를 선택한 이유를 살펴 보겠습니다. 저자는 Flutter에 대한 공식 설명과 본인의 이해를 바탕으로 다음 사항을 요약합니다 (다른 크로스 플랫폼 프레임 워크는 JavaScript를 개발 언어로 사용하기 때문에 주로 Dart와 JavaScript를 비교합니다).
-
높은 개발 효율성
Dart 런타임과 컴파일러는 Flutter의 두 가지 주요 기능 조합을 지원합니다.
JIT 기반의 신속한 개발주기 : Flutter는 개발 단계에서 JIT 모드를 채택하여 모든 변경 사항을 컴파일하지 않고 개발 시간을 크게 절약합니다.
AOT 기반 릴리스 패키지 : Flutter는 릴리스 중에 AOT를 통해 효율적인 ARM 코드를 생성하여 애플리케이션 성능을 보장 할 수 있습니다. JavaScript에는이 기능이 없습니다.
-
고성능
Flutter는 부드럽고 충실한 UI 경험을 제공하는 것을 목표로합니다. 이를 위해 Flutter는 각 애니메이션 프레임에서 많은 양의 코드를 실행할 수 있어야합니다. 즉, 프레임을 떨어 뜨리는주기적인 멈춤없이 고성능을 제공 할 수있는 언어가 필요하다는 것을 의미하며, Dart는이 시점에서 JavaScript보다 더 잘할 수있는 AOT를 지원합니다.
-
빠른 메모리 할당
Flutter 프레임 워크는 기능적 스트림을 사용하므로 기본 메모리 할당 자에 크게 의존합니다. 따라서 사소한 작업을 효과적으로 처리 할 수있는 메모리 할당자를 갖는 것이 매우 중요합니다.이 기능이없는 언어에서는 Flutter가 효과적으로 작동하지 않습니다. 물론 Chrome V8의 자바 스크립트 엔진도 메모리 할당에서 좋은 성과를 거두었습니다. 실제로 Dart 개발팀의 많은 구성원이 Chrome 팀 출신이므로 Dart는 메모리 할당에서 JavaScript보다 이점으로 사용할 수 없습니다. Flutter Say의 경우 이러한 기능이 필요하며 Dart는이를 충족합니다.
-
형식 안전성
Dart는 유형이 안전한 언어이고 정적 유형 감지를 지원하기 때문에 컴파일 전에 일부 유형의 오류를 발견 할 수 있으며 잠재적 인 문제를 제거 할 수 있으며 이는 프런트 엔드 개발자에게 더 매력적일 수 있습니다. 대조적으로 JavaScript는 약한 유형의 언어이므로 JavaScript 코드에 정적 유형 감지를 추가하는 많은 확장 언어와 도구가 Microsoft의 TypeScript 및 Facebook의 Flow와 같은 프런트 엔드 커뮤니티에 나타났습니다. 대조적으로, Dart 자체는 정적 타이핑을 지원하는데, 이는 그것의 중요한 장점입니다.
-
Dart 팀은 당신 곁에 있습니다
눈에 띄지 않게 보일 수 있지만 매우 중요합니다. Dart 팀의 적극적인 투자 덕분에 Flutter 팀은 점점 더 편리한 지원을받을 수 있습니다. Flutter 공식 웹 사이트에서 "우리는 Flutter에서 Dart 사용을 개선하기 위해 Dart 커뮤니티와 긴밀히 협력하고 있습니다. 예를 들어, Dart를 처음 채택했을 때이 언어는 네이티브 바이너리 파일을 생성하기위한 툴체인을 제공하지 않았습니다 (예측 가능한 고성능을 달성하는 데 큰 도움이되었습니다).하지만 이제 Dart 팀이 Flutter를 위해 특별히 제작했기 때문에 구현되었습니다. 마찬가지로 Dart The VM은 이전에 처리량에 최적화되었지만 이제 팀은 VM의 지연 시간을 최적화하고 있으며 이는 Flutter의 워크로드에 더 중요합니다. "
요약하자면
이 섹션에서는 Flutter의 특징을 중심으로 소개하고 있는데, 이해가 잘 안되는 부분이 있다고 생각되 시더라도 걱정하지 마세요. 앞으로 Flutter의 세부 내용을 이해 하셨으니 되돌아 보면 더 깊은 경험을하실 수있을 것입니다.
Flutter 프레임 구조
이 섹션에서는 독자에게 전반적인 인상을주기 위해 Flutter 프레임 워크에 대한 전반적인 소개를 먼저 제공합니다. 이는 초보자에게 매우 중요합니다. 한꺼번에 Flutter에 뛰어 들면지도가없는 사막에있는 사람처럼 느껴지고, 오아시스를 찾을 수 있어도 다음 오아시스가 어디 있는지 알 수 없습니다. 따라서 우리가 어떤 기술을 배워도 명확한 "지도"가 있어야하며, 우리의 학습 과정은 세부 사항에 갇히지 않고 "눈에 띄지 않게" "그림에 따라 찾아내는 것"입니다. . " 집에 더 가까이 가서 Flutter에서 공식적으로 제공 한 프레임 다이어그램을 살펴 보겠습니다.
Flutter 프레임 워크
이것은 기본 라이브러리 세트를 구현하는 순수한 Dart SDK입니다. 아래에서 위로 간단히 소개하겠습니다.
-
하단의 두 레이어 (Foundation and Animation, Painting, Gestures)는
dart:uiFlutter 엔진에 의해 노출되는 기본 UI 라이브러리 인 Flutter 의 패키지에 해당하는 Google의 일부 동영상에서 dart UI 레이어로 병합되어 애니메이션, 제스처 및 그리기 능력. -
렌더링 레이어,이 레이어는 추상 레이아웃 레이어이며, 다트 UI 레이어에 따라 달라지며, 렌더링 레이어는 UI 트리를 구축하고 UI 트리가 변경되면 변경된 부분을 계산 한 다음 UI 트리를 업데이트하고 마지막으로 UI 화면에 트리를 그리는 과정은 React의 가상 DOM과 유사합니다. Rendering 레이어는 Flutter UI 프레임 워크의 핵심 부분이라고 할 수 있습니다. 각 UI 요소의 위치와 크기를 결정하는 것 외에도 좌표 변환 및 그리기 (기본 dart : ui라고 함)를 수행합니다.
-
Widgets 레이어는 Flutter에서 제공하는 기본 구성 요소 라이브러리 세트입니다. 기본 구성 요소 라이브러리 외에도 Flutter는 두 가지 비주얼 스타일 구성 요소 라이브러리 인 Material과 Cupertino를 제공합니다. 그리고 Flutter가 개발 한 대부분의 시나리오는이 두 레이어를 다루고 있습니다 .
Flutter 엔진
이것은 Skia 엔진, Dart 런타임, 텍스트 조판 엔진 등을 포함하는 순수한 C ++ SDK입니다. 코드 dart:ui라이브러리를 호출하고 결국 엔진 레이어를 호출하고 논리적 사실을 그립니다.
요약하자면
Flutter 프레임 워크 자체는 좋은 레이어드 디자인을 가지고 있습니다.이 섹션은 독자들에게 Flutter의 전체 프레임 워크에 대한 일반적인 인상을주는 것을 목표로합니다. 지금까지 독자들은 Flutter에 대한 초기 인상을 가지고 있다고 믿습니다. 공식적으로 시작하기 전에 우리는 여전히해야합니다 Flutter의 개발 언어 인 Dart를 살펴 보겠습니다.
Flutter 배우는 방법
이 섹션에서는 학습 제안을 제공하고 저자의 Flutter 학습 경험을 공유하여 학습 효율성을 높이고 불필요한 구덩이를 피할 수 있기를 바랍니다.
자원
-
공식 웹 사이트 : Flutter 공식 웹 사이트의 리소스를 읽는 것이 빠르게 시작하는 가장 좋은 방법입니다. 동시에 공식 웹 사이트는 Flutter의 최신 개발에 대해 배울 수있는 곳이기도합니다. Flutter는 아직 빠른 개발 단계에 있으므로, 독자들은 새로운 트렌드가 있는지 수시로 공식 웹 사이트를 확인하는 것이 좋습니다.
-
소스 코드 및 코멘트 : 소스 코드 코멘트는 Flutter 학습을위한 첫 번째 문서로 사용되어야합니다. Flutter SDK의 소스 코드는 오픈 소스이며 주석이 매우 상세합니다. 또한 많은 예제가 있습니다. 사실, 공식 Flutter SDK 문서는 주석을 통해 생성됩니다. 주석과 결합 된 소스 코드는 대부분의 문제를 해결하는 데 도움이 될 수 있습니다.
- Github : 발생한 문제가 StackOverflow에서 답변되지 않으면 github flutter 프로젝트로 이동하여 문제를 제기 할 수 있습니다.
- 갤러리 소스 코드 : 갤러리는 Flutter의 공식 샘플 앱으로 다양한 예제가 포함되어 있으며 독자는 온라인에서 다운로드하여 설치할 수 있습니다. Gallery의 소스 코드는 Flutter 소스 코드의 "examples"디렉토리에 있습니다.
커뮤니티
- StackOverflow : StackOverflow에 대해 들어 본 적이 없다면 현재 세계 최대의 프로그래머 Q & A 커뮤니티이며 가장 활발한 Flutter Q & A 커뮤니티이기도합니다. StackOverflow를 사용하는 전 세계의 Flutter 사용자 외에도 Flutter 개발 팀의 구성원이 질문에 자주 답변합니다.
- Flutter Chinese 웹 사이트 커뮤니티 : Flutter Chinese 웹 사이트 (https://flutterchina.club)는 중국 웹 사이트를 운영하고 있으며 현재 가장 큰 중국 리소스 커뮤니티입니다. 문서 번역, 오픈 소스 프로젝트 및 Flutter 공식 웹 사이트 사례를 제공합니다. 가입 신청뿐만 아니라 조직의 입구입니다.
- Nuggets : Nuggets의 Flutter 홈페이지에는 현재 독자들이 직접 찾아 볼 수있는 많은 블로그 게시물이 있습니다.