Hybrid applications optimize webview?

Question

How the frameworks Do hybrids work? In my view what they do is they spin everything on top of the webview platform native, just packaging the JS code inside an application directory, such as Assets.

So what is the real usefulness of using these frameworks? It’s just to have a cross-platform code and develop a fast product?

In theory, thinking about Android, if I had a minemo code that loads an HTML page in a webview is the same thing as creating an IONIC app and mounting for Android? These frameworks optimize something?

Answer 1

1 - Cordova

Well, it’s not just that. What happens is that the view part of the app runs on top of the webview, but Cordova provides a native integration with the device’s own features. The great advantage beyond the speed of development is that you don’t have to worry about the component patterns of each platform, since the plugins handle them for you.

Ionic (which works on top of Cordova), creates an object called window.Cordova, which allows direct system api access. This allows you to make a javascript call, and internally Cordova detects the platform it is running on and then runs the appropriate tool for it. You can access camera, accelerometer, microphone, files, location and any other feature of your device, as long as you develop a plugin for it (which even you can do).

It’s worth keeping up to date looking at the plugins developed for Cordova, one has recently been created to use native animations, native dialog boxes and native page transitions. There is really a lot of cool stuff that you can implement in your app, it is increasingly difficult to differentiate a native app from an app developed based on Ordova.

2 - React Native

There is also how to create hybrid apps using js without being on top of web views. This is the case with React Native, a platform developed by Facebook developers (even used in Facebook apps). It allows you to create native cross-platform code apps using React, and its advantages are a better performance than the previous option and as Cordova also allows you to have less headaches with other platforms.

Answer 2

When you use a hybrid architecture, you may need to create "bridges" between the HTML5 layer and the native layer to access native platform resources. For example, access mobile contacts.

Normally you would have to select a method of communication between Javascript and native code (which is not something trivial, unfortunately) and also implement this communication for the task you are doing.

The advantage of using a Cordova-like framework is that this kind of thing has already been done, either in the framework itself or in some plug-in.

The disadvantage is that there is the learning curve of the framework, which is not small in the case of Cordova; and you "marry" it, being subject to the future moods of the framework project.

My personal opinion: Cordova was more advantageous when there were 4 or 5 viable mobile platforms (iOS, Android, Windows Phone, Blackberry, Tizen, Meego...) At the time the market was reduced to iOS and Android only. Implementing only business logic in Javascript, and using React Native or even native view will provide a better result with less framework dependency.

Answer 3

For those developing native applications with the Android Studio IDE, I have a quick example of Webview:

Create an index.html file in Assets and change your Mainactivity.java file, as done below:

package br.com.webview.android;

import android.os.Bundle; 
import android.support.design.widget.FloatingActionButton; 
import android.support.design.widget.Snackbar; 
import android.support.v7.app.AppCompatActivity; 
import android.support.v7.widget.Toolbar; 
import android.view.View; 
import android.webkit.WebView;

public class MainActivity extends AppCompatActivity {

    WebView webView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        webView = (WebView) findViewById(R.id.checkbox_webview);
        webView.getSettings().setJavaScriptEnabled(true);

        webView.loadUrl("file:///android_asset/index.html");

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                        .setAction("Action", null).show();
            }
        });
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    }

}

See what above I called the webview through a id calling for checkbox_webview.

To call the Activity:

Intent intent = new Intent(this, MainActivity.class);
            startActivity(intent);

Your webview screen:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context=".MainActivity"
    tools:showIn="@layout/activity_main">

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <WebView
            android:id="@+id/checkbox_webview"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginLeft="08dp"
            android:layout_marginRight="08dp"
            android:clickable="true"
            android:focusable="true"
            android:enabled="true"
            android:textStyle="normal"
            android:textColor="@android:color/black"
            android:paddingRight="6dp"
            android:paddingLeft="6dp"
            android:lineSpacingMultiplier="1.1"
            android:textColorLink="#309BE3"
            android:background="#f2f2f2"
            android:textSize="14sp"
            android:focusableInTouchMode="true"
            android:contextClickable="true"
            android:longClickable="true"
            android:nestedScrollingEnabled="true"
            android:textIsSelectable="true"
            android:scaleType="centerCrop"
            android:importantForAccessibility="auto"/>
    </ScrollView>
</RelativeLayout>

I hope I’ve helped.