ios architecture - files.meetup.comfiles.meetup.com/13201442/cocoaheads #5... · ios architecture....

24
INTRODUCTION TO IOS ARCHITECTURE

Upload: others

Post on 03-Jun-2020

18 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: IOS ARCHITECTURE - files.meetup.comfiles.meetup.com/13201442/CocoaHeads #5... · IOS ARCHITECTURE. MODEL VIEW CONTROLLER. MVC ARCHITECTURE VIEW MODEL owns owns update update CONTROLLER

I N T R O D U CT I O N TO

I O S A R C H I T E CT U R E

Page 2: IOS ARCHITECTURE - files.meetup.comfiles.meetup.com/13201442/CocoaHeads #5... · IOS ARCHITECTURE. MODEL VIEW CONTROLLER. MVC ARCHITECTURE VIEW MODEL owns owns update update CONTROLLER

M O D E L V I E W C O N T R O L L E R

Page 3: IOS ARCHITECTURE - files.meetup.comfiles.meetup.com/13201442/CocoaHeads #5... · IOS ARCHITECTURE. MODEL VIEW CONTROLLER. MVC ARCHITECTURE VIEW MODEL owns owns update update CONTROLLER

M V C A R C H I T E CT U R E

V I E W M O D E L

ownsowns

updateupdate

C O N T R O L L E R

Page 4: IOS ARCHITECTURE - files.meetup.comfiles.meetup.com/13201442/CocoaHeads #5... · IOS ARCHITECTURE. MODEL VIEW CONTROLLER. MVC ARCHITECTURE VIEW MODEL owns owns update update CONTROLLER
Page 5: IOS ARCHITECTURE - files.meetup.comfiles.meetup.com/13201442/CocoaHeads #5... · IOS ARCHITECTURE. MODEL VIEW CONTROLLER. MVC ARCHITECTURE VIEW MODEL owns owns update update CONTROLLER
Page 6: IOS ARCHITECTURE - files.meetup.comfiles.meetup.com/13201442/CocoaHeads #5... · IOS ARCHITECTURE. MODEL VIEW CONTROLLER. MVC ARCHITECTURE VIEW MODEL owns owns update update CONTROLLER

M A S S I V E V I E W

C O N T R O L L E R

Page 7: IOS ARCHITECTURE - files.meetup.comfiles.meetup.com/13201442/CocoaHeads #5... · IOS ARCHITECTURE. MODEL VIEW CONTROLLER. MVC ARCHITECTURE VIEW MODEL owns owns update update CONTROLLER

M V V M O R M V C + +

Page 8: IOS ARCHITECTURE - files.meetup.comfiles.meetup.com/13201442/CocoaHeads #5... · IOS ARCHITECTURE. MODEL VIEW CONTROLLER. MVC ARCHITECTURE VIEW MODEL owns owns update update CONTROLLER

M V V M A R C H I T E CT U R E

V I E W M O D E L V I E W M O D E L

owns owns

update update

V I E W C O N T R O L L E R

Page 9: IOS ARCHITECTURE - files.meetup.comfiles.meetup.com/13201442/CocoaHeads #5... · IOS ARCHITECTURE. MODEL VIEW CONTROLLER. MVC ARCHITECTURE VIEW MODEL owns owns update update CONTROLLER

override func viewWillAppear(animated: Bool) { super.viewWillAppear(animated)

self.contentLabel.text = data.text let calendar = NSCalendar.currentCalendar(); let unit:NSCalendarUnit = NSCalendarUnit.CalendarUnitMinute let dateComponent = calendar.components(unit, fromDate: data.createdAt, toDate: NSDate(), options: nil) self.descriptionLabel.text = "\(data.firstname) \(data.lastname), \(dateComponent.minute) ago" self.commentButton.setTitle("\(data.numberOfComments) comments", forState: UIControlState.Normal) } …

W I T H O U T M V V M

Page 10: IOS ARCHITECTURE - files.meetup.comfiles.meetup.com/13201442/CocoaHeads #5... · IOS ARCHITECTURE. MODEL VIEW CONTROLLER. MVC ARCHITECTURE VIEW MODEL owns owns update update CONTROLLER

class DataViewModel: NSObject { var contentText = "" var descriptionText = "" var commentTitle = ""

func initWithData(data: Data) -> DataViewModel { let dataViewModel = DataViewModel() dataViewModel.contentText = data.text let calendar = NSCalendar.currentCalendar(); let unit:NSCalendarUnit = NSCalendarUnit.CalendarUnitMinute let dateComponent = calendar.components(unit, fromDate: data.createdAt, toDate: NSDate(), options: nil) dataViewModel.descriptionText = "\(data.firstname) \(data.lastname), \(dateComponent.minute) ago" dataViewModel.commentTitle = "\(data.numberOfComments)" return dataViewModel } }

W I T H M V V MCreate a viewModel class

Page 11: IOS ARCHITECTURE - files.meetup.comfiles.meetup.com/13201442/CocoaHeads #5... · IOS ARCHITECTURE. MODEL VIEW CONTROLLER. MVC ARCHITECTURE VIEW MODEL owns owns update update CONTROLLER

override func viewWillAppear(animated: Bool) { super.viewWillAppear(animated)

self.contentLabel.text = viewModel.contentText self.descriptionLabel.text = viewModel.descriptionText self.commentButton.setTitle(viewModel.commentTitle, forState: UIControlState.Normal) } …

