[Flutter] Flutter Forward at I/O 2023 정리

yeahsilver·2023년 6월 22일

dart flutter flutter_forward

핵심 주제 4가지

Focus on developer experience (개발자 경험 집중)
Breakthrough graphics performance (혁신적 그래픽 성능 제공)
Seamless integration for web and mobile (매끄러운 웹과 앱 통합)
Early to new and emerging architectures (새로운 아키텍쳐 조기 도입)

Focus on developer experience

DevTools

Material 3에 최적화
Perfetto 기반 trace viewer 지원
등등….

Flutter

: 개발자의 생산성을 높이기 위한 여러 기능 추가

Material 3 지원 향상
- 알고리즘 색 구성표 지원
- M3(Material 3) 드롭다운 메뉴 지원
- M3 네비게이션 탐색 창 지원
- M3 Tab Bar ⇒ 보조탭 지원 (이중 탭바 구현 가능!)
- M3 Snack Bar
- M3 SearchBar ⇒ interactive한 검색을 쉽게 구현 가능
iOS/macOS 지원 향상
- 편집 가능한 텍스트 위젯에 맞춤범 검사 지원
- Cupertino Checkbox Wiget 지원
- 무선 디버깅 제공
SLSA 레벨 1 지원 및 소프트웨어 공급 체인 보안
- OpenSSF (Open Source Security Founddation)에서 지정한 보안 및 취약성에 관한 요구조건 100% 만족
- Flutter와 Dart SDK ⇒ SLSA L1 레벨 달성
  - SLSA(Supply-chain Levels for Software Artifacts): 소프트웨어 보안 및 공급망 무결성을 개선하기 위한 보안 프레임워크
  - L1: 빌드 프로세스가 완전히 스크립트화 및 자동화 되어있어야하고 Provenance를 생성 할 수 있어야하는 레벨
    - Provenance: 빌드 프로세스, 최상위 레벨의 소스 및 의존성을 포함하여 artifacts가 어떤 방식으로 구축되었는지에 대한 정보를 가지고 있는 메타 데이터
  - SLSA 1에서의 Provenance의 경우 정보 위조와 같은 부분은 보호할 수 없지만 기본적인 수준의 코드 소스 식별 기능을 제공하며 취약성 관리에 도움을 줄 수 있음.

Dart3

100% null safety 제공 ⇒ 런타임 오류 감소 및 성능 개선

레코드가 있는 구조적 데이터, 구조 분해, 패턴 매칭 지원

Records
- 익명성, 불변성, 집계성을 가진 타입
- 다른 컬렉션 유형과 마찬가지로 여러 개체를 하나의 개체로 묶을 수 있음
- 차이점은, record의 경우 크기와 유형이 고정되어있음
```
(String, int, double, {int age, String name}) x =
     ("23", 0, 77.0, age: 20, name: "Doe");
 print(x.$2);
 print(x.name);
```

Pattern Matchings

컨텍스트, 패턴의 형태에 따라 값을 매칭, 분해 또는 두가지 모두 처리할 수 있도록 하는 구문

Multiple Returns

여러 값을 리턴하고 싶을 경우 사용

(double, double) getLocation(String place) {
	//...
	return (lat, long);
}

main() {
	var (lat, long) = getLocation("Mountain View");
}

Json Destructing

json을 특정 구조로 빠르게 매핑할 수 있도록 지원

if (json case {'movie': [String title, int length], 'cast': List<String> casts}) {
   print("Movie $title is $length hours long with the cast: $casts");
 } else {
   print("Invalid JSON");
 }

Control flow in Argument Lists

arguments를 positional parameter와 named parameter를 모두 지원하여 UI 코드를 더욱 간결하게 작성할 수 있도록 처리

처리 전

ListTile(
	leading: const Icon(Icons.weekend),
	title: const Text("Welcome"),
	enabled: hasNextStep,
	subtitle: hasNextStep ? const Text("Tap to advance") : null,
	onTap: hasNextStep ? () {advance(); } : null,
	trailing: hasNextStep ? null : const Icon(Icons.stop)
)

처리 후

ListTile(
	leading: const Icon(Icons.weekend),
	title: const Text("Welcome"),
	enabled: hasNextStep,
	**if(hasNextStep) ...(
		subtitle: const Text('Tap to advance'),
		onTap: () { advance(); }
	) else ... (
		trailing: const Icon(Icons.stop)
	)**
)

Usable Switches

아래의 항목을 통해 Switch문을 더욱 간결하게 작성할 수 있도록 도움

break문 제거

switch(charCode) {
	case slash: 
		if(nextCharCode == slash) {
			skipComment();
		} else {
			operator(charCode);
		}
	case star:
	case plus:
	case minus:
		operator(charCode);
	default: 
		if(charCode >= digit0 && charCode <= digit9) {
			number();
		} else {
			invalid();
		}
}

guard 문 추가

switch(charCode) {
	case slash **when nextCharCode == slash:**  // guard 문
		if(nextCharCode == slash) {
			skipComment();
		} else {
			operator(charCode);
		}

	case slash:
	case star:
	case plus:
	case minus:
		operator(charCode);
	default: 
		if(charCode >= digit0 && charCode <= digit9) {
			number();
		} else {
			invalid();
		}
}

논리 연산자 허용

switch(charCode) {
	case slash: 
		if(nextCharCode == slash) {
			skipComment();
		} else {
			operator(charCode);
		}
	case **star || plus || minus: // or 연산 허용**
		operator(charCode);

	default: 
		if(**charCode >= digit0 && <= digit9**) { // 단일 케이스로 묶음
			number(); 
		} else {
			invalid();
		}
}

switch를 표현식으로도 구현 가능

var token = switch (charCode) {
	slash when nextCharCode == slasn => skipComment(),
	slash || start || plus || minus => opertor(charCode)
	>= digit0 && digit9 => number()
	_ => throw invalid() 
};

Class modifier 지원

: 클래스 또는 mixin를 제어하는 역할

Class Modifier의 경우 클래스 또는 mixin이 정의되기 전 사용
enum, typedef, extension과 같은 다른 정의부와 함께 사용 불가

class notifier의 규칙은 라이브러리 외부에서 사용하는 경우에만 작동

	sealed	base	interface	final	mixin
외부 라이브러리에서 생성 가능 여부	x	o	o	o	o
외부 라이브러리에서 상속 가능 여부	x	o	x	x	o
외부 라이브러리에서 구현 가능 여부	x	x	o	x	o
Mixin 사용 가능 여부	x	x	x	x	o

Breakthrough graphics performance

iOS의 기본 그래픽 엔진이 impeller (속도와 성능을 높이기 위해 구축한 그래픽 렌더링 엔진) 로 변경 (android는 미지원)
- 기존의 Layered-architecture로 인해 시스템 일부를 제거(Skia 등)하고 교체(impeller)가 용이했다고함
iOS Gamut 지원 ⇒ sRGB보다 25%높은 디스플레이 P3 색 영역 활용 가능 사용방법: impeller 엔진을 사용하고 info.plist에 FLTEnableWideGamut 값을 true로 설정

Seamless integration for web, mobile desktop

Web

CanvasKit 렌더링 엔진의 사이즈를 1/3 가량 줄여 로딩 속도 개선
Tree shaking 기법으로 사용하지 않는 폰트의 사이즈를 99%까지 줄여 속도 개선
- Tree shaking: dead code 제거 기술
  - 프로그램의 모든 실행 프로세스의 경우 함수 호출 트리로 나타낼 수 있기에 호출되지 않은 함수의 경우 제거하는 방식으로 처리

Mobile & Desktop

Dart 코드만으로 native ads를 통합하고 커스터마이징 할 수 있음
Nlgen이라는 도구를 사용하여 Android API 데이터 바인딩을 자동으로 생성 후 Java / Kotlin 코드로 제공

Early to new and emerging architectures

Flutter에서의 WASM 사용

WASM (Web Assembly)

: 프로그래밍 언어를 컴파일하여 어느 브라우저에서나 빠르게 실행되는 바이너리 형식으로 바꾸어주는 기술

일반적으로 웹 어플리케이션을 개발하는 경우 WASM을 사용하게 되면 더 나은 성능을 보일 수 있음
여기서 WASM의 경우 가비지 컬렉션을 지원하지 않기 때문에, 가비지 컬렉션으로 처리되는 언어인 Dart에서 사용할 수가 없었음.
최근 WASM GC 표준이 구축 (WASM로 구축된 앱에서 가비지 컬렉션에 대한 접근 방법을 정의)
가비지 컬렉션 문제를 해결한 WASM GC를 활용하여 Flutter 성능을 높임

Reference

yeahsilver

Hello yeahsilver's world!

이전 포스트

[Dart] Object Oriented Programming - 다형성

다음 포스트