2017移动Web APP开发指南

进入2017年,移动开发中采用前端Web技术来取代原生App进行开发越来越风靡,这些得益于JS框架的发展,框架设计演变也更加偏向于移动端,在库体积、效果、性能都比原来版本有长足的进展。本文是对2017年移动WebApp开发库的总结,方便各位读者进行技术选型,同时提供示例来方便学习。

JS框架

2017年国内移动Web APP开发中Vue可谓一枝独秀,可以看到很多公司基于Vue 2.0制作了组件库并完成App的制作。Vue在入门学习曲线、库体积以及使用设计上相比React或Angular2都有优势,性能上也完全没有问题。如果你的移动Web APP项目功能不太复杂,团队参与人数不多,那么使用Vue相关组件和库来进行技术栈构建是2017年最佳的选择。

React在移动Web开发中推出了React Native解决方案,可惜这个方案因为原生编译的难度,目前仍然没有完全适应生产要求。在移动端直接使用React库需要配合其他UI组件库,例如Framework7。如果是单页应用场景,React还是有性能上的优势,但是工程维护比较困难,对项目成员对react熟悉程度有一定要求。

Angular2新版更替后在性能上有比较大的提升,移动Web开发方面也有Ionic这种老牌框架,上手还是颇为简单的,唯一需要适应的是新版的Angular语法,对老版用户可能不太友好,但如果是新人入门还是很推荐的。

也有使用其他JS框架来构建移动WebAPP的,比如使用Backbone或纯粹使用Jquery,仍然是想要性能方面匹敌原生应用的不二法门,但是相较之下仍然对工程维护要求较高。特别是2017年三大JS框架在性能和体积上都有不小的提升,配合各个互联网公司不断涌现的开源UI库,应付日常移动WebAPP的场景应该是绰绰有余了。

组件库ui-kit

移动端UI组件库大都比较类似,特色在于某些组件的特殊交互,比如日期选择、联动地区选择,正所谓:“移动端组件库写的好不好,就看 Picker 组件写的好不好”。下面是目前国内比较火的组件库,推荐星级1~5星,3星以下不推荐使用。

Framework7

实现统一IOS样式或Material Design样式,适合配合React或Vue,5星推荐,项目地址:http://framework7.taobao.org/

WeUI

微信官方网页样式,堪称移动端的Bootstrap,适合简单的App应用,功能较弱,3星推荐,项目地址:Tencent/weuiTencent/weui.js

  • VueX  配合Vue库版本且扩展组件功能,新建项目也很方便,5星推荐,如果使用Vue方案请直接使用这个库,项目地址:https://vux.li/
  • react-weui 官方配合React库版本,3星推荐, 项目地址:weui/react-weui
  • jquery-weui  扩展版本,想法思路很好但实现一般,3星推荐,项目地址:lihongxun945/jquery-weui
  • wepayui  微信官方支付相关扩展版本,3星推荐,项目地址:wepayui/wepayui

Ant Design Mobile

支付宝出品,基于react方案,Picker组件交互设计非常好,5星推荐,项目地址:https://github.com/ant-design/ant-design-mobile

Ionic

新版基于Angular5框架,同时支持Native开发,功能全面,Angular方案的唯一选择,5星推荐,项目地址:http://ionicframework.com/docs/

Vue

各个互联网公司基于vue开源了一系列组件库

omijs

腾讯AlloyTeam出品,react类似方案,2星推荐,项目地址:http://omijs.org

Frozen UI

qq会员前端出品,不够活跃,2星推荐,项目地址: http://frozenui.github.io/

wex5

国人出品,实现了不少模仿样式,2星推荐,项目地址: http://www.wex5.com/downloads/

示例

微信页面开发、html5页面、webapp、pwa

  1. 饿了么,vue开发pwa https://h5.ele.me/msite/
  2. 铁友订票,http://m.tieyou.com/#index

 

附录:开发相关工具

NPM, Grunt, Gulp, Bower, Webpack, Browserify, Yeoman, Brunch……前端不断蹦出的名词让你一时间感到手足无措,好像根本学不完。其实工具的两大核心功能,就是“安装vs做事”。

安装类的工具(包管理):npm、Bower、yarn,目前npm比较流行,yarn也在快速抢夺地盘,bower逐渐退出舞台。

做事类的工具(自动化打包):Grunt、Require.js、Gulp、Webpack,目前流行用npm的简单脚本功能进行调用,使用nodejs功能配合Webpack进行自动化打包操作,Grunt已经死,Gulp逐渐退出舞台。

提交看法

抢沙发

还没有评论,你可以来抢沙发