Hybrid APP开发者一定不要错过的框架和工具

标签: 帝都浮生录 | 发表时间:2014-02-15 15:12 | 作者:easy
出处:http://ftqq.com

最近开始给 快简历的移动版本做技术选型,发现了很多好玩的东西,写出来给大家分享下。

ionicFramework

我是hybrid app的忠实粉丝和大力倡导者,从 新浪移动云开始就不断的寻找能帮助Web程序员开发出漂亮又好用的UI层框架。在历经了jqmobile、sencha touch等框架后,一直没能找到一个真正符合我的想法的框架:它应该为hybrid app设计、组件化结构、UI简洁而优美。

很多同学不明白为Hybrid app设计跟为Mobile web设计有什么不同,我只说最典型的一点:Hybrid App的资源都在本地的,没有网络读取的消耗,所以最理想的方式是一次性载入多个界面,应用直接在多个界面之间切换,而不是为了节省流量通过ajax按需载入。后者正是jqm等框架的做法。sencha touch在概念层上我接受不了,它让我感觉自己不是在写界面,而是在做算法作业。关于这些老框架的吐槽, 以前写过,就不再多说。接下来说说最近的新发现。

转眼快两年,很多更适合hybrid app的框架开始出现。这次选型我其实先选了  chocolatechip-ui

Screen Shot 2014-02-15 at 14.44.08

它和我之前写过的lazymobile理念很类似,采用div来作为App界面,界面之间的切换其实就是浏览器在div上的滑动。界面采用了ios7的平面设计风格,很讨喜。我看到就心动了,读完基本代码实现后就找了个小需求来试用。那是一个tab+side menu的app,然后我发现chocolate-chip的组件的封装程度不够,多个组件之间重复嵌套时会出现各种互相影响。这显然违背了正交性原则。于是我依依不舍的和它分了手。

然后我遇到了 ionicframework。ionic采用 angularjs作为其基础,这就在封装性上有了质的提升。你可以使用类似<weibo>的标签来描述一条微博。它也同样采用angualar-ui里边的states来切换界面,从而保证了切换过程的平滑。另外就是它还直接整合了Cordova(就是phonegap了)的命令行工具,写完后直接一个命令就可以编译app了。

Screen Shot 2014-02-15 at 14.49.49

ionic的学习成本比较高。因为Angularjs是一个真正的MVC框架,它的M和V双向绑定。我春节花了点时间学了一下,能写一些简单应用了。学习的时候有时候还是思维转换不过来,比如我曾苦苦思索form表单要怎么提交,提交到哪里去。但实际上form表单的控件本来就是绑定到数据对象的,只要调用数据对象的save方法就好了。

但整体来讲我还是很推荐这个框架的,而且我也认为AngularJS的做法代表了未来,学习一些新东西有时候会让人生更多乐趣。

Ripple Emulator

在编写代码的时候,我一般用node的http-server直接在代码目录起一个web服务,用浏览器调试。但是代码里边那些phonegap的扩展功能往往会导致页面报错。之前为了解决这个问题,我们做了云窗调试器,但现在因为某些原因,基本不更新了。另外云窗调试器需要将代码传到SAE上后才能调试,也没有本地来得便捷。

这里要推荐给大家的是一个Chrome扩展, Ripple Emulator

Screen Shot 2014-02-15 at 15.06.55

用了这个扩展,你就可以直接在Chrome上调试Colrdova的功能了。能选择模拟器来测试屏幕大小,还能选择模拟器的Cordova版本。五星推荐,用了你会回来点赞的。

还有一些Angular相关的工具我也在用,这次就先不整理了。以后有空再慢慢整理吧,请关注我的微博获取最新的消息。

 

相关 [hybrid app 开发] 推荐:

【转载】Hybrid App:借助HTML5、JavaScript和CSS3开发

- - HTML5研究小组
早在2011年10月9日Sam Gentile就在在开发Hybrid App,彼时他就写过这方面的一篇题目是《视口元标签和使用HTML5/CSS3/jQuery来构建移动界面》的博文,可以说Sam Gentile最早研究Hybrid App的开发者. 【51CTO独家译文】本文为开发者Sam Gentile的一篇博文《Hybrid App:借助HTML5、JavaScript和CSS3开发》.

Hybrid APP开发者一定不要错过的框架和工具

- - 方糖气球
最近开始给 快简历的移动版本做技术选型,发现了很多好玩的东西,写出来给大家分享下. 我是hybrid app的忠实粉丝和大力倡导者,从 新浪移动云开始就不断的寻找能帮助Web程序员开发出漂亮又好用的UI层框架. 在历经了jqmobile、sencha touch等框架后,一直没能找到一个真正符合我的想法的框架:它应该为hybrid app设计、组件化结构、UI简洁而优美.

Hybrid APP架构设计思路

- - SegmentFault 最新的文章
关于Hybrid模式开发app的好处,网络上已有很多文章阐述了,这里不展开. 本文将从以下几个方面阐述Hybrid app架构设计的一些经验和思考. 原文及讨论请到 github issue. 作为一种跨语言开发模式,通讯层是Hybrid架构首先应该考虑和设计的,往后所有的逻辑都是基于通讯层展开.

论Web App、Hybrid App、Native App设计差异

- - 百度MUX
目前主流应用程序大体分为三类:Web App、Hybrid App、 Native App. 一、Web App、Hybrid App、Native App 纵向对比. 首先,我们来看看什么是 Web App、Hybrid App、 Native App. Web App 指采用Html5语言写出的App,不需要下载安装.

iOS App开发那些事

- - IT江湖
自从做Team Leader之后,身上权责发生了变化,于是让我烦恼的不再是具体某个功能,某个界面的实现,而是如何在现有代码的基础上做渐进式的改进,创造出比较合适规范和框架,使得组内成员更快更好地完成任务. 一年下来,颇有点想法,于是啰嗦几句关于iOS App开发的那些事. 首先明确一点,合适的人是指纯技术团队的建设.

移动端Hybrid应用与响应式

- - SegmentFault 最新的文章
前端是一个非常庞大和复杂的领域. 如果说多年前的前端只是需要学习几个 HTML 标签,看到别的网站用了狂拽酷炫的特效就 copy 下来,稍微懂点 jQuery 做日常使用,再了解几个 Prototype 和 MooTools(貌似都不再维护了)等高冷脱俗的库做装X用就能显得很“专家”了. 那么现在要还是持这样的想法,就不适合搞前端.

一个 Hybrid SDK 设计与实现

- - SegmentFault 最新的文章
随着移动浪潮的兴起,各种 App 层出不穷,极速发展的业务拓展提升了团队对开发效率的要求,这个时候纯粹使用 Native 开发技术成本难免会更高一点. 而 H5 的低成本、高效率、跨平台等特性马上被利用起来了,形成一种新的开发模式: Hybrid App. 作为一种混合开发的模式,Hybrid App 底层依赖于 Native 提供的容器(Webview),上层使用各种前端技术完成业务开发(现在三足鼎立的 Vue、React、Angular),底层透明化、上层多样化.

转转Hybrid-SDK重构和实践

- - 掘金 前端
转转的移动端开发体系主要是基于Hybrid方案,但长久以来Webview容器和SDK管理等存在标准不统一、更新不及时的问题. 随着转转/找靓机/采货侠等多环境开发场景越来越多,适配不同场景极大的影响了业务迭代效率. 所有我们决定重新规划SDK的建设. JSBridge 的双向通信原理. JSBridge 是一种 JS 实现的 Bridge,连接着桥两端的 Native 和 H5.

《APP开发》APP规范实例-详细的UI设计方法

- - 人人都是产品经理
对了一个APP开发初手来说,可能心里有很多的疑惑:屏幕设计为多宽,宽度是不是应该设置为百分比;按钮大小多大,怎么排列,文字字体用多大的?什么字体显示好看?图标多大,怎么用色?界面怎么布局?等等很多的问题,这篇文章就是专门为你们准备的. 互联网从业者必备微信公众号:woshipm,如果你已经关注了,证明你已经很牛逼了.

App Inventor交给MIT继续开发

- lin - Solidot
Google将在年底关闭教育工具Android App Inventor,让外界颇感失望. 但事态发展旋即又峰回路转,MIT接过了Google的烫手山芋. MIT Media Lab宣布成立MIT Center for Mobile Learning,专注于移动领域的教育革新和创新学习. Google Education捐助了初始资金,新研究中心主任之一是领导Android App Inventor开发的MIT计算机科学Hal Abelson教授,中心的第一个项目就是App Inventor for Android.