SwiftUIとFlutterを比較する

by tamappe

Slide 1

Slide 1 text

SwiftUIͱFlutterΛൺֱ͢Δ iOSDC 2020 Tamappe @tamapppe

Slide 2

Slide 2 text

I N T R O D U C T I O N Tamappe ϞόΠϧΞϓϦΤϯδχΞ 2014೥-2019೥3݄·ͰϑϦʔϥϯεͱͯ͠׆ಈ 2019೥4݄ΑΓϨΞδϣϒʹϞόΠϧΞϓϦΤϯδχΞͱͯ͠ೖࣾ झຯ: ϒϩάͷߋ৽ɺσΟζχʔ८Γ(ίϩφʹΑΓࣗॗ) Qiita: https://qiita.com/tamappe Blog: https://tamappe.com Twitter: https://twitter.com/tamapppe 01 גࣜձࣾϨΞδϣϒ

Slide 3

Slide 3 text

ຊ೔ͷςʔϚ SwiftUIͱFlutterͷൺֱ

Slide 4

Slide 4 text

ˎSwiftUI͸FlutterΛͱͯ΋ҙ͍ࣝͯ͠Δͱ͸ࢥ͏ Flutter࠷ߴ ݁࿦...

Slide 5

Slide 5 text

Ajenda 1. ίϯϙʔωϯτ 2. ϨΠΞ΢τͷ૊Έํ 3. List & Collection

Slide 6

Slide 6 text

ίϯϙʔωϯτ (Components) 02 View UIViewRespontable StatelessWidget StatefulWdiget ίϯϙʔωϯτ ProtocolͰ४ڌ શ͕ͯWidget

Slide 7

Slide 7 text

02 View UIViewRespontable StatelessWidget StatefulWidget ίϯϙʔωϯτ ProtocolͰ४ڌ શ͕ͯWidget ίϯϙʔωϯτ (Components) ϓϩτίϧͷྔ͕ଟͯ͘ɺ ࢖͍ํͰ໎͏͜ͱ͕ଟ͍

Slide 8

Slide 8 text

https://ﬂutter.ctrnost.com/ https://www.youtube.com/channel/ UCwXdFgeE9KYzlDdR7TG9cMw Document / Youtube Channel

Slide 9

Slide 9 text

02 View UIViewRespontable StatelessWidget StatefulWidget ίϯϙʔωϯτ ProtocolͰ४ڌ શ͕ͯWidget ϓϩτίϧͷྔ͕ଟͯ͘ɺ ࢖͍ํͰ໎͏͜ͱ͕ଟ͍ ίϯϙʔωϯτ (Components) Flutter࠷ߴ

Slide 10

Slide 10 text

03 VStack (Vertical) ZStack (z-index) SwiftUI HStack (Horizontal) Flutter Column (Vertical) Container Row (Horizontal) ϨΠΞ΢τͷ૊Έํ

Slide 11

Slide 11 text

03 VStack (Vertical) ZStack (z-index) SwiftUI HStack (Horizontal) Flutter Column (Vertical) Container Row (Horizontal) ϨΠΞ΢τͷ૊Έํ FlutterͷRow͕΍΍͍͜͠

Slide 12

Slide 12 text

03 VStack (Vertical) ZStack (z-index) SwiftUI HStack (Horizontal) Flutter Column (Vertical) Container Row (Horizontal) ϨΠΞ΢τͷ૊Έํ ͜͜͸SwiftUI͔ʁ

Slide 13

Slide 13 text

03 VStack (Vertical) ZStack (z-index) SwiftUI HStack (Horizontal) Flutter Column (Vertical) Container Row (Horizontal) ϨΠΞ΢τͷ૊Έํ ͜͜͸SwiftUI͔ʁ Ͱ΋Flutter࠷ߴ

Slide 14

Slide 14 text

04 Flutter SwiftUI γϣʔτΧοτ

Slide 15

Slide 15 text

