I:o extended'19 incheon에서 발표한 Flutter & beyond web 발표자료 입니다.

1. Flu$er &
Beyond Web
조성윤
ParkingBrother CTO
GDG Busan Organizer
@extJo

3. React Native
Flu$er
Ionic

4. Why?

5. Hot Reload 를 통해서 UI 를 작성
하거나, 기능을 추가하거나, 그리고
버그를 수정하는데 빠르고 쉽게 해
줍니다.
Flu$er can…

6. Flu$er has…
머테리얼 디자인 위젯과 쿠퍼티노 위젯을
내장하고 있으며, 강력한 성능의 Graphic
Engine을 통해서 Native에 가까운 성능을 냅니다.

7. Flu$er has…
하나의 코드 베이스를 통해서 다양한
플랫폼에 맞는 어플리케이션을
제작 할 수 있습니다.

9. Flu$er developed on…
가장 빠르게 성장하고있는 언어인
Da@로 개발합니다!
DaB 싫어하지 마세요 ㅠㅠ
DaB 2.0 좋습니다
소금 조금 친건 비밀

10. Declarative UI
// Imperative style
b.setColor(red)
b.clearChildren()
ViewC c3 = new ViewC(...)
b.add(c3)
// Declarative style
return ViewB(
color: red,
child: ViewC(...),
)

11. Everything is Widget

12. Widget Lifecycle
A single StatelessWidget can build
in many diVerent BuildContexts
A StatefulWidget creates a new State
object for each BuildContext

13. State<T> Lifecycle

14. Stateful Widget +
State Object

15. PlaNorm Channel
Native API 또는 3rd PaBy API를
호출하기 위해서 PlaNorm Channel 이용

16. System Overview - Mobile

17. Flu$er For Web

18. System Overview - Web

19. How to work Hummingbird
• 초기 Hummingbird는 모든 렌더링 대상을 HTML Elements 형태로 변환
• 꽤나 좋았으나, 그러면 기존 Flu_er API와 비교해서 큰 변화가 필요
• 접근방식을 HTML + CSS + Canvas 형태로 바꿈

20. How to work Hummingbird
• HTML + CSS 표현되는것은 그대로 표현
• pixelation의 염려가 없는 그림들은 DomCanvas로 구현
• pixelation이 일어나는 그림들은 BitmapCanvas로 구현.
• 그림의 크기 조정이 일어나면(pixelation), 그림의 크기에 맞춰서 캔버스의 크기도
변경 해 주어야 했음
• 캔버스 할당 문제와, 캔버스의 크기 조정이 코스트가 큰 작업

21. Composition Multiple Canvas

22. Flu$er - Web
Dom, Canvas, CSS의 적절한 조합을 가지고 모던 브라우저에서의 유저 경험 제공

23. Flu$er - Web
DaB 2 JS Compiler를 통해서 JS로 DaB 코드 변환

24. Demo

26. 단골 질문 1
꼭 Da@ 해야하나요? 다른언어는 지원안하나요?
오직 DaB만 지원합니다!
다양한 언어를 겪어본 입장에서 좋은 언어임은 맞습니다.

27. 단골 질문 2
Flu$er 좋나요?
네! 모바일 (Android, iOS) 만들기에 정말 좋습니다.
하지만 아직 나머지 플랫폼에서는 정식지원이 아니기 때문에 아쉬운
부분들이 있습니다.

28. 단골 질문 3
네이티브 기능(BLE, Sensor 등등)을 많이 요구하는 경우
Flu$er 선택도 좋은가요?
원래는 아니요 였지만, 지금은 반반(무 많이…) 인거 같습니다.
Plaborm Channel 성능이 좋으며, 활발한 커뮤니티 덕에 좋은
라이브러리들이 지원되고 있습니다.

29. 참고 자료
• h_ps://cu_er.dev
• h_ps://daB.dev
• h_ps://medium.com/cu_er/hummingbird-building-cu_er-for-the-web-e687c2a023a8
• h_ps://developers-kr.googleblog.com/2019/05/Flu_er-io19.html

30. Keep Similar,
Same Function

31. Thank You 😎
조성윤
ParkingBrother CTO
GDG Busan Organizer
@extJo