Clip-it .io

clipitio

Redux has gained immense popularity for managing application state in a predictable and maintainable manner. This comprehensive guide walks through the process of implementing Redux in an iOS app, empowering developers to build scalable and efficient applications. From understanding core principles to practical implementation, this guide serves as a robust resource for adopting Redux in iOS development : the core principles - single source of truth, state immutability, and unidirectional data flow, where: Understanding Redux Architecture Store: Define the single source of truth for the application state Actions: Describe events that trigger state changes by reducer and trigger middleware Reducers: Pure functions that handle actions and update the state Middlewares: Interaction with services and side effects and the result of a new action . Create a new iOS project. Initialize the project structure, including folders Core, Flow, MW, Store, Services, where: Setting Up the Project Core for the basic architecture components and all additional general utilities Flow for UI components Views and their Service something like Controller/Presenter/View Model MW for Middlewares, DTO’s Store for Actions, Reducers, State Service for all components that are connected to the outside world something like File Manager/DB/Network/… . At first make protocol for actions and at the same time include reducer. Define actions that represent events triggering state changes. Organize actions into separate files based on functionality. Defining Actions Implementing Reducers. Create reducers that handle actions and update the state immutably. Combine reducers to manage different parts of the state protocol Action {
    associatedtype StateType: Equatable
    func reduce(_ state: inout StateType)
} enum MainAction: Action {
    case user(UserAction)
    
    func reduce(_ state: inout MainState) {
        switch self {
        case let .user(action): action.reduce(&state)
        }
    }
} enum UserAction: Action {
    case getUserData
    case receiveUser(UserModel)
    
    func reduce(_ state: inout MainState) {
        switch self {
        case .getUserData: state.user = .loading
        case let .receiveUser(model): state.user = .result(model)
        }
    }
} . Make base elements and protocol for Middleware. Implement middleware to manage asynchronous actions. And create DTO with mapping to State model Managing Asynchronous Operations struct Box<Act> where Act: Action {
    let run: (@escaping (Act) -> Void) -> Void
    
    init(_ run: @escaping (@escaping (Act) -> Void) -> Void) {
        self.run = run
    }
}

extension Box {
    static func throwTask(
        _ run: @escaping (@escaping (Act) -> Void) async throws -> Void,
        catchError: @escaping (@escaping (Act) -> Void, Error) -> Void = { _, _ in }
    ) -> Self {
        Self { dispatcher in
            Task {
                do {
                    try await run(dispatcher)
                } catch {
                    catchError(dispatcher, error)
                }
            }
        }
    }
}

extension Box {
    static var zero: Self { Self { _ in }}
    
    static func +=(lhs: inout Self, rhs: Self) {
        let tmp = lhs
        lhs = Self { dispatcher in
            tmp.run(dispatcher)
            rhs.run(dispatcher)
        }
    }
} protocol Middleware {
    associatedtype Act where Act: Action
    func run(state: Act.StateType, action: Act) -> Box<Act>
}

extension Middleware {
    var asAnyMiddleware: AnyMiddleware<Act> {
        AnyMiddleware(self.run(state:action:))
    }
} struct AnyMiddleware<Act>: Middleware where Act: Action {
    private let runer: (Act.StateType, Act) -> Box<Act>
    
    init(_ run: @escaping (Act.StateType, Act) -> Box<Act>) {
        self.runer = run
    }
    
    func run(state: Act.StateType, action: Act) -> Box<Act> {
        runer(state, action)
    }
} struct UserMW: Middleware {
    private let net: UserNetProvider
    
    init(net: UserNetProvider) {
        self.net = net
    }
    
    func run(state: MainState, action: MainAction) -> Box<MainAction> {
        switch action {
        case let .user(userAction): return handleUser(state: state.user, action: userAction)
        default: return .zero
        }
    }
    
    func handleUser(state: ModelWrapper<UserModel>, action: UserAction) -> Box<MainAction> {
        switch action {
        case .getUserData: return Box.throwTask { dispatcher in
            let userDTO: UserDTO = try await net.getUserData()
            dispatcher(.user(.receiveUser(userDTO.convert)))
        } catchError: { dispatcher, error in
            // Handle error
        }
        default: return .zero
        }
    }
} struct UserDTO: Decodable {
    let name: String
    let age: Int
    
    var convert: UserModel {
        UserModel(name: name, age: age)
    }
} . Create State and Model wrapper for implementing all states. Create a store to manage the application state. Define the initial state and configure the store. Implementing the Store Of course Store implementation is very simple without corner cases enum ModelWrapper<Model> where Model: Equatable {
    case initialize
    case loading
    case error(Error)
    case result(Model)
}

extension ModelWrapper: Equatable {
    private var equatabeValue: String {
        return switch self {
        case .initialize: "initialize \(String(describing: Model.self))"
        case .loading: "loading \(String(describing: Model.self))"
        case let .error(error): error.localizedDescription
        case let .result(model): String(describing: model)
        }
    }
    
