SlideShare una empresa de Scribd logo
1 de 40
Descargar para leer sin conexión
Using view controllers
        wisely
    Samuel Défago,         le studio
            October 2011
Who am I?
• iOS developer at          le studio
  (www.hortis.ch)
• Mail: defagos (at) gmail (dot) com
• Twitter: @defagos
• Blog: http://subjective-objective-
  c.blogspot.com/
• Open-source: https://github.com/defagos
Motivations

• VCs are fundamental iOS objects, ...
• ... are used and implemented every day...
• ... but are often misused and abused
• When correctly used, they lead to more
  reliable applications and superior code
Goals

• Learn how to organize VCs in applications
• Understand how to use containers


• Avoid common pitfalls and errors
Misused? Abused?
• Messy implementation
• Incorrect resource management
• Often only slightly superior to Xcode
  templates (i.e. slightly superior to void)
• Poor separation of concerns, big balls of
  mud
• Monolithic application workflow
yep,here

               Topics
                         Havealookinthecorner
                         toknowwhichtopicwe
                                   aretalkingabout


• Overview of view controllers  containers
• Using view controllers in an application
• Anatomy of containers
What is a view
         controller?
• is a controller: Bi-directional
  communication channel between view and
  model (MVC)
• has a view:View hierarchy management
  (lifecycle, orientation, low-memory
  conditions)
• Manages the content of one screen or of
  one part of a screen
• Subclass to create custom view controllers
What is a container?
• Is an object managing a set of view
  controllers
• In general used as-is, not meant to be
  subclassed
• Helps managing the view controller
  hierarchy, i.e. the application workflow...
• ... but only the workflow it implements
UINavigationController




• Navigation bar at the top
• Push from right / left animations only
UITabBarController



• Tabs at the bottom
• Must be application root VC or root in
  modal
Criticism
• Few built-in containers...
• ... i.e. few well-supported workflows
  (navigation, tabs, modal, split content)
• This is annoying on iPad (emphasis on
  creative interfaces, use of both hands), less
  on iPhone (skinned interfaces, one hand
  usually suffices)
An iPad shopping
        application
• Application to buy items from some online
  store on the iPad
• Three people involved:
 • Product owner: Requirements
 • UI / UX designer: Design  interaction
 • Programmer: Write the application
Product owner

• “I want the customer to be able to browse
  products and their descriptions”
• “I want the customer to be able to add
  items to its cart”
• “I want the customer to be able to access
  its cart and to submit an order”
UI / UX designer (1)
UI / UX designer (2)
Programmer:VCs
ShoppingViewController

                                                    Product-
    ProductList-
                                                 ViewController
    ViewController


ShoppingViewController                     ShoppingViewController


    CartItemList-         Stayin     BillingInformation-
    ViewController       carttab        ViewController
Programmer: Workflow
                           retains VC and
                          addSubview:
ShoppingViewController                          ProductListViewController
                                                                                   presentModalViewController:
            showShop:                                            showDetails:               animated:

            showCart:         retains VC and                                                         ProductViewController
                             addSubview:
            checkout:
                                                                                                                    close:
                                               CartItemListViewController
           goBackwards:
                                                                                                        dismissModalViewController
                                                                showDetails:                                    Animated:
                                                                                presentModalViewController:
                                                                 checkout:               animated:




                                               BillingInformationViewController
                           retains VC and
                          addSubview:
                                                                    submitOrder:

                                                                    goBackwards:


                                                                                                                     IBAction
Demo
Criticism

• No transparency when displaying product
  details
• ShoppingViewController manages almost
  all application workflow
• Seems to work, but does it REALLY work?
Analyzing the shopping
      application
• Use VCs logging all lifecycle and rotation
  events
• Navigate the application
• Rotate the device
• Simulate memory warnings
• Check the logs
Log archaeology (1)

• Click on Shop tab, then on Cart tab:


• Show product details
Log archaeology (2)
                           retains VC and
                          addSubview:
ShoppingViewController                          ProductListViewController
                                                                                   presentModalViewController:
            showShop:                                            showDetails:               animated:

            showCart:         retains VC and                                                         ProductViewController
                             addSubview:
            checkout:
                                                                                                                      close:
                                               CartItemListViewController
           goBackwards:
                                                                                                        dismissModalViewController
                                                                showDetails:                                    Animated:
                                                                                presentModalViewController:
                                                                 checkout:               animated:




                                               BillingInformationViewController
                           retains VC and
                          addSubview:
                                                                    submitOrder:
                                                                                                   View lifecycle and rotation OK
                                                                    goBackwards:


                                                                                                   View lifecycle and rotation KO
Conclusion
• Creating a view controllers hierarchy using
  addSubview:   leads to incorrect behavior
• View lifecycle and rotation events are not
  emitted automagically
• The root and modal view controllers have a
  proper behavior

      Always use containers to manage your
      view controller hierarchy
Custom containers

• Custom containers are needed for more
  creative workflows
• Using custom containers must be easy...
• ... but writing custom containers is hard
Elementary containers
• Writing containers is hard...
• ... so write few correct elementary
  containers...
• ... and combine them to create new
  workflows...
• ... or even new containers!
Placeholders
• Embed some other view controllers
• Display VCs simultaneously
• Can display other UI elements
                     VC1             VC1
  VC1
                                              VC3
                         VC2         VC2
 1-placeholder       2-placeholder    3-placeholder
Stack
• Manage a stack of view controllers
• Usually only display the top VC
• Fill the whole view, no other UI elements

                   VC4
                   VC1
                    VC1
                    VC1
Combinations (1)


     VC1
                = custom UITabBarController




1-placeholder
Combinations (2)

                   +          VC4
                              VC1
                               VC1
                               VC1

     VC1
                               stack




1-placeholder   = custom UINavigationController
Combinations (3)


VC1                   VC2




      2-placeholder



             = resizable UISplitViewController
Implementation

• CoconutKit (https://github.com/defagos/
  CoconutKit):
  • HLSPlaceholderViewController
  • HLSStackController
• Technical details: http://subjective-objective-
  c.blogspot.com/2011/08/writing-high-
  quality-view-controller.html
Demo
iShopping revisited
ShoppingViewController(PH)

                                     stack                  Product-
       ProductList-
                                                         ViewController
       ViewController


ShoppingViewController(PH)           ShoppingViewController(PH)


       CartItemList-                               BillingInformation-
                                     stack            ViewController
       ViewController
Buggy workflow
                           retains VC and
                          addSubview:
ShoppingViewController                          ProductListViewController
                                                                                   presentModalViewController:
            showShop:                                            showDetails:               animated:

            showCart:         retains VC and                                                         ProductViewController
                             addSubview:
            checkout:
                                                                                                                    close:
                                               CartItemListViewController
           goBackwards:
                                                                                                        dismissModalViewController
                                                                showDetails:                                    Animated:
                                                                                presentModalViewController:
                                                                 checkout:               animated:




                                               BillingInformationViewController
                           retains VC and
                          addSubview:
                                                                    submitOrder:

                                                                    goBackwards:
Fixed workflow
  ShoppingViewController
 (stack root  placeholder)                     ProductListViewController
                                                                                pushViewController:
               showShop:                                         showDetails:
                              setInsetViewController:
                  showCart:                                                                        ProductViewController

                                                             pushViewController:                                     close:

                                                                                                            popViewController:

                                                                 §
                                            CartItemListViewController
                                                    (stack root)
                                                            showDetails:

                                                             checkout:                 BillingInformationViewController
                                                                   pushViewController:
                                                                                                            submitOrder:

                                                                                                            goBackwards:

                                         StackController                                                popViewController:
StackController
Demo
Log archaeology

• Click on Cart tab when on Shop tab:


• Show product details
Summary

• Never ever display a view controller by
  adding its view as subview directly
• Design your view controller workflow, and
  manage it using view controller containers
• Use the view controller lifecycle correctly
  to insert your code where most
  appropriate
Thanks for your
   attention
Questions?

Más contenido relacionado

Similar a Using view controllers wisely

Creating Container View Controllers
Creating Container View ControllersCreating Container View Controllers
Creating Container View ControllersBob McCune
 
아이폰강의(5) pdf
아이폰강의(5) pdf아이폰강의(5) pdf
아이폰강의(5) pdfsunwooindia
 
Intro to UIKit • Made by Many
Intro to UIKit • Made by ManyIntro to UIKit • Made by Many
Intro to UIKit • Made by Manykenatmxm
 
storyboard時代のInterfaceBuilder
storyboard時代のInterfaceBuilderstoryboard時代のInterfaceBuilder
storyboard時代のInterfaceBuilderHiroyuki Fujikawa
 
Use case driven architecture
Use case driven architectureUse case driven architecture
Use case driven architectureBohdan Orlov
 
iPhone Programming in 30 minutes (?) [FTS]
iPhone Programming in 30 minutes (?) [FTS]iPhone Programming in 30 minutes (?) [FTS]
iPhone Programming in 30 minutes (?) [FTS]Diego Pizzocaro
 
Design Patterns in ZK: Java MVVM as Model-View-Binder
Design Patterns in ZK: Java MVVM as Model-View-BinderDesign Patterns in ZK: Java MVVM as Model-View-Binder
Design Patterns in ZK: Java MVVM as Model-View-BinderSimon Massey
 
iOS Design to Code - Code
iOS Design to Code - CodeiOS Design to Code - Code
iOS Design to Code - CodeLiyao Chen
 
Class 02 Objective C
Class 02   Objective CClass 02   Objective C
Class 02 Objective CVioleta Salas
 
MVVM in iOS presentation
MVVM in iOS presentationMVVM in iOS presentation
MVVM in iOS presentationG ABHISEK
 
How I Accidentally Discovered MVVM
How I Accidentally Discovered MVVMHow I Accidentally Discovered MVVM
How I Accidentally Discovered MVVMBradford Dillon
 

Similar a Using view controllers wisely (20)

Creating Container View Controllers
Creating Container View ControllersCreating Container View Controllers
Creating Container View Controllers
 
From mvc to viper
From mvc to viperFrom mvc to viper
From mvc to viper
 
Mvc architecture
Mvc architectureMvc architecture
Mvc architecture
 
아이폰강의(5) pdf
아이폰강의(5) pdf아이폰강의(5) pdf
아이폰강의(5) pdf
 
Intro to UIKit • Made by Many
Intro to UIKit • Made by ManyIntro to UIKit • Made by Many
Intro to UIKit • Made by Many
 
Icreate
IcreateIcreate
Icreate
 
storyboard時代のInterfaceBuilder
storyboard時代のInterfaceBuilderstoryboard時代のInterfaceBuilder
storyboard時代のInterfaceBuilder
 
Use case driven architecture
Use case driven architectureUse case driven architecture
Use case driven architecture
 
I os 11
I os 11I os 11
I os 11
 
iPhone Programming in 30 minutes (?) [FTS]
iPhone Programming in 30 minutes (?) [FTS]iPhone Programming in 30 minutes (?) [FTS]
iPhone Programming in 30 minutes (?) [FTS]
 
iOS_Presentation
iOS_PresentationiOS_Presentation
iOS_Presentation
 
Iphone course 3
Iphone course 3Iphone course 3
Iphone course 3
 
Design Patterns in ZK: Java MVVM as Model-View-Binder
Design Patterns in ZK: Java MVVM as Model-View-BinderDesign Patterns in ZK: Java MVVM as Model-View-Binder
Design Patterns in ZK: Java MVVM as Model-View-Binder
 
SwiftでUIKitDynamics
SwiftでUIKitDynamicsSwiftでUIKitDynamics
SwiftでUIKitDynamics
 
View controllers en iOS
View controllers en iOSView controllers en iOS
View controllers en iOS
 
