Komponents-Deprecated

by freshOS

πŸ“¦ React-inspired UIKit Components - ⚠️ Deprecated

202 Stars 12 Forks Last release: over 3 years ago (0.2.1) MIT License 190 Commits 5 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

Komponents

⚠️ Swift UI is out so this is now deprecated in favor of the official alternative. This will no longer be maintained. This was a fun experiment 😎

Komponents

Language: Swift 3 Platform: iOS 9+ Carthage compatible Cocoapods compatible Build Status codebeat badge License: MIT Release version

Komponents is a Swift framework for building component-oriented interfaces.
Because it's unfair to need javascript to enjoy Components ! 😎

| | Komponents | | ---- | ---------------------------------------- | | πŸ”Ά | Pure Swift (no JS, no XML) | | 🎨 | Declarative Api | | πŸ’‰ | Hot Reload with injectionForXcode| | βš™οΈ | Diff algorithm running in background | | πŸ— | Can be used Incrementally in your App | | πŸ•Έ | No external Dependencies |

Demo

Building a Loading screen with Hot reload 🎩

class LoadingVC: UIViewController, StatelessComponent {

override func loadView() { loadComponent() }

func render() -> Tree {
    return
        View([
            HorizontalStack(layout: .center, [
                Label("Loading..."), ActivityIndicatorView(.gray)
            ])
        ])
}

}

This is all we need to render a loading view !

Getting Started

New to components? Fear not! Facebook's React guide is a gold mine of information to get you started :)

The easiest way to get started and feel the power of Komponents is to take a look at the example project

KomponentsExample.xcodeproj
and play around !

For an even better experience, we strongly recommend enabling Hot reload

Examples

You can learn how, like React, Komponents tries to be smart about what it rerenders when the state changes in Patching section.

You can find more detailed information and guides in the Wiki

Installation

Komponents can be installed Manually, via Carthage, Cocoapods or Swift Package Manager.
Detailed installation steps in the wiki here

Contributors

YannickDot, S4cha, YOU ?!
We'd love to hear what you think so don't hesitate to reach out through an issue or via twitter @sachadso

License

Komponents is released under the MIT license. See LICENSE for details.

Inspiration

Facebook's React, ComponentKit, Preact, Vue.js AlexDrone's render, Angular...

Other great libraries

We're not the first to tackle the great endeavor of swift components and here are some other very cool projects : - Alexdrone's render - joshaber's Few.swift - BendingSpoons' katana

⚠️ v 0.2 πŸ—

Please be aware that this is still very experimental πŸ”¬.
The actual api can and will change.
This is not battle-tested and we advise you against using this in Appstore Apps (for now)

Declarative Styling via Props 🎨

Applying styles directly on the UIKit elements was super handy in

v0.1
but came with major strings attached. Indeed, the styles blocks in the nodes could only be called on the main thread, because UIKit is meant to be accessed from the UI Thread (for the most part). Also, in order to compare styles, we needed to create a duplicate UIKit element (heavy) and look for differences on it.

That's where

Props
come in!

The idea is to have a Props layer, aka a structure that defines an element's style, that is

Equatable
. Being equatable, it becomes trivial to compare two buttons styles. For instance, you can just write :
let styleIsTheSame = (button.props == newButton.props)

Being Value-typed, it is also safe to process the diff in background !

Could we get all this goodness for free? Of course not, welcome to engineering. The major drawback is that we have to bridge every UIKit element property to its corresponding

Props
struct.

However the properties supported can only get better with time classic escape hatch through refs will always be accessible to access UIkit elements if a property is not yet supported.

This is worth it!

A dead-simple declarative layout πŸ“

The coming version is switching from Autolayout (and Stevia) to a declarative layout.
The new layout system is based on a super simple

Layout
struct, that, combined with classic
StackViews
enables 99.9% of layout cases. It is a value type, meaning it will be thread safe and thus enable comparison in a background thread :)

Diffing on the virtual DOM. πŸš€

With

elements
,
styling
, and
layout
purely declarative, Value-Type and Equatable, we can now safely put all the heavy duty stuff off to a background thread !!!

In

v0.2
, the diffing algorithm (also known as reconciliation) will run on the virtual DOM, on a background thread and only schedule UI changes on the UI thread. πŸŽ‰

Backers

Like the project? Offer coffee or support us with a monthly donation and help us continue our activities :)

Sponsors

Become a sponsor and get your logo on our README on Github with a link to your site :)

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.