    static func == (lhs: ModelWrapper<Model>, rhs: ModelWrapper<Model>) -> Bool {
        lhs.equatabeValue == rhs.equatabeValue
    }
} struct MainState: Equatable {
    public internal(set) var user: ModelWrapper<UserModel> = .initialize
} struct UserModel: Equatable {
    let name: String
    let age: Int
} actor Store<Act> where Act: Action {
    nonisolated var statePublisher: AnyPublisher<Act.StateType, Never> {
        stateSubject.eraseToAnyPublisher()
    }
    
    private var state: Act.StateType {
        didSet {
            stateSubject.send(state)
        }
    }
    private let stateSubject: CurrentValueSubject<Act.StateType, Never>
    
    private let middlewares: [AnyMiddleware<Act>]
    
    init(initState: Act.StateType, middlewares: [AnyMiddleware<Act>]) {
        self.state = initState
        self.stateSubject = CurrentValueSubject(initState)
        self.middlewares = middlewares
    }
    
    func dispatch(action: Act) {
        var box = Box<Act>.zero
        
        for mw in middlewares {
            box += mw.run(state: state, action: action)
        }
        
        action.reduce(&state)
        
        box.run(dispatch(action:))
    }
} . Integrate Redux with view components to read state from the store. Create simple View with ViewController and dispatch actions to trigger state updates. Connecting Components to Redux class ReduxVC<Act>: UIViewController where Act: Action {
    private let store: Store<Act>
    private var box = Set<AnyCancellable>()
    
    init(store: Store<Act>) {
        self.store = store
        super.init(nibName: nil, bundle: nil)
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    func sink<S: Equatable>(map: KeyPath<Act.StateType, S>, _ sink: @escaping (_ storeState: S) -> Void) {
        store
            .statePublisher
            .map(map)
            .removeDuplicates()
            .receive(on: DispatchQueue.main)
            .sink(receiveValue: sink)
            .store(in: &box)
    }
    
    func dispatch(_ action: Act) {
        Task { await store.dispatch(action: action) }
    }
} final class UserScreenView: UIView {
    
    private let spiner = {
        $0.isHidden = true
        $0.color = .black
        $0.translatesAutoresizingMaskIntoConstraints = false
        return $0
    }(UIActivityIndicatorView(style: .medium))
    
    private let dataView = {
        $0.isHidden = true
        $0.backgroundColor = .lightGray
        $0.clipsToBounds = true
        $0.layer.cornerRadius = 10
        $0.translatesAutoresizingMaskIntoConstraints = false
        return $0
    }(UIView())
    
    private let errorView = {
        $0.isHidden = true
        $0.backgroundColor = .lightGray
        $0.clipsToBounds = true
        $0.layer.cornerRadius = 10
        $0.translatesAutoresizingMaskIntoConstraints = false
        return $0
    }(UIView())
    
    private let nameLabel = {
        $0.font = .systemFont(ofSize: 22, weight: .regular)
        $0.textColor = .black
        $0.translatesAutoresizingMaskIntoConstraints = false
        return $0
    }(UILabel())
    
    private let ageLabel = {
        $0.font = .systemFont(ofSize: 22, weight: .regular)
        $0.textColor = .black
        $0.translatesAutoresizingMaskIntoConstraints = false
        return $0
    }(UILabel())
    
    private let errorLabel = {
        $0.font = .systemFont(ofSize: 22, weight: .regular)
        $0.textColor = .systemRed
        $0.translatesAutoresizingMaskIntoConstraints = false
        return $0
    }(UILabel())
    
    init() {
        super.init(frame: .zero)
        backgroundColor = .white
        
        addSubview(spiner)
        addSubview(dataView)
        dataView.addSubview(nameLabel)
        dataView.addSubview(ageLabel)
        addSubview(errorView)
        errorView.addSubview(errorLabel)
        
        NSLayoutConstraint.activate([
            spiner.centerXAnchor.constraint(equalTo: centerXAnchor),
            spiner.centerYAnchor.constraint(equalTo: centerYAnchor),
            spiner.heightAnchor.constraint(equalToConstant: 30),
            spiner.widthAnchor.constraint(equalToConstant: 30),
            
            dataView.centerXAnchor.constraint(equalTo: centerXAnchor),
            dataView.centerYAnchor.constraint(equalTo: centerYAnchor),
            nameLabel.leadingAnchor.constraint(equalTo: dataView.leadingAnchor, constant: 22),
            nameLabel.trailingAnchor.constraint(equalTo: dataView.trailingAnchor, constant: -22),
            nameLabel.topAnchor.constraint(equalTo: dataView.topAnchor, constant: 22),
            ageLabel.widthAnchor.constraint(equalTo: nameLabel.widthAnchor),
            ageLabel.centerXAnchor.constraint(equalTo: dataView.centerXAnchor),
            ageLabel.topAnchor.constraint(equalTo: nameLabel.bottomAnchor, constant: 22),
            ageLabel.bottomAnchor.constraint(equalTo: dataView.bottomAnchor, constant: -22),
            
            errorView.centerXAnchor.constraint(equalTo: centerXAnchor),
            errorView.centerYAnchor.constraint(equalTo: centerYAnchor),
            errorLabel.leadingAnchor.constraint(equalTo: errorView.leadingAnchor, constant: 22),
            errorLabel.trailingAnchor.constraint(equalTo: errorView.trailingAnchor, constant: -22),
            errorLabel.topAnchor.constraint(equalTo: errorView.topAnchor, constant: 22),
            errorLabel.bottomAnchor.constraint(equalTo: errorView.bottomAnchor, constant: -22)
        ])
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    func loadingData() {
        dataView.isHidden = true
        errorView.isHidden = true
        spiner.isHidden = false
        spiner.startAnimating()
    }
    
    func errorSetup(_ error: String) {
        dataView.isHidden = true
        spiner.isHidden = true
        errorView.isHidden = false
        spiner.stopAnimating()
        
        errorLabel.text = error
    }
    
    func dataSetup(_ model: UserModel) {
        dataView.isHidden = false
        spiner.isHidden = true
        errorView.isHidden = true
        spiner.stopAnimating()
        
        nameLabel.text = model.name
        ageLabel.text = String(model.age)
    }
} final class UserScreenVC: ReduxVC<MainAction> {

    let mainView = UserScreenView()
    
    override func loadView() {
        self.view = mainView
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        sink(map: \.user) { [unowned self] state in
            switch state {
            case .initialize: break
            case .loading: mainView.loadingData()
            case let .error(err): mainView.errorSetup(err.localizedDescription)
            case let .result(model): mainView.dataSetup(model)
            }
        }
        
        dispatch(.user(.getUserData))
    }
} And finally assembly all components together into SceneDelegate guard let windowScene = (scene as? UIWindowScene) else { return }

let netProvider = NetProvider()

let store = Store<MainAction>(
    initState: MainState(),
    middlewares: [
        UserMW(net: UserNetProvider(netProvider: netProvider)).asAnyMiddleware
    ]
)

window = UIWindow(frame: UIScreen.main.bounds)
window?.windowScene = windowScene
window?.rootViewController = UserScreenVC(store: store)
window?.makeKeyAndVisible() All structural folders Core, Flow, MW, Store, Services you can separate into separate elements e.g. Frameworks/Swift Packages/Libraries or something like this Conclusion: In conclusion, the adoption of Redux architecture in iOS app development offers a structured, scalable, and efficient approach to managing application state. This comprehensive guide has illuminated the core principles of Redux, emphasizing the importance of a single source of truth, state immutability, and unidirectional data flow. The step-by-step exploration of implementing Redux architecture has covered various key components

Building Testable and Maintainable iOS Apps with Redux

Protocol-oriented programming is one of the most powerful and flexible tools for competent composition and distribution of responsibility in Swift. In one of the previous articles, protocol-oriented programming was used to manage the state and build a safe sequence of state transitions without additional checks. If you have not read , then it is recommended to read as material that will show one of the ways to use this wonderful approach. the previous article In this article, we’ll explore another way to use protocol-oriented programming. As a bonus — we’ll write our extension for programming UI components in UIKit that mimics the experience. SwiftUI What is the task before us? As we all know, all graphical components in UIKit are direct descendants of UIView, each with its own unique properties. A protocol-oriented approach will help us to endow each of the heirs with their own unique properties while making it possible to combine these properties in case we want to use the properties of the parent and the properties of the child. In addition to the protocol-oriented approach, we will also use the design pattern to bring the SwiftUI declarative syntax experience to UIKit. Decorator Let’s start with the simplest. Select several basic UI classes with which we will start: — all graphical components are inherited from it UIView — all , and so on are inherited from it UIControl UIButton UISegmentedControl Final UI components like , , and so on UILabel UITextField The inheritance diagram can be seen below: Let’s start our task by creating an interface: protocol Stylable {} This protocol is the basis for all subsequent extensions for our case. Since all graphical components somehow inherit from to cover all components — it is enough to extend with this protocol: UIView UIView extension UIView: Stylable {} Some of the most used properties for customizing a are , , , , . Moreover, these properties are often used not only to configure the , but also for its descendants. UIView cornerRadius backgroundColor clipsToBounds contentMode isHidden UIView Let’s extend the possibilities of for all classes and their descendants: Stylable UIView extension Stylable where Self: UIView {
    @discardableResult
    func cornerRadius(_ value: CGFloat) -> Self {
        self.layer.cornerRadius = value

        return self
    }

    @discardableResult
    func backgroundColor(_ value: UIColor) -> Self {
        self.backgroundColor = value

        return self
    }

    @discardableResult
    func clipsToBounds(_ value: Bool) -> Self {
        self.clipsToBounds = value

        return self
    }

    @discardableResult
    func contentMode(_ value: UIView.ContentMode) -> Self {
        self.contentMode = value

        return self
    }

    @discardableResult
    func isHidden(_ value: Bool) -> Self {
        self.isHidden = value

        return self
    }
} Let’s check what this extension gave us: let customView = UIView()
    .backgroundColor(.red)
    .clipsToBounds(true)
    .cornerRadius(20)

let customButton = UIButton()
    .backgroundColor(.red)
    .clipsToBounds(true)
    .cornerRadius(20)

let segmentedControl = UISegmentedControl(items: ["One", "Two"])
    .backgroundColor(.red)
    .clipsToBounds(true)
    .cornerRadius(20)

let scrollView = UIScrollView()
    .backgroundColor(.red)
    .clipsToBounds(true)
    .cornerRadius(20)

let textField = UITextField()
    .backgroundColor(.red)
    .clipsToBounds(true)
    .cornerRadius(20) As we can see, thanks to the extension, we can declaratively change properties not only for but also for its descendants. UIView Let’s move on to configuring the . For all of its descendants, one of the most used customizable things is tap, properties — , , . UIControl isEnabled tintColor isUserInteractionEnabled Let’s extend the possibilities of for all classes and their descendants: Stylable UIControl extension Stylable where Self: UIControl {
    @discardableResult
    func action(_ value: (() -> Void)?, event: UIControl.Event = .touchUpInside) -> Self {
        let identifier = UIAction.Identifier(String(describing: event.rawValue))
        let action = UIAction(identifier: identifier) { _ in
            value?()
        }
        
        self.removeAction(identifiedBy: identifier, for: event)
        self.addAction(action, for: event)
        
        return self
    }
    
    @discardableResult
    func secondAction(_ value: ((Bool) -> Void)?, controlEvent: UIControl.Event = .valueChanged) -> Self {
        let identifier = UIAction.Identifier(String(describing: controlEvent.rawValue))
        let action = UIAction(identifier: identifier) { item in
            guard let control = item.sender as? UIControl else {
                return
            }
            value?(!control.isTracking)
        }
        
        self.removeAction(identifiedBy: identifier, for: controlEvent)
        self.addAction(action, for: controlEvent)
        
        return self
    }
    
    @discardableResult
    func isEnabled(_ value: Bool) -> Self {
        self.isEnabled = value
        
        return self
    }
    
    @discardableResult
    func isUserInteractionEnabled(_ value: Bool) -> Self {
        self.isUserInteractionEnabled = value
        
        return self
    }
    
    @discardableResult
    func tintColor(_ value: UIColor) -> Self {
        self.tintColor = value
        
        return self
    }
} After the extension for , an additional customization option became available for all its descendants: Stylable UIControl let customButton = UIButton()
    .backgroundColor(.red)
    .clipsToBounds(true)
    .cornerRadius(20)
    .tintColor(.red)
    .action {
       print(#function)
    }
    .isEnabled(true)
    .isUserInteractionEnabled(true)

    
let segmentedControl = UISegmentedControl(items: ["One", "Two"])
    .backgroundColor(.red)
    .clipsToBounds(true)
    .cornerRadius(20)
    .tintColor(.red)
    .action {
       print(#function)
    }
    .isEnabled(true)
    .isUserInteractionEnabled(true) It is worth noting that when calling the action method using a class method, you should initialize this component lazily to ensure that the class (self) is initialized before the component is initialized. lazy var customButton = UIButton()
    .backgroundColor(.red)
    .clipsToBounds(true)
    .cornerRadius(20)
    .tintColor(.red)
    .action { [weak self] in
         self?.actionTest()
    }
    .isEnabled(true)
    .isUserInteractionEnabled(true)
    
private func actionTest() {
    print(#function)
} Let’s also extend with some of the most popular custom properties: UITextField extension Stylable where Self: UITextField {
    @discardableResult
    func text(_ value: String?) -> Self {
        self.text = value

        return self
    }

    @discardableResult
    func font(_ value: UIFont) -> Self {
        self.font = value

        return self
    }

    @discardableResult
    func textAlignment(_ value: NSTextAlignment) -> Self {
        self.textAlignment = value

        return self
    }

    @discardableResult
    func textColor(_ value: UIColor) -> Self {
        self.textColor = value

        return self
    }

    @discardableResult
    func capitalizationType(_ value: UITextAutocapitalizationType) -> Self {
        self.autocapitalizationType = value

        return self
    }

    @discardableResult
    func keyboardType(_ value: UIKeyboardType) -> Self {
        self.keyboardType = value

        return self
    }

    @discardableResult
    func isSecureTextEntry(_ value: Bool) -> Self {
        self.isSecureTextEntry = value

        return self
    }

    @discardableResult
    func autocorrectionType(_ value: UITextAutocorrectionType) -> Self {
        self.autocorrectionType = value

        return self
    }

    @discardableResult
    func contentType(_ value: UITextContentType?) -> Self {
        self.textContentType = value

        return self
    }

    @discardableResult
    func clearButtonMode(_ value: UITextField.ViewMode) -> Self {
        self.clearButtonMode = value

        return self
    }

    @discardableResult
    func placeholder(_ value: String?) -> Self {
        self.placeholder = value

        return self
    }

    @discardableResult
    func returnKeyType(_ value: UIReturnKeyType) -> Self {
        self.returnKeyType = value

        return self
    }
    
    @discardableResult
    func delegate(_ value: UITextFieldDelegate) -> Self {
        self.delegate = value

        return self
    }

    @discardableResult
    func atributedPlaceholder(
        _ value: String,
        textColor: UIColor,
        textFont: UIFont
    ) -> Self {
        let attributedString = NSAttributedString(
            string: value,
            attributes: [
                NSAttributedString.Key.foregroundColor: textColor,
                NSAttributedString.Key.font: textFont
            ]
        )

        self.attributedPlaceholder = attributedString

        return self
    }
} Thanks to this extension, customizing has become even easier. To customize the GUI, the methods of its parents are available, as well as its own methods: UITextField lazy var textField = UITextField()
     .placeholder("Placeholder")
     .textColor(.red)
     .text("Text")
     .contentType(.URL)
     .autocorrectionType(.yes)
     .font(.boldSystemFont(ofSize: 12))
     .delegate(self) It’s worth noting that, similar to capturing self in the ’s action method, assigning a delegate, also requires to be lazy-initialized. UIControl textField By analogy, the rest of the graphical components are expanded with properties that will be used for customization. As a bonus for my readers, I’ve compiled some of the most requested properties in this . You need to copy the files to your project; they are ready to use. repository Don’t hesitate to contact me on if you have any questions. Also, you can always . Twitter buy me a coffee Also published . here

Protocol-Oriented Programming and Modifying UIKit Components Mimicking SwiftUI

Super-Powered Vintage Lists in Android: Decorations à la Carte

I’ve spent the last few weeks learning about compose and decided to write a post to share my notes. This post is not meant to teach you everything about Compose but rather it’ll be more like a roadmap that you can use to learn Compose or to see what you still don’t know about Compose. This article will be constantly updated as I learn new things. State hoisting State hoisting is a pattern of moving state up to make a component stateless. When applied to composables, this often means introducing two parameters to the composable. value: T – the current value to display onValueChange: (T) -> Unit – an event that requests the value to change, where T is the proposed new value CompositionLocal Tool for passing data down through the Composition implicitly. CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
  Text(...)
}
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.disabled) {
  Icon(...)
  Text(...)
} compositionLocalOf Changing the value provided during recomposition invalidates only the content that reads its current value. data class Elevations(val card: Dp = 0.dp, val default: Dp = 0.dp)
val LocalElevations = compositionLocalOf { Elevations() } // Create composition with default value

val elevations = Elevations(card = 4.dp, default = 2.dp) // Provide different value here
CompositionLocalProvider(LocalElevations provides elevations) { ... } staticCompositionLocalOf Reads of a are not tracked by Compose. Changing the value causes the entirety of the content lambda where the CompositionLocal is provided to be recomposed. staticCompositionLocalOf If the value provided to the CompositionLocal is highly unlikely to change or will never change, use to get performance benefits. staticCompositionLocalOf Keeping track of changes remember A value computed by remember will be stored in the composition tree, and only be recomputed if the keys to remember change. When adding memory to a composable, always ask yourself “will some caller reasonably want to control this?” If the answer is yes, make a parameter instead. If the answer is no, keep it as a local variable. Remember stores values in the Composition, and will forget them if the composable that called remember is removed. This means you shouldn’t rely upon remember to store important things inside of composables that add and remove children such as . LazyColumn rememberSaveable It behaves similarly to remember, but the stored value will survive the activity or process recreation using the saved instance state mechanism rememberUpdatedState In some situations you might want to capture a value in your effect that, if it changes, you do not want the effect to restart. Create a reference to this value which can be captured and updated. rememberLauncherForActivityResult val result = remember { mutableStateOf<Bitmap?>(null) }
val launcher = rememberLauncherForActivityResult(ActivityResultContracts.TakePicturePreview()) {
  result.value = it
}

Button(onClick = { launcher.launch() }) { ... }

result.value?.let { image ->
  Image(image.asImageBitmap(), null, modifier = Modifier.fillMaxWidth())
} rememberCoroutineScope In order to launch a coroutine outside of a composable, but scoped so that it will be automatically canceled once it leaves the composition is used for scoping jobs initiated by the composition. is for scoping jobs initiated by a user interaction. LaunchedEffect rememberCoroutineScope LaunchedEffect Call suspend functions safely from inside a composable. The coroutine will be cancelled if LaunchedEffect leaves the composition. If LaunchedEffect is recomposed with different keys, the existing coroutine will be cancelled and the new suspend function will be launched in a new coroutine. val currentOnTimeout by rememberUpdatedState(onTimeout)

LaunchedEffect(true) {
  delay(SplashWaitTimeMillis)
  currentOnTimeout()
} snapshotFlow Convert Compose State<T> objects into a Flow. DisposableEffect DisposableEffect is meant for side effects that need to be cleaned up after the keys change or the composable leaves the Composition. DisposableEffect(dispatcher) {
  dispatcher.addCallback(backCallback)
  onDispose {
    backCallback.remove()
  }
} derivedStateOf derivedStateOf is used when you want a Compose State that’s derived from another State. State Holder State holders always need to be in order to keep them in the Composition and not create a new one every time. It’s a good practice to create a method in the same file that does this to remove boilerplate and avoid any mistakes that might occur. remembered Layouts LazyColumn and LazyRow Don’t recycle their children like RecyclerView. It emits new Composables as you scroll through it and is still performant as emitting Composables is relatively cheap compared to instantiating Android Views. val listState = rememberLazyListState()

LazyColumn(
  contentPadding,
  verticalArrangement / horizontalArrangement = Arrangement.spacedBy
) {
  stickyHeader { Header()  } // Experimental
  items(5) { index -> Text(text = "Item: $index") } // key = ...
  item { Text(text = "Last item") }
}

LaunchedEffect(listState) {
  snapshotFlow { listState.firstVisibleItemIndex }
}

firstVisibleItemIndex
firstVisibleItemScrollOffset

scrollToItem()
animateScrollToItem() ConstraintLayout ConstraintLayout {
  val (button, text) = createRefs()

  Button(
    modifier = Modifier.constrainAs(button) {
      top.linkTo(parent.top, margin = 16.dp)
    }
  )

  Text("Text", Modifier.constrainAs(text) {
    top.linkTo(button.bottom, margin = 16.dp)
  })
}

ConstraintSet {
  val button = createRefFor("button")
  val text = createRefFor("text")

  constrain(button) { ... }
  constrain(text) { ... }
} Layout Instead of controlling how a single composable gets measured and laid out on the screen, you might have the same necessity for a group of composables. For that, you can use the Layout composable to manually control how to measure and position the layout’s children. Layout(
  modifier = modifier,
  content = content
) { measurables, constraints ->
  // Don't constrain child views further, measure them with given constraints
  val placeables = measurables.map { measurable -> measurable.measure(constraints) }

  // Set the size of the layout as big as it can
  layout(constraints.maxWidth, constraints.maxHeight) {
    var yPosition = 0

    placeables.forEach { placeable ->
      placeable.placeRelative(x = 0, y = yPosition)
      yPosition += placeable.height
    }
  }
} Intrinsic measurements Row(modifier = modifier.height(IntrinsicSize.Min)) Navigation val navController = rememberNavController()
val backstackEntry = navController.currentBackStackEntryAsState()

NavHost(navController = navController, startDestination = "profile") {
  composable(
    "profile/{userId}/?mode={mode}",
    arguments = listOf(
      navArgument("userId") { type = NavType.StringType },
      navArgument("mode") { defaultValue = "lite" },
    ),
    deepLinks = listOf(navDeepLink {
      uriPattern = "rally://$accountsName/{name}"
    })
  ) { 
    Profile(/*...*/) 
  }
  
  loginGraph()
}

fun NavGraphBuilder.loginGraph(navController: NavController) {
  navigation(startDestination = "username", route = "login") {
    composable("username") { ... }
  }
}

navController.navigate("friends") {
  popUpTo("home") { inclusive = true }
}

navController.navigate(screen.route) {
  // Pop up to the start destination of the graph to avoid building up a large stack 
  // of destinations on the back stack as users select items
  popUpTo(navController.graph.findStartDestination().id) {
    saveState = true
  }
  // Avoid multiple copies of the same destination when reselecting the same item
  launchSingleTop = true
  // Restore state when reselecting a previously selected item
  restoreState = true
} ViewModel @HiltViewModel
class ExampleViewModel @Inject constructor(
  ...
) : ViewModel() { /* ... */ }

@AndroidEntryPoint
class ExampleActivity : AppCompatActivity()

@Composable
fun ExampleScreen(
  exampleViewModel: ExampleViewModel = viewModel()
) { /* ... */ } Animation You can create an animation value by simply wrapping the changing value with the corresponding variant of composables. animate*AsState Float, Color, Dp, Size, Bounds, Offset, Rect, Int, IntOffset, and IntSize You can combine multiple transition objects with a + operator. MutableTransitionState(false).apply {
  targetState = true  // Start the animation immediately
  // isIdle, currentState
} AnimatedVisibility Content within (direct or indirect children) can use the animateEnterExit modifier to specify different animation behavior for each of them. AnimatedVisibility AnimatedContent defines how the size should animate between the initial and the target contents. SizeTransform animateContentSize Animates a size change Crossfade Animates between two layouts with a crossfade animation. Animatable Animatable is a value holder that can animate the value as it is changed via . animateTo sets the current value to the target value immediately. snapTo starts an animation that slows down from the given velocity. animateDecay val color = remember { Animatable(Color.Gray) }
LaunchedEffect(ok) { color.animateTo(if (ok) Color.Green else Color.Red) }InfiniteTransition InfiniteTransition Holds one or more child animations like Transition, but the animations start running as soon as they enter the composition and do not stop unless they are removed. Use the function. rememberInfiniteTransition Transition Transition manages one or more animations as its children and runs them simultaneously . between multiple states var currentState by remember { mutableStateOf(BoxState.Collapsed) }
val transition = updateTransition(currentState)

// Start in collapsed state and immediately animate to expanded
var currentState = remember { MutableTransitionState(BoxState.Collapsed) }
currentState.targetState = BoxState.Expanded
val transition = updateTransition(currentState)

transition.AnimatedVisibility
transition.AnimatedContent AnimationSpec spring(
  dampingRatio = Spring.DampingRatioHighBouncy,
  stiffness = Spring.StiffnessMedium
)

tween(
  durationMillis = 300,
  delayMillis = 50,
  easing = LinearOutSlowInEasing
)

// animates based on the snapshot values specified at different timestamps
keyframes {
  durationMillis = 375
  0.0f at 0 with LinearOutSlowInEasing // for 0-15 ms
  0.2f at 15 with FastOutLinearInEasing // for 15-75 ms
  0.4f at 75 // ms
  0.4f at 225 // ms
}

// runs a animation repeatedly until it reaches the specified iteration count
repeatable(
  iterations = 3,
  animation = tween(durationMillis = 300),
  repeatMode = RepeatMode.Reverse
)

// like repeatable, but it repeats for an infinite amount of iterations
infiniteRepeatable(
  animation = tween(durationMillis = 300),
  repeatMode = RepeatMode.Reverse
)

// immediately switches the value to the end value
snap(delayMillis = 50) Theming When defining colors, we name them “literally”, based on the color value, rather than “semantically” e.g. Red500 not primary. This enables us to define multiple themes e.g. another color might be considered primary in dark theme or on a differently styled screen. isSystemInDarkTheme() / MaterialTheme.colors.isLight color: Color = MaterialTheme.colors.surface, contentColor: Color = contentColorFor(color) When setting the color of any elements, prefer using a Surface to do this as it sets an appropriate content color value, be wary of direct Modifier.background calls which do not set an appropriate content color. CompositionLocal TextFieldDefaults textFieldColors outlinedTextFieldColors ProvideTextStyle So how do components set a theme typography style? Under the hood they use the composable (which itself uses a CompositionLocal) to set a “current” TextStyle. The Text composable defaults to querying this “current” style if you do not provide a concrete textStyle parameter. ProvideTextStyle Resources stringResource(R.string.congratulate, "New Year", 2021)
dimensionResource(R.dimen.padding_small)

painterResource(id = R.drawable.ic_logo)
animatedVectorResource(id = R.drawable.animated_vector)

Icon(Icons.Rounded.Menu) Fonts private val light = Font(R.font.raleway_light, FontWeight.W300)
private val regular = Font(R.font.raleway_regular, FontWeight.W400)
private val medium = Font(R.font.raleway_medium, FontWeight.W500)
private val semibold = Font(R.font.raleway_semibold, FontWeight.W600)

// Create a font family to use in TextStyles
private val craneFontFamily = FontFamily(light, regular, medium, semibold) buildAnnotatedString buildAnnotatedString {
  append("This is some unstyled text\\n")
  withStyle(SpanStyle(color = Color.Red)) {
    append("Red text\\n")
  }
  pushStringAnnotation(tag = "URL", annotation = "<https://developer.android.com>")
  withStyle(SpanStyle(fontSize = 24.sp)) {
    append("Large text")
  }
  pop()
} Generic Modifiers align
alignBy

// animateEnterExit modifier can be used for any direct or indirect children 
// of AnimatedVisibility to create a different enter/exit animation than 
// what's specified in AnimatedVisibility.
animateEnterExit(enter, exit)

border
background
clip
clipToBounds

drawBehind
drawWithCache
drawWithContent

// The draw layer can be invalidated separately from parents. 
// scaleX, scaleY, rotationXYZ, alpha, shadowElevation, shape, clip, shape
// Use with state values such as ScrollState or LazyListState
graphicsLayer

shadow
zIndex

onKeyEvent

// Creates a LayoutModifier that allows changing how the wrapped element is 
// measured and laid out.
layout

absoluteOffset
offset

fillMaxHeight, fillMaxWidth, fillMaxSize
// matches the size of the Box after all other children have been measured 
// to obtain the Box's size.
matchParentSize

heighIn(min, max), widthIn(min, max) Gesture Modifiers combinedClickable(onLongClick, onDoubleClick, onClick)

draggable(
  orientation = Orientation.Horizontal,
  state = rememberDraggableState { delta ->
    val newValue = offsetPosition.value + delta
    offsetPosition.value = newValue.coerceIn(minPx, maxPx)
  }
)

swipeable(
  state = swipeableState,
  anchors = anchors,
  thresholds = { _, _ -> FractionalThreshold(0.3f) },
  orientation = Orientation.Horizontal
)

pointerInput(Unit) {
  detectTapGestures(onPress, onDoubleTap, onLongPress, onTap)
  detectDragGestures { change, dragAmount ->
    change.consumeAllChanges()
    offsetX += dragAmount.x
    offsetY += dragAmount.y
  }
}

horizontalScroll, verticalScroll

// Detects the scroll gestures, but does not offset its contents.
// Has nested scroll built in
scrollable

nestedScroll(nestedScrollConnection, nestedScrollDispatcher) Miscelaneous LocalSoftwareKeyboardController val keyboardController = LocalSoftwareKeyboardController.current
// Calling this function is considered a side-effect and should not be called directly from recomposition
keyboardController.hide() LocalOnBackPressedDispatcherOwner and BackHandler var backHandlingEnabled by remember { mutableStateOf(true) }
var backPressedCount by remember { mutableStateOf(0) }
BackHandler(backHandlingEnabled) { backPressedCount++ }

val dispatcher = LocalOnBackPressedDispatcherOwner.current!!.onBackPressedDispatcher

Button(onClick = { dispatcher.onBackPressed() }) {
  Text("Press Back count $backPressedCount")
} LocalDensity val sizeInPx = with(LocalDensity.current) { 16.dp.toPx() }
val (minPx, maxPx) = with(LocalDensity.current) { min.toPx() to max.toPx() } FocusRequester val focusRequester = remember { FocusRequester() }
var color by remember { mutableStateOf(Black) }
Box(
  Modifier
    .clickable { focusRequester.requestFocus() }
    .border(2.dp, color)
    // The focusRequester should be added BEFORE the focusable.
    .focusRequester(focusRequester)
    // The onFocusChanged should be added BEFORE the focusable that is being observed.
    .onFocusChanged { color = if (it.isFocused) Green else Black }
    .focusable()
) Thank you for reading. If you have any suggestions feel free to contact me. Resources https://developer.android.com/jetpack/compose/architecture https://developer.android.com/jetpack/compose/resources https://developer.android.com/jetpack/compose/animation https://developer.android.com/jetpack/compose/gestures https://developer.android.com/jetpack/compose/navigation https://developer.android.com/jetpack/compose/modifiers-list https://developer.android.com/jetpack/compose/mental-model https://developer.android.com/jetpack/compose/compositionlocal https://developer.android.com/codelabs/jetpack-compose-basics https://developer.android.com/codelabs/jetpack-compose-layouts https://developer.android.com/codelabs/jetpack-compose-state https://developer.android.com/codelabs/jetpack-compose-theming https://developer.android.com/codelabs/jetpack-compose-animation https://developer.android.com/codelabs/jetpack-compose-navigation https://developer.android.com/codelabs/jetpack-compose-advanced-state-side-effects https://developer.android.com/reference/kotlin/androidx/compose/runtime/saveable/package-summary Also published . here

The Ultimate Jetpack Compose Cheat Sheet

Back in 2014 I started my career as android application developer, I worked on many projects including core android apps which required deep knowledge of android SDKs and also NDK. Other than that I also worked on IOT projects which included connecting with external and on-device sensors. I enjoy being challenged and engaging with projects that require me to work outside my comfort and knowledge set, therefore I started looking into iOS development later in 2017. Knowing the mobile eco-system, it wasn’t much difficult for me to getting along and thanks to the sister languages, kotlin and swift, there was almost zero effort to work on swift. TL;DR From Android to iOS development — highlighting the better things Root view controller I was writing a network wrapper for iOS to manage all network calls.Whenever network request is made, loader dialog is shown and is removed when call is ended. Imagine doing it in android :@ What would you do? pass a context in every function, function by function or putting it in a constants file? using application context (which introduces a new set of problems). (Not the ideal way, but it was a small app) currentVC = rootVC.presentedViewController ?? rootVC!currentVC.present(screenLoader, animated: ) let false Creating custom views Ever created custom view for android? Some heavy chart? Remember problems with onDraw? It being fired more than once? or do you remember onLayoutSubviews where you request for the view size?Well, iOS manages it beautifully. It’s not like we don’t have onDraw in iOS but it is different, frame and bounds are really powerful. draw( rect: CGRect) { .draw(rect) override func _ super **self**.layer.borderColor = UIColor.blue.cgColor  
**self**.layer.cornerRadius = **self**.frame.height/2  
**self**.layer.borderWidth = 2.0  
**self**.clipsToBounds = **true  
self**.setTitleColor(.white, for: .highlighted)  
(buttonColor = buttonColor) } Or you can also use auto layout in custom view. . See example here Storyboard Android developers have been away from this blessing, anyhow they are catching up now.There is to learn such as XML. You don’t have to see the code for sometime which is also a good feeling. Drag and drop is lot easy, you can say, common sense is required for building simple UIs.No view ids — phew. are something from heaven, well kotlinx synthetic has also made it a lot easier but aren’t mature enough.Another beautiful thing about storyboard are the , the navigation between the view controllers, a proper, better backstack and understanding of the app flow.Ever implemented bottom bar/tab bar? Had to work with the fragments? Maintaining multiple lifecycles? Try doing it on iOS :) no markup language IBOutlets and IBActions seagues Dependency Injection Dagger and Koin are the most popular dependency injection libraries in android, they require a tricky setup and lots of code, specially autogenerated, and they come with their own set of bugs and errors.In iOS, we do not require any library but technique which is less prone to errors and easier to implement. Call Kit We worked on a chat application which included audio/video call. There were tons of things we had to take care of in android. Setting the wake-lock, proximity sensor to disable the screen, keep screen on, running the timer etc.Whereas iOS comes with call kit which already handle all these cases :) Anyhow, call kit helps but it also limit developers. Target Devices Apple has the limited number of devices running on iOS: iPhone, iPod and iPad. Moreover, the shows, that over 50% of users updated their operating systems to the latest version (iOS 11) during the first 3 weeks after the release. It makes lives of iOS developers easier. A development process flows faster because you have to build your app for a narrow range of devices and operating systems. most recent statistics But if we talk about Android, it’s just a mess. There are dozens of smartphones and tablets on Android with different screen sizes and aspect ratios. It means your app should be suitable for all of them. Or at least for the biggest part.The same thing is about operating systems. Here you can’t find any, which is used by of Android device owners. And it means that you again have to consider this difference while building your app. more than 50% XCode IDE When it comes to the IDE, android studio is lot better in many things, such as giving suggestions, navigation by clicking on the class, improving code snippet etc. but when it comes to speed, XCode is way better, android studio is memory hungry. It takes lot of time to import a project or even running the project can be very frustrating at times specially in debug mode. Conclusion It is not like that iOS is better than Android for development aspect, both have their own pros and cons. This post focuses on few pros I have experienced in last year. If there are any other things I missed, please comment and if you liked it please clap :)

