金沙澳门官网jin5888:用WEB技术栈开发NATIVE应用,主流框架深度分析

react-native上手体验

react-native高大上的facebook开源,让人诟病的BSD
+专利许可证,虽然react已经切换到mit但是react-native仍旧是BSD
+专利许可证;这一点使大家在开发之前一定要注意的。
react-native的开发,我不想多说什么,说多了没有用,不如直接看文档,毕竟文档美如画、上手体验快如狗。社区、视频、教程也多如牛毛,就不一一列举,唯一建议的一点就是要想深度使用react-native请熟读并背诵reactJs以及redux相关文档谢谢;了解些需原生开发,或者说原生开发者们更适合使用react-native;真的原生开发用了react-native都是爱不释手;关于集成到现有应用貌似不如weex;毕竟人家weex就是指着这个技能活着的;写几个页面这种工作就交给weex吧;

缺点

  1. 需了解的知识面较广、学习成本较高
  2. 虽然使用可以使用相同的语言开发两种平台,但是依然需要了解原生平台的相关特性
  3. 无法实现列表视图的重用机制,使在列表视图拥有巨大数量时,导致内存攀升

WEEX-VUE-FRAMWORK:WEEX核心框架,主要负责将virtual dom转换成weex的native
dom api

WEEX、React-Native开发App心得

缺点

H5 标签支持较少

图中画出了 Weex SDK 的部分内容。其中 weex-vue-framework 和 Vue.js
是对等的,语法和内部机制都是一样的,只不过 Vue.js最终创建的是 DOM
元素,而 weex-vue-framework
则是向原生端发送渲染指令,最终渲染生成的是原生组件。Weex Runtime
用来对接上层前端框架并且负责和原生端之间的通信。Render Engine
就是针对各个端开发的原生渲染器,包含了 Weex
内置组件和模块的实现,可扩展。

WEEX的上手体验

真的是不用不知道,一用吓一跳,我是在windows环境下进行开发的,我可以很负责任的说,按照weex官方提供的文档在windows下直接搭建开发环境很难一次点亮;很嘲讽啊,文档也是一如既往的烂啊,好多应该比较细节的东西,文档上面往往是认为你是大神,或者说你个屌丝用个windows本还想搞weex?经过一番又一番的折磨,我终于看不下去了,这个文档光看就很晕,很想吐,还是github上找几个案例直接试一下,案例还是很好的,多数的都是使用weex构建一个新的跨平台应用,启用大面积使用了vue的语法,开发起来确实也是很简单;看完demo之后,回过头来再看weex文档,好像觉得文档看着还不错,虽然简单了点儿,好像该说的也都说了,没毛病;于是可以自己动手试一下了,在这里weex面向的主要是广大的web前端开发者,精简的使用方式,路由的配置,weexpack的使用调试方式页更适合web开发者们使用;weex基本上提供了两种使用方式,一种是从零开始开发一个跨平台的app,另外一项中是集成到现有的app当中,原理基本是weex经过编译会生成两个bundle.js一个是供web端使用的,另外一个是提供给安卓、ios使用的;毕竟是号称,write
once, run everywhere;weex引入了vue runtime
js,先不说web端的实现这个应该去直接看vue会更好,直接说native端的实现,js作为连接原生控件与视图层的纽带,代替了以往使用java,oc,swift直接调用原生控件,这样生成的ui层依旧是原生的,和html毫无关系的,至于哪些div,image只不过是名字和html标签一样的组件而已,也没有了dom对象的存在,因为实际的开发环境不是浏览器而是基于原生,所以jquery以及它的一些插件是用不了的,大家一定要明确这一点,无论weex还是react-native的实际开发的对象都不是浏览器了,所以,我们不要把平时在浏览器是开发用到的东西都带进来,所以浏览器中那些标签在weex或者react-native中也就没有任何的意义;明确这一点之后,我们就可以进行开发了,遇到的一些坑往这个方向靠基本也就容易解决了。吐槽一下weex的错误提示真的是不行;

金沙澳门官网jin5888:用WEB技术栈开发NATIVE应用,主流框架深度分析。综合分析

从跨平台,性能,发布方式,学习成本,热度进行综合评估

名称 性能 发布方式 学习成本 热度 框架
React Native Native的渲染 效率高 发布方式 文档丰富 学习成本高 需要了解原生平台的相关特性 Facebook技术支持以及其知名度 重量级
Ionic Native的渲染 性能高 通过PhoneGap发布 了解AngularJS 有强大的社区 轻量级
weex Native的渲染 性能高 weexpack 打包 了解 VueJS 阿里技术支持 轻量级
Cordova Webkit做渲染 性能低 发布方式 热度低 重量级

金沙澳门官网jin5888:用WEB技术栈开发NATIVE应用,主流框架深度分析。参考链接1:Hybrid-Native+H5,主流框架深度分析
金沙澳门官网jin5888:用WEB技术栈开发NATIVE应用,主流框架深度分析。金沙澳门官网jin5888:用WEB技术栈开发NATIVE应用,主流框架深度分析。参考链接2: 基于React
Native的移动平台研发实践分享
参考链接3:移动跨平台解决方案

这是前端框架的主要架构:

起因

最近公司准备使用weex或者react-native进行跨平台开发,并不是要做新的app而是准备用这种方式代替原来webview+h5内嵌这种方式,这种hybrid的方式,存在于上古年代了,性能堪忧,还要适配安卓端复杂设备种类,各主流电商的webview,虽然在前一段时间,安卓统一使用了传说微信、qq都在使用x5-webview,但是效果并不是很明显,腾讯浏览服务是要做到统一安卓端的webview,但是腾讯的x5的条件是,改安卓手机已经安装了腾讯x5浏览器,换句话说就是,你的安卓手机上面,至少要有微信、qq、qq浏览器等之一的拥有腾讯浏览内核的产品,虽说覆盖面很广。但是,考虑到我们公司的用户大部分年龄比较大,可能相比较而言覆盖范围就不那么广,收到投诉的也会比较多,毕竟我们跟他们的沟通成本也比较高;
直接集成腾讯x5内核的话也存诸多问题;所以还是需要一条跨平台的之路;

NativeScript

Native script是一个开源项目,用 JavaScript 语言编写 app
,它和Weex有点类似,只需要编写一次,然后它可以针对不同的操作系统(包括
Android,iOS 和 Windows
Phone)产生对应的可执行代码,打包后,应用是按原生程序的方式运行的,并没有打开和运行浏览器,框架是将js脚本翻译成原生应用的api来执行的。

摘要:
WEEX依旧采取传统的web开发技术栈进行开发,同时app在终端的运行体验不输native
app。其同时解决了开发效率、发版速度以及用户体验三个核心问题。那么WEEX是如何实现的?目前WEEX已经完全开源,并捐给Apache基金会,我们可以通过分析其源码来一探究竟

总结

如果你现在想要从头开发一款app,那么我可以很负责任的向你推荐react-native,很好用,文档很全,你要填的坑,别人基本都给你准备好土了;如果你是想我们公司的需求一样,只是想干掉hybrid,那么weex绝对是不二之选,首先,weex够简单,web开发者就可以先胜任;其次,不需要安装复杂的环境,运行环境简洁、调试工具也还好,容易做降级处理,特别适合开发单个页面;

weex / react native / ionic 技术选型

首先来看下前端开发框架Vue.js,Vue.js目前与React 、
Angular构成了三大最流行的前端开发框架,Vue.js具有组件化、virtual
dom以及MVVM三大特性,还学习React的Redux,引入了状态管理模块Vuex。同时相比起React主要基于JSX,Vue.js的开发模式更加清晰,简单,上手速度更快。.vue
文件通常可以分为三部分: 、 和 , 是必须要有的,其他可选。其中
中的代码会保留或者被转换成 ES5 的语法; 中的 CSS 在 Weex
平台上会被转换成 JSON 格式的样式声明,放到组件的定义中去;
会被编译生成组件定义中 render 函数,可以理解为 render
函数的语法糖。下文是一个简单的.vue文件:

分析

纵观现在主流开源的跨平台之路,有两条:一条是由facebook开源的基于reactJs的react-native;另外一条是由alibaba开源的可以说是基于VueJs的Vue-native,不不不,口误,是WEEX;那么我们分析一下应该如何选型呢,我刚开始也是看了无数的评论,怎么说的都有;一般分为两类,一类是切身体验过从搭建到开过程的这类评论会比较有营养,不过会看不太懂;另外一类,就是无脑喷阿里开源,我感觉这类评论代入感也比较强,各种举例、论证,有理有据而且通常恢复数量被点赞数量也比较高,说什么,“kpi产物”、“阿里自己都不用啊”、“文档仨月都不更新一次啊”、“刚出来赶紧找的靠谱的接盘”、“手淘、天猫都是用的rn啊”;我不敢想,可是仔细一想,还真是这么回事儿;
金沙澳门官网jin5888:用WEB技术栈开发NATIVE应用,主流框架深度分析。总之各大论坛贴吧逛完一遍,你绝对不想用weex了;我这么一看不行啊,毕竟要看看两种方法那种更适合,所以,我跟大家想的一样,首先选了WEEX;

优点

  1. 相对于基于Web开发的hybrid框架,渲染效率、交互流畅度有明显提高
  2. 使用相同的语言开发便能同时开发iOS、Android

金沙澳门官网jin5888:用WEB技术栈开发NATIVE应用,主流框架深度分析。WEEX-RUNTIME:负责与native渲染引擎对接,将native dom
api转换成对应平台(Android、iOS)的platform
api,然后传递给native渲染引擎,由后者负责渲染工作。

优点

1.一次编写,跨平台运行
2.英文文档丰富,中文文档较少
3.社区成熟,活跃度高

WEEX-VUE-LOADER:前端编译器,将vue文件编译成es5代码

导语:
近年来,随着移动端app的广泛使用,对于降低app的开发成本,热更新等诉求日益增多。更多的APP采用了Native结合H5的混合开发模式,因此也衍生了大量的Hybrid框架。这其中有对载入H5做通信和性能优化的框架,如Phonegap等,也有使用JS脚本生成本地代码的框架,如Facdbook推出的react
native这一类的框架。

完成编译后,输出的bundle.js即可被JS执行引擎所识别,可以执行其逻辑了。那么接下来就来看下bundle.js的执行过程。

Cordova

中文网站
GitHub

使用Cordova开发iOS App —
环境搭建
使用Cordova开发iOS App —
开发iOS插件
使用Cordova开发iOS App —
打包插件及JS脚本
cordova热更新插件的使用

Cordova是由phonegap演变而来,在接触的多家公司中,一开始大多数采用phonegap的解决方案,这种
前身为phonegap,历史比较久远,有很多公司在一开始接触Hybrid用的都是这种方式,早起,让不会Native的人,可以快速的用H5和js开发一个App,早起,iOS和Android都是使用的webview,现在,iOS和安卓,都有用jsCore,
大大提高了性能。

FRONTEND
FRAMEWORK/DSL:这是WEEX的开发框架,目前WEEX主要是使用Vue.js进行开发

缺点

1.有一定的学习门槛
2.没有完善的技术支持

然而由于目标执行环境不同(浏览器和 Weex 容器),在渲染真实 UI
的时候调用的接口也不同。

Ionic

中文网站
GitHub
6456提交 261贡献者

Mac下安装ionic和cordova,并生成iOS项目
Ionic2实战-iOS版打包
ionic热更新
cordova Ionic
和cordova的区别是什么
Ionic提供了一个免费且开源的移动优化HTML,CSS和JS组件库,来构建高交互性的应用。它可以用框架中的CSS
实现有 native 风格的设计,不过相对于使用完整的 Ionic,更建议搭配
AngularJS 一起开发,从而创建完美的应用。

它有如下特点:
1 . 性能高,运行速度快,操作最少的DOM,非 jQuery且和硬件加速过渡;
2 . 设计简单,并且实用,它为当前移动设备呈现了完美的设计;
3 .
以原生SDK为蓝本,便于移动端开发人员的理解,完成时通过PhoneGap发布,达到一次开发,处处使用的效果;
4 . 核心架构是为开发专业应用创建,框架轻量级;
5
.一个命令就可以创建,构建,测试,部署你的应用程序在任何平台上,只需要npm
install -g ionic 就可以创建您的应用。
6 . 代码标准,后台维护人员专注,具有强大的社区。

缺点
在了解Ionic的同时,还需要了解AngularJS,为开发增加了一定的复杂以及难度;

上述过程不是分阶段一个一个执行的,而是可以实现“流式”渲染的,有可能第一个

React Native

中文网站
GitHub12818
提交 1608 贡献

ReactNative
快速入门笔记

正如项目的名称表露的那样,React
Native的目的是构建真正Native的应用。不同于传统Hybrid框架,React
Native完全脱离WebView进行开发,因为它挣脱了复杂的DOM,高效率渲染、流畅交互使用户体验得到非常多的提升。

它能使用够使用同样的语言同时支持iOS、Android平台,减少了我们在跨平台开发时对Native语言的不熟悉而产生的障碍。

使用React
Native需要了解HTML、CSS、JavaScript与同为Facebook开源的React框架等相关知识且不易掌握;能看出React
Native对于新手来说不太友善,不过React
Native背后有着强大的Facebook技术团队的支持以及其知名度,吸引了相当多的开发人员了解并使用它,使我们在成长的路上不会那么的孤单、无力。

WEEX框架主要分为两部分:

优点

轻量,分模块加载,Write Once Run Everywhere,

而这个JS Framework就是我们今天介绍的重点。

Weex

iOS 开发者的 Weex
伪最佳实践指北
GitHub
10204 提交 140 贡献者
weex sdk
原理详解

如何用weexpack创建weex项目并构建app
网易严选 App 感受 Weex
开发
[WEEX系列 我的第一个WEEX DEMO]
(https://segmentfault.com/a/1190000012061141)
Weex从入门到超神
原有native工程集成weex sdk 教程和demo for
iOS
Vue.js
目录结构
Vue 登陆组件开发
Vue官网

最近较火的移动端框架 除了Reactnative,还有Weex,Weex官方的口号是Write
once, run everywhere,
Weex解决了的最大痛点就是使用者只要编写一次代码,就可以跨平台运行。它能帮助开发者解决跨平台的适配问题,同时,又拥有着Native原生App的性能问题。Weex目前的大优势是借助阿里的大平台,快速的迭代更新,有大批的用户帮助其完善Hybrid框架,目前已较为成熟,文档丰富,接入方便快捷。

在上层前端框架调用了 Weex 平台提供的 Native DOM API 之后,Weex Runtime
会构建一个用于渲染的节点树,并将操作转换成渲染指令发送给客户端。

优点:

1.可以使用原生的js、html、css来构建一个应用
2.支持很多的插件来去调原生的API的,这种插件的库和它的生态是非常完善的,也就是说一个前端开发者不需要懂原生就可以做
相对来说比较稳定;

的原生组件还没渲染好,
的渲染指令又发过来了。当一个页面特别大时,能看到一块一块的内容逐渐渲染出来的过程。

缺点:

1.性能瓶颈就是在于webview的性能,如果像Android
4.1以下的webview它的性能并不是很好,在Cordova打包出来的APP性能就会有问题。
这个框架是一个比较重的框架,做Hybrid开发的话,集成在原生的app里面,使得整个APP比较重;

于是后来业界开始探索依旧利用web技术栈开发出媲美原生体验app的方案,于是以WEEX为代表云原生开发框架开始出现。所谓云原生(Cloud
Native)指可以通过云端快速发布(与远程web应用发布流程类似),同时还可以达到媲美原生App体验的方案。WEEX依旧采取传统的web开发技术栈进行开发,同时app在终端的运行体验不输native
app。其同时解决了开发效率、发版速度以及用户体验三个核心问题。那么WEEX是如何实现的?目前WEEX已经完全开源,并捐给Apache基金会,我们可以通过分析其源码来一探究竟。

首先来看下初始化过程。

金沙澳门官网jin5888 1

金沙澳门官网jin5888 2金沙澳门官网jin5888 3

通过本文以及上一篇:WEEX NATIVE
SDK原理详解,总算是将weex的大致原理介绍清楚了,当然还有很多实现细节文中并未展开,有兴趣的朋友可以留言大家一起讨论下,另外文章中有错误的地方也请大家指正!

相关文章