About the project
Jasonette is a different way of making native apps.
Instead of programming an app on the device, you simply write a JSON file hosted on a server, and the Jasonette apps fetch and use it to build themselves on-demand whenever you open the app.
Before we jump in, here's where you can stay in touch with the project community:
■ Follow the project
| Blog | |
|---|---|
@jasonclient |
Follow on Medium |
| Github iOS | Github Android | Github Web |
|---|---|---|
| Native Objective-C Implementation |
Native Java Implementation |
A Web implementation, written in JavaScript |
JASONETTE-iOS |
JASONETTE-Android |
JASONETTE-Web |
■ Ask the community
For code related questions, ask on the forum to get more comprehensive answers.
For quick chats, use the Slack channel.
| Slack | Forum |
|---|---|
|
Ask questions and share tips.https://forum.jasonette.com |
Quickstart
1. Download Jasonette for iOS or Android
2. Write and host a JSON recipe that defines your app
3. Add the JSON URL to Jasonette to turn it into your app
Step 1. Download
Go download and come back, we'll wait.
| iOS | Android |
|---|---|
|
iOS Setup |
Android Setup |
Step 2. Learn
Watch the 2 videos below and you'll have learned everything you need to know to get started.
The videos were shot using an iPhone, but it works exactly the same for Android.
A. Do you know JSON?
Before we dive in, do you know JSON? If not, just check out this tutorial, takes 2 minutes.
B. Get a JSON server
You'll be serving your entire app from a server, so you will need somewhere to host JSON, just like you need somewhere to host websites. There are many ways to do this:
1. Jasonette Web (web.jasonette.com)
[Recommended] A hosted & social implementation of Jasonette-Web.Has all the useful features such as folders, markdown-based readme, bookmarking, version control, realtime editing, etc. Write and share as much JSON as you want. It's FREE.
(Note: You DON'T need to use Jasonette Web to use Jasonette. This service is provided for free to help you get started quickly without having to set up your own JSON server. After all, all you need is JSON and the whole point of the framework is the portability of JSON)
2. Code hosting or pastebin sites
You can also use Github or Pastebin. Not really recommended for development because these sites are NOT built for this type of usage. They actually discourage you from using them as API endpoint. Furthermore, their content is cached so you'll often keep getting old responses whenever you update your JSON content, which is a pain. However, you can use them AFTER you've finished editing, or use it for open sourcing though. Here's an example.3. Quick Local Prototyping
You can also use Jasonette-Web along with simple instant open source HTTP servers like the http-server project to roll your own Jasonette Web.4. Plug into your existing server
You can skip all this and set up your own web app with a JSON endpoint, or just plug into your existing web app.C. Learn the basics
This video walks you through the basics of Jasonette, such as how it works, how to get started, etc. It was shot using iOS but it basically works the same for Android.
D. Learn JASON syntax
This video teaches you how to actually write a JSON markup to build sophisticated interactive layouts.
Step 3. Learn more (Reference)
Anatomy of a Jason view
Learn the basic structure of a JASON view
Just like HTML has basic tags such as body, div, span, li, etc, Jasonette has JSON based tags to describe the structure of a view.
Components
Learn component syntax
Components are the most basic units of user interface, such as image, label, textarea, button, slider, etc.
Layout
Learn layouts
In many cases we combine multiple components to construct a unit. We use layouts to do this.
Link multiple views
Learn linking
Above three sections are all you need to know to display content in a view. But what if we want multiple views? We can link them using href.
Actions
Learn actions
Actions define a task or a sequence of tasks you wish to run, such as network request, audio play, camera access, geolocation, displaying banners, etc.
Templates
Learn templates
You can use templates to dynamically render data, such as remote network content, local data, and user input.
In-depth Tutorials
Here are some in-depth articles
- (Intro) How to build cross-platform mobile apps using nothing more than a JSON markup
- Jasonette Offline: Using offline features with Jasonette
- Building a SlackBot remote control app with Jasonette
- TabBar: How the bottom tab bar works
- Functional Programming in JSON: How Jasonette implements function call stacks purely in JSON, and how to use it
- Require: How $require action works
- Mixins: 2-part series.
- Remote Mixin: How to dynamically mix in multiple remote JSON objects into a single root JSON
- Self Mixin: How to mix in a subtree of a JSON object onto itself.
- Web Container: Introduction to Web Container
Examples
Actual JSON examples you can try out with Jasonette: