精华内容
下载资源
问答
  • Weex React Native的比较

    万次阅读 2017-02-07 16:56:02
    Weex React Native的比较基本概念weex 阿里巴巴公司与2016年6月开源的一种用于构建移动跨平台的UI框架 基于JS开发框架 weex基于Vue.js React Native Facebook在2015年3月在F8开发者大会上开源的跨平台...

    Weex 和 React Native的比较


    基本概念

    weex

    • 阿里巴巴公司与2016年6月开源的一种用于构建移动跨平台的UI框架
    • 基于JS开发框架
    • weex基于Vue.js

    React Native

    • Facebook在2015年3月在F8开发者大会上开源的跨平台UI框架
    • 基于JS开发框架
    • 基于React.js

    Vue和React的比较


    Weex和React Native的异同

    相同点:

    • CSS属性通用
    • 都使用JS开发
    • 都可以直接在Chrome中调试JS代码
    • 需要Node.js基础环境

    不同点:

    • JS框架
      Weex基于Vue.js , 以下是HelloWorld程序

      <template>
        <div class="container">
          <div class="cell">
            <image class="thumb" src="http://t.cn/RGE3AJt"></image>
            <text class="title">JavaScript</text>
          </div>
        </div>
      </template>
      <style>
        .cell { margin-top: 10; margin-left: 10; flex-direction: row; }
        .thumb { width: 200; height: 200; }
        .title { text-align: center; flex: 1; color: grey; font-size: 50; }
      </style>

      React Native基于React.js,以下是HelloWorld程序

      import React, { Component } from 'react';
      import { AppRegistry, Text } from 'react-native';
      
      class HelloWorldApp extends Component {
        render() {
          return (
            <Text>Hello world!</Text>
          );
        }
      }
      
      AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);
    • 社区支持
      Weex开源较晚,网上相关资料还比较少,社区规模较小,网站资源还在建设中;
      React Native社区则比较活跃,可以参考的项目和资料也比较丰富;

    • 开发效率
      Weex工程开发套件weexpack
      Weex在线编码Weex Playground
      ReactNative开发工具Nuclide
      sublime text
      webstorm
      ReactNative在线编码 ReactNative Playground,对于国内用户来说,可能访问很困难。

    Weex简单程序入门

    环境搭建

    1. 安装Node.js,建议下载msi格式,它会自动配置环境变量,而exe需要手动配置
    2. 安装weex-toolkit,命令行输入npm install -g weex-toolkit
    3. 检查weex是否安装成功,命令行输入weex --version

    第一个HelloWorld程序

    在任意目录下新建一个.we文件,例如我的是E:\weex_workspace\tech_list.we
    文件内容为官方示例:

    <template>
      <div class="container" >
        <div class="cell">
           <image class="thumb" src="http://t.cn/RGE3AJt"></image>  
           <text class="title">JavaScript</text>
        </div>
      </div>
    </template>
    
    <style>
      .cell{margin-top:10 ; margin-left:10 ; flex-direction: row; }
      .thumb {width: 200; height: 200; }
      .title {text-align: center ; flex: 1; color: grey; font-size: 50; }  
    </style>
    

    编辑后保存,在命令窗口下执行weex E:\weex_workspace\tech_list.we
    weex会启动浏览器并且展示出网页,如图所示:

    注意图中红色标注部分,不难看出,weex启动了一个服务,我的目录是C:\Users\wangning\weex_tmp\h5_render,顺着这个目录打开,我们可以看到这样一组文件

    没错,第二个红色标注部分的tech_list.js就是它,打开之后我们可以看到

    红色圈圈的地方就是判断module对象是否有缓存,如果有,则退出当前function,起到了缓存页面的作用。
    重点是最后两个function


    可以看到1是我们之前tech_list.we中的这段代码

    <template>
      <div class="container" >
        <div class="cell">
           <image class="thumb" src="http://t.cn/RGE3AJt"></image>  
           <text class="title">JavaScript</text>
        </div>
      </div>
    </template>

    <template>标签之间的布局元素进行的的解析,按照一定规则,转换成了json数据并赋值给module.exports

    以此类推,2中对应的是tech_list.we中的

    <style>
      .cell{margin-top:10 ; margin-left:10 ; flex-direction: row; }
      .thumb {width: 200; height: 200; }
      .title {text-align: center ; flex: 1; color: grey; font-size: 50; }  
    </style>

    <style>标签之间将样式按照一定规则转换成了json数据并赋值给module.exports
    只要修改了tech_list.we,与之对应的tech_list.js就会发生相应的变化,
    例如,我们向tech_list.we中多添加几个div元素

    <template>
      <div class="container">
        <div class="cell">
            <image class="thumb" src="http://t.cn/RGE3AJt"></image>
            <text class="title">JavaScript</text>
        </div>
        <div class="cell">
            <image class="thumb" src="http://t.cn/RGE3uo9"></image>
            <text class="title">Java</text>
        </div>
        <div class="cell">
            <image class="thumb" src="http://t.cn/RGE31hq"></image>
            <text class="title">Objective C</text>
        </div>
      </div>
    </template>
    
    <style>
      .cell{ margin-top:10 ; margin-left:10 ; flex-direction: row; }
      .thumb { width: 200; height: 200; }
      .title { text-align: center ; flex: 1; color: grey; font-size: 50; }
    </style>
    

    刷新网页,tech_list.js发生了变化,用文件比较器查看,变为内容如下:

    可以看到,只要<template>标签之间有布局元素变化,weex就会自动修改与之对应的js文件,并将当前布局元素以json数据的形式呈现在与.we对应的.js文件中.
    以此类推,<style><script>标签同理,不再敖述。

    在手机上运行

    接下来,我们将这段代码集成到安卓开发环境
    将已经生成的js文件复制到AndroidStudio的assets目录下

    在模拟器上运行,我们看到

    发现没有显示图片,因为我们没有实现IWXImgLoaderAdaptersetImage方法
    我们使用imageloader加载网络图片,代码如下:

    public class ImageAdapter implements IWXImgLoaderAdapter {
        private static final String TAG = "ImageAdapter";
        @Override
        public void setImage(final String url, final ImageView view, WXImageQuality quality, WXImageStrategy strategy) {
            //实现你自己的图片下载,否则图片无法显示。
            Log.d(TAG, "setImage: url"+url);
            ImageLoader.getInstance().displayImage(url, view, new DisplayImageOptions.Builder()
                    .cacheInMemory(Boolean.TRUE)
                    .imageScaleType(ImageScaleType.EXACTLY)
                    .bitmapConfig(Bitmap.Config.RGB_565).build());
        }
    }

    再次运行,图片就出来了

    Weex中的变量定义和方法定义

    以这段代码为例

    <template>
      <div style="width: {{w}}; height: {{h}}; background-color: red;" onclick="update"></div>
    </template>
    <script>
      module.exports = {
        data: function () {
          return {w: 750, h: 200}
        },
        methods: {
          update: function (e) {
            this.h += 200
          }
        }
      }
    </script>
    

    data中定义数据,类似于成员变量,methods定义方法,可以把module.exports看做一个类, update方法对成员变量h进行了自增200的运算,{{h}}是Vue.js的数据绑定语法,只要对h的值进行了变更,则会立即生效。

    我们将这段代码在Playground中运行,如下图

    手机顶部有一块红色区域,就是我们<template>标签中的<div>,这个<div>有一个点击事件,onclick="update"点击后会执行update方法,将变量h自增200,由于变量h是在<div>的height的值,因此点击后高度会自增200,若是之前安装了Playground手机程序,可以打开Playound App扫面右侧二维码,在手机上查看实际效果


    ReactNative简单程序入门

    环境搭建

    1. 安装Node.js,建议下载msi格式,它会自动配置环境变量,而exe需要手动配置
    2. 安装Python2
    3. 安装 Yarn、React Native的命令行工具(react-native-cli)
      npm install -g yarn react-native-cli
    4. 安装Android Studio2.0及以上版本

    第一个HelloWorld程序

    命令窗口下执行:

    react-native init AwesomeProject
    cd AwesomeProject
    react-native run-android

    Windows用户请注意,请不要在命令行默认的System32目录中init项目!会有各种权限限制导致不能运行!

    手动运行Packager

    有个常见的问题是在你运行react-native run-android命令后,Packager可能不会自动运行。此时你可以手动启动它:

    cd AwesomeProject
    react-native start

    如果你碰到了ERROR Watcher took too long to load的报错,请尝试将这个文件中的MAX_WAIT_TIME值改得更大一些 (文件在node_modules/react-native/目录下)。

    打开AwesomeProject工程下的index.android.js文件,我们可以看到如下内容:

    我们可以看到<View>标签中包含了三个<Text>标签,分别展示了三条文本内容,需要注意的是,每一个工程必须要有一个render() {}方法,他负责渲染页面,只返回一个直接子节点

    • 正确写法:

      render() {
          return (
            <View style={styles.container}>
              <Text style={styles.welcome}>
                Welcome to React Native!
              </Text>
            </View>
          );
        }
    • 错误写法:

      render() {
          return (
            <View style={styles.container}>
              <Text style={styles.welcome}>
                Welcome to React Native!
              </Text>
            </View>
            <View style={styles.container}>
              <Text style={styles.welcome}>
                Welcome to React Native!
              </Text>
            </View>
          );
        }

    在手机上运行

    首先,我们需要用AndroidStudio打开AwesomeProject工程下的android工程
    E:\reactnative_workspace\AwesomeProject\android
    建议先将E:\reactnative_workspace\AwesomeProject\android\gradle\wrapper\gradle-wrapper.properties替换成已有的gradle版本,避免不必要的下载。
    项目构建成功后,请确保packager服务已经打开,若未打开,请cd到工程目录下,执行react-native start,

    如下图所示

    表示packager服务已经启动成功。

    我们运行AwesomeProject,如下图所示

    index.android.js代码中的三个<Text>文本内容就展示出来了

    现在你已经成功运行了项目,我们可以开始尝试动手改一改了:

    • 使用你喜欢的文本编辑器打开index.android.js并随便改上几行
    • 按两下R键,或是用Menu键(通常是F2,在Genymotion模拟器中是⌘+M)打开开发者菜单,然后选择 Reload JS 就可以看到你的最新修改。
    • 在终端下运行adb logcat *:S ReactNative:V ReactNativeJS:V可以看到你的应用的日志。

    React Native内置了对ES2015标准的支持,你可以放心使用而无需担心兼容性问题。上面的示例代码中的import、from、class、extends、以及() =>箭头函数等新语法都是ES2015中的特性。如果你不熟悉ES2015的话,可以看看阮一峰老师的书,还有论坛的这篇总结


    总结:作为一个Android程序员到底该选择weex还是ReactNative?

    以上我们分别完成了Weex和ReactNative简单程序的编写,若以现在为时间点,做项目要选择其一,究竟两者该如何选择?

    • 从学习资源上看
      ReactNative更丰富

      Weex相对而言则资料太少

    • 从成功案例上看
      ReactNative有很多成功案例

      而Weex没有

    • 从UI组件上看
      ReactNative更丰富

      Weex相对较少

    • 从学习成本上看
      ReactNative的学习路线:javascript,React.js,ES6,ReactNative
      Weex的学习路线:javascript,Vue.js,ES6,Weex

    最终对比图如下

    对比项WeexReactNative
    学习资源
    从成功案例
    UI组件相对较少较多
    学习成本一般一般
    在线编码支持支持
    展开全文
  • 传统的原生Android、iOS开发面临着诸多难以解决的问题,例如开发周期长、迭代...从早期的PhoneGap、Inoic等Hybrid混合技术,到现在耳熟能详的React NativeWEEX和Flutter等跨平台技术,借助这些优秀的跨平台开发框...

    传统的原生Android、iOS开发面临着诸多难以解决的问题,例如开发周期长、迭代缓慢等,因此很多公司备受困扰。近年来,伴随着“大前端”概念的提出和兴起,涌现出一大批移动跨平台开发框架和模式,为解决传统移动开发问题找到了新的方向。

    从早期的PhoneGap、Inoic等Hybrid混合技术,到现在耳熟能详的React Native、WEEX和Flutter等跨平台技术,借助这些优秀的跨平台开发框架,在不牺牲性能和体验的前提下,开发进度和多端研发的问题得到有效解决。

    WEEX

    WEEX是由阿里巴巴研发的一套移动跨平台技术框架,最初是为了解决移动开发过程中频繁发版和多端研发的问题而开发的。使用WEEX提供的跨平台技术,开发者可以很方便地使用Web技术来构建具有可扩展的原生性能体验的应用,并支持在Android、iOS、YunOS和Web等多平台上部署。具体来说,当在项目中集成WeexSDK之后,就可以使用JavaScript(JS)和主流的前端框架来开发移动应用了。

    同时,WEEX框架的结构是解耦的,渲染引擎与语法层分离,也不依赖任何特定的前端框架,目前,开发者可以使用Vue.js和Rax两个前端框架来进行WEEX页面开发。同时,WEEX的另一个主要目标是跟进流行的Web开发技术并将其与原生开发技术相结合,实现开发效率和运行性能的高度统一。

    作为一套前端跨平台技术框架,WEEX建立了一套源码转换以及原生平台与JavaScript通信的机制。WEEX表面上是一个客户端框架,但实际上它串联起了从本地开发、云端部署到分发的整个链路。

    WEEX的整个工作流程图如上,WEEX框架中最核心的部分是JavaScript Runtime。具体来说就是,当需要执行渲染操作时,在iOS环境下选择基于JavaScriptCore的iOS系统提供的JSContext,在Android环境下使用基于JavaScriptCore的JavaScript引擎。

    当JSBundle从服务器端下载完成之后,WEEX在Android、iOS和Web端会运行一个JavaScript引擎来执行JSBundle,同时向各终端的渲染层发送渲染指令,并调度客户端的渲染引擎实现视图渲染、事件绑定和处理用户交互等操作。

    由于Android、iOS和HTML5等终端最终使用的是原生的渲染引擎,也就是说使用同一套代码在不同终端上展示的样式是相同的,并且WEEX使用原生引擎渲染的是原生的组件,所以在性能上要比传统的WebView方案好很多。

    当然,尽管WEEX已经提供了开发者所需要的最常用的组件和模块,但面对丰富多样的移动应用研发需求,这些常用基础组件还是远远不能满足开发的需要,因此WEEX提供了灵活自由的扩展能力,开发者可以根据自身的情况定做属于自己客户端的组件和模块,从而丰富WEEX生态。

    React Native

    React Native是Facebook公司于2015年4月开源的跨平台移动应用开发框架,它是Facebook早先开源的React框架在原生移动应用平台上的衍生产物,目前主要支持iOS和Android两大平台。

    React Native使用JavaScript语言来开发移动应用,但UI渲染、网络请求等功能均由原生平台实现。具体来说就是,开发者编写的JavaScript代码会通过中间层转化为原生组件后再执行,因此熟悉Web前端开发的技术人员只需要很短的学习过程,就可以进-入移动应用开发领域,并在不牺牲用户体验的前提下提高开发效率。

    作为一个跨平台技术框架,React Native从上到下可以分为JavaScript层、C++层和原生层。其中,C++层主要用于实现动态链接库(.so文件),以作为中间适配层进行桥接,并实现JavaScript端与原生平台的双向通信。

    在React Native的三层架构中,最核心的就是中间的C++层,C++层最核心的功能就是封装JavaScriptCore,用于执行对JavaScript的解析。同时,原生平台提供的各种原生模块(如网络请求模块、ViewGroup组件模块)和JavaScript端提供的各种模块(如JS EventEmiter模块)都会在C++层实现的.so文件中被保存起来,最终通过C++层中保存的映射实现两端的交互。React Native框架的工作原理如下图。

    在React Native的开发过程中,大多数情况下开发人员并不需要了解React Native框架的具体细节,只需要专注JavaScript端的代码逻辑实现即可。但需要注意的是,由于JavaScript代码运行在独立的JavaScript线程中,所以在JavaScript中不能处理耗时的操作,如fetch网络请求、图片加载和数据持久化等。

    最终,JavaScript代码会被打包成一个bundle文件并自动添加到应用程序的资源目录下,而应用程序最终加载的也是打包后的bundle文件。React Native的打包脚本位于/node_modules/react-native/local-cli目录下,打包后通过metro模块压缩成bundle文件。通常bundle文件只包含打包的JavaScript代码,并不包含图片、多媒体等静态资源,而打包后的静态资源会被复制到对应的平台资源文件夹中。

    总体来说,React Native使用JavaScript来编写应用程序,然后调用原生组件执行页面渲染操作,在提高了开发效率的同时又保留了原生的用户体验。并且,伴随着Facebook重构React Native工作的完成,React Native也将变得更快、更轻量、更强大。

    Flutter

    Flutter是谷歌公司开源的移动跨平台框架,其历史最早可以追溯到2015年的Sky项目,该项目可以同时运行在Android、iOS和Fuchsia等包含Dart虚拟机的平台上,并且性能无限接近原生平台。与React Native和WEEX使用JavaScript作为编程语言,以及使用平台自身引擎渲染界面不同,Flutter直接选择使用2D绘图引擎库Skia来渲染界面。

    如上图,Flutter框架主要由Framework层和Engine层组成,我们基于Framework层开发的App最终会运行在Engine层上。其中,Engine是Flutter提供的独立虚拟机,正是由于它的存在,Flutter程序才能运行在不同的平台上,实现跨平台运行的能力。

    与React Native和WEEX使用原生组件渲染界面不同,Flutter并不需要使用原生组件来渲染界面,而是使用自带的渲染引擎(Engine层)来绘制页面组件(Flutter显示单元),并且Dart代码会通过AOT被编译为对应平台的原生代码,实现与平台的直接通信,不需要通过JavaScript引擎进行桥接,也不需要使用原生平台的Dalvik虚拟机。Engine层的渲染架构图如下。

    作为Flutter框架的重要组成部分,Widget是Flutter应用界面开发的基本内容,每个Widget都是界面的不可变声明。在Flutter应用开发中,Widget是不能直接更新的,需要通过Widget的状态来间接更新,这是因为Flutter的Widget借鉴了现代响应式框架的构建过程,它有自己特有的状态。当Widget的状态发生变化时,Widget会重新构建用户界面,并且Flutter会对比前后的不同,以确保底层渲染树从一个状态转换到下一个状态时所需的更改最小。

    总体来说,Flutter是目前最好的跨平台解决方案之一,它只用一套代码便可生成Android和iOS两种平台上的应用,很大程度上减少了App的开发和维护成本。同时,Dart语言强大的性能表现和丰富的特性,也使得跨平台开发变得更加便利。而不足的是,Flutter还处于初期测试阶段,许多功能还不是特别完善,而全新的Dart语言也增加了开发者的学习成本。Flutter要完全替代Android和iOS原生开发,还有比较长的路要走。

    PWA

    PWA,全称为Progressive Web App,是谷歌公司在2015年提出的渐进式网页开发技术。PWA结合了一系列的现代Web技术,并使用多种技术来增强Web App的功能,最终可以让网页应用获得媲美原生应用的体验。相比于传统的网页技术,渐进式Web技术是一个横跨Web技术及原生App开发的技术解决方案,具有可靠、快速且可参与等诸多特点。

    具体来说就是,当用户从手机主屏幕启动应用时,不用考虑网络的状态就可以立刻加载出网页。并且相比传统的网页加载速度,PWA的加载速度是非常快的,这是因为PWA使用了Service Worker 等先进技术。除此之外,PWA还可以被添加到用户的主屏幕上,不用从应用商店进行下载即可通过网络应用程序Manifest为用户提供媲美原生App的使用体验。

    作为一种全新的Web技术方案,PWA需要依赖一些重要的技术组件,它们协同工作,为传统的Web应用程序注入活力。

    其中,Service Worker表示离线缓存文件,其本质是Web应用程序与浏览器之间的代理服务器。开发者可以在网络可用时将其作为浏览器和网络之间的代理,也可以在离线或者网络极差的环境下使用其中的缓存内容。

    Manifest则是W3C的技术规范,它定义了基于JSON的清单,为开发人员提供了一个集中放置与Web应用程序关联的元数据的地点。Manifest是PWA开发中的重要一环,它为开发人员控制应用程序提供了可能。

    目前,PWA还处于起步阶段,使用的厂商也是诸如Twitter、淘宝、微博等大平台。不过,PWA作为谷歌公司主推的一项技术标准,已经被Edge、Safari和FireFox等主流浏览器所支持。可以预见的是,PWA必将成为又一革命性技术方案。

    对比与分析

    在当前诸多的跨平台方案中,React Native、WEEX和Flutter无疑是最优秀的。而从不同的细节来看,三大跨平台框架又有各自的优点和缺点:

    如上表所示,React Native和WEEX采用的技术方案大体相同,它们都使用JavaScript来开发跨平台应用,通过将中间层转换为原生的组件后再利用原生的渲染引擎执行渲染操作。与React Native和WEEX使用原生平台渲染引擎不同,Flutter直接使用Skia引擎来渲染视图,和平台没有直接的关系。就目前跨平台框架的实现技术来看,JavaScript在跨平台应用开发中可谓占据半壁江山,大有“一统天下”的趋势。

    从性能方面来看,Flutter理论上是最好的,React Native和WEEX次之,并且都好于传统的WebView方案。但从目前的实际应用来看,它们之间却并没有太大的差距,特别是和0.5.0版本以上的React Native对比,性能体验上的差异并不明显。

    而从社群和社区角度来看,React Native和Flutter无疑是最活跃的,React Native经过4年多的发展已经成长为跨平台开发的实际领导者,并拥有各类丰富的第三方库和大量的开发群体。Flutter作为新晋的跨平台技术方案,目前还处测试阶段,商用的案例也很少。不过,谷歌的号召力一直很强,未来究竟如何发展让我们拭目以待。

     

     

     

     

     

     

     

     

     

     

    展开全文
  • 摘要: # 前言 weex的思想是多个平台,只写一套代码,而react-native的思想是多个平台可以写多套代码,但其使用的是同一套语言框架。 weex的目标在于抹平各个平台的... 进一步浏览weex和react-native的代码之后,可

    摘要: # 前言 weex的思想是多个平台,只写一套代码,而react-native的思想是多个平台可以写多套代码,但其使用的是同一套语言框架。 weex的目标在于抹平各个平台的差异性,从而简化应用开发。而react-native承认了各个平台之间的差异,退而求其次,在语言和框架层面对平台进行抽象,从方法论的角度去解决多平台开发的问题。 进一步浏览weex和react-native的代码之后,可

    前言

    weex的思想是多个平台,只写一套代码,而react-native的思想是多个平台可以写多套代码,但其使用的是同一套语言框架。
    weex的目标在于抹平各个平台的差异性,从而简化应用开发。而react-native承认了各个平台之间的差异,退而求其次,在语言和框架层面对平台进行抽象,从方法论的角度去解决多平台开发的问题。

    进一步浏览weex和react-native的代码之后,可以得出如下的公式。

    weex = Vue.js + H5/Native
    react-native = React + Native
    

    总的来说,其差异性如下表格所示。

    dimension weex react-native
    js framework Vue.js React
    principle write once, run anywhere learn once, write anywhere

    个人观点,weex和react-native最核心的区别就是这两个。然而就只这两个维度的同步,导致了weex和react-native完全不一样的发展方向。

    Vue.js vs React

    维度 Vue.js React
    定位 UI框架 UI框架
    目标平台 Web 多平台
    架构 MVVM React
    数据流 数据绑定 单向数据流动
    组件系统
    响应式
    开发语言 html/css/js all in js
    flexbox 支持 支持
    外围框架 能和其他js框架整合使用 能和其他js框架整合使用
    渲染机制 real DOM Virtual DOM
    动画 支持 支持
    级别 轻量级 重量级

    weex vs react-native

    维度 weex react-native
    思想 write once, run anywhere learn once, write anywhere
    试用场景 简单明了 难易双修
    扩展 为了保证各平台的一致性,一次扩展得在各个平台都实现 不同平台可自由扩展
    社区 内测开源 15年3月开源,社区非常活跃
    支持 alibaba支持 facebook支持
    组件丰富程度 基本只有自带的10余种 除了自带的,还有js.coach上社区贡献的,还是比较丰富的
    上手难度 容易 困难
    调式 暂时log调试 有专门的调试工具,chrome调试,较为完善
    IDE 文本编辑器 Nuclide/文本编辑器

    Vue.js

    Vue.js虽然是Evan You个人开发的开源项目,其社区活跃度以及代码质量还是值得一提的。在写此文章之际,Vue.js在Github上的Star达到了21099,Fork达到了2186。虽然相比于react的Star数44108,Fork数7610还有一定距离,但考虑到作为个人开发者能有如此多的人关注参与,该框架的优秀程度恐怕不会低于React。

    Vue.js的文档资料非常齐全,而且其本身的设计非常简洁,因此绝大部分开发者只要花费少量的时间就能快速上手Vue.js。其中VUE.JS: A (RE)INTRODUCTION是 Vue.js的作者Evan You对Vue.js的介绍,非常值得一看。我想这可能也是weex团队选择Vue.js入手的原因之一吧。对Vue.js有兴趣的同学可以移步Vue.js Guide自行学习。

    Vue.js用来构建交互式web界面的,其主要的关注点和React是一样的,都是立足于View层。
    Vue.js最核心的部分是两个Reactive Data Binding以及Composable View Components。还值得特别关注的是,其保留了html、css、js分离的写法,使得现有的前端开发者在开发的时候能保持原有的习惯。

    响应式数据绑定

    Vue.js将界面开发分成了三个部分,分别是View、ViewModel和Model,这种划分在客户端开发看来是非常合理的,也经过了实际的检验。以HelloWorld为例来说明,示例来源Vue.js Guide

    <!-- this is our View -->
    <div id="example-1">
      Hello {{ name }}!
    </div>
    
    <!-- this is our Model -->
    var exampleData = {
      name: 'Vue.js'
    }
    
    <!-- this is our ViewModel -->
    var exampleVM = new Vue({
      el: '#example-1',
      data: exampleData
    })
    

    这就是经典的MVVM模式,Vue.js通过极简的API,将数据和视图绑定在一起,也就是所谓的Data-Binding。
    这样,当数据变化的时候,界面就能变化,实现了数据驱动的响应式变成。

    组件化

    当我们在写网页的时候,本质上就是构造DOM树,DOM树则是由div、span等元素组成的。div、span这样的元素是构建大型应用的基础。其实Vue.js或者其他的UI框架基本也是一样的,他们都会提供自己的组件系统。这些组件就类似div元素,一般具有一下特征:

    • 小巧精致
    • 能重用
    • 自包含,高内聚

    当我们使用Vue.js开发应用的时候,就是搭建特定的组件树。这些组件可以是Vue.js定义的,也可以是开发者自己定义的,这非常重要。

    看个组件化的例子。

    // example组件定义
    var Example = Vue.extend({
      template: '<div>{{ message }}</div>',
      data: function () {
        return {
          message: 'Hello Vue.js!'
        }
      }
    })
    
    // register it with the tag <example>
    Vue.component('example', Example)
    
    // example组件使用
    <example></example>
    

    组件间数据传递

    Vue.js的组件都是有自己独立的scope的,因此子组件是不能直接访问到父组件的数据的。数据一般都是通过props来传递的,示例说明。

    // define component
    Vue.component('child', {
      // declare the props
      props: ['msg'],
      // the prop can be used inside templates, and will also
      // be set as `this.msg`
      template: '<span>{{ msg }}</span>'
    })
    
    // usage
    <child msg="hello!"></child>
    

    上述方式只能实现组件树从上往下传递数据,在Vue.js中,会有大量的场景需要子组件向父组件传输数据,甚至兄弟组件之间传递数据,一般这种时候就需要使用以下几种能力。

    • 子组件获取父组件的能力(this.$parent
    • 自定义事件的能力 ($on, $emit, $dispatch, $broadcast)

    想要了解详情,请移步Parent-Child Communication

    样式、逻辑和界面的分离

    前端开发经过这么多年的发展,html、css和js的分开编写应当是顺理成章的,Vue.js没有打破这个规则,通过 style 、 template 、 script 将样式、视图和数据逻辑进行了分离。详见下面示例,来源于VUE.JS: A (RE)INTRODUCTION

    <!-- css -->
    <style>
    .message {
      color: red;
    }
    </style>
    
    <!-- template -->
    <template>
      <div class="message">{{ message }}</div>
    </template>
    
    <!-- js -->
    <script>
    export default {
      props: ['message'],
      created() {
        console.log('MyComponent created!')
      }
    }
    </script>
    

    React

    React可能是现在前端开发中最炙手可热的UI框架了。在React的首页最明显的位置上展示者关于React的最核心的三个思想,它们分别是:

    • Declarative(声明式)
    • Component-Based(组件化)
    • Learn Once, Write AnyWhere(一学多写)

    声明式

    React和Vue.js的组件的使用都是声明式的,声明式的编写方式会比命令式的编写更加的直观。关于声明式和命令式的区别,可以参考Declarative programmingImperative programming,这里就不加详述了。

    组件化

    诚然React和Vue.js在编写大型程序的时候都是构建一颗组件树,但React和Vue.js的组件却有着不小的差异。先来看一个React组件的示例(来源React官网)。

    var HelloMessage = React.createClass({
      render: function() {
        return <div style={divStyle}>Hello {this.props.name}</div>;
      }
    
      // style
      var divStyle = {
        color: 'white',
        backgroundImage: 'url(' + imgUrl + ')',
        WebkitTransition: 'all', // note the capital 'W' here
        msTransition: 'all' // 'ms' is the only lowercase vendor prefix
      };
    });
    
    ReactDOM.render(<HelloMessage name="John" />, mountNode);
    

    在React中,一切都是js,视图、逻辑和样式都是通过js来写的。通过js来统一颠覆了html、css和js分离的原则,当然是褒贬不一了。在Vue.js中,分离带来了清晰度,逻辑、视图、样式和数据可以分别处理,但在React中,一切都需要重新组织,甚至需要新的配套框架和设计模式,比如新的语言JSX就是用来简化js带来的麻烦的。但all in js让很多事情变得简单,js的快速发展也让React脱离了css和html发展限制,可以实现更多的可能性,优化、扩展以及其他很多事情,就只要单纯考虑js就可以了,而不必收到css和html的限制。

    当然,这样带来的后果就是学习曲线的陡然增加,React甚至带来了新的JSX语法,同时考虑到React全新的React思想,开发者想要开发生产环境的app,尤其是在将现有app用React重写的时候,成本是要比Vue.js高出不止一个数量级的。

    组件间数据传递

    React推崇的是单向数据流动,也就是说,数据最好是从组件树的顶端往叶子节点流动,尽量少的出现反向流动的情况。
    用另外一种方式来说,React希望实现的immutable data,数据的不变性。只读的数据能给我们带来非常多的好处,并发、简化逻辑、数据统一管理等等。

    React提供了props和state两种数据类型,props是实现数据从父组件往子组件传递的机制,而state则是提供了一种机制来实现组件的自更新,facebook是建议尽量少用该特性,因为其违反了immutable data和单向数据流动的设定。

    因为React的数据设定让其数据管理成为一个问题,业界出现了一些解决方案,其中最为著名的应该就是redux/flux了,有兴趣的同学可以上github搜搜,都是开源的。

    一学多写

    React背后是强大的facebook在开发维护,其目的不是要简单的创建一种新的js的UI框架,相反,其想要让React成为平台无感知的UI开发思想。什么意思呢?就是本节要说的learn once,write anywhere。facebook认为每个平台不可能完全一样,Web、Android、iOS、Windows Phone甚至Xbox,以及未来会出现的各种平台,他们都会有自己的发展理念和发展路劲,不可能做到完全一样,但不管平台如何变化,基于平台之上,创建Virtual DOM,React通过控制Virtual DOM来实现界面变化。
    也就是说Virtual DOM相当于是一个中间层,隔离平台的差异,从而实现统一的开发方式。

    不敢说这样的想法一定能成功,但就现在的发展势头来看,机会还是非常大的。尤其对于开发者来说极具吸引力,如果这一想法成为现实,以后React就可能像DOM一样成为业界统一的标准。那对于iOS开发者来说,在Android上面开发会跟在iOS上开发一样,不需要学习全新的Java语言,Android系统,更不要说各种Java特有的艰深复杂的工具了。

    Native

    个人感觉weex和react-native最大的不同是在Vue.js和React层面。这一点在react-native的命名上就非常容易看出来。在react-native刚出来的时候,其和React的关系是react-native依赖React。

    "dependencies": {
      "react": "~14.0.0"
    }
    

    而现在react-native和react则是同级别的。

    "peerDependencies": {
      "react": "~15.1.0"
    }
    

    react-native中最重要的文件名字也是Library,主要提供了一系列Native的能力。

    查看weex的源码,native部分的作用几乎是一样的,主要就是提供了一些列Native的组件,以及其他的一些能力。

    这也就是为什么本文将两者的Native合为一谈的原因,他们的本质是差不多的。

    • 提供了js和native交互的桥梁Bridge
    • 提供了一系列组件
    • 提供了flexbox布局支持
    • 提供了事件支持
    • ……

    当然,因为weex和react-native的设计思想的差异,在native部分也存在差异,但我觉得这是因为js需要导致的,仅就native而言,两者并没有特别大的不一样。

    也许在不远的将来,native部分会出来一个比较核心的框架,抽象出在构建App时js和native交互所需要的基本能力,同时提供扩展方式,让各种类似react-native\weex这样的框架可以专注于js层的设计。也许react-native就走在这条路上,谁知道呢?

    展望

    动态化的世界越来越精彩,对于weex和react-native的了解才刚刚入门,需要更多实操经验来深刻体会到两者的博大精深。weex和react-native各有千秋,开源的魅力也正是在此。

    展开全文
  • Weex和React Native框架对比与选择

    千次阅读 2017-08-13 16:05:18
    工作原理 大致基本类同,JS-Native前端渲染框架,只是使用框架技术不一样; Weex 阿里内部早期研发的一个通过 JSON 数据描述 native 渲染的项目WeApp以及Vue.js这款...React Native: http://www.jian...

    工作原理

    大致基本类同,JS-Native桥和前端渲染框架,只是使用框架技术不一样;

    Weex

    阿里内部早期研发的一个通过 JSON 数据描述 native 渲染的项目WeApp以及Vue.js这款优秀的前端开源MVVM框架和深度结合;

    https://github.com/weexteam/article/issues/32

    React Native:

    http://www.jianshu.com/p/978c4bd3a759

     

     WeexReact Native:
    JS引擎V8JSCore
    JS开发框架Vue.JS 组件化,数据绑定 Virtual DOM
    模板就是普通的html,数据绑定使用mustache风格,样式直接使用css
    React  组件化,数据绑定 Virtual DOM
    JSX模板学习使用有一定的成本
    布局Flexbox的子集Flexbox的子集
    异步只支持callback提供了Promise的支持
    调试Chrome中调试JS代码,支持预览页面dom节点Chrome中调试JS代码
    即时预览都有提供hot reload功能,可以边更改代码,边在手机上看到效果都有提供hot reload功能,可以边更改代码,边在手机上看到效果
    打包默认打的js bundle只包含业务js代码,体积小很多,基础js库包含在Weex sdk中只能将ReactNative基础js库和业务js一起打成一个js bundle,没有提供分包的功能,需要制作分包打包工具
    跨平台Weex可以支持Android iOS web三个平台支持Android iOS两个平台,需要自己扩展去支持web,windows和node-webkit的支持正在开发中

     

    综上所述

    由于Weex学习门槛较低,易用性和性能等方面考虑,我们暂时选择Weex为蓝本进行研究学习改造前端页面,框架出来时间还很短,当中可能会遇到各种问题,我们唯有摸着石头过河。

    Weex地址:

    http://alibaba.github.io/weex/index.html

    请访问原文:

    https://tinyx.cc/weex/weex-react-native.html

    展开全文
  • 目前主流的应用大体分成三类:Native App, Web App, Hybrid App. Native App 特点: 性能好 完美的用户体验 开发成本高,无法跨平台 升级困难 (审核), 维护成本高 Web App 特点: 开发成本低, ...
  • 移动端跨平台开发从最初的hybrid到react-nativeweex,再到最近Geogle新推出的flutter移动UI框架,体验性能越来越接近原生应用。 这几种APP开发方式中自己亲身体验过的有hybrid、weex、flutter这三种,其中最为...
  • react和vue都是web端框架,运行在浏览器的。react nativeweex是用前端的方法写native app, 即手机应用,能在app store下载的那种,用的是框架自定义的组件。而且具有一次开发,同时生成android、ios、uwp等平台的...
  • 目前主流的应用大体分成三类:Native App, Web App, Hybrid App. 三大主流的应用 Native App特点: 性能好完美的用户体验开发成本高,无法跨平台升级困难(审核),维护成本高 Web App特点: 开发成本低,更新快,...
  • Native、Web App、Hybrid、React Native(后面以RN简称)、Weex 间的异同点,后期同步小程序 PWA。 App常用开发模式简介 此处App为应用,application,并非我们通常讲的手机App。 常用的几种APP开发模式-脑图...
  • Flutter 、Vue、React NativeWeex哪个好

    千次阅读 2020-03-10 23:43:14
    跨平台项目GSYGithubApp系列三大开源版本比较(Flutter 、React NativeWeex) vue react angularjs这三个是同一类型...weex和react native是基于vue和react改造的移动端混合开发框架,把网页包装成app,可以通过...
  • 同款开源React Native版本 同款Flutter版本 : 同款Android Kotlin版本 : 基于Weex开发,适配Android\IOS\Web。 项目的目的是为方便个人日常维护查阅Github,更好的沉浸于码友之间的互基,Github就是你的家。 ...
  • 上周没有写日志,主要是公司人员流动太大,加上兼职面试官; 总结上半个月的业绩; 使用apicloud做了一版混合app;效果图已经发了,因为想做国际市场;(做国内找死),所以本土的开发技术有些问题; ...例如apicloud有热更新...
  • 极强:xcodeAndroid studio里所有原生控件都具备 高性能:精练的代码、适时的5+原生动画调用,达到原生应用的体验 多端发布:编写一套代码,iOS、Android、浏览器、微信App、百度直达号、流应用全覆盖 1.1.2.Mui...
  • Flutter,Weex,React Native Android Native的对比区别
  • 移动端跨平台开发从最初的hybrid到react-nativeweex,再到最近Geogle新推出的flutter移动UI框架,体验性能越来越接近原生应用,这里我们分析一下这几种开发方式的利弊。个人经验,不到位的地方还望不吝赐教。 ...
  • 前端系列:大前端的工程实践:iOS篇| Android篇混合式开发篇-ReactNativeWeex,Weapp
  • weex,react native,flutter

    2018-06-25 09:54:00
    ,它使用自己的渲染引擎来绘制widget, 平台只要提供canvas功能, Flutter是通过使用相同的渲染器、框架一组widget,来同时构建iOSAndroid应用,而无需维护两套独立的代码库.这样保证了,一次代码,处处运行。...
  • 最近在给项目做技术选型,引进weex还是reactnative。...weex和reactnative的优缺点,原理等,这里也不提。预研到了一定阶段,会需要对两个使用不同技术的demo进行优化,因为要内部进行技术评审。这时就...
  • 职友集刚出炉的一条前端薪资数据:截至发稿日,前端近一年的月均薪为20.7K,薪资中位数位于20K-30K的区间。平均了金字塔顶部的前端专家前端新人两群体后,20.7K的薪资基本符...
  • weex&ReactNative对比

    2016-07-22 09:55:37
    weex开源有一段时间了,其实去年刚听说weex这个项目的时候,我就对它很敢兴趣,很大程度上是因为我自己对vue的喜爱。...在weex开源之前,我刚好有几个月的时间一直在致力于ReactNative的优化改造,加上自己之前使用R...
  • react和vue都是web端框架,运行在浏览器的。react nativeweex是用前端的方法写native app, 即手机应用,能在app store下载的那种,用的是框架自定义的组件。而且具有一次开发,同时生成android、ios、uwp等平台的...
  • JavaScript开发+原生渲染 (React NativeWeex、快应用) 自绘UI+原生(QT for mobile、Flutter) 2、Hybrid技术简介 2.1 H5+原生混合开发 这类框架主要原理就是将APP的一部分需要动态变动的内容通过H5来实现,...
  • 平均了金字塔顶部的前端专家前端新人两群体后,20.7K的薪资基本符合当前就业市场的整体形势。 不过目前薪资倒挂现象层出不穷,前端应届实习生还在吐槽30K月薪太少的时候,你的工资还停留在20K...... 一点不...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,651
精华内容 3,060
关键字:

nativeweex和react