iOS Design to Code - Code
iOS Design to Code - CodeiOS Design to Code - Code
iOS Design to Code - Code
 
iOS: View Controllers
iOS: View ControllersiOS: View Controllers
iOS: View Controllers
 
Class 02 Objective C
Class 02   Objective CClass 02   Objective C
Class 02 Objective C
 
MVVM in iOS presentation
MVVM in iOS presentationMVVM in iOS presentation
MVVM in iOS presentation
 
How I Accidentally Discovered MVVM
How I Accidentally Discovered MVVMHow I Accidentally Discovered MVVM
How I Accidentally Discovered MVVM
 

Último

Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Miguel Araújo
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptxHampshireHUG
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsMaria Levchenko
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processorsdebabhi2
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreternaman860154
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024The Digital Insurer
 
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure serviceWhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure servicePooja Nehwal
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slidevu2urc
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfEnterprise Knowledge
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Scriptwesley chun
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsEnterprise Knowledge
 
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live StreamsTop 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live StreamsRoshan Dwivedi
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonAnna Loughnan Colquhoun
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationMichael W. Hawkins
 
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxFactors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxKatpro Technologies
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024The Digital Insurer
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking MenDelhi Call girls
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘RTylerCroy
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonetsnaman860154
 

Último (20)

Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure serviceWhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
 
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live StreamsTop 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxFactors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 

