写在前面的话
2017年12月18日更新
Hybrid App系列文章已经清空,正在整理一个全新的系列,待续...
2017年2月19日更新
补上最近重新整理的Hybrid App系列文章。里面包含JSbridge原理介绍以及一个完整的JSbridge源码项目示例。
一些相关常识
文中的Html5+是市面上一种比较流行的Hybrid
开发方案,通过这套方案,可以用HTML,JS和CSS写出一个完整的原生APP,并且性能与原生相比较接近。
久久未能出炉的经验总结
从16年8月下旬开始,就渐渐的远离Dcloud的Html5+开发了(因为当初工作原因,在公司弄了一套自己的混合开发方案)。
原计划是在10月份左右就先总结一下Html5+一年多来的开发经验,避免留下遗憾。但是却由于种种原因,一直拖延,知道现在...
当初给自己找点借口是没时间,以后再写
。现在回想来,这个借口确实有点着急,试想我有时间学口琴,吉它,英语,日语,为何会没时间来写一篇总结博文?也许仅仅是我内心对它不重视而已。
正常来说,随着时间的流逝,这个念头或许就消逝了,到最后也不会出炉一篇感想
。但此刻的我要终结这个现象,我要立刻马上写一篇总结,以此铭记消逝在这上面的时间。
这无关信仰,仅仅因为我想要有始有终
我经历的Html5+开发
第一弹:初识Html5+开发
于2015年9月份,在第一份工作时,身为Android原生开发的我由于公司需求,初次接触了Dcloud公司的Html5+开发模式。
第一次接触Html5+开发模式,确实被惊艳
了。那时仅局限在Android原生世界中的我知道了原来JS可以也写出原生APP。同时也被Hbuild
这款IDE深深吸引了,觉得它功能特别强大。于是这时候便开始迫不及待的学习起来Html5+开发。
第二弹:磕磕碰碰完成第一个项目,踏入前端大门
当然,此时我面临着一些阻碍:
- 没有H5基础,JS和CSS尚未入门
- 没有前辈指导,孤军一人,万事靠
搜索
- Html5+的新人手册有点不足
当然,对于一个合格的程序员来说,良好的学习能力
是必备的,所有这都不是问题,因此从0自学,大概1个月后,磕磕碰碰的开发出了项目的初版。
初版的项目虽然能正常运行,但是代码惨不忍睹,于是之后在完善项目功能的同时又对整个项目进行了多次重构。
最终,在11月份左右时,项目的终版也出来了,整个项目经历了3次大重构,无数次小需求修改。部分功能截图如下:
统计下来:
- 整个项目主体功能开发历时3个月左右(9,10,11)
- 整个项目包括两个版本
社工端
和居民端
,其中社工端
页面数110左右,居民端
页面数60左右(项目算较大了) - 项目包含的功能基本涵盖h5+ api大部分内容,包括IO操作等等,甚至其中的CA证书功能,还包括了Native.js和原生通信。
- 项目的开发人员 是两个
没有任何JS和CSS经验的Android原生人员
+ 1和页面重构人员(没有CSS经验只能让重构人员重构页面) - 整个项目的APP端开发工作预计花费预算为
2OW左右
(主要都是开发人员人力花费时间)*
第一个项目做下来总体评价:
- 优点
- 开发效率比原生要高出很多(两个开发人员开发这个项目只花费了3个月,期间需求修改了无数次,还包括了他们从0入门的学习时间)
- 相比原生更节约预算成本(如果换为原生开发,预算得2以上,而且这么多次需求修改,预算估计更是额外会超出很多)*
- 性能相比原生不足,但是可以接收(项目属于工具类APP,没有用到花哨的动画,性能在低端机上差不多是原生的70%左右,在高系统的机型上,更是几乎可以忽略这个性能差异)
- 缺点
- 依赖于H5+SDK,某些功能出Bug只能依赖于官方修复(比如其中的一个在特殊机型上的语音识别功能Bug,最终也没能解决)
第三弹:逐渐脱离项目业务开发,自己搭建开发框架
在完成了第一个Html5+模式开发的APP后,发现这种模式相比起原生开发有很大的优势,于是接下来又有多个项目基于Html5+模式进行开发。
当然随着业务的拓展,慢慢的公司里专门进行Html5+开发的人员也越来越多,从刚开始的原生Android转向H5开发,到后来纯碎就是只会JS,不会Android的人进行开发,从刚开始的只兼容Android与iOS,到后来的兼容Android,iOS,浏览器。整体模式也越来越跨平台化。
这时候,我也慢慢从项目开发中抽出身来,开始为公司的跨平台开发搭建一个简陋的开发框架,用来统一代码风格,简化开发。
整体框架的发展过程:
- 2016年1月:将一堆常用工具类组合在一起,形成了一个框架雏形
V1.0版本
- 2016年2月:使用sea.js重构框架,采用模块化开发,部分API支持H5兼容。达到跨平台开发效果,推出
V2.0版本
- 别问我为什么不用ES6开发==。这是有历史原因+公司本身局限造成的
- 2016年6月:框架基本功能都已经完善,重构优化部分工具类,同时推出配套的在线文档,推出框架
V3.0版本
- 之后所有的更新都是基于3.0版本的
整体的框架代码结构如图:(相关文档可以参考文章最后的链接)
第四弹:H5+跨平台开发的高速发展
从15年9月份,一直到16年8月份,公司接手的小型APP基本都是用Html5+
模式开发的(基于那个简陋框架,当然了,我基本都没参与开发了),统计下来如下:(当然实际上那些微信,原生等项目就不统计了)
- 基于Html5+模式开发记录在册的APP有21个(还有一些APP是其它部分开发的就没有记录了)
- 项目大多是小型APP(就是属于那种做PC项目然后附赠APP的那种),有几个例外(比如园区项目,是一个大型APP项目,涉及到多端,功能也非常多)
- 更多可以参考脑图统计 http://naotu.baidu.com/file/231d8deb41def6424f2f62785a3e6038?token=2755a64a06b8dee2
第五弹:业务转型,无奈舍弃H5+
到了16年8月,整体跨平台开发已经比较成熟,那个简陋框架也在慢慢完善,经过了多个项目的验证,并且在线文档也同步推出,正在慢慢完善。正常来说接下来应该就是Html5+项目业务代码的堆积时段了,接下来应该是告诉的开发H5+项目。
但是,这时候整个公司层面对Html5+跨平台开发方案
进行了一次评审,一番讨论下来,最终决定舍弃已有的H5+方案,转而自己弄一套更符合公司业务的混合开发方案
,遗弃理由大概如下:
- Html5+的SDK没有完全开源(虽然号称H5+是一套开源的Hybrid方案,但实际上它目前只有mui和部分sdk开源,而不开源会有很多的影响)
- 当遇到SDK底层bug时,由于没有开源,所有无法自行解决修复,只能向Dcloud官方提bug,而这块经常会影响到项目开发
- 曾经遇到过一个问题,某个安全检测软件(客户要求),检测出了一堆的bug(其实是软件自身也有点问题),bug指向都是h5+的sdk,而没有开源,所以无法及时解决,整个项目受到了一定的影响
- 一些其它的影响,比如局部修改某些sdk功能时就无法做到
- 当然了这些问题在已有的较为成熟的Hybrid方案中都存在,所以公司层面决定弃用
- Html5+ SDK与公司已有的移动的框架存在一些功能重合问题,而且不好直接整合进入框架。比如公司很多项目都是要结合原生模块的,H5+结合原生模块与公司已有框架确实比较费力,与公司的匹配度无法达到最高
- 公司业务特殊,在向某些客户介绍,吹嘘方案时,觉得自主研发的方案与框架能显得更有技术力量(这是一个比较无语的原因...)
于是从16年8月份开始,就开始逐渐舍弃h5+方案,转而研发搭建公司自主的混合开发框架
另外,这里支持下Dcloud,在整个Hybrid界,H5+是一个相对来说较优的方案。相对来说还是有一定的技术自由度的,比如与它的老对手APICloud
相比:
- H5+适合于有一定开发经验的开发人员,H5+只提供底层,中间层的开发框架是需要开发者自行搭建的,因此开发者可以有很多工作来做,对于一些技术控来说,这些都是必须的。而且Hbuild的优化个人感觉还是要好一点的。
- APICloud适合于新手,小白,对于没有任何移动经验的新手来说,APICloud能让他快速开发一个APP,产生一定的成就感,另外个人感觉就是API营销的较好,其它更多由于没有深入了解也无从评价。
第六弹:时光飞逝,再回首,怅然若梦
从15年9月正式接触H5+开发,到16年8月舍弃h5+,再到现在17年2月。原来不知不觉之间,已经过去了1年半了。
总的来说,H5+开发
对我来说更像是一个转化器
,一年前,我以一个纯Android原生人员
的身份进入这个领域,一年多后,我以前端界综合人士
从另一端出来。
也许就像一些前辈说的一样,我们的人生就是大井
套小井
,我们从一个小的井底之蛙,变成一个大的井底之蛙,虽然我们内心可能一直在沾沾自喜自己已经跳出了以前的小井
,但其实我们却不知依然处于另一口大井
之中。
技术如此,人生也如此。骄傲
也好,成就
也罢,也许对于整个人生来说,它们真的不值一提。我们能做到就是恪守本心,不忘初心的一直走下去。
附录
博客
初次发布于2017.02.16
于个人博客上
http://www.dailichun.com/2017/02/15/html5plusDecelop.html
源码与文档
基于h5+的跨平台开发框架