4 Jasonette

Quite a different way to make an app. Make iOS and Android apps with just a single JSON, loaded over HTTP, local file, or anywhere.

It has never been trivial to have an idea and turn it into an app quickly. Even for genius programmers.

With Jasonette, you don’t even have to be a programmer. Anyone can make an app. And do it in minutes, not days or weeks.

Make an app as fast as it takes to write a blog post.

4.1 Introduction

Jasonette abstracts away all low level programming with a JSON based markup. All you need to write is a single JSON.

4.1.1 JSON to Native Components

Just like how web browsers turn HTML into a web page, Jasonette turns JSON into iOS and Android native components. This lets you build native apps by writing a simple JSON.

Native App over JSON

Native App over JSON

4.1.1.1 Structure

Organize your code in nested JSON objects.

Example:

{
    "$jason": {
        "head": {...},
        "body": {
            "sections": [{
            "items": [
                { "type": "image", "url": "..." },
                { "type": "label", "text": "..." },
                ...
            ]
            }]
        }
    }
}

4.1.1.2 Layout

Construct complex layouts with JSON.

Example:

Build a card UI with an image, labels, and nested layouts.

{
    "type": "horizontal",
    "components": [
        { "type": "image", "url": "file://ethan.jpeg" },
        { "type": "vertical",
        "components": [
            { "type": "label", "text": "Ethan" },
            { "type": "label", "text" "www.textethan.com" }
        ]
        }
    ]
}

4.1.1.3 Actions

Describe actions with JSON.

Example:

Make a network request and draw the result.

{
    "type": "$network.request",
    "options": {
        "url": "http://api.giphy.com/v1/gifs/search",
        "data": { "q": "kitten", "api_key": "dc6zaTOxFJmzC" }
    },
    "success": {
        "type": "$render"
    }
}

4.1.1.4 Style

Style components with JSON.

Example:

Style a label.

{
    "type": "label",
    "text": "Hello World",
    "style": {
        "padding": "10",
        "corner_radius": "5",
        "background": "rgba(0,0,0,0.4)",
        "color": "#ffffff",
        "font": "HelveticaNeue"
    }
}

4.1.1.5 Native App Over JSON

Directly manipulate native APIs simply using JSON. For Android, this means direct access to LinearLayout, RecyclerView, etc. For iOS, this means direct access to UITableView, UIStackView, etc.

Want to make changes to your LIVE app? Simply change your JSON content on the server, and watch the app change in front of your eyes, instantly!.

4.1.1.6 Native Components

These are some Native Components you can access using just JSON.

Footer Input Alert
Banner Video Playback

And much more! Including:

    1. Direct access to the device such as camera, audio, geolocation, video, network request, etc.
    1. Powerful layout engine that directly manipulates native components such as UITableView, UIStackView, UIView, etc.
    1. Describe styling and event handling all with JSON

4.1.1.7 Cross Platform

100% native binary for both Android and iOS.

iOS Android
Jasonette iOS Jasonette Android

4.1.2 Free & Battle Tested

Jasonette was extracted from several production apps on the App Store, so you know it works.

Below are some actual production apps built with Jasonette.

Kitty Catch All
Kitty App Catchall App

4.1.2.1 100% FREE

Everything is free for you to use. There is no small print that says “pay \($\) if you want to publish your app”. It’s all yours.

4.1.2.2 100% OPEN SOURCE

Jasonette is licensed under MIT license. Take the code, build and publish your own apps, and do whatever you want with it!

4.1.2.3 100% PORTABLE

There is no magical backend server you need to learn to use, pay for, or install to use Jasonette. ALL YOU NEED IS JSON. If you have a web server, you ALREADY have a Jasonette server.

4.1.2.4 100% EXTENSIBLE

Jasonette is essentially just an engine that maps JSON expression to native components and actions. It doesn’t force you to drop everything and adopt the technology exclusively. You can extend it or even integrate it with your existing native code seamlessly.