Supercharged tab bar!

07 Feb 2017

With the latest version, Jasonette now supports href and action attributes for the bottom tab bar, which lets you do cool things like open a view in a modal, or execute any actions when you tap a tab item.

Let me explain what this means.

How it currently works

The bottom tab bar is useful for switching between multiple views.

Normally to make sure the each tab loads a separate view when tapped, you would simply specify the url attribute like this:

{
  "$jason": {
    "body": {
      "footer": {
        "tabs": {
          "items": [{
            "text": "Tab 1",
            "url": "https://jasonbase.com/things/3fn.json"
          }, {
            "text": "Tab 2",
            "url": "https://jasonbase.com/things/2fn.json"
          }, {
            "text": "Tab 3",
            "url": "https://jasonbase.com/things/9fn.json"
          }]
        }
      }
    }
  }
}

This is sufficient for most use cases, but sometimes you want more. For example you may want to:

Open a new view as a modal instead of as a tab view.
Open a browser when you tap a tab item.
Exectue an action (Such as open a camera) when you tap.

These things weren't possible since the only supported attribute was url.

However, this changes today. You can attach not only url but also href as well as action.

Go download the develop branch (iOS and Android) and try it out. Here's what has changed:

href

You can now set href as well as url. href is obviously more powerful since you can specify not just the url but also the view or the type of transition.

See below example:

{
  "$jason": {
    "body": {
      "footer": {
        "tabs": {
          "items": [{
            "text": "Tab 1",
            "url": "https://jasonbase.com/things/3fn.json"
          }, {
            "text": "Tab 2",
            "href": {
              "url": "https://jasonbase.com/things/2fn.json",
              "transition": "modal"
            }
          }, {
            "text": "Tab 3",
            "href": {
              "url": "https://www.google.com",
              "view": "web"
            }
          }]
        }
      }
    }
  }
}

tab 1 uses the original url approach. It's simpler and usually works for most cases.
tab 2 now opens in a modal view when you tap, instead of opening within the current view.
tab 3 now opens a browser since it's a "view": "web" type href.

action

You can even set an action attribute for a tab. You may see something like this in photo apps like Instagram--you tap one of the tab bar items and it opens a camera.

Here's an example:

{
  "$jason": {
    "body": {
      "footer": {
        "tabs": {
          "items": [{
            "text": "Tab 1",
            "url": "https://jasonbase.com/things/3fn.json"
          }, {
            "text": "Tab 2",
            "action": {
              "type": "$media.camera"
            }
          }, {
            "text": "Tab 3",
            "href": {
              "url": "https://www.google.com",
              "view": "web"
            }
          }]
        }
      }
    }
  }
}

Tab 2 now runs the $media.camera action when you tap.

Note that you can attach any kind of actions here, not just camera.

Tip

Sometimes people are confused about how the tabs work. Here's a rule of thumb:

You MUST specify the tabs for every view.

Let's say you have tab1, tab2, and tab3. All of those views MUST contain the same tabs object. If you only have the tabs object on tab1's markup, the tab bar will go away when you navigate away to tab2 or tab3.

Try it out!

As of today this works on both Android and iOS

Remote-control your Slack bots with JSON

17 Jan 2017

A couple of days ago, @shaunymca shared a really cool project on our slack channel.

If you think about it, this is a pretty refreshing idea. Basically, it's a mobile app for remote-controlling a Slack bot.

To declare that you've started brewing coffee, open the app, and simply touch the button from the cell with your name

And in 12 minutes,

And the cool part is, this was built with Jasonette, so he didn't need to write any native code.

First, he wrote an express.js server which returns a JSON markup.

Then he connected it to Jasonette, which turned that JSON markup into a native app which drew the UI as well as sent requests to the server upon user input.

And voila! We have a remote control app for Slack bots.

Check out the repo here: https://github.com/shaunymca/coffeeapp

Demo

I thought it was really cool so just decided to fork and try it out on our own slack channel. Here's how it works:

When the Jasonette app hits the home url, the server returns a JSON markup that looks like this:

Coffee json

Then, Jasonette turns it into a native app that looks like this:

iOS Android

So how does it work behind the scenes? Each cell item is represented by a JSON object in the markup, which has an action attribute that looks like this:

{
  "type": "$network.request",
  "options": {
    "url": "https://evening-inlet-32428.herokuapp.com/submit.json",
    "method": "POST",
    "data": {
      "user_name": "{{name}}",
      "user_id": "{{id}}"
    }
  }
}

When you tap on a cell, it makes a POST request to the submit.json endpoint, which triggers the Slack API.

And in 12 minutes, your Slack channel will get a notification from the Coffee bot!.

TLDR

The express server returns a JSON markup, which becomes a native app when you connect it with Jasonette.
When you tap an item from the app, it triggers a POST request to the server.
The server waits 12 minutes, and then triggers the Slack API with credentials to post to the Slack channel.

Conclusion

This reminded me of the Yo app, since it's meant to only serve a single purpose.

It's like a bot version of Yo. But for multiplayer. And powered by Slack!

It's awesome to see these creative projects being built with Jasonette. Feel free to reach out if you built something cool using Jasonette. I will try to showcase them on the blog.

Lastly, make sure to try out @shaunymca's coffeebot app for your own slack channel! It's so cool! https://github.com/shaunymca/coffeeapp.

Jasonette, 2016 in Review

12 Jan 2017

How are apps built?

You write a program and put it on the phone!

But what if you could represent an entire native app as JSON and load it on demand from the cloud over HTTP, just like a web page?

This little idea consumed the entirety of my life in 2016.

And the result is Jasonette.

Jasonette lets you build 100% native apps on Android and iOS simply by writing a single JSON markup. Watch the video below if you haven't yet. Your life will never be the same.

When I look back at 2016, it really feels like ages because so many things happened.

But it's crazy to think that it's only been 2 months since I open sourced Jasonette!

Let me share my 2016 with you today.

Season 1 Pilot: Jason

Exactly 8 months ago from today, I released an app called Jason. This was a standalone app that was a precursor to Jasonette. You would enter a JSON URL into Jason app's address bar, and it would instantly turn into your own custom app.

A lot of minds were blown:

twitter

But at the same time, this was one of the most esoteric apps one could build—an app within an app, a russian doll of sorts—as pointed out below:

I didn't even have a specific set of target users in mind when I built this. I just built it because I could.™

But I looked at all these reactions and thought about it:

Other people were amazed that an app can be built this way, and wanted to build their own apps this way too.
I wasn't interested in just another way of building apps. I was more interested in lowering the barrier so significantly that it changes the meaning of the term "app".
Charging for usage would beat the purpose since that would fail at lowering the barrier.

I knew exactly what I had to do: Jason needed to be open sourced and completely set free.

Well it shouldn't be that hard to open source. After all, I already have a functional code base, right?

Hahaha.

It took me 6 months.

Intermission: Lessons learned from documentation

Once I dived in, I soon realized open sourcing is not just about putting the code out there, but making sure people can understand it easily.

This was especially the case for Jasonette, because without a documented API, no one would be able to know what they can do with it. It would be like releasing a web browser without an HTML spec. Basically, the documentation itself was the product.

And turns out, documentation is not easy.

Open source project is 1 percent inspiration, 99 percent documentation.
— ethan (@gliechtenstein) October 12, 2016

For the next 6 months, I did nothing but documentation and code cleanup.

These were my darkest days. I did nothing but work on the documentation, I wasn't creating something new, I was simply documenting something that already existed and I hated it. But what other options did I have? So I kept at it.

However, I soon realized that while frustrating, the process of documenting the project was extremely helpful:

I got to understand my own code better.
I found a lot of inconsistencies in the API while documenting, which needed to be refactored.
I gained a birds-eye point of view of the project, which was crucial when I started working on the Android version later.

But the thing is, the more I documented, the more I had to refactor, and the more I refactored, the more I had to document to reflect the update. By working more, I was creating even more work. At some point I started feeling like a tortoise chasing after achilles. Would I ever finish this?

In the meantime, I had set up a landing page and kept adding new materials as soon as they were ready, even though I hadn't launched it yet. And somehow people were discovering it and sharing it.

One day when I was begrudgingly working on documenting an express.js demo app for Jasonette, I saw this tweet.

kind of interesting, 100% declarative apps with JSON https://t.co/hzjyhZKsmU, probably hella leaky abstraction in some cases but neat
— TJ Holowaychuk (@tjholowaychuk) September 22, 2016

What a nice timing! I was very excited, and this encouraging tweet gave me all the strength I needed to finish up the docs and prepare for the launch... which wouldn't happen for another month and a half.

Season 1 Episode 01. Jasonette-iOS

On the morning of 11/4 I posted on Hacker News. It shot up to #1 and stayed #1 the entire day.

Then it went on to become the #1 Github trending project. Not too bad for my first ever open source contribution!

github

Season 1 Episode 02. Jasonette-Android

Upon releasing the iOS version, the most frequently asked question was "Android?". I wasn't surprised, since I knew that was the most obvious next step.

However what I didn't know was how long it would take me to come up with one.

Or if it would be even possible at all.

I only knew that Android had a layout system called LinearLayout which works similar to UIStackView which I used for the iOS version. So I just assumed that it would be possible, but it was really not straightforward.

This time, I decided not to torture myself with 6 months of agony. Instead of trying to make a perfect release, I decided to pick only the most crucial features and commit to releasing version 0 as soon as possible, and go from there.

I set the goal: Implement the core engine and get it out there, in 1 month.

And surprisingly, I managed to succeed.

Watch the android version and the ios version side by side. These are loading from exactly the same JSON you can find here

Season 1 Finale: Current state of Jasonette community

What excites me the most is that the project has managed to find a great community of people who share the same vision and all contributing to the project in many different ways.

Open source is magic

I've never worked on open source before so all these contributions from people I've never met still feel surreal to me.

It's really amazing how people from all around the world can come together and collaborate to build something together this easily.

New features and projects

I went back and took a look at what our community has accomplished during the two months Jasonette has been out, and looks like we did a lot.

Here are some of the new major features and projects we've added since the launch (Not including bugfixes or iOS-to-Android feature port because that would make the list huuuge):

🔥 Jasonette-Android - The name says it all. The Android implementation of Jasonette, which makes Jasonette fully cross platform.
Android binary size reduction - Initially the Android binary size was huge, at over 40MB. We've made some optimizations which dropped it down to around 9MB, all the while supporting 100% of the parsers (json, csv, rss, xml, html), thanks for the contribution @brad!
Push notifications - Push notifications on iOS purely powered by JSON. We will soon release this officially once we document the API and implement the Android version.
Local JSON - This was one of the most higly requested features. Some people wanted to embed a JSON file in their project locally instead of fetching from a remote server. I initially was hesitant but soon became convinced that it can be useful in many cases. Thanks to @copongcopong for the implementation!
CocoaPods based extension management - We had a long discussion thread about this on Github, and in the end, @seletz implemented a solution which worked beautifully. We are currently working on the second iteration of extension management based on the insights we gained from this.
Ad integration - This was also one of the most highly requested features as well. Thanks to @wajahatch888, now we have AdMob support on iOS. Android support to come soon :)
Deep linking - Ability to open Jasonette apps using URL scheme (Example: jasonette://href?url=https://www.jasonbase.com/things/dh3.json)
Log action - An action that lets you log anything during execution. Built by @seletz.
$background event - An event to detect when the app goes into background mode. Thanks @fretz!
components border - Add "border" attribute to component styles. Now, any component can have a border surrounding them, thanks to @WenchaoD!
Loading indicator - Another great feature addition by @wajahatch888. Displays a loading indicator when the content is loading.
HTML component for Android - I had actually left out this feature on Android initially because I wasn't sure how performant it would be to have WebViews as components. @brad went on and just built it himself, and turns out that it works super smooth! Now works cross-platform both on iOS and Android.
Image button - Initially the buttons could only display text. Now it's possible to use image buttons. Both on iOS and Android.

Other Important Contributions

New features are exciting, but I think what's really important are things that we do to make the project itself much more maintainable and comprehensible so it's easier to work with. This includes:

Documentation
Adding automation to reduce repetitive tasks
Making it easier to work with Jasonette itself

It's still very early days for Jasonette so we lack a lot of these things. And the community is coming up with various solutions. I especially welcome these contributions with open arms. Here are some of the highlights we've achieved:

Auto-generate documentation using Travis CI - As an open source newbie I had no idea you could just automatically generate a documentation, so have been manually doing it. Now it's all automated via Travis CI, thanks to @gtramontina!
Integration with Code Climate - I am learning about all kinds of great tools for maintaining and visualizing open source projects from contributions. Code Climate is really nifty and lets you see problems with the code at a glance. Thanks to @lukeramsden for the integration!
Make it easy to use multiple targets in XCode - I honestly had never thought about this idea. @golopupinsky found that it becomes tedious to use one Jasonette project to build multiple apps, and just came up with a solution, and I think it will be super useful for people who want to juggle between building multiple apps using a single Jasonette project file.

What next in 2017? - Season 2 Preview

2016 was just the beginning. Our community is working on a lot of exciting things, and we plan to release tons of mind-blowing things in 2017. Here are some examples:

Oauth

This will be amazing once we roll out officially. It will be one of the most powerful features of Jasonette. Stay tuned :)

Package Manager

Jasonette was designed to be extensible. However, while writing an extension for personal usage has been easy, it has always been difficult to share and distribute because of all the dependency management we had to deal with.

After having tried multiple approaches to managing extensions, we've finally found the best way to make writing extensions dead simple. We are still working on it and plan to release it soon.

Expect to see a lot of cool additional features powered by JSON in 2017.

Lambda

I'll leave this up to your imagination :)

All I have to say is that this will take jasonette to the next level.

Much more

Of course, there are a lot of other cool projects which are still work in progress but I won't mention them here just to keep the mystery 😁

Follow our project to stay updated!

Join us.

Sound exciting? join us on slack, forum, twitter!

Also, follow and contribute to the project on Github: Jasonette-Android, Jasonette-iOS

And most importantly, Go build awesome things with it!

Join us