hhy5277 / render

Swift and UIKit a la React.

Render Neutrino

Render is a declarative library for building efficient UIs on iOS inspired by React.

Disclaimer

Render is a pretty monolithic and opinionated library.

I have recently been working on splitting Render into some smaller and more customizable modules:

• CoreRender More granular APIs for vdom reconciliation and layout, written in ObjC++ (fully Swift-compatible).
• YAS Stand-alone YAML-based stylesheet engine.

Introduction

• Declarative: Render uses a declarative API to define UI components. You simply describe the layout for your UI based on a set of inputs and the framework takes care of the rest (diff and reconciliation from virtual view hierarchy to the actual one under the hood).
• Flexbox layout: Render includes the robust and battle-tested Facebook's Yoga as default layout engine.
• Fine-grained recycling: Any component such as a text or image can be recycled and reused anywhere in the UI.

From Why React matters:

[The framework] lets us write our UIs as pure function of their states.

Right now we write UIs by poking at them, manually mutating their properties when something changes, adding and removing views, etc. This is fragile and error-prone. [...]

[The framework] lets us describe our entire UI for a given state, and then it does the hard work of figuring out what needs to change. It abstracts all the fragile, error-prone code out away from us.

Installing the framework

If you are using CocoaPods:

Add the following to your Podfile:

pod 'RenderNeutrino'

• Remember to set use_frameworks! in your Podfile to tell Cocoapods to use Frameworks instead of Static Libraries.

If you are using Carthage:

Add the following line to your Cartfile:

github "alexdrone/Render" "master"    

Manually:

cd {PROJECT_ROOT_DIRECTORY}
curl "https://raw.githubusercontent.com/alexdrone/Render/master/bin/dist.zip" > render_neutrino_dist.zip && unzip render_neutrino_dist.zip

Drag RenderNeutrino.framework in your project and add it as an embedded binary.

Documentation:

Getting started

Components life-cycle

TableViews and CollectionViews (doc in progress)

Layouts

Animations (doc in progress)

Component-based Navigation bar (doc in progress)

Mod: Stylesheet and Hot-Reload (doc in progress)

Mod: Inspector (doc in progress)

Credits:

Layout engine:

• facebook/yoga

In the Stylesheet Mod:

• yaml/libyaml
• nicklockwood/Expression