Hybrid app开发模式

Hybrid

1、Native or Web开发模块

    用Hybrid模式开发App时，在大致熟悉项目整个框架和App各个模块后将通用的，对性能要求不高的App界面以web界面开发，Native直接调用。一般Hybrid App开发，App界面之间的跳转关系由Native实现并完成，web界面主要作为内容填充到Android和iOS的浏览器控件中。由于客户端浏览器控件版本不同，web界面加载，渲染和缓存机制等原因，这种模式开发的App整体在图文比较多的情况下体验就不太好，甚至可能会出现意想不到的bug。因此，一般建议图文列表以及涉及到视频等多并发和界面元素比较负责或具有很强的动画特效的情况优先考虑Native开发。特别是针对Android开发，Android 4.4之前的浏览器控件WebView基于缺省的WebKit内核，它不同于Chromium所使用的Webkit内核；而在4.4之后（包括4.4）的WebView的实现被替换成Chromium WebKit内核。当我们想让App尽可能的在低版本也能运行良好时，就需要不断做兼容性开发和测试了，除非自己在App里面打包编译最新WebView源码，类似开发一个浏览器。

2、Native & web 通信

    1) Native调用js方法
    Android和iOS都提供了API直接调用：

    webview.loadUrl("javascript:functionName(\"" + argument + "\")");
    webview.getSettings().setJavaScriptEnabled(true);  
    [webView stringByEvaluatingJavaScriptFromString:@"alert('hello world!')"];

    2) js调用Native方法
    Android实现js调用native方法一般是先编写供js调用的类，然后通过添加javascripteInterface的方法，如

    webView.addJavascriptInterface(pandoInterface, "pando");

    将java对象pandoInterface生成js对象pando，然后直接window.pando就可以调用pandoInterface对象里面的方法。需要注意的是供js调用的pandoInterface对象里面的java方法需手动加上@JavascriptInterface注解，这个是Google为解决安全问题引入的。
    以上方法都只是实现了js调用Native方法，但是都没有实现js函数回调，将Native方法返回结果传递给js。
    微信开放了很多jsApi接口，供大家直接调用微信Native的功能。通过jsApi接口和文档我们会发现里面实现了Native方法执行结果回调给js。这种Hybrid App开发模式很好的利用了Native高性能，多并发的优势，将网络请求，扫码等复杂的逻辑或者web不可能实现的功能由Native完成，而web只是做了界面显示效果。将微信Android安装包解压之后，在assets/jsapi目录下有个80多kb的wxjs.js文件，里面实现了微信jsApi逻辑jsbridge。

3、Hybrid App维护

    Hybrid App涉及到html、css和js等web资源文件，当web和Native之间有相互调用时，两者之间任何一方接口变动都会导致App出现bug。
    考虑类似微信方案，将jsbridge文件或者部分常用web资源随App打包发布，降低维护成本，也不用担心在网络不好的情况下加载不了web界面，在接口升级之前发布出去的App肯定也是稳定可用的，当然这个也要考虑安全性问题，毕竟你的web界面源码通过反编译代码可以得到。
    所有web资源统一从服务器获取。由于web资源在服务器，所以可以随时动态更改web界面，发现bug也不用发布App，直接在线接口升级。但是要维护web资源，使得每个发布出去的每个版本的App在加载web资源时都可用。

Reference: yangwen's blog on pandocloud.