Using view controllers wisely

  • 1. Using view controllers wisely Samuel Défago, le studio October 2011
  • 2. Who am I? • iOS developer at le studio (www.hortis.ch) • Mail: defagos (at) gmail (dot) com • Twitter: @defagos • Blog: http://subjective-objective- c.blogspot.com/ • Open-source: https://github.com/defagos
  • 3. Motivations • VCs are fundamental iOS objects, ... • ... are used and implemented every day... • ... but are often misused and abused • When correctly used, they lead to more reliable applications and superior code
  • 4. Goals • Learn how to organize VCs in applications • Understand how to use containers • Avoid common pitfalls and errors
  • 5. Misused? Abused? • Messy implementation • Incorrect resource management • Often only slightly superior to Xcode templates (i.e. slightly superior to void) • Poor separation of concerns, big balls of mud • Monolithic application workflow
  • 6. yep,here Topics Havealookinthecorner toknowwhichtopicwe aretalkingabout • Overview of view controllers containers • Using view controllers in an application • Anatomy of containers
  • 7. What is a view controller? • is a controller: Bi-directional communication channel between view and model (MVC) • has a view:View hierarchy management (lifecycle, orientation, low-memory conditions) • Manages the content of one screen or of one part of a screen • Subclass to create custom view controllers
  • 8. What is a container? • Is an object managing a set of view controllers • In general used as-is, not meant to be subclassed • Helps managing the view controller hierarchy, i.e. the application workflow... • ... but only the workflow it implements
  • 9. UINavigationController • Navigation bar at the top • Push from right / left animations only
  • 10. UITabBarController • Tabs at the bottom • Must be application root VC or root in modal
  • 11. Criticism • Few built-in containers... • ... i.e. few well-supported workflows (navigation, tabs, modal, split content) • This is annoying on iPad (emphasis on creative interfaces, use of both hands), less on iPhone (skinned interfaces, one hand usually suffices)
  • 12. An iPad shopping application • Application to buy items from some online store on the iPad • Three people involved: • Product owner: Requirements • UI / UX designer: Design interaction • Programmer: Write the application
  • 13. Product owner • “I want the customer to be able to browse products and their descriptions” • “I want the customer to be able to add items to its cart” • “I want the customer to be able to access its cart and to submit an order”
  • 14. UI / UX designer (1)
  • 15. UI / UX designer (2)
  • 16. Programmer:VCs ShoppingViewController Product- ProductList- ViewController ViewController ShoppingViewController ShoppingViewController CartItemList- Stayin BillingInformation- ViewController carttab ViewController
  • 17. Programmer: Workflow retains VC and addSubview: ShoppingViewController ProductListViewController presentModalViewController: showShop: showDetails: animated: showCart: retains VC and ProductViewController addSubview: checkout: close: CartItemListViewController goBackwards: dismissModalViewController showDetails: Animated: presentModalViewController: checkout: animated: BillingInformationViewController retains VC and addSubview: submitOrder: goBackwards: IBAction
  • 18. Demo
  • 19. Criticism • No transparency when displaying product details • ShoppingViewController manages almost all application workflow • Seems to work, but does it REALLY work?
  • 20. Analyzing the shopping application • Use VCs logging all lifecycle and rotation events • Navigate the application • Rotate the device • Simulate memory warnings • Check the logs
  • 21. Log archaeology (1) • Click on Shop tab, then on Cart tab: • Show product details
  • 22. Log archaeology (2) retains VC and addSubview: ShoppingViewController ProductListViewController presentModalViewController: showShop: showDetails: animated: showCart: retains VC and ProductViewController addSubview: checkout: close: CartItemListViewController goBackwards: dismissModalViewController showDetails: Animated: presentModalViewController: checkout: animated: BillingInformationViewController retains VC and addSubview: submitOrder: View lifecycle and rotation OK goBackwards: View lifecycle and rotation KO
  • 23. Conclusion • Creating a view controllers hierarchy using addSubview: leads to incorrect behavior • View lifecycle and rotation events are not emitted automagically • The root and modal view controllers have a proper behavior Always use containers to manage your view controller hierarchy
  • 24. Custom containers • Custom containers are needed for more creative workflows • Using custom containers must be easy... • ... but writing custom containers is hard
  • 25. Elementary containers • Writing containers is hard... • ... so write few correct elementary containers... • ... and combine them to create new workflows... • ... or even new containers!
  • 26. Placeholders • Embed some other view controllers • Display VCs simultaneously • Can display other UI elements VC1 VC1 VC1 VC3 VC2 VC2 1-placeholder 2-placeholder 3-placeholder
  • 27. Stack • Manage a stack of view controllers • Usually only display the top VC • Fill the whole view, no other UI elements VC4 VC1 VC1 VC1
  • 28. Combinations (1) VC1 = custom UITabBarController 1-placeholder
  • 29. Combinations (2) + VC4 VC1 VC1 VC1 VC1 stack 1-placeholder = custom UINavigationController
  • 30. Combinations (3) VC1 VC2 2-placeholder = resizable UISplitViewController
  • 31. Implementation • CoconutKit (https://github.com/defagos/ CoconutKit): • HLSPlaceholderViewController • HLSStackController • Technical details: http://subjective-objective- c.blogspot.com/2011/08/writing-high- quality-view-controller.html
  • 32. Demo
  • 33. iShopping revisited ShoppingViewController(PH) stack Product- ProductList- ViewController ViewController ShoppingViewController(PH) ShoppingViewController(PH) CartItemList- BillingInformation- stack ViewController ViewController
  • 34. Buggy workflow retains VC and addSubview: ShoppingViewController ProductListViewController presentModalViewController: showShop: showDetails: animated: showCart: retains VC and ProductViewController addSubview: checkout: close: CartItemListViewController goBackwards: dismissModalViewController showDetails: Animated: presentModalViewController: checkout: animated: BillingInformationViewController retains VC and addSubview: submitOrder: goBackwards:
  • 35. Fixed workflow ShoppingViewController (stack root placeholder) ProductListViewController pushViewController: showShop: showDetails: setInsetViewController: showCart: ProductViewController pushViewController: close: popViewController: § CartItemListViewController (stack root) showDetails: checkout: BillingInformationViewController pushViewController: submitOrder: goBackwards: StackController popViewController: StackController
  • 36. Demo
  • 37. Log archaeology • Click on Cart tab when on Shop tab: • Show product details
  • 38. Summary • Never ever display a view controller by adding its view as subview directly • Design your view controller workflow, and manage it using view controller containers • Use the view controller lifecycle correctly to insert your code where most appropriate
  • 39. Thanks for your attention