새소식

반응형
App/Flutter

[Flutter] Architectural layers 알아보기

  • -
반응형

2023-12-19


사진: Unsplash 의 le Sixième Rêve


1.  Concept

 

플러터는 확장 가능한 레이어 시스템으로 구성되어 있다.

 

이는 플러터의 레이어가 각각의 독립적인 라이브러리 형태로 존재하고 이는 자신이 속해 있는 레이어에 의존하고 있다고 볼 수 있다. 또한 해당 레이어들은 하위에 레이어 직접적인 접근권한을 가지고 있지 않으며, 모든 프레임워크 레벨들은 옵션적이거나 교체 가능하게 디자인되어 있다.

https://docs.flutter.dev/resources/architectural-overview

 

플러터는 기본적으로 어떠한 native application(ios, android) 에서든지 문제없이 동작할 수 있도록 패키징되어 시스템위에서 동작하게 된다.


2. Embedder Layer

 

우리가 처음 flutter 프로젝트를 생성할때 Embedder level 에서 다양한 플랫폼에 대한 Embedder 레이어가 Flutter에서 즉시 제공된다.(프로젝트 안에 있는 android, ios, web, windows 와 같은 폴더들)Embedder layer 는 실행될때 Engine layer를 라이브러리로 사용한다.

 

Embedder는 기본 운영 체제와의 통신을 활성화하고 UI용 스레드를 획득하며 텍스처를 제공한다. Embedder는 수명 주기 관리, 입력 제스처, 창 크기 조정 및 플랫폼 메시지를 관리하는 책임을 가진다.


3. Engine Layer

 

플러터의 엔진(C/C++ 로 만들어짐)은 새 프레임을 그려야 할 때마다 합성된 장면을 래스터화하는 역할을 담당한다. Engine Layer 는  dart:ui 를 통해 드러나며, 그래픽 / 텍스트 레이아웃 / 네트워크입출력 / 접근 권한 / 플러그인  / Dart 런타임 및 컴파일 툴체인 과 같은 저수준 API 를 제공하는 역할을 한다.


4. Framework Layer

 

Framework Layer 는 실제 개발자가 일반적으로 상호작용을 하는 Layer이다.

 

간단히 해당 레이어의 구성요소에 대한 정의를 살펴보면,

  • foundational classes, animation, painting, gestures  들은 추상화를 제공하는 블록 서비스
  • rendering layer는 레이아웃 처리를 위한 추상화를 제공하며, 렌더링 가능한 객체의 트리를 구축할 수 있다. 또한 변경 사항을 반영하기 위해 트리가 레이아웃을 자동으로 업데이트하여 이러한 개체를 동적으로 조작할 수 있게 된다.
  • widgets layer 는 구서의 추상화이다. 각 rendering 개체에는 widgets layer에 해당하는 클래스가 있으며, widgets layer을 사용하면 재사용할 수 있는 클래스 조합을 정의할 수 있다. 이는 반응형 프로그래밍 모델이 적용되는 계층이다.
  • Material 및 Cupertino 라이브러리는 widgets layer를 사용하여 Material 또는 iOS 디자인 언어를 구현하는 포괄적인 컨트롤 세트를 제공한다.

 

각각의 요소들은 조금 더 자세히 다음에 다루어 보도록 하겠다.


5. 출처

 

https://docs.flutter.dev/resources/architectural-overview

 

Flutter architectural overview

A high-level overview of the architecture of Flutter, including the core principles and concepts that form its design.

docs.flutter.dev

https://betterprogramming.pub/why-is-flutter-fast-part-2-layered-architecture-c8954b03e994

 

Why is Flutter Fast?— Part 2: Layered Architecture

Know how the pixel-driven architecture makes Flutter fast

betterprogramming.pub


메인 이미지 출처 : 사진: Unsplashle Sixième Rêve

반응형
Contents

포스팅 주소를 복사했습니다

이 글이 도움이 되었다면 공감 부탁드립니다.