W I T H M V V MAfter you initialized viewModel

Page 12: IOS ARCHITECTURE - files.meetup.comfiles.meetup.com/13201442/CocoaHeads #5... · IOS ARCHITECTURE. MODEL VIEW CONTROLLER. MVC ARCHITECTURE VIEW MODEL owns owns update update CONTROLLER

• MVVM is compatible with your existing MVC architecture.

• MVVM makes your apps more testable

• Because Microsoft

W H Y M V V M ?

Page 13: IOS ARCHITECTURE - files.meetup.comfiles.meetup.com/13201442/CocoaHeads #5... · IOS ARCHITECTURE. MODEL VIEW CONTROLLER. MVC ARCHITECTURE VIEW MODEL owns owns update update CONTROLLER
Page 14: IOS ARCHITECTURE - files.meetup.comfiles.meetup.com/13201442/CocoaHeads #5... · IOS ARCHITECTURE. MODEL VIEW CONTROLLER. MVC ARCHITECTURE VIEW MODEL owns owns update update CONTROLLER

The Single Responsibility Principle

Page 15: IOS ARCHITECTURE - files.meetup.comfiles.meetup.com/13201442/CocoaHeads #5... · IOS ARCHITECTURE. MODEL VIEW CONTROLLER. MVC ARCHITECTURE VIEW MODEL owns owns update update CONTROLLER

V I P ER

Page 16: IOS ARCHITECTURE - files.meetup.comfiles.meetup.com/13201442/CocoaHeads #5... · IOS ARCHITECTURE. MODEL VIEW CONTROLLER. MVC ARCHITECTURE VIEW MODEL owns owns update update CONTROLLER
Page 17: IOS ARCHITECTURE - files.meetup.comfiles.meetup.com/13201442/CocoaHeads #5... · IOS ARCHITECTURE. MODEL VIEW CONTROLLER. MVC ARCHITECTURE VIEW MODEL owns owns update update CONTROLLER

Business logic User Interface

Page 18: IOS ARCHITECTURE - files.meetup.comfiles.meetup.com/13201442/CocoaHeads #5... · IOS ARCHITECTURE. MODEL VIEW CONTROLLER. MVC ARCHITECTURE VIEW MODEL owns owns update update CONTROLLER

V I P E R A R C H I T E CT U R E

V I E W I N T E R A C T O R E N T I T YP R E S E N T E R

R O U T E

D ATA M A N A G E R

UI Interface

Business Logic

Page 19: IOS ARCHITECTURE - files.meetup.comfiles.meetup.com/13201442/CocoaHeads #5... · IOS ARCHITECTURE. MODEL VIEW CONTROLLER. MVC ARCHITECTURE VIEW MODEL owns owns update update CONTROLLER

D E M O

Page 20: IOS ARCHITECTURE - files.meetup.comfiles.meetup.com/13201442/CocoaHeads #5... · IOS ARCHITECTURE. MODEL VIEW CONTROLLER. MVC ARCHITECTURE VIEW MODEL owns owns update update CONTROLLER
Page 21: IOS ARCHITECTURE - files.meetup.comfiles.meetup.com/13201442/CocoaHeads #5... · IOS ARCHITECTURE. MODEL VIEW CONTROLLER. MVC ARCHITECTURE VIEW MODEL owns owns update update CONTROLLER

https://github.com/romsi/VIPERXCodeTemplate

Page 22: IOS ARCHITECTURE - files.meetup.comfiles.meetup.com/13201442/CocoaHeads #5... · IOS ARCHITECTURE. MODEL VIEW CONTROLLER. MVC ARCHITECTURE VIEW MODEL owns owns update update CONTROLLER
Page 23: IOS ARCHITECTURE - files.meetup.comfiles.meetup.com/13201442/CocoaHeads #5... · IOS ARCHITECTURE. MODEL VIEW CONTROLLER. MVC ARCHITECTURE VIEW MODEL owns owns update update CONTROLLER

• Introduction to MVVMhttp://www.objc.io/issue-13/mvvm.html

• The Clean Architecturehttp://blog.8thlight.com/uncle-bob/2012/08/13/the-clean-

architecture.html

• The Principles of OODhttp://www.butunclebob.com/ArticleS.UncleBob.PrinciplesOfOod

• Introduction to VIPERhttp://mutualmobile.github.io/blog/2013/12/04/viper-introduction/

R E S O U R C E S

Page 24: IOS ARCHITECTURE - files.meetup.comfiles.meetup.com/13201442/CocoaHeads #5... · IOS ARCHITECTURE. MODEL VIEW CONTROLLER. MVC ARCHITECTURE VIEW MODEL owns owns update update CONTROLLER

My email is [email protected] if you would like to chat.Follow me @romsi94 because I like tweeting about dishes. I know that you prefer reading my slide, that’s why I wrote a lot. But first, I would like to say thanks to my parents. As developer you should know that 80% of your product development takes as much effort as the last 20%, prepare yourself for those detail challenge ahead. You can imagine how much time I spent to write all of these. I forget to tell you that if you continue to read this I can tell you another story but in French. C’est l’histoire d’un petit garçon qui avait eu un ordinateur pour son anniversaire. Il était très heureux et il apprit le développement. Bon, j’en ai marre d’écrire et si vous continuez de lire meme si c’est en français, je ne peux plus rien pour vous. Thank you for reading it.

T H A N K YO U

thecarevoice.com