MVVM + FLUX iOS Instagram client in Swift, eliminates Massive View Controller in unidirectional event/state flow manner

Cheng Zhang

Last update: Nov 1, 2022

Related tags

Reactive Programming CZInstagram

Overview

CZInstagram

MVVM + FLUX iOS Instagram client in Swift, eliminates Massive View Controller in unidirectional event/state flow manner.

Unidirectional Data Flow

Dispatcher: Propagates domained events
Store: Maintains the State tree
Subscriber: Subscribes to Store and update Components/Views with new State
Event: Event driven - more loosely coupled than Delegation
State:
- Waterfall reacting flow
- Composition: RootState is composited by subStates
- React(to:) Event and outputs new State, propagates Event to its children substate nodes

Demo Gif

Eliminate Massive View Controller

No more UICollectionViewDataSource/UICollectionViewDelegate overhead
No more long if statement to manage model/cell mapping, event handling
FLUX one way data flow solves core problems of MVC:
- Central Mediator
- Event Propagration
- Data Binding

ReactiveListViewKit facade view classes wrapp complex UICollectionView

Implement Instagram feedList within 50 lines of code
Embedded HorizontalSectionAdapterView makes nested horizontal ListView implementation within 10 lines of code
Adaptive to various CellComponent classes:
- UICollectionViewCell
- UIView
- UIViewController - Domained event handling for complex cell

Implemented on top of my open-source frameworks

ReactiveListViewKit MVVM + FLUX Reactive Facade ViewKit, eliminates Massive View Controller in unidirectional event/state flow manner
CZWebImage Elegant progressive concurrent image downloading framework, with neat APIs, LRU mem/disk cache
CZNetworking Elegant progressive asynchronous HTTP request flow management framework, supports GET/PUT/POST/DELETE
CZJsonModel Elegant JSON modeling framework in Swift

MacOS Serial solution (Observable & Event-Driven) to make integration of Serial peripherals trivial

SerialSwift SerialSwift makes communicating with your Serial Peripherals on MacOS trivial. Better still, SerialSwift is designed to be fundamnetally O

2 Sep 9, 2022

Redux for Swift - a predictable state container for Swift apps

Merge / deprecation announcement: ReduxKit and Swift-Flow have joined forces! The result is ReSwift. The nitty gritty: We decided to deprecate ReduxKi

613 Jan 3, 2023

🟣 Verge is a very tunable state-management engine on iOS App (UIKit / SwiftUI) and built-in ORM.

Verge.swift 📍 An effective state management architecture for iOS - UIKit and also SwiftUI 📍 _ An easier way to get unidirectional data flow _ _ Supp

478 Dec 29, 2022

Binding - Data binding framework (view model binding on MVVM) written using propertyWrapper and resultBuilder

Binding Data binding framework (view model binding on MVVM) written using @prope

4 Mar 23, 2022

Predictable state container for Swift too

ReduxSwift ReduxSwift is a minimal Swift port of Redux, a popular JavaScript library for application state management. Functionality Centralized State

38 Oct 6, 2020

Elegant state machine for Swift.

SwiftState Elegant state machine for Swift. Example enum MyState: StateType { case state0, state1, state2 } // setup state machine let machine = S

885 Dec 16, 2022

🤖 RxSwift + State Machine, inspired by Redux and Elm.