A journey from android development to iOS development in 2018 — Kotlin and Swift

Having the right at your disposal can really help you become a productive developer. I have come up with a list from the tools that I use on a daily basis and some that I have come across and found useful but did not end up using as much (but that’s only because my projects had different requirements). tools This list of tools came about from my development of . I wanted to be as productive as possible and stay on track! Clipit: Digital Coupons Command Line ConEmu ConEmu is my go-to choice as my Windows terminal. You can customize the colours, open multiple tabs, and run multiple apps, like PuTTY. I even run Git Bash within ConEmu. Website: https://conemu.github.io/ Free Price: Windows Platforms: Source Control GitHub I use GitHub for all of my projects and have done so since I started . I am a student at the moment, so I am able to get private repositories for free, so, I chose to stick with GitHub. GitHub is based on Git. programming Website: https://github.com/ Free for public repositories. $7+/month for private repositories Price: Windows, Mac, and Linux (using Git). The desktop application is available for Windows and Mac Platforms: Bitbucket Bitbucket is just like GitHub. It’s mostly just a personal preference that I use GitHub. The biggest difference is that Bitbucket provides private repos for free while GitHub doesn’t. Atlassian also has a lot of different tools, such as Jira, Trello, Bamboo, and Source Tree, which means that a lot of the tools integrate into each other, creating a productive and efficient workflow. Website: https://bitbucket.org/ Free for public and private repositories. $2/user for unlimited users. Price: Web through Bitbucket. Desktop through Git GUIs, such as Sourcetree Platforms: Git GUIs Github Desktop I mainly use command line for my Git needs but when I need to see something visually, I use GitHub Desktop or Sourcetree. You can see the changes you have made with ease, fetch, commit, and more without touching the command line. Website: https://desktop.github.com/ Free Price: Windows and Mac Platforms: Sourcetree Sourcetree is another Git GUI. It has more features than GitHub Desktop for sure and the workflow is also better. You should try out both GitHub Desktop and Sourcetree to see what works better for you. These are the two that I am familiar with but there are others as well, such as . GitKraken Website: https://www.sourcetreeapp.com/ Free Price: Windows and Mac Platforms: Code Editor Visual Studio Code I always use VS Code when working on web projects. It has so many different plugins that make my life that much easier. You can customize folder icons, code themes, autocomplete for various frameworks, and so much more. It has built in VC as well, which makes it easy to push your code to source control. The search is also extremely fast, even when you have multiple projects in your workspace. Website: https://code.visualstudio.com/ Free Price: Windows, Mac, and Linux Platforms: Notepad++ Notepad++ is another one that I really like. It is not fancy by any means but very light weight and gets the job done. I use it for making quick changes to files, opening projects that I don’t necessary want to add to my VS Code workspace, and just taking notes. VS Code is my main editor but I always find Notepad++ to be useful. Website: https://notepad-plus-plus.org/ Free Price: Windows Platforms: Continuous Integration Travis CI Travis CI lets you test and deploy your code with ease. You don’t have to wait for a large change in your code before it is merged into your source code but rather, you can push small changes continuously and Travis CI will make sure to run tests and let you know if there are any issues that need to be addressed. Continuous integration definitely makes it easier for large teams to work together without breaking the project. Website: https://travis-ci.org/ Free for open source projects. $69+/month for private projects Price: Web Platforms: Jenkins Jenkins is an open-source automation server which can be used for testing, deploying, and delivering. Jenkins is my preferred tool to automate server tasks to test and deploy. The best part is that it’s open-source. Website: https://jenkins.io/ Free Price: Jenkins can be installed through native system packages, Docker, or even run standalone by any machine with a Java Runtime Environment (JRE) installed. Platforms: Automating Mobile Deployment fastlane fastlane is an amazing tool for automating mobile builds and releases. I use it to build and release my iOS apps to TestFlight. It takes care of the tedious tasks, such as increment the version number, updating the screenshots, and code signing.I have a tutorial if you need help setting up TestFlight with your Ionic applications (most of the tutorial is pretty general and would work with native apps too): . https://medium.com/@clipitapplication/fastlane-ios-ionic-2-3-tutorial-e46d0d6b5943 Project Management Basecamp After having tried many different tools, such as Trello, Favro, and Asana, the one that worked best for me was Basecamp. I really enjoy how streamlined everything is. You can avoid a majority of meetings by setting up automated check-ins for the entire team. Each project is basically its own page, with documents, schedules, a chat area, messages, and to-dos. Basecamp also has Hill Charts if you want to visualize the progress of work being done. Website: https://basecamp.com/ $99/month for unlimited users, projects, and 500GB of storage Price: Windows, Mac, iOS, Android, and Web Platforms: Trello Trello is another great project management tool that was recently acquired by Atlassian. It offers tons of features, called Power-Ups, which are add-ons such as accessing Google Drive documents directly from boards, GitHub Autosync, and Slack webhooks. Those are just a few among the dozens that are offered. It was a personal decision of mine to go with Basecamp because the workflows are definitely different between the two and Basecamp’s just worked better for mew. Website: https://trello.com/ Free with unlimited boards, 1 power-up, and attachments up to 10 mb. $9.99+/user/month for unlimited power-ups, control user access, and get priority support Price: Platforms: Windows, Mac, iOS, Android, and Web Communication Slack Slack is one of the best communication tools whether your team is 10,000 strong or 2 people. You can create channels for different projects and events, share files, images, gifs, and automate almost anything that you want. You want to create a bot that can tell you how to get to a meeting room on a floor you’re unfamiliar with? You can create one in Slack. Actually, I use one to do that almost every week because I can never remember where a certain room is. In my opinion, the communication section does not really need another contender because Slack is an all-rounder. There are other tools such as and those are really great as well but do not solve the same purpose that Slack does. SocialChorus Website: https://slack.com Free for small teams with a limit of 10k of the most recent message being searchable. $6.67+/user/month for unlimited message search, multi-user video and voice calls, and more. Price: Windows, Mac, Linux, iOS, Android, Windows Phone (beta), and also available on the Apple Watch Platforms: API Development Postman Postman is great for API development. The tool lets you easily design, test, and publish APIs through a well thought-out user experience. It allows you to monitor your APIs to ensure they aren’t facing downtime, automate tests, and document the different endpoints. The best part is, you can share your Postman APIs with other users and allow them to run it within Postman. Website: https://www.getpostman.com/ Free for up to 1,000 monthly calls. $8+/user/month for more than 100,000 monthly calls, single sign-on, and more Price: Windows, Mac, and Linux Platforms: Paw Paw is another great tool for API development. It has a nice user interface for testing endpoints, documenting APIs, inspecting server responses, and exporting API definitions. The only downside to Paw is that it’s exclusive to Mac. It allows you to work as a team on the same endpoints with the tests and configurations being synchronized across all members. Website: https://paw.cloud/ $49.99 for one user and up to 3 machines at a time. $10.99/user/month for Paw for Teams Price: Mac Platforms: Code Quality Check SonarQube SonarQube is a continuous inspection tool that looks out for bugs, vulnerabilities, and code smells. It can be integrated with almost any project, with support for over 20 languages. SonarQube can be integrated with many different tools, such as GitHub and Bitbucket. I personally use SonarQube after making any changes and before deploying anything to production so I can fix what needs fixing. Best of all, it’s all open-source. Website: https://www.sonarqube.org/ Free to run locally. Free to run in the cloud for open-source projects and €10+/month starting at 100k lines of code Price: Windows, Mac, Linux, and Cloud Platform: Codacy Codacy is an automated code analysis tool, similar to SonarQube. It helps identify code duplicates, issues, code coverage, and code complexity. It also helps you keep track of your progress throughout the development cycle of any source code to see how issues are resolved, how often duplicate issues show up, and much more. I personally prefer SonarQube because the functionality is very similar and SonarQube is a more developed platform. Website: https://www.codacy.com Free for open source projects. $15+/user/month for private projects Price: Cloud Platforms: Icons Feather Feather provides 300+ beautiful open-source icons. I use them a ton for my projects and hope they help you out as well! Let me know what tools you guys use the most and which one’s from this list you like. I will look into the tools you recommend to add to my own workflow or for recommendations when I decide to update this list. Best of luck being productive developers! Recommendations from readers: Daily — Developer’s Secret Source Daily allows you, as a developer, to keep up with the latest news on software development through an extension in your browser. I have tried it out and the user interface is quite nice and not distractive. You get the news quickly and then you’re free to move on to your work! Website: https://www.dailynow.co/ Free Price: and Platforms: Chrome Firefox

Stories, News & Mentions about CLIPITIO

Clipitio’s Stories on HackerNoon