05 SwiftUI Flutter UIKit UITableView UICollectionView List LazyVGrid / LazyHGrid ListView GridView List & Collection

Slide 16

Slide 16 text

05 SwiftUI Flutter UIKit UITableView UICollectionView List LazyVGrid / LazyHGrid ListView GridView List & Collection iOS13ͰGrid͕࢖͑ͳ͍ɾɾɾ

Slide 17

Slide 17 text

05 SwiftUI Flutter UIKit UITableView UICollectionView List LazyVGrid / LazyHGrid ListView GridView iOS13ͰGrid͕࢖͑ͳ͍ɾɾɾ List & Collection Flutter ࠷ߴͩΑ

Slide 18

Slide 18 text

·ͱΊ

Slide 19

Slide 19 text

·ͱΊ 1. ίϯϙʔωϯτ 2. ϨΠΞ΢τͷ૊Έํ 3. List & Collection

Slide 20

Slide 20 text

·ͱΊ 1. ίϯϙʔωϯτ 2. ϨΠΞ΢τͷ૊Έํ 3. List & Collection Flutter Flutter Flutter

Slide 21

Slide 21 text

·ͱΊ Flutter Flutter Flutter 1. ίϯϙʔωϯτ 2. ϨΠΞ΢τͷ૊Έํ 3. List & Collection

Slide 22

Slide 22 text

·ͱΊ 1. ίϯϙʔωϯτ 2. ϨΠΞ΢τͷ૊Έํ 3. List & Collection Flutter Flutter Flutter

Slide 23

Slide 23 text

·ͱΊ 1. ίϯϙʔωϯτ 2. ϨΠΞ΢τͷ૊Έํ 3. List & Collection Flutter Flutter Flutter

Slide 24

Slide 24 text

·ͱΊ 1. ίϯϙʔωϯτ 2. ϨΠΞ΢τͷ૊Έํ 3. List & Collection Flutter Flutter Flutter

Slide 25

Slide 25 text

·ͱΊ 1. ίϯϙʔωϯτ 2. ϨΠΞ΢τͷ૊Έํ 3. List & Collection Flutter SwiftUI Flutter Flutter࠷ߴʂʂ

Slide 26

Slide 26 text

06 ٕज़ධ࿦͕ࣾൃץ͍ͯ͠ΔࡶࢽʰSoftware DesignʱͷFlutterಛूͰࣥච͢Δ͜ ͱʹͳΓ·ͨ͠ɻಛूͰ͸ϞόΠϧΞϓϦΤϯδχΞ޲͚ʹFlutterͷັྗΛ 200%ͷ੎͍Ͱ఻͑·͢ɻ10/18ൃץͷ11݄߸Ͱܝࡌɻ ࡶࢽʰSoftware Designʱ(10/18)Ͱࣥච

Slide 27

Slide 27 text

Thank you!

Slide 28

Slide 28 text

͓·͚

Slide 29

Slide 29 text

σϞ 07

Slide 30

Slide 30 text

Slide 31

Slide 31 text

Slide 32

Slide 32 text

10 SwiftUI ιʔείʔυ

Slide 33

Slide 33 text

11 Flutter ιʔείʔυ

Slide 34

Slide 34 text

12 ϦϙδτϦ SwiftUI ιʔείʔυ Flutter ιʔείʔυ https://github.com/tamappe/iosdc_talk_app https://github.com/tamappe/iOSDC20App

Slide 35

Slide 35 text

शಘ೉қ౓ 13 ɹFlutter: 1ϲ݄ ɹSwiftUI: 2ϲ݄

Slide 36

Slide 36 text

Φεεϝษڧ๏ 14 ɾSwiftUI͕ඞཁͰͳ͚Ε͹FlutterͰ૊Έํʹ׳ΕΔ ɾFlutter͸1ϲ݄΄ͲͰWidgetͷ֓೦Λཧղ ɾFlutterͷ֓೦ͰSwiftUIΛཧղ͢ΔͱָʹͳΔ