DEV Community: EL Passion

Countdown film clutter in SwiftUI

Zaprogramiacz — Fri, 06 Dec 2019 13:55:34 +0000

Countdown film clutter in SwiftUI

After first successful 😎 approach (FlipClock) to animations in SwiftUI, I've decided to create the next sample project. Looking for inspiration in the endless Internet, I've found old fashioned countdown film clutter. I realized that it could be challenging to do sth similar in the new Apple UI framework - SwiftUI. Please stop for a moment and take a look at the results of my work.

Implementation

License

Flip clock in SwiftUI

Zaprogramiacz — Tue, 22 Oct 2019 12:17:58 +0000

SwiftUI is a new framework designed and released by Apple in 2019. It completely changes the approach to building UI on Apple devices. Compared to predecessors (UIKit, WatchKit, AppKit), you can write code only once and use it on every Apple platform. It saves much time while building multiplatform apps. Another big difference is the programming paradigm change from imperative to declarative one. The focus shifts from writing step by step how to create something, to declaring the result we want to achieve. I’m 100% sure that these changes have a lot of advantages, and shortly many applications will be created using SwiftUI. Now it’s a perfect time to get familiar with it and learn how to use it. Below you can see the result of my adventure with SwiftUI.

Implemetation

Light	Dark

License

Wine Searcher iOS demo

Zaprogramiacz — Wed, 04 Sep 2019 09:04:43 +0000

Have you ever dreamt of heaven? We know how it tastes! A delicious adventure in the land of wine awaits you. Just sneak a peek at our wine searcher app. Oh...and remember! A glass of wine a day keeps the doctor away 😉

Dribbble shot	Demo app

Source

License

RxSwift workshops

Jakub Turek — Tue, 03 Sep 2019 09:37:29 +0000

Do you want us to run a professional RxSwift training in your company? Contact us at projects@elpassion.com.

The mobile team at EL Passion is very enthusiastic about reactive programming. The reactive approach helps us build the apps thinking about the functionalities, not about technical matters of keeping the internal state in sync.

In fact, we use reactive programming so extensively that we'd decided to share the knowledge with others. We've held two editions of RxSwift workshops during which we've mentored almost 40 iOS developers through their first steps with the framework and reactive programming in general!

Content

The workshop was aimed towards people who are familiar with iOS development but never had a chance to try RxSwift. It was divided into three modules:

Introduction to Functional Reactive Programming and basic RxSwift operators.
UI bindings with RxCocoa.
Reactive networking.

Each module consisted of a theoretical introduction in form of the presentation and a set of the practical exercises focused on implementing the most common tasks in the reactive fashion.

Agenda

9:00 - 9:30 Project setup
9:30 - 11:30 FRP and basic RxSwift operators
11:30 - 12:00 Coffee break
12:00 - 14:00 UI bindings in RxCocoa
14:00 - 15:00 Lunch break
15:00 - 17:00 Reactive API calls
17:00 - 17:15 Experiences & closing thoughts

Attendees' reviews

Review #1:

I've visited EL Passion during the RxSwift training. I work in software development for over 15 years, and I have to admit that I've never seen such a well-organized workshop ran free of charge. I was impressed by how professional the whole organization had been.

Review #2:

Thanks to iOS team for professional and well prepared RxSwift workshop.

Review #3:

I took part in RxSwift training ran by EL Passion. Very substantive workshops, great preparation and held in a nice atmosphere.

You can read more reviews on our Facebook page.

Pictures

Pictures

Check out more pictures at our Facebook page.

License

Meditation app for iOS - dribbble shot implementation

Bartlomiej Guminiak — Tue, 03 Sep 2019 09:35:04 +0000

Implementing animations may be tricky and demanding but on the other hand users require both value and aesthetic look from their apps. How about taking one of our designer's dribbble shot and converting into native iOS application? See the results below!

Dribbble shot	Demo app

Swift 4.2

Source

License

UITableView vs Managing business logic in MVVM

Bartlomiej Guminiak — Tue, 03 Sep 2019 09:35:03 +0000

MVVM design architecture is getting increasingly popular in iOS development
and it is my favourite considering last months ❤️

Recently I've completed implementing relaxing dribbble shot of Ela Kumela 🧘‍♂️

Today, I would like to share with you details on how did I solve song management functionality in MVVM world. I hope you will find it useful and find inspiration in your beloved iOS development 🤠

Below you can see iPhone simulator recording from the music player

Player demo

Model

As you can see there are two screen kinds:

picking
listening

and, in total, four different modes of the SongCell:

.picking(.unselected)	.picking(.selected)	.listening(.playable)	.listening(.playing)

Combinig them together we will build structure such below:

enum Picking: Equatable {
    case selected, unselected
}

enum Listening: Equatable {
    case playable, playing, hidden
}

enum SongMode: Equatable {
    case picking(Picking)
    case listening(Listening)
}

There is one additional mode of .listening(.hidden). In the listening mode all unselected cells get invisible.

ViewModel

In MVVM world every subview has its corresponding viewModel. In our case every SongCell has its SongViewModel. Take a look at its interface:


protocol SongViewModeling: class {
    var title: String { get }
    var subtitle: String { get }
    var time: String { get }
    var songMode: SongMode { get set } // 1
    var songModeHandler: SongModeHandling { get } //2
}

There are two interesting properties we should take closer look at:

1 - we will use that model for cell configuration

2 - SongModeHandling is an observer pattern protocol. When updating the songMode, songModeHandler should emit the current mode. We will use it for updating visible cell states. Remember to unsubscribe from it when reusing the cell ☝️

Binding viewModels with cells

The last part that left is binding songViewModels with its corresponding songCells. We will implement that logic in MeditationViewController as it already is a delegate and data source of tableView. Below there is a simplified MVVM architecture flow:

Simplified MVVM architecture flow

1 - MeditationViewController updates its MeditationViewModel about view life cycle and UI actions

2 - MeditationViewModel updates MeditationViewController with songViewModels

3 - MeditationViewController binds songViewModels with songCells

func configure(cell: SongViewCell, with viewModel: SongViewModeling) {
        cell.interactiveView.songView.titleLabel.text = viewModel.title
        cell.interactiveView.songView.subtitleLabel.text = viewModel.subtitle
        cell.interactiveView.songView.timeLabel.text = viewModel.time
        cell.update(mode: viewModel.songMode, animated: false)
        cell.disposable = viewModel.songModeHandler.addHandler(target: cell,
                                                               handler: SongViewCell.update)
    }

4 - MeditationViewModel manages business logic. It listens to ActionViewModel events and delegates work to MusicPlayer

5 - MusicPlayer contains aggregate methods for altering modes of song ViewModels - stateless entity

Summary

In MVVM architecture we name both ViewControllers and Views as View and it should not have any business logic but only listens to its ViewModel orders. In our meditation example the View (MeditationViewController) is completely without business logic. It has only view logic such building subviews and configuring them with child viewModels (songViewModels)

This way all the business logic can be extracted to ViewModel (MeditationViewModel) and its helpers that make the code readable and divided into single responsibility entities:

songViewModels manager MusicPlayer
screen state operator MeditationScreenStateOperator

For more details see meditaion-ios-demo

Enjoy! ❤️

License

Paginated list with animated updates (RxFeedback, RxDataSources)

Jakub Turek — Mon, 02 Sep 2019 11:14:56 +0000

RxSwift is an amazing framework that streamlines all of the event handling in the iOS apps and makes them less prone to state related issues. RxSwift simplifies data updates from sources such as the local database, HTTP services or websockets.

At EL Passion we love using RxSwift. In fact we ❤️ it so much that we've held the two editions of the RxSwift workshop for iOS developers.

However, there are some cases where pure RxSwift is not always enough. For example paginating API results requires parts of explicit state management. That's why RxFeedback architecture came to life. It helps modelling system-level interactions with RxSwift abstractions.

In the showcase we present how we've built the paginated list with animated updates in approximately 100 lines of code for our Client.

Case study

The case study comes 100% from a real app built for one of the EL Passion's Clients. You can see it in action below:

Case study

View models

The app's been built using the MVVM architecture. Every collection cell has it's own view model assigned:

class ModelListItemViewModel: IdentifiableType, Equatable {
    init(model: Model) {
        self.model = model
    }

    // MARK: - Public API

    var image: Driver<UIImage> { /* ... */ }
    var author: Driver<String> { /* ... */ }

    // MARK: - IdentifiableType

    var identity: String {
        return model.id
    }

    // MARK: - Equatable

    public static func == (lhs: ModelListItemViewModel, rhs: ModelListItemViewModel) -> Bool {
        return lhs.model == rhs.model
    } 

    // MARK: - Private

    private let model: Model
}

In order to get the nicely animated updates with near-zero development cost, the app uses RxDataSources library. That's why the view model conforms to both IdentifiableType and Equatable types.

The collection view has a single section modelled as a list of items:

struct ModelSectionViewModel {
    var items: [ModelListItemViewModel]
}

extension ModelSectionViewModel: AnimatableSectionModelType {
    init(original: ModelSectionViewModel, items: [Item]) {
        self = original
        self.items = items
    }

    var identity: String {
        return String(describing: ModelSectionViewModel.self)
    }
}

RxFeedback

In order to build pagination with RxFeedback you need to define:

state structure,
possible events enum,
reduce function which converts the current state and the event to the new state,
system description with a list of feedback loops.

State

The state consists of already downloaded models and the next page offset. It also holds a flag to tell whether we should start downloading the next page.

struct ModelListState: Equatable {
    let models: [Model]
    let nextPageOffset: Int?
    let shouldLoadNextPage: Bool

    init(models: [Model] = [], nextPageOffset: Int? = 0, shouldLoadNextPage: Bool = true) {
        self.models = models
        self.nextPageOffset = nextPageOffset
        self.shouldLoadNextPage = shouldLoadNextPage
    }
}

Possible events

Scrolling the list toggles scrolledTo(item:) event. There're also 2 types of events to handle API responses (success & failure).

enum ModelListEvent {
    case scrolledTo(item: IndexPath)
    case response(page: ModelPage)
    case error
}

Reducer

Reducer handles the events as follows:

scrolled to an item event - it flips shouldLoadNextPage flag to true when user scrolled down to the bottom item,
next page response - it appends the models, updates the next page offset and stops fetching the next page.
error - it stops fetching the next page.

extension ModelListState {
    static func reduce(state: ModelListState, event: ModelListEvent) -> ModelListState {
        switch event {
        case let .scrolledTo(indexPath):
            return reduceLoadNextPage(item: indexPath.item, state: state)
        case let .response(page):
            return ModelListState(
                models: state.models + page.models,
                nextPageOffset: page.nextPageOffset,
                shouldLoadNextPage: false
            )
        case .error:
            return ModelListState(original: state, shouldLoadNextPage: false)
        }
    }

    var fetchOffset: Int? {
        return shouldLoadNextPage ? nextPageOffset : nil
    }

    // MARK: - Private

    private static func reduceLoadNextPage(item: Int, state: ModelListState) -> ModelListState {
        guard !state.shouldLoadNextPage, item + 1 >= state.models.count else {
            return state
        }

        return ModelListState(original: state, shouldLoadNextPage: true)
    }
}

Feedback loop

There are 2 feedback loops defined:

UI feedback loop - it wires sections' view models to the collection view and receives scroll to item events,
react feedback loop - it triggers fetching the next page when fetchOffset property is present for the page.

/// Signal called on will display cell event
let willDisplaySubject: PublishSubject<IndexPath>

/// Observable list of sections that drive UICollectionView
let sectionsRelay: BehaviorRelay<[ModelSectionViewModel]>

/// Creates a view model for a single list item from the API data
let itemViewModel: (Model) -> ModelListItemViewModel

/// Downloads a single page of results from the API
let listProvider: (Int) -> Single<ModelPage>

/// Maps state updates into events stream
let bindings: (Driver<ModelListState>) -> Signal<ModelListEvent> = bind(self) { me, state in
    let sectionSubscription = state
        .map { $0.models.map { me.itemViewModel(for: $0) } }
        .map { [ModelSectionViewModel(items: $0)] }
        .drive(me.sectionsRelay)

    let displayCellEvent = me.willDisplayCellSubject
        .map { ModelListEvent.scrolledTo(item: $0) }
        .asSignal(onErrorJustReturn: .error)

    return Bindings(subscriptions: [sectionSubscription], events: [displayCellEvent])
}

/// Models whole pagination subsystem
Driver.system(
    initialState: ModelListState(),
    reduce: ModelListState.reduce,
    feedback: bindings,
    react(query: { $0.fetchOffset }, effects: { [listProvider] offset in
        listProvider(offset)
            .map { ModelListEvent.response(page: $0) }
            .asSignal(onErrorJustReturn: .error)
        })
    )
.drive()
.disposed(by: disposeBag)

License

VinylShop mobile app

Jakub Turek — Mon, 02 Sep 2019 11:10:24 +0000

Our iOS team at EL Passion wanted to know what it takes to put our designers' work into motion. We've challenged ourselves to build demanding shots while retaining our trademark high code quality.

One of the outcomes is the Vinyl Shop mobile app by @MatPrzegietka implementation.

Dribbble shot	Implementation

Swift 4.2
Unit test code coverage: 100%

Source

License

SwiftLint config per target

Jakub Turek — Mon, 02 Sep 2019 11:07:19 +0000

EL Passion ❤️ open source.

In our mission to deliver the highest quality product possible, the iOS team at EL Passion rely on linting tools such as SwiftLint to fix common code structuring & formatting issues.

However, there are some scenarios in which we can't easily employ the tooling to work for us. We've encountered this issue when developing VinylShop mobile app with the following directory structure:

Project /
├── Project.xcodeproj
└── Sources /
    └── Controllers /
       └── Login /
           ├── LoginViewController.swift
           └── LoginViewControllerSpec.swift

We couldn't easily configure SwiftLint to use a different configuration for the production and for the test files.

SwiftLint runner

Fortunately, we've been able to fix the issue by implementing a simple Python script which reads the contents of the .pbxproj file and modifies the included files in the SwiftLint config prior to the linting. The script is divided into the two simple files:

lint.py,
xcproj.py.

What's even better is that we've released the script as the PyPI package, so you can use it in your own projects, too. It's as simple as running:

pip install swiftlint-runner

And adding an appropriate build phase:

slrunner <project_name>.xcodeproj <target_name> .<swiftlint_config_file_name>.yml

You can find more details at the elpassion/swiftlint-runner repository.

License

SwiftLint runner is maintained with ❤️ by EL Passion and released under an MIT license.

Reading List Calendar - macOS app

Dariusz Rybicki — Mon, 02 Sep 2019 10:22:10 +0000

If you are like us, you love to read web articles. No matter if you are interested in functional programming or cooking recipes, there are plenty of resources all over the web to learn from. If you are an Apple fan, you are probably familiar with Safari Reading List - a place for your web articles, stored for later, waiting to be reviewed and read.

Not a long time ago, we were inspired by Marcin Krzyżanowski, who showed us another non-standard way of storing web bookmarks... in his calendar:

We wanted to explore this way of data visualization, so without waiting another minute, Reading List Calendar app was born. It's a simple macOS app project that synchronizes Safari Reading List with your Calendar. It's a native Cocoa application, written in Swift, that does not require any third-party services to work.

We tried to keep it as simple as possible, but also incorporate macOS sandboxing and security features. User has to choose bookmarks location and authorize access to the calendar in the app, otherwise it won't be able to read and write data considered to be private (your reading list and calendar events).

It was a lot of fun to implement this simple project, basing on an idea from a tweet. The application was build in Xcode, with native Apple frameworks, like AppKit. We used Test Driven Development for most parts of the implementation.

Tech stack:

We love to share it with you. It's open source and available on GitHub.

Source

License

Custom pagination in UIScrollView

Dariusz Rybicki — Mon, 02 Sep 2019 10:20:17 +0000

There are various ways of implementing custom pagination in UIScrollView (or UITableView or UICollectionView). Below you can find very simple and effective one.

Example

Below you can see real-life example, taken from E-commerce Today's deals interaction, iOS demo.

Example

Implementation

We will use ScrollPageController class to control UIScrollView paging and update UIPageControl:

struct ScrollPageController {

    /// Computes page offset from page offsets array for given scroll offset and velocity
    ///
    /// - Parameters:
    ///   - offset: current scroll offset
    ///   - velocity: current scroll velocity
    ///   - pageOffsets: page offsets array
    /// - Returns: target page offset from array or nil if no page offets provided
    func pageOffset(for offset: CGFloat, velocity: CGFloat, in pageOffsets: [CGFloat]) -> CGFloat? {
        let pages = pageOffsets.enumerated().reduce([Int: CGFloat]()) {
            var dict = $0
            dict[$1.0] = $1.1
            return dict
        }
        guard let page = pages.min(by: { abs($0.1 - offset) < abs($1.1 - offset) }) else {
            return nil
        }
        if abs(velocity) < 0.2 {
            return page.value
        }
        if velocity < 0 {
            return pages[pageOffsets.index(before: page.key)] ?? page.value
        }
        return pages[pageOffsets.index(after: page.key)] ?? page.value
    }

    /// Cumputes page fraction from page offsets array for given scroll offset
    ///
    /// - Parameters:
    ///   - offset: current scroll offset
    ///   - pageOffsets: page offsets array
    /// - Returns: current page fraction in range from 0 to number of pages or nil if no page offets provided
    func pageFraction(for offset: CGFloat, in pageOffsets: [CGFloat]) -> CGFloat? {
        let pages = pageOffsets.sorted().enumerated()
        if let index = pages.first(where: { $0.1 == offset })?.0 {
            return CGFloat(index)
        }
        guard let nextOffset = pages.first(where: { $0.1 >= offset })?.1 else {
            return pages.map { $0.0 }.last.map { CGFloat($0) }
        }
        guard let (prevIdx, prevOffset) = pages.reversed().first(where: { $0.1 <= offset }) else {
            return pages.map { $0.0 }.first.map { CGFloat($0) }
        }
        return CGFloat(prevIdx) + (offset - prevOffset) / (nextOffset - prevOffset)
    }

}

If you are looking for a drop-in solution for your project, check out attached ScrollPageController.swift file and its tests in ScrollPageControllerSpec.swift.

How to use it

It's quite simple:

class ExampleViewController: UIViewController, UIScrollViewDelegate {

    // to make pagination working, implement this delegate function:

    func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {
        if let pageOffset = ScrollPageController().pageOffset(
            for: scrollView.contentOffset.x, 
            velocity: velocity.x, 
            in: pageOffsets(in: scrollView)
        ) {
            targetContentOffset.pointee.x = pageOffset
        }
    }

    // if you have a page control you would like to update when scrolling:

    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        if let pageFraction = ScrollPageController().pageFraction(
            for: scrollView.contentOffset.x, 
            in: pageOffsets(in: scrollView)
        ) {
            let pageControl: UIPageControl = // your page controll
            pageControl.currentPage = Int(round(pageFraction))
        }
    }

    private func pageOffsets(in scrollView: UIScrollView) -> [CGFloat] {
        // return page offsets, see bellow for an example
    }

}

If you want to page by scroll view frame width:

    private func pageOffsets(in scrollView: UIScrollView) -> [CGFloat] {
        let pageWidth = scrollView.bounds.width
                        - scrollView.adjustedContentInset.left
                        - scrollView.adjustedContentInset.right
        let numberOfPages = Int(ceil(scrollView.contentSize.width / pageWidth))
        return (0..<numberOfPages).map { CGFloat($0) * pageWidth - scrollView.adjustedContentInset.left }
    }

If you want to page by scroll view subviews:

    private func pageOffsets(in scrollView: UIScrollView) -> [CGFloat] {
        return scrollView.subviews
                         .compactMap { $0 as? PageView }
                         .map { $0.frame.minX - scrollView.adjustedContentInset.left }
    }

If you prefer real-life example, check out E-commerce Today's deals interaction, iOS demo implementation.

License

Snapshot-based transitions in UIKit

Dariusz Rybicki — Mon, 02 Sep 2019 10:17:03 +0000

Nice transitions greatly improve user experience. Animating frames and auto layout constraints could be tricky. Fortunately, we can animate view snapshots, and UIKit provides tools for that out of the box!

Example

Below you can see real-life example, taken from E-commerce Today's deals interaction, iOS demo.

Example

Implementation

To take snapshots and animate the transition we will use SnapshotTransition class:

/// Snapshot-based keyframe-animated views transition
/// Allows to perform transition form one view to another, optionally animating child views
public final class SnapshotTransition {

    /// Create snapshot transition
    ///
    /// - Parameters:
    ///   - from: source view
    ///   - to: target view
    ///   - container: container view in which transition occurs
    ///   - clipToBounds: set to false if you don't want bounds clipping (default value is true)
    ///   - childTransitions: array of (source childview, target childview) tuples that should be
    ///     animated separately alongside transition (default value is an empty array)
    public init(from: UIView,
                to: UIView,
                in container: UIView,
                clipToBounds: Bool = default,
                childTransitions: [(from: UIView, to: UIView)] = default)

    /// Call when you are ready to perform transition (when your views are layed out etc.)
    public func prepare()

    /// Call inside UIView.animateKeyframes animations closure to add transition animation keyframes
    public func addKeyframes()

    /// Call when transition completes, to clean it up and remove from container view
    public func cleanUp()
}

Full source code available in SnapshotTransition.swift.

How to use it

In order to implement custom view controllers transition, you will have to follow UIKit guides for implementing UIViewControllerTransitioningDelegate and UIViewControllerAnimatedTransitioning. Then you can create SnapshotTransition object and perform animations:

// MARK: UIViewControllerAnimatedTransitioning

func animateTransition(using transitionContext: UIViewControllerContextTransitioning) {
    let sourceView: UIView = ... // provide a view from presenting view controller
    let targetView: UIView = ... // provide the presented view controller's view

    // preapre transition context, add target view to container if needed
    if targetView.superview == nil {
        transitionContext.containerView.addSubview(targetView)
        targetView.frame = transitionContext.containerView.bounds
    }

    let transition = SnapshotTransition(
        from: sourceView, 
        to: targetView,
        in: transitionContext.containerView,
        childTransitions: [
            // optionally provide child views pairs that should be 
            // animated separately alongside the transition:
            (from: sourceView.subviewA, to: targetView.subviewA),
            (from: sourceView.subviewB, to: targetView.subviewB),
            (from: sourceView.subviewC, to: targetView.subviewC)
        ]
    )

    transition.prepare()

    UIView.animateKeyframes(
        withDuration: transitionDuration(using: transitionContext),
        delay: 0,
        options: [],
        animations: { transition.addKeyframes() },
        completion: { finished in
            transition.cleanUp()
            let completed = finished && !transitionContext.transitionWasCancelled
            transitionContext.completeTransition(completed)
        }
    )
}

If you prefer a real-life example, check out E-commerce Today's deals interaction, iOS demo implementation.