RxAutomaton RxSwift port of ReactiveAutomaton (State Machine). Terminology Whenever the word "signal" or "(signal) producer" appears (derived from Rea

719 Nov 19, 2022

RxReduce is a lightweight framework that ease the implementation of a state container pattern in a Reactive Programming compliant way.

About Architecture concerns RxReduce Installation The key principles How to use RxReduce Tools and dependencies Travis CI Frameworks Platform Licence

125 Jan 29, 2022

CMPSC475 Final Project, ArboretumID Application allows users to explore the Penn State Arboretum, identify plants and learn about the exhibits!

ArboretumID: CMPSC475 Final Project Taylan Unal (@taylanu) About ArboretumID ArboretumIdentifier (ArboretumID) is an app that enhances the Penn State

1 Nov 27, 2021

Comments

AutoLayout conflicts of HotUserCellView

Error log:

The behavior of the UICollectionViewFlowLayout is not defined because: 2017-10-16 18:15:10.119 CZInstagram[95275:16642278] the item width must be less than the width of the UICollectionView minus the section insets left and right values, minus the content insets left and right values. 2017-10-16 18:15:10.120 CZInstagram[95275:16642278] The relevant UICollectionViewFlowLayout instance is <UICollectionViewFlowLayout: 0x7fa0a680e7a0>, and it is attached to <UICollectionView: 0x7fa0a703be00; frame = (0 0; 414 672); clipsToBounds = YES; gestureRecognizers = <NSArray: 0x61800005f890>; layer = <CALayer: 0x61800003eb20>; contentOffset: {0, -60}; contentSize: {0, 0}> collection view layout: <UICollectionViewFlowLayout: 0x7fa0a680e7a0>. 2017-10-16 18:15:10.120 CZInstagram[95275:16642278] Make a symbolic breakpoint at UICollectionViewFlowLayoutBreakForInvalidSizes to catch this in the debugger.

opened by geekaurora 2
AutoLayout conflicts of FeedCellView
https://github.com/geekaurora/CZInstagram/issues/1

Via investigation, it's caused by:

ratio/height constraint of imageView

trailing constraint of imageView

Removing above constraints solved conflicts, but led to incorrectly displaying of imageView

Root Cause

containerView's width isn't set via systemLayoutSizeFitting

Solution

Manually set containerView size: stackViewWidthConstraint.constant = UIScreen.currWidth

Change priority for height constraint of imageView from 1000 to 749

Gonna revisit before next release version.
opened by geekaurora 1
Fixed issue-03: Horizontal section - item width exceeds sectionWidth of UICollectionView
https://github.com/geekaurora/CZInstagram/issues/3

Issue is caused by item width exceeds UICollectionView section size set

Root Cause

Absent considering sectionInset when calculate item size of UICollectionView

Solution

Adjust containerViewSize based on sectionInsets

Error log:

The behavior of the UICollectionViewFlowLayout is not defined because: 2017-10-16 18:15:10.119 CZInstagram[95275:16642278] the item width must be less than the width of the UICollectionView minus the section insets left and right values, minus the content insets left and right values. 2017-10-16 18:15:10.120 CZInstagram[95275:16642278] The relevant UICollectionViewFlowLayout instance is <UICollectionViewFlowLayout: 0x7fa0a680e7a0>, and it is attached to <UICollectionView: 0x7fa0a703be00; frame = (0 0; 414 672); clipsToBounds = YES; gestureRecognizers = <NSArray: 0x61800005f890>; layer = <CALayer: 0x61800003eb20>; contentOffset: {0, -60}; contentSize: {0, 0}> collection view layout: <UICollectionViewFlowLayout: 0x7fa0a680e7a0>. 2017-10-16 18:15:10.120 CZInstagram[95275:16642278] Make a symbolic breakpoint at UICollectionViewFlowLayoutBreakForInvalidSizes to catch this in the debugger.
opened by geekaurora 0
Fixed Issue-01: AutoLayout conflicts of FeedCellView
https://github.com/geekaurora/CZInstagram/issues/1

Via investigation, it's caused by:

ratio/height constraint of imageView

trailing constraint of imageView

Removing above constraints solved conflicts, but led to incorrectly displaying of imageView

Root Cause

containerView's width isn't set via systemLayoutSizeFitting

Solution

Manually set containerView size: stackViewWidthConstraint.constant = UIScreen.currWidth

Change priority for height constraint of imageView from 1000 to 749

Gonna revisit before next release version.
opened by geekaurora 0