UDN-企业互联网技术人气社区

板块导航

浏览  : 1025
回复  : 12

[原生js] 极佳的 JS 移动应用程序开发框架

[复制链接]
小辫儿的头像 楼主
  从技术上来看,iOS,Android 和 Windows Phone 上的移动应用是使用不同的程序语言开发的,iOS 应用使用 Objective-C,Android 应用使用 Java,而 Windows Phone 应用使用 .NET. 。随着 JavaScript,CSS 和 HTML 知识技能的提升,相信你也可以构建一个超赞的移动应用。在这篇博客里,我们将会介绍一些极好的 JavaScript 移动应用程序开发框架。

  PhoneGap/Cordova

  PhoneGap (来自 Apache Cordova) 是一个软件开发框架,它允许你利用现有的 Web 开发技术快速开发混合手机应用程序,如,HTML、CSS 和 JavaScript。因此,准确的说这不是一个单纯的 JavaScript 框架。现在我们先了解一下 PhoneGap。

  PhoneGap 是在 Web 应用程序代码和移动系统 API 之间进行对接的中介。下图能帮助你理解它:
1.png

  在 PhoneGap 的帮助下,你可以使用原来在 JavaScript、HTML 和 CSS 中写的相同的代码,生成移动操作系统,如 Android 和 iOS 的 API。

  除了 PhoneGap,还有一些其它的框架能帮助你把 JavaScript 文件转换为移动 API,如 Xamarin, Ionic, Corona 。

  Titanium

  Appcelerator 的 Titanium 是一个开源的应用开发平台,它允许你使用像 HTML,JavaScript 和 CSS 这样的web技术来创建原生应用(移动应用和桌面应用)。Titanium 手机 SDK 是如今被使用的最流行的跨平台手机开发解决方案之一,有超过 916109 名移动开发者和 460, 587, 474 台设备在使用 Accelerator 驱动的应用 .

  这是 Titanium 工作的架构图:
1.png

  jQuery Mobile
1.png

  jQuery Mobile 框架将“写得更少,做得更多”作为下一个版本的理念。这是最顶尖的移动端 JavaScript 框架之一,可用于创建应用或在移动设备上界面友好的网站。

  jQuery Mobile 提供了大量的用户接口来支持对现代平台的兼容,如 Android、iOS,甚至很早的 Opera Mini、诺基亚塞班等平台。你可以将 jQuery Web 应用整合在 PhoneGap 中,使之成为可交互的 iOS 或 Android 应用。

  Sencha Ext JS

  Ext JS (又叫 Sencha Touch —它们于2015年3月合并成 Ext Js 6.0) 据说是唯一能让开发人员快速创建优秀移动应用的解决方案框架,这些应用可以运行在 Android、iOS,Kindle Fire 或者其它一些平台上。它配备了大量具有创造性的、有用的组件,在各种移动应用上都可以高效运转。下面是特性一瞥

  这里是对上面四种框架的比较(注意:这里提到的 Sencha Touch 是指 Sencha Ext JS)。
4.png

  React Native

  如果你喜欢原生移动应用,主要使用的可能有两项——Xamarin 和 React Native。 Xamarin 允许你以写原生应用类似的方式编写应用,包括类似的界口设计和调用。

  React Native (来自Facebook) 则采用了另一种方式,一个完全不同的路径,进行原生应用开发。它使用 JavaScript 代码,和 CSS 类似的样式表以及与 HTML 非常相似标记用于布局。这有一张图表可以清楚地说明 React Native 的流行程度:
3.png

  因此,如果你的团队都对 React 比较熟悉,那么 React Native 会是最好的选择。

  Meteor

  Meteor 是另一个开发交互式移动应用的 JavaScript 框架。Meteor 不仅能让你用 JavaScript 开发移动应用,还能让持续控制应用。在这个特性下,你可以更新 JavaScript 代码,并通过实时代码推送功能将其立即发布给所有移动平台的用户,而这一切都可以不需要开发者支持。

  Meteor(版本: 1.0) 的另一个特点是它会通过手机内存中运行的 miniMongo 数据库在本地维护一个数据拷贝。另外,Meteor 会完成所有电话和服务器之间的数据通信及同步。(miniMongo 是 JavaScript 实现的 MongoDB API。) 这是它的架构:
2.png

  Vue.js

  Vue.js 是我在2014年2月开源的一个前端开发库,通过简洁的 API 提供高效的数据绑定和灵活的组件系统。在前端纷繁复杂的生态中,Vue.js有幸受到一定程度的关注,目前在 GitHub上已经有5000+的star。本文将从各方面对Vue.js做一个深入的介绍。

  MVVM 数据绑定

  MVVM的本质是通过数据绑定链接View和Model,让数据的变化自动映射为视图的更新。Vue.js在数据绑定的API设计上借鉴了Angular的指令机制:用户可以通过具有特殊前缀的HTML 属性来实现数据绑定,也可以使用常见的花括号模板插值,或是在表单元素上使用双向绑定:

  {{msg}}

  插值本质上也是指令,只是为了方便模板的书写。在模板的编译过程中,Vue.js会为每一处需要动态更新的DOM节点创建一个指令对象。每当一个指令对象观测的数据变化时,它便会对所绑定的目标节点执行相应的DOM操作。基于指令的数据绑定使得具体的DOM操作都被合理地封装在指令定义中,业务代码只需要涉及模板和对数据状态的操作即可,这使得应用的开发效率和可维护性都大大提升。
1.png

  与Angular不同的是,Vue.js的API里并没有繁杂的module、controller、scope、factory、service等概念,一切都是以“ViewModel 实例”为基本单位

  WeeX

  阿里天施曾经这样说过,从技术的发展趋势来看,前端技术扩展到Native端这个领域很大。

  React Native和Weex,都是想把这个领域按照自身的理解做的更好。

  我们从中可以知道Weex是前端技术扩展到Native端的一个方案,当然还有另外一个很著名的

  方案就是Facebook的React Native。
1.png

  Weex是跨平台,可扩展的动态化技术. 你能通过在Weex源码中写,

  工作流

  Weex we 文件 ————–前端(we源码)

  ↓ (转换) ——————前端(构建过程)

  JS Bundle —————–前端(JS Bundle代码)

  ↓ (部署) ——————服务器

  在服务器上的JS bundle —-服务器

  ↓ (编译) —————— 客户端(JS引擎)

  虚拟 DOM 树 ————— 客户端(Weex JS Framework)

  ↓ (渲染) —————— 客户端(渲染引擎)

  Native视图 ————— 客户端(渲染引擎)

  Mobile Angular UI

  Mobile Angular UI 是顶级移动 JavaScript 框架之一。 如果你是 Angular 忠实粉,那么这个框架很适合你。它提供了 Bootstrap 3 遗漏但必不可少的移动组件:Switches(开关), overlays(覆盖), scrollable areas(可滚动区域), sidebars(侧边栏), absolute positioned top(置顶) 和 bottom navbars(滚动时不反弹的带按钮的导航栏) 等等一些提到的功能。

  然而,随着 Angular 2 的发布,概念也发生了一些变化。 所以对于 Angular 2 的崇拜者来说,Onsen UI 2.0 可以是一个不错的选择。

  总而言之

  为移动设备选择合适的 JavaScript 框架,其标准不是看框架包含的功能特色,而是在程序开发项目中该应用框架所能提供的功能。因此,根据您的项目需要来选择合适的 JavaScript 框架,能节省不少时间和成本。

相关帖子

发表于 2017-1-7 15:07:54 | 显示全部楼层
js是要逆天的节奏js虽然不错,但是天生也是有缺陷,局限性。。。
使用道具 举报

回复

发表于 2017-1-7 15:07:55 来自手机 | 显示全部楼层
js是要逆天的节奏js虽然不错,但是天生也是有缺陷,局限性。。。
使用道具 举报

回复

发表于 2017-1-7 15:07:55 来自手机 | 显示全部楼层
OMG!介是啥东东
使用道具 举报

回复

发表于 2017-1-7 15:07:55 来自手机 | 显示全部楼层
LZ敢整点更有创意的不?兄弟们等着围观捏~
使用道具 举报

回复

发表于 2017-8-1 15:25:55 | 显示全部楼层
楼主分享得很棒棒哦~受益匪浅。小程序的开发目前市面上成熟的外包开发团队还是比较稀少的.有兴趣的朋友可以联系我们上海迅傲股份,QQ1041373364.
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部