kea

Kea

A kea is two things:

1. A smart and cheeky mountain parrot from New Zealand
2. A project aiming to answer one question: "what's the smartest way to develop web applications using React?"

The answer has morphed into a set of best practices, tools and libraries for smart web application development.

We provide:

• a curated set of libraries and best practices you should use
• kea - a scaffolding tool. Type kea new myapp and you're good to go.
• kea-logic - a backbone for your application logic
• kea-on-rails and kea-rails-loader - smooth bindings with Rails
• kea-example-rest - a reference implementation against a REST API
• kea-example-rails - a reference implementation with the Rails bindings

Motivation

When I started learning React, I was overwhelmed with choice. Every day of development forced me to decide between countless libraries, code styles and approaches, each with their own tradeoffs and benefits.

Eventually after a lot of experimentation, I settled on an architecture that just clicked. Some parts were missing, so I wrote them myself.

As this work was started through a client project, every decision was influenced by the following two questions:

• Will this make the code simpler or more complex?
• Will this make the code obvious and maintainable?

The kea project is a way to document what I have learned and make the React experience better for everyone.

Status

This is still a work in progress. While I use kea, kea-logic, kea-on-rails and kea-rails-loader myself in production, the reference implementations are still not done. Neither is the documentation.

The examples and initial guides will be done by mid-April 2016, as then I have a presentation about them in our local Ruby User Group. Come and see :).

Structure

The kea architecture consists of the following external libraries pieces:

• react
• react-router
• redux
• redux-act (no need to duplicate your redux constants 5 times!)
• redux-saga (write complex async logic sequentially)
• redux-form (forms made easy)
• reselect (separate data transformations from other logic)
• webpack2
• powerful custom helpers to tie them all together

It's written in the JavaScript Stardard Style and puts a strong emphasis on code clarity, reduced redundancy and stability.

kea provides:

• a scaffolding tool with multiple generators
• a modular code structure that's optimized for clarity
• a guide to teach you how it all fits together

Out of the box you get:

• battle tested conventions for organising your code (but you're free to break them)
• hot reloads while developing
• code chunking for each scene, so only the important parts of the application are loaded
• routes
• modular CSS, so you don't have to worry about namespaces
• write your code in stories

Optional:

• full stack rendering with the kea-on-rails rails gem

The only problem? It's still a work in progress. The code exists, but needs to be cleaned up and open sourced.

Apart for the kea-on-rails project, here's what I have now:

Getting started

First, install kea globally:

npm install kea

Then run kea new to create a new project and run it:

kea new test_project
cd test_project
npm start

Open your browser at http://localhost:2000/, play with the demo app and start coding right away!

Sponsorship

kea is currently my Sunday afternoon project. That means development is slow. Feel free to get in contact if you wish to sponsor this effort in any way.

---

Image from https://www.flickr.com/photos/mollivan_jon/126900211/