06. WebApp2.0时代启程:倒立者赢,跨平台技术离我们很近

简介: 紧接上文,我们提到移动互联网时代,前端的成本重复而臃肿,后端开发基本稳定,作为商业公司:利润和成本使我们不断追求的目标。这里我们从跨平台的角度,来看待如何降低成本。 ####1. 首先我们看一段视频: 3个平台:浏览器、Android、iOS,一套JS代码,运行在不同设备上【注意,终端展示没有用WebView相关容器】 ![screenshot](http://img4.tbcd

紧接上文,我们提到移动互联网时代,前端的成本重复而臃肿,后端开发基本稳定,作为商业公司:利润和成本使我们不断追求的目标。这里我们从跨平台的角度,来看待如何降低成本。

1. 首先我们看一段视频:

3个平台:浏览器、Android、iOS,一套JS代码,运行在不同设备上【注意,终端展示没有用WebView相关容器】
screenshot

测试的demo地址:
点击进入测试:
Android也可以直接扫码安装:

screenshot

Safari/iOS/Android H5测试也可以扫码在手机端测试:
screenshot

安卓客户端只适配了480x800的分辨率,分辨率不同的屏幕点击处理就会有问题,这点我们留给后面再讲。

包的大小11M,毕竟一套C++代码需要编译多个平台的so包,armeabi和armeabi-v7a各5.8M,加起来就11M了,这就是很多大型Android游戏,首次启动要动态下载链接库的原因,ndk开发的感觉不如xcode得心应手。

2. 大家先感受一下JSBinding的魅力

ios版本的安装包就不提供了,因为的demo不是很复杂,iphone轻松60fps,随着后续我们的demo不断复杂,AEPIXI的加速效果就越明显。
对JSBinding还不了解的同学,可以回顾之前的文章:Cocos2d-JS详解

为什么需要Binding?这一点很重要,希望每个技术同学可以认真地读完:
底层开发者充分挖掘硬件的潜能,为上层开发者去浪费。

开始的时候,我也很难理解,拿到上层Android、IOS开发者不断优化App性能的本质,只是底层开发者故意留给我们优化的嘛?这一点,我们要从这个操作系统的架构去分析:
screenshot

从上面的操作系统的架构图中,底层的硬件标准虽然大不相同,但OS内核和图形引擎大多基于C/C++ && OpenGL,Android和iOS也是相同的,我们可以试想,如果苹果将iOS框架用使用NDK编译一下,是否也可以在Android的手机上运行呢?
虽说技术无国界,毕竟商业需要边界,所谓不同平台,受限于不同底层的操作系统提供的基础类库不同,导致上层代码也不相同,无法在多个平台上同时运行。

3. 终端H5开发,就是跨平台开发

跨平台开发,我们需要梳理清楚,什么场景或者技术适合跨平台,把眼光放到多个OS上,我们看看已有的那些技术是相同的,那些是不同的。
screenshot

2个曲线框,我总结为:跨平台技术的衍生场景,大多基于图中的两个圈圈,我们总结为:上层跨平台技术和底层跨平台技术。

基于H5的Hybird:
代表产品:Phonegap、Cordova、WindVane等等,依赖的是各个系统的Webkit的类库,这种跨平台的技术的优势明显,缺点是严重依赖WebKit的性能,大家都懂的。【前提是OS中有Webkit的类库,当然WindowXP是一个特例,我们的做法是内置一个Webkit进去。】

基于脚本语言:
代表产品:Wax、ReactNative等,依赖各个系统的脚本解释器,Wax依赖Lua、JS依赖WebKit。优势在于成本低,脚本语言的灵活性,无需编译直接运行,脚本只是做了转发功能,系统各个平台的性能决定了脚本的性能,也决定了脚本语言的写法,比如LuaForJava脚本在LuaForIOS(wax)写的代码就不能在Android平台运行,因为他们底层调用的对应的语言和支持。
JS没有消息转发机制,不能方便的动态调用系统API,因此JS的框架往往自成体系,读者想要弥补JS的消息转发机制,可以参考:跨平台的JSPatch

基于Java语言:
代表产品:Android,下面会提到。

基于C/C++:
代表产品:Cocos2d-X,一套语言多平台运行,只看兼容Android1.5以上、iOS4.3以上,就能感受到C/C++跨平台,不跨则以一跨惊人!性能更是不在话下,遇到场景复杂的业务,连iOS开发者也要考虑是否使用游戏引擎,彩票App的一些彩种,直接用Cocos2d-x,瞬间Android和iOS的体验爆表,有木有?缺点:耗电、能写好C++代码的程序员不多了。

4. 为什么技能相近的开发者,通常iOS平台App要比Android流畅?

4.1 我认为,Android不可避免的GC卡顿,在开发语言上略输iOS一筹。
在上层开发者技术能力相似的情况下,我们可以明显感受到iOS的流畅度由于Android,通常我们说Java语言的性能不如C/C++/Objective-C,每次GC系统都要卡顿一下,就让很多开发者无从优化,催化了优化JVM、NDK、JNI的一批牛人。

4.2 我认为,Android底层的图形引擎的优化,要比iOS略逊一筹
乔布斯一直专注于图形图像引擎,30年的积累证明了一切。iOS平台多种CoreGraphics/CoreAnimation/UIKit/TextKit/CoreXXX,等框架,每个API都值得我们去思考。

5. 选择跨平台优化终端的场景

从操作系统层面做优化,技术的优化,往往不能摆脱业务的羁绊,我选择从底层做优化,回到最初的Cocos2d-X,下一章节,我们以图片加载和渲染的性能优化为例,一起聊聊一张图片文件在App的旅程。

总结,大公司的商业壁垒往往在技术领域的中间层,向下,商业公司极致的优化底层性能,向上,提供了硬件无关的API,降低开发者的门槛,让小白写很烂的代码,也可以流畅的运行,这一点,苹果做到了。

目录
相关文章
|
移动开发 JavaScript Java
08. WebApp2.0时代启程:倒立者赢,NativePixi,所见即所得的开发方式
紧接上文,在终端设备中,不管是游戏引擎还是UIKit,图形图像都是基于跨平台的OpenGL ES技术,区分不同的场景,图形图像分为两个分支,一个以高性能的图形显示为目标的cocos2d-x引擎,一个是以省电节能适合App的UIKit框架。 ####一)今天我们继续逆向思维 Game VS App,既然都是基于OpenGL ES,那我们找出共同点,是否可以让二者的界限,变得更模糊?既
2369 0
|
移动开发 JavaScript 前端开发
01. WebApp2.0时代启程:Cocos2d-JS详解(一)
(一)WebApp时代,追求App开发效率的同时,我们也要求终端的体验和性能,2/8原则可以很好的阐述当前的hybird开发方式:20%的Native代码+80%的H5代码。 ![5a96ccb3abc157b98a67b7bcfa8c2e9d](http://img2.tbcdn.cn/L1/461/1/f0fe01c8c83bbc680afd4e785eb21e53d3367bc5) (二
4044 0
|
Web App开发 JavaScript Java
02. WebApp2.0时代启程:Cocos2d-JS为什么选择SpiderMonkey(二)
紧接上文,cocos2d-JS为我们提供了图形引擎、物理引擎、JS引擎等基础库,在多终端时代提供了非常nice的游戏引擎,在浏览器普及在各个终端的今天,为什么还要单独搞一套JS引擎呢? 1. 我们先看看使用SpiderMonkey的技术产品有哪些? ![screenshot](http://img1.tbcdn.cn/L1/461/1/aec02fdece92d563ae07a7dc0c0
4120 0
|
Web App开发 JavaScript Java
03. WebApp2.0时代启程:Cocos2d-JS让C++代码支持JS脚本(三)
紧接上文,JS在单线程下,性能不会比Java差,注意场景是单线程。Java的优势不仅是高级语言的特性,还具备了丰富的系统内核资源,如多线程、网络等支持,要比JS灵活的多很多,这里暂时不在讨论这些问题。 回到主题,如果我们把一个完整的C++图形引擎注入到SpiderMonkey中,把复杂的预算放到C/C++内核中,而JS只作为业务处理和内存管理,是否可以获得C/C++的运行能力,有获得了良好的
3380 0
|
JavaScript Java Android开发
04. WebApp2.0时代启程:跨平台的JSPatch
紧接上回,Cocos2d-JS通过JSBinding从C++API到JSAPI,完成了H5的跨平台加速,这一回,我们一起来见证一下JSPatch的跨平台实现,为JS语言增加消息转发机制,无需修改js脚本,让下面这段代码可以正确地运行起来: var controller = UIViewController.alloc().init(); 而不是让app翻译成: U
1792 0
|
Web App开发 新零售 移动开发
05. WebApp2.0时代启程:倒立者赢,从过去到现在的变化,看将来的发展(一)
####1. 移动互联网的兴起,我认为2009年是个分水岭。 开始的时候,我也是做Java开发,习惯了Webx架构,可以熟练的使用Spring、iBatis、veloctiy、HSF、Notify、Tair、Session这些阿里具有代表性的Java框架,也会使用IC、UIC、SC、DC等等服务集群做电商核心业务。 概括起来,基本也是三层服务端架构: ![screenshot](http:/
2115 0
|
缓存 Android开发 iOS开发
07. WebApp2.0时代启程:倒立者赢,从CPU到GPU,一张图片的旅行
紧接上文,终端开发使用的WindVane、wax、ReactNative等已经是一种跨平台的技术,我们称之为上层跨平台,Cocos2d-x这种直接使用C/C++,我们成为底层跨平台。上层跨平台,提升开发效率;下层跨平台,提升程序性能。 ####1. 为什么Cocos2d-x性能比Native开发要好? 因为Cocos2d-X是游戏引擎呗,人家是专业做游戏特效的好不好,直接调用GPU的Ope
2730 0
|
前端开发 JavaScript Java
09. WebApp2.0时代启程:倒立者赢,挑战Android性能极限
紧接上文,在终端硬件资源有限的大背景下,业务脚本+图形内核,将是未来主流的开发方式。AEPixi使用C/C++、JS、JNI、OC等混合语言开发,将pixi.js变成高性能的Native内核,提供上层pixi.js标准的API,无缝的兼容浏览器开发好的代码,实现浏览器开发,无需编译,到处运行的开发方式。 今天我们做一个H5的Demo,使用FireFox开发,开发完成之后,直接使用上一
2337 0
|
移动开发 JavaScript 前端开发
用开发本地tcpip程序的思路开发webapp
本文关键字:the headless cms,b/s web to c/s web, headless webapp backend.
473 0
用开发本地tcpip程序的思路开发webapp
|
Web App开发 监控 Serverless
十分钟上线-基于函数计算开发 Restful web api & asp.net core web app
.NET Core是一个开源通用的开发框架,支持跨平台, 阿里云函数计算推出了 dotnetcore2.1 runtime, 使用 C# 编写 serverless 函数, 除了很好地支持通常意义上的函数外, 还可以基于函数计算开发 asp.
5747 0