Swift iOS Architecture with FLUX in mind. UA Mobile 2016.

34
@DAlooG SWIFT AND FLUX New age of iOS development 1

Transcript of Swift iOS Architecture with FLUX in mind. UA Mobile 2016.

Page 1: Swift iOS Architecture with FLUX in mind. UA Mobile 2016.

@DAlooG

SWIFT AND FLUXNew age of iOS development

1

Page 2: Swift iOS Architecture with FLUX in mind. UA Mobile 2016.

@DAlooG

ABOUT ME➤iOS Developer at Sigma Software ➤Enterprise and client applications ➤Team leader ➤Mentor ➤Consultant

2

Page 3: Swift iOS Architecture with FLUX in mind. UA Mobile 2016.

@DAlooG

OBJECTIVE CAnd messed view controllers

3

Page 4: Swift iOS Architecture with FLUX in mind. UA Mobile 2016.

@DAlooG

PRE IPAD➤Single UIViewController at screen ➤Single static layout ➤Table based layout

4

Page 5: Swift iOS Architecture with FLUX in mind. UA Mobile 2016.

@DAlooG

APPLE SOLUTION

https://developer.apple.com/library/ios/documentation/General/Conceptual/CocoaEncyclopedia/Model-View-Controller/Model-View-Controller.html#//apple_ref/doc/uid/TP40010810-CH14-SW14

5

Page 6: Swift iOS Architecture with FLUX in mind. UA Mobile 2016.

@DAlooG

IPAD - SIZE CLASSES➤Containment API ➤AutoLayout ➤Network availability ➤Storyboards

6

Page 7: Swift iOS Architecture with FLUX in mind. UA Mobile 2016.

@DAlooG

APPLE SOLUTION

https://developer.apple.com/library/ios/documentation/General/Conceptual/DevPedia-CocoaCore/MVC.html

7

Page 8: Swift iOS Architecture with FLUX in mind. UA Mobile 2016.

@DAlooG

PROBLEMS➤Controller need to rule view and model

layers ➤View receive updates. So order of updates

is important ➤Model receive updates. So order of

updates is important ➤Controller is bloated with responsibilities

8

Page 9: Swift iOS Architecture with FLUX in mind. UA Mobile 2016.

@DAlooG

COMPONENT KIThttp://componentkit.org

9

Page 10: Swift iOS Architecture with FLUX in mind. UA Mobile 2016.

@DAlooG

REACThttps://facebook.github.io/react/

10

Page 11: Swift iOS Architecture with FLUX in mind. UA Mobile 2016.

«

@DAlooG

I say with confidence as a former UIKit author: React's model for the UI layer is vastly better than UIKit's. React Native is a *huge* deal.

https://twitter.com/andy_matuschak/status/560511204867575808

11

Page 12: Swift iOS Architecture with FLUX in mind. UA Mobile 2016.

@DAlooG

UI = VIEW(DATA)View layer is an function from data to user

interface

12

Page 13: Swift iOS Architecture with FLUX in mind. UA Mobile 2016.

«

@DAlooG

One can merge the MVC roles played by an object, making an object, for example, fulfill both the controller and view roles—in which case, it would be called a view controller.

http://apple.co/1U6DPF313

Page 14: Swift iOS Architecture with FLUX in mind. UA Mobile 2016.

@DAlooG

UIVC == VIEW

14

😱

Page 15: Swift iOS Architecture with FLUX in mind. UA Mobile 2016.

@DAlooG

VIEW LAYER PROPS➤Data driven ➤Testable ➤No state ➤No context

15

Page 16: Swift iOS Architecture with FLUX in mind. UA Mobile 2016.

@DAlooG

PRE SWIFT➤VIPER ➤MVVM ➤Reactive Programming (mostly RAC)

16

Page 17: Swift iOS Architecture with FLUX in mind. UA Mobile 2016.

@DAlooG

SWIFT

17

Page 18: Swift iOS Architecture with FLUX in mind. UA Mobile 2016.

@DAlooG 🦄

PROMISED LAND➤Modern syntax ➤Generics ➤Enums ➤Structs ➤Closures ➤Protocols

18

Page 19: Swift iOS Architecture with FLUX in mind. UA Mobile 2016.

@DAlooG

APPLE SOLUTION

https://developer.apple.com/library/ios/documentation/General/Conceptual/DevPedia-CocoaCore/MVC.html

19

Page 20: Swift iOS Architecture with FLUX in mind. UA Mobile 2016.

@DAlooG

SERIOUSLY?

20

Page 21: Swift iOS Architecture with FLUX in mind. UA Mobile 2016.

@DAlooG

FLUXhttps://facebook.github.io/flux/

21

Page 22: Swift iOS Architecture with FLUX in mind. UA Mobile 2016.

@DAlooG

➤Store ➤View ➤Action ➤Dispatcher

22🔭

Page 23: Swift iOS Architecture with FLUX in mind. UA Mobile 2016.

@DAlooG

ACTION / COMMAND➤Representation of increment ➤User actions (tap, gestures, shake) ➤API callbacks ➤Timer events

➤Action is immutable ➤Action is serializable ➤Action is printable

23

Page 24: Swift iOS Architecture with FLUX in mind. UA Mobile 2016.

@DAlooG

ACTION / COMMAND

24

Page 25: Swift iOS Architecture with FLUX in mind. UA Mobile 2016.

@DAlooG

STORE / REDUCER / UPDATE➤Stores data ➤Update data according to actions ➤Notify listeners about data updates

➤Most application logic lives here ➤Covered with Unit Tests ➤Implemented as class

25

Page 26: Swift iOS Architecture with FLUX in mind. UA Mobile 2016.

@DAlooG

STATE➤Immutable value type ➤Valid most of the times ➤Domain specific

➤Implemented as struct

26

Page 27: Swift iOS Architecture with FLUX in mind. UA Mobile 2016.

@DAlooG

➤Store ➤View ➤Action ➤Dispatcher

27

Page 28: Swift iOS Architecture with FLUX in mind. UA Mobile 2016.

@DAlooG

WHY?

28

Page 29: Swift iOS Architecture with FLUX in mind. UA Mobile 2016.

@DAlooG

CQRShttp://martinfowler.com/bliki/CQRS.html

29

Page 30: Swift iOS Architecture with FLUX in mind. UA Mobile 2016.

@DAlooG 30

Page 31: Swift iOS Architecture with FLUX in mind. UA Mobile 2016.

@DAlooG 31

Page 32: Swift iOS Architecture with FLUX in mind. UA Mobile 2016.

@DAlooG

Service Client

Query

Command

CQRS

32

Page 33: Swift iOS Architecture with FLUX in mind. UA Mobile 2016.

@DAlooG

LINKS➤http://blog.benjamin-encz.de/a-flux-inspired-architecture-

for-ios/ ➤https://developer.apple.com/library/ios/documentation/

General/Conceptual/CocoaEncyclopedia/Model-View-Controller/Model-View-Controller.html#//apple_ref/doc/uid/TP40010810-CH14

➤https://developer.apple.com/library/ios/documentation/General/Conceptual/DevPedia-CocoaCore/MVC.html

➤https://github.com/yonekawa/SwiftFlux ➤https://github.com/ReduxKit/ReduxKit ➤https://github.com/ReSwift/ReSwift