JSON web container07 Apr 2017
What if you could take the web, turn it into a native app component, and plug it into native layout/scrollview along with other native components? Like magic!
Meet JSON Web Container. Here's how it works:
Step 2. Write JSON: Write JSON to describe how it blends into native app layout. You can even style it just like any other component!
Step 3. Enjoy!
Here's an example:
Check out this video and you’ll realize how much more you can do with this:
This is a simple update but simultaneously a huge deal for Jasonette, because it opens door to all kinds of new possibilities.
How this came to be
It all started with Brad.
Just like any developer, I believed web would never work in a native app. We did kind of have a half-assed 'html' component with the first version of Jasonette, but it was very limited and was just a hack to display a small subset of HTML elements.
Most importantly, it didn't have Android support (I never implemented an Android counterpart because I really didn't see much utility from the iOS version so didn't want to invest time).
Then one day I see a new pull request on the Android repository:
Obviously I was super skeptical at first ("Everyone knows web views suck!").
But then I actually tried it out..... I was shocked to find how smooth it was. Whole bunch of web views were scrolling within a list view just fine!
So eventually I got around to converting the iOS HTML component to use the same approach.
Once I had a prototype running I posted it on the forum and I got lots of great feedback. One was something I hadn't thought of before:
So I went back and added caching mechanism to improve this. So now, all the static assets are cached so they don't get redownloaded multiple times.
After all this was done, the web container was performing flawlessly on both iOS and Android.
In fact, sometimes you can't even tell if it's a native component or a web container!
To sum up: Peformance is great! Of course it won't be 100% the performance of native, but the whole point is to mix and match this into your native app, not to power the entire app using HTML (we're building a native app here!). You have never been able to do something like this before (Seamlessly integrate web views into native scroll views, native layouts, native background, and use them as native components) and that makes tons of difference.
The moral of this story is, "Always push the boundary". With Jasonette we're doing something that most people will say is crazy ("it will never work!") anyway, so why not go all out!
Also I think the way this feature came together is really awesome because this could only happen because the project was open for contribution. Thanks Brad!
I encourage you to feel free to send pull requests no matter how crazy it is.
And that's it! I'm sure this will take your native app to the next level. The initial release for web container is intentionally minimal, and we'll probably add more powerful features going forward.