What if I told you the 7 lines of JSON above, colored orange, are all you need to turn a website into a mobile application design? To make your website behave like a hybrid mobile app, there is no need to completely rewrite it using some framework API. Bring your current website over and use a simple URL reference to integrate it into a native app without any issues.
And what if you could access all native APIs, native UI elements, and native view transitions right out of the box by simply making a few minor changes to the JSON markup?
Here’s how a simple example would work in practice:
Consider how Although I’ve embedded a github.com web page, the layout’s other elements, like the navigation header and the bottom tab bar, are all native UI elements. And there’s no need to rewrite the website using any APIs because the transition happens automatically in native mode.
You might inquire, “That’s cool, but can you do anything meaningful other than just displaying the web page in a native app frame?” before I go on to explain how.
Great question, because that’s the main topic of this post. The only thing left to do is establish a seamless two-way communication channel between the web view and the app, allowing the parent app to activate any JavaScript functions present inside the web view and the web view to call native APIs from outside the app. One such instance is as follows:
Be aware that this view includes:
A native navigation header with built-in transition capabilities an embedded web app for creating QR codes a bottom-positioned native chat input element Just by changing a few of the JSON markup attributes, we saw above, all of this can be explained. Last but not least, take note of how the QR code modifies as you type something into the chat input. The chat input triggers a JavaScript function inside the QR code web app that re-generates the image.
Because they are all focused on choosing either a 100% native or a 100% HTML5 side, no app development framework has attempted to fundamentally solve the problem of “seamless integration of web view into native apps.”
Whenever someone discusses the future of hybrid mobile apps, they almost always bring up the question, “Will the HTML5 strategy prevail? Or will it be native?”
None of them consider native and HTML to be compatible enough to work together, let alone to foster synergy and accomplish things that would be difficult to do otherwise.
I’ll explain the following in this article:
why it’s often a good idea to combine native and web engine components. Why a seamless HTML and Native integration is difficult and how I achieved one. What matters most is how YOU can use it to quickly create your own app.
Why use HTML in a native application?
Let’s first talk about whether this is even a good idea and when you might want to use this strategy before moving on. Here are some potential use cases:
1. Make use of web-native features
The web engine might make it easier to implement some of your app’s features. An example of a web-native feature created specifically for the web environment is Websocket. In this situation, using the built-in web engine makes more sense than installing a third-party library that essentially “emulates” Websocket (WKWebView for iOS and WebView for Android). There is no need to install additional code in order to perform a task that is already available for free, which brings us to our next issue.
2. Prevent Using Big Binary Size
You might want to incorporate features right away that would otherwise need a sizable third-party library. For instance, installing a third-party library is required to natively incorporate a QR code image generator, which will increase the binary size. However, if you use a JavaScript library and the web view engine through a straightforward script src>, you get everything for free and don’t need to install any third-party native libraries.
3. There is no trustworthy mobile library.
There are some cutting-edge technologies for which there is not yet a stable and reliable hybrid mobile application design implementation. The most effective way to integrate these technologies is to use their JavaScript libraries because the majority of them have web implementations.
4. Develop hybrid native and web applications
When they learn that some of their existing website features are too complicated to quickly rewrite from scratch for each mobile platform, many new developers who are trying to convert their website into a mobile application design become demoralized or overwhelmed.
A single web page, for instance, might be too complex to be turned right away into a hybrid mobile app, but the rest of your website might be simple to convert. It would be nice if there was a way to build the majority of the app natively in this situation, but for that specific complex web page, find a way to seamlessly integrate it into the app as HTML.
What is the process?
A.Jasonette
Jasonette is an open source framework for creating native cross-platform apps that uses markup. It functions similarly to a web browser, but instead of translating HTML markup into web pages, it does so by translating JSON markup into native iOS and Android apps.
All Jasonette apps have exactly the same binary, and it interprets various JSON markups to create your app, just like all web browsers have exactly the same code but can deliver you a wide range of different web apps by interpreting various HTML markup as needed. The code never needs to be touched by the developers. Instead, you create apps by writing markup that instantly converts to native code.
This website has more information about Jasonette. While the main focus of Jasonette is developing native apps, this article is specifically about incorporating HTML into the native engine, so let’s talk about that.
Web Container for B. Jasonette
Although native apps are fantastic, there are times when we must use web features. However, incorporating web views into a native app can be challenging. A seamless integration requires:
The web view should be integrated as a native layout component: The web view should blend in with the app as a native layout component and be handled similarly to other native UI elements. Otherwise, it will seem clumsy and feel exactly like a website, which is what it is.
Child web container can be controlled by parent app: The parent app should have complete control over the child web view.
The parent app’s native events may be triggered by a child web container: To run native APIs, the child app must be able to initiate events in the parent app.
Since these require a lot of work, I first focused on just the first component of the puzzle, which is the straightforward embedding of a web container into native layout, and I released it as version 1.
JSON Web Container
JSON Encapsulated HTML Converts to Native App Componentsjasonette.com
Even though it was already quite helpful, this still had the drawback of not being interactive. The child web container was completely cut off from the outside world because neither the parent app nor the child could communicate with one another.
Web Container 2.0: C. Jasonette, Make it Interactive
I experimented with the second component of the solution after releasing version 1, which involved giving the web container interactivity. The solutions that were added to make the formerly static web containers interactive and significantly more potent are described in the following section.
Interactive Web Container as a Means of Implementation