{⌐■_■}⌐

jasonette.agent

Microservices on the Frontend

Check out Jasonette

What is an Agent?

Jasonette Agent is a new architecture for building native mobile apps that utilizes JavaScript technologies without sacrificing native peformance and user experience. The idea is simple:

  1. User interacts with the native core.
  2. The core spawns background JavaScript containers for multiple tasks.
  3. Core and Agents communicate through JSON-RPC.

In short, it's like microservices, but on the frontend.


img


How does it work?

Jasonette Agents are invisible background JavaScript execution environments, internally implemented in WKWebView on iOS and WebView on Android.

Agents are optimized to run in the background (Users never interact directly with agents) and interact with the core native app engine with JSON-RPC.

Since Jasonette is already 100% operated with JSON, the JSON-RPC approach blends into the app seamlessly.


What can it do?

1. Plug in anything in JavaScript

Agents let you build on top of all kinds of web technologies right out of the box. Anything you can do in JavaScript, now you can do with Jasonette. Just plug it in as an agent.

img

2. Turn your frontend into agent instantly

In fact, if you already have a web app running, you can even plug it into Jasonette as an agent and make it work as a "backend" to Jasonette's native frontend.

websocket demo

In the example above, we have a website that's already running on websockets on the laptop. Here's the site

Now, we can reuse the same website as an agent by plugging it into Jasonette like below (You can see the full markup for the entire app at https://wsjason.herokuapp.com/app.json):

{
  "$jason": {
    "head": {
      "title": "Websocket Chat",
      "agents": {
        "ws": {
          "url": "https://wsjason.herokuapp.com/"
        }
      },
      ...
    }
  }
}

Above code basically lets you import the site as a Jasonette agent and communicate with it through JSON-RPC going forward.

In the demo you can only see the native app UI on the phone, but in the background the same web app is running to communicate with Jasonette.

embedding

You can check out some more examples here: Turn your existing Angular.js, Vue.js, Cell.js app into an Agent

3. Native User Experience meets Multithreading

But let's not forget, Jasonette is ultimately a native app platform. All the user interactions happen on the native core side. Agents run in the background and run tasks for core.

And here's the cool part: There can be multiple agents. This means agents bring multithreading to Jasonette.

Jasonette core is single threaded in order to ensure deterministic UI behaviors. This made it impossible to run multiple concurrent tasks on Jasonette. With agents, all you need to do is offload all the tasks to agents and let them report back through events.

img


Quickstart

1. Write an agent

An agent is nothing more than a web page.

<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.min.js"></script>
<script>
var md5 = function(data, sync) {
  var result = CryptoJS.MD5(data).toString();
  $agent.response(result);
}
</script>
</html>

We have declared a function called md5 which takes two parameters data and sync.

The md5 function runs some task (CryptoJS task) and then makes an $agent.response() call.

This is where the agent will return the result back to Jasonette. We'll see this below.

2. Plug it into Jasonette

Now that we have an agent. How do we plug it into Jasonette?

All you need to do is declare the URL under $jason.head.agents.

{
  "$jason": {
    "head": {
      "title": "$agent.request Demo",
      "description": "Jasonette to Agent request demo",
      "agents": {
        "crypto": {
          "url": "file://crypto.html"
        }
      },
      ...

We have named this agent "crypto", and enter the url. We will use this as the id when making JSON-RPC requests.

In this case we used a file:// url scheme, but you can also load a remote agent with an http[s]:// scheme.

3. Make JSON-RPC calls

Now let's actually make a function call into the md5 function from the agent.

Below is the JSON action that wil make a JSON-RPC call to the agent.

The $agent.request is the Jasonette action that makes agent JSON-RPC calls, and the options object is the actual JSON-RPC request object.

{
  "type": "$agent.request",
  "options": {
    "id": "crypto",
    "method": "md5",
    "params": ["{{$get.raw}}", "{{$jason.sync}}"]
  },
  "success": {
    "trigger": "add",
    "options": {
      "result": "{{$jason}}"
    }
  }
}

Remember the how the md5 function from above?

The JSON-RPC object is basically saying "find an agent with an id of 'crypto', ask the agent to run a function called 'md5' with the two parameters."

var md5 = function(data, sync) {
  var result = CryptoJS.MD5(data).toString();
  $agent.response(result);
}

When the function finishes running, this $agent.response will trigger the success callback on the Jasonette core side, and now Jasonette will continue executing rest of the action call chain.

4. Learn More

This was just a quick tutorial, but there are other powerful methods that let you create and communicate with agents flexibly. Check out the documentation to learn more.


Demo

Excited? Take a look at some functional examples!