客户端动态化系列之——Weex

来源:kuailejim

链接:http://www.jianshu.com/p/ea25fd834944

客户端动态化系列之——URLRoute

在前端越来越火的年代,逐渐衍生出类似React Native、Weex等开发套件。所达到的目的挺简单的,达到在多个平台下共用一份代码,节省开发成本,提高开发效率。其次,由于JavaScript语言的特殊性,能动态更新页面而不需要发版。基于这两点,越来越多的个人开发者&公司开始尝试它们。

本文将从个人开发实践项目出发,发表一些对于Weex的看法和在项目中的实战经历。不涉及具体原理和概念性的东西,读者可以自行去Weex官网查阅。

Weex原理

大体上和React Native一致,都是一个“放大版”的JSBrdige。其核心无非就是自定义了一套DSL(.we),配合vue实现数据绑定、vdom等等功能。再通过native端与JS端的数据、API交互使得最终体现为native的调用过程。

而在这过程中,iOS用了自带的引擎JavaScriptCore & Android则是Google V8。在这过程中有个坑,iOS版本Weex有内存泄漏的情况(Android没有),原因是JS Framework(Weex JS端的主程)并没有像V8一样hidden class的行为,GC回收不是很及时。Weex开发团队的同事发现了此bug,并在后续的版本中修复。

OK,我认为对于“应用框架者”来说,不用去care具体实现的原理。只需要了解怎么使用即可,毕竟这只是一个工具。如果是为了学习,可以去阅读,而对于“使用者”来说,快速地入门则是王道。

而Weex的使用,对于native来说,无非就是针对具体的业务场景实现Handler、Module、Component。

Handler

我们可以把Weex看做是一个提供了基础套件的UI渲染库。核心功能还是需要开发者自己来实现,比如:图片下载逻辑、网络请求、导航跳转等等。

所以开发者首先要关注的就是需要静态分析自己当前工程所需的功能,看看Weex需要你实现的handler中有哪些你要用到的,并实现它们。

比如在我的项目中,就需要实现图片下载逻辑,于是实现并注册。

[WXSDKEngine registerHandler:[CNCWeexImageLoaderImplement new] withProtocol:@protocol(WXImgLoaderProtocol)];

Module

Module可以理解为JS端需要调用native才能处理的逻辑,并且在JSnative进行交互。这么说有点抽象,举个具体的例子:比如在JS端想访问native端的数据库(coredata、realm等),就需要实现一个module来满足JS调用native写好的module以实现native的逻辑。

在我的实战项目中,选择用module的方式实现网络请求与导航跳转。

[WXSDKEngine registerModule:@"urlRoute" withClass:[CNCWeexURLRouteModule class]];

[WXSDKEngine registerModule:@"networkRequest" withClass:[CNCWeexURLRouteModule class]];

Component

Component很好理解,要实现一个跑马灯UI的效果,在native端实现,并且注册到JS。JS端调用,即可展示出跑马灯。这就是Component,在JS满足不了或者实现成本很高的时候,则可以在native端实现Component供JS调用。

由于第一次试水Weex,并没有采取很复杂的UI,就没有用Component。

踩过的坑

JS中this关键字的用法与Objc不同,this的作用域仅在当前对象。而在JS中函数也算一个对象。如果在函数中套一个函数,此时用this,只能代表外层函数。而非Objc一样代表整个最外层对象,需要注意!

业务中碰到一个场景,需要在某个场景,native端主动调用JS。而Weex提供给外部的API并没有提供这样的能力,仅仅是在JS主动调native方法时传一个callback,并且在native方法执行完成时,callback销毁。而业务场景却需要在将来执行回传下来的callback。翻看源码,只能自己实现了。这里给个思路:

其实在Weex的实现中(不贴源码了),会判断native实现的方法(即给JS调用的方法,比如module实现的方法)的入参类型。如果是声明成WXModuleCallback,则Weex内部会进行处理,并转成block给iOS(Android同理)。而如果不是WXModuleCallback,则会透传一个String(weex标记的方法ID)下来,这很关键。于是我们可以投机取巧地把入参改成String,记录下这个String。在后期想调这个JS方法时,写如下代码即可

[[WXSDKManager bridgeMgr] callBack:weexInstance.instanceId funcId:aliveCallBackID params:params keepAlive:YES];

看法

Weex相比React Native,坑还是比较多的。但是从“使用者”角度来说,Weex方便很多。但是对于存在很多复杂业务场景的开发者来说,必然会去学习其原理,而此时Weex相比RN就没那么友善了。

因为在阿里,我更加支持Weex,也希望它变得越来越好。

无论采用哪种方式,两者都能实现客户端的动态化。而这对于一些多变的页面来说,是一种新的选择方式。

这是客户端动态化系列的第二篇文章,读者可以看前篇客户端动态化系列之——URLRoute,相信你对动态化有更深的理解。

时间: 2024-10-11 22:21:44

客户端动态化系列之——Weex的相关文章

第八章 交互技术,8.4 Weex 双11会场大规模应用的秒开实战和稳定性保障(作者:鬼道)

8.4 Weex 双11会场大规模应用的秒开实战和稳定性保障 前言 Native 开发的诸多亮点中,流畅体验和系统调用是最多被提及的.流畅体验体现在页面滚动/动画的流畅性,背后是更好的内存管理和更接近原生的性能:同时又是 Web 的痛点:资源首次下载.长页面内存溢出和滚动性能.动画性能.传统 web 性能(如JS执行效率).Native 有丰富的系统调用能力,而 Web 痛点在于:W3C 标准太慢,有限的设备访问能力,API 兼容性问题较严重,如 Geolocation 在 Android We

Memcache的客户端连接系列(四) PHP

关键词: Memcached   PHP 客户端 声明:本文并非原创,转自华为云帮助中心的分布式缓存服务(DCS)的用户指南.客户端连接方法通用,故摘抄过来分享给大家. PHP客户端 RedHat系列: 以CentOS7为例介绍PHP版本客户端的安装.Redhat.Fedora等系统也适用. 安装gcc-c++及make等编译组件. yum install gcc-c++ make 安装sasl相关包. yum install cyrus-sasl* 安装libmemcached. 由于libm

2015前端生态发展回顾

原文:https://github.com/kuitos/kuitos.github.io/issues/32全部文章:https://github.com/kuitos/kuitos.github.io/issues 引用苏宁前端架构师的一个总结作为开篇 编程技术及生态发展的三个阶段 最初的时候人们忙着补全各种API,代表着他们拥有的东西还很匮乏,需要在语言跟基础设施上继续完善 然后就开始各种模式,标志他们做的东西逐渐变大变复杂,需要更好的组织了 然后就是各类分层MVC,MVP,MVVM之类,

[转]关于Web前端开发,附:(百度web前端笔试面试题目)

关于Web前端及百度web前端笔试面试题目 随着各大互联网公司设立了Web前端开发工程师.设计工程师等职位,web前端越来越得到互联网企业的认可.而且其重视程度与地位也随着浏览器 端的富客户端的体现而日益提高. 眼前对HTML5的未来和走向,业内的预测是会和Flash.Silverlight等相结合,从而取代传统的客户端应用程序.而实现这个目标的客户端核 心工作是有Web前端工程师来完成的. 从另一个角度,对于web产品来说,交互和用户体验是产品的第一价值,这部分价值的体现就是在web前端.可以

VisualSvn Server介绍

1 .VisualSvn Server  VisualSvn Server是免费的,而VisualSvn是收费的.VisualSvn是Svn的客户端,和Visual Studio集成在一起,但是不免费,使用AnkhSvn(VS2008插件)来代替VisualSvn.使用 VisualSvn Server是Svn的服务器端,包括Subversion.Apache和用户及权限管理,优点在上面已经说过了. 2. VisualSvn Server安装过程下载后,运行 VisualSvn-Server-2

Thrift源码分析(一)-- 基本概念

我所在的公司使用Thrift作为基础通信组件,相当一部分的RPC服务基于Thrift框架.公司的日UV在千万级别,Thrift很好地支持了高并发访问,并且Thrift相对简单地编程模型也提高了服务地开发效率. Thrift源于Facebook, 目前已经作为开源项目提交给了Apahce.Thrift解决了Facebook各系统的大数据量传输通信和内部不同语言环境的跨平台调用. Thrift的官方网站: http://thrift.apache.org/ 作为一个高性能的RPC框架,Thrift的

刷《一年半经验,百度、有赞、阿里面试总结》·手记

在掘金上看到了一位大佬发了一篇很详细的面试记录文章-<一年半经验,百度.有赞.阿里面试总结>,为了查漏补缺,抽空就详细做了下.(估计只有我这么无聊了哈哈哈) 有给出的或者有些不完善的答案,也尽力给出/完善了(可能有错,大家自行辨别).有些很困难的题目(例如实现Promise),附带相关链接(懒癌患者福利). 总的来说,将这些题目分成了"Javascript"."CSS"."浏览器/协议"."算法"和"We

设计模式 创建型 抽象工厂

package com.mozq.base; /** * 抽象工厂:提供一个创建一系列相关对象的接口,而不是指定它们具体的类. * 1.抽象工厂 * 2.抽象产品 * 3.具体产品 * 4.具体工厂 * 5.客户端使用某系列产品 * 使用步骤: * 1.工厂后于产品.//工厂就是生产产品的,产品都没有设计好,无法定义工厂的功能. * 2.具体后于抽象. * 必须先定义抽象产品,才能定义生产该抽象产品的抽象工厂. * 必须先定义具体产品,才能定义生产该具体产品的具体工厂. 与其他模式关系: 因为具

深度揭秘阿里移动端高性能动态化方案Weex

2016年Qcon大会首日,阿里巴巴资深总监.淘宝移动平台.阿里百川负责人庄卓然宣布移动端高性能动态化方案Weex即时内测,并将于6月开源.此消息一出,群情汹涌,在座的程序猿.攻城狮们纷纷拿起手机扫码,以期第一时间感受Weex的神奇之力. 在第二天的主题分享会上,阿里巴巴前端开发专家赵锦江和技术专家徐凯对Weex进行了深入的解析.以下为演讲速记整理后的成文. 阿里怎么看待移动开发? 目前的移动开发者面临的最大痛点就是面对极其复杂的环境,对此,庄卓然给出一个公式,移动开发的复杂度=应用数量×平台数