本文来自爱码哥CTO邱杨(Terry)同学,微信公众号“爱码哥”(微信公众号:iMAG_app)
随着HTML5和Node.js的流行,Javascript这门在互联网初期就已诞生的语言正迸发出勃勃生机,Javascript将前端和后端开发统一起来,“一切皆为JS”看起来只是时间的问题。唯一的障碍是在移动端,因为无论是Android还是iOS平台,当前仍是原生应用大行其道。HTML5曾经被寄予厚望过,但是以Facebook为代表的一批公司在移动端对HTML5技术进行实践的心酸血泪史表明,HTML5可以是原生应用开发的一种有效补充,但远不足以替代原生。但是现在,随着iMAG.js的渐渐流行,这种状况正在发生改变.
揭开iMAG.js这匹黑马的神秘面纱
iMAG.js是国内的爱码哥移动平台推出的Javascript移动跨平台开发框架,它的特点简单高效,同时又功能强大,可以用Javascript来替代原生开发。iMAG.js的原理和在服务器端运行的Node.js有些相似,都是封装了Javascript引擎,用Javascript去调用底层的API接口。不同的是因为移动应用的控件主要是UI模块、用户交互界面开发,iMAG.js为此引入了XML模板技术,XML和Javascript结合,这样很适合手机界面的展示。
下面我们来看iMAG.js是怎么做到替代原生开发,完成HTML5无法完成的事情的?
1、首先是封装原生UI控件。大家知道手机系统无论是Android还是iOS都有其自身的特色,而这些特色给用户最直观的感受就是用户体验,虽然Android和iOS的App可以在外观上设计得相似,但用户操作两下之后就能很轻易地区分出哪个是Android哪个是iOS。因此发挥系统本身最大功效最根本的做法就是尽可能使用原生UI控件,而iMAG.js框架中所有提供给用户的控件都是原生的,只不过是在上层封装了Javascript接口而已。比如说iMAG.js中的Label控件,在iOS上是调用系统的UILabel控件,而在Android上则是调用的TextView控件,这样在性能和用户体验上就能做到和原生应用完全一致。手机的CPU和内存等资源有限,原生控件在一些细节地方都是有针对性的优化的,比如Android ListView的复用机制,使用ViewHolder来重复使用View,以节省内存使用并且保持滚动的流畅性。同样地,iMAG.js很充分地利用了这些机制,以保证基于iMAG.js开发的App能够和原生App同样操作流畅。
2、其次是统一的开发框架。不同于 HTML5上开发框架纷乱的状况,基于iMAG.js为移动开发量身定做的API,你会始终感到很顺畅,iMAG.js的开发者最直观的感受就是这个框架就是为移动开发准备的。在学习掌握了一个iMAG.js控件之后,即便不看文档,开发者也能大致猜到其他控件怎么用,这得益于iMAG.js良好的设计和封装。iMAG.js框架支持XML模板技术,这样所有的UI控件都可以用XML的方式来书写,开发得到了相当程度的简化。就像搭积木似的,即便是不懂技术的人,也能利用iMAG.js快速搭建出自己想要的App原型,将自己的想法直观地呈现给客户。除了静态界面的展示,与用户交互也是重点。比如说跟后台数据库相结合,界面数据都是来自数据库的动态数据,用户输入的数据能够以同步和异步的方式入库。而所有这些动态的东西,在iMAG.js中都可以通过Javascript脚本来完成,Javascript本身就是一门具有高度扩展性的动态脚本语言。
3、iMAG.js同样适合开发大型的App项目。一个大的开发团队,除了有开发人员,还有专业的产品经理,专业的美工,专业的测试,成员之间彼此分工协作来完成项目。在精密的分工协作下完成的App通常是一个UI界面很精确的东西,比如美工根据设计做的图,通常是精确到像素的,文字的字号多大,文字图片之间的间距多少都是严格定义的,不能只是一个大致差不多的东西。iMAG.js通过css样式来控制这些内容,实现UI元素的精确布局,而且充分考虑到了手机屏幕大小的不规则性,能对不同平台不同屏幕大小的手机进行自动适配,让跨平台开发变得更容易。在兼容性方面,由于iMAG.js框架自身对Android和iOS平台良好的兼容性,真正做到了一次开发多处运行,避免了类似于HTML5开发上出现的由于内核的不同在不同手机上展示不一致的情况。再就是iMAG.js提供了离线应用和在线应用两种模式,习惯了web后台开发的开发者可以很轻松地切换到在线应用这种模式下,因为这根本就和开发网页一样。
4、功能也是用户关心的,到底能有多少种UI展示效果,有多少种手机能力可用,决定了APP开发能够达到的层次。iMAG.js框架本身已经封装了上百种原生控件,比如TextView, ListView, UIScrollView, UITableView这些,支持电话、短信、定位、蓝牙、通讯录等几十种手机能力的使用,而这些本地功能调用都相当容易,比如:$phone.call(‘10086’)表示拨打这个电话。当然iMAG.js本身提供的功能再丰富也有不够用的时候,因为移动开发常常会面对一些复杂的场景,比如多人视频会议,不仅复杂可能还需要跟底层特定硬件结合。幸好iMAG.js是一个跟Node.js类似的东西,Node.js作为后起之秀能够迅速走红很大程度上得益于良好的扩展性,iMAG.js也是一样,iMAG.js支持原生插件,所有“不够”的能力,都可以通过原生插件的方式来实现。如果你想实现一个视频会议的插件,那么可以通过$phone.plugin(‘MyVideoMeeting')来调用你自己用原生代码实现的视频会议模块,这里MyVideoMeeting是一个在爱码哥平台发布的插件代码。当然你其实并不需要自己专门去开发一个视频会议的模块,因为这种功能模块往往是现成的,你只需要向第三方购买相应的SDK即可。
5、前面介绍了iMAG.js看起来比较“酷”的地方,但你可能还有疑虑:既然这么高大上那我用iMAG.js开发一个微信怎么样?iMAG.js努力的方向是能够完全替代原生App的开发,即便是使用原生来开发也是以插件的形式集成进来,这样模块都是可以复用的,因此用iMAG.js来开发微信类的应用是完全可行的,并且官方已经有这样的案例。因此iMAG.js提供了一种方式,能够将Javascript语言引入到移动端,并且通过插件化模块化的方式将移动领域各种原本分散的解决方案打包成一个整体呈现给开发者和企业,让企业能够通过爱码哥平台快速实现移动化。