terrypanghoming / render

Swift and UIKit a la React.

Render Neutrino

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

Render 4.* (stable) project page

Render Neutrino is the new version of Render, re-built from the ground up. The documentation is in progress.

• 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'

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.

Installing the Tool-chain

(Needs admin privileges)

sudo chown -R $(whoami) /usr/local/bin &&
sudo curl "https://raw.githubusercontent.com/alexdrone/Render/master/tools/render-generate" > render-generate && mv render-generate /usr/local/bin/render-generate && chmod +x /usr/local/bin/render-generate &&
sudo curl "https://raw.githubusercontent.com/alexdrone/Render/master/tools/render-watch.sh" > render-watch && mv render-watch /usr/local/bin/render-watch && chmod +x /usr/local/bin/render-watch

Documentation:

Getting started

How to create a new component with a state and props, install it in a UIViewController and use the stylesheet.

Credits:

• facebook/yoga used as layout engine.
• yaml/libyaml used to parse the YAML stylesheet.
• nicklockwood/Expression for real-time evaluation of expressions inside the yaml stylesheet.