图片 1

你该怎么抉择

原标题:Taro、Weex、Hippy 齐聚 IMWebConf 2018!

react-native 60.4k

IMWeb Conf 2018 Native 跨端融合分会场

React Native
(简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架,是Facebook早先开源的UI框架

了解更多:《IMWeb Conf 2018 Native
跨端融合分会场》

React

背景

在原生移动应用平台的衍生产物,目前支持iOS和安卓两大平台。RN使用Javascript语言,类似于HTML的JSX,以及CSS来开发移动应用,因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。

Write once, Run anywhere. 一次编写,到处运行。

React
Native使你能够在Javascript和React的基础上获得完全一致的开发体验,构建世界一流的原生APP。

这句程序员圈子里十分著名的话,也许你早已听过。事实上,这是 JAVA 语言的
slogan,诞生于 1991
年。语言与平台,天生有着鸿沟,想要逾越,是当时美好的愿景;但如何逾越,确实是一个难题。

React Native着力于提高多平台开发的开发效率 ——
仅需学习一次,编写任何平台。(Learn once, write anywhere)

虽然几代的程序员,前赴后继地为这个梦想而努力,但遗憾的是,到 2018
年的今天,世界上还没有一个完美的方案。反而,因为程序在不同虚拟机或系统上执行的差别,很难确保正确性和稳定性,甚至造成了一个坊间笑话:

ionic  33.4k

Write Once, Debug Everywhere. 一次编写,到处调试。

Build amazing native and progressive web apps with open web
technologies. One app running on everything

庆幸的是,玩笑的背后,我们从不缺少砥砺前行的开创者。

ionic由谷歌团队开发维护。 ionic是一个强大的 HTML5 应用程序开发框架(HTML5
Hybrid Mobile App Framework )。

最近这两年,在移动端各种跨平台的开发方案如雨后春笋般涌现,一方面是因为,随着移动互联网的普及和快速发展,移动终端设备的软硬件、操作系统、开发工具链和技术社区等日趋成熟完善;另一方面,近几年传统
PC 端的技术、资源也逐步迁移到移动端上来,大家都想造轮子,然后一统天下。
特别是今年,随着微信小程序的流行,让本来 Web、iOS、Android
的三足鼎立之势,又加入了新的玩家。如何统筹兼顾,收归开发成本,跨端技术势在必行。

可以帮助您使用 Web 技术,比如 HTML、CSS 和 Javascript
构建接近原生体验的移动应用程序。

所以,“跨端融合”——这是每一个追求新技术的开发者的向往,同时也是守旧者的噩梦。

ionic 主要关注外观和体验,以及和你的应用程序的 UI 交互,特别适合用于基于
Hybird 模式的 HTML5 移动应用程序开发。

即将于 10月14日在 深圳举办的 IMWeb Conf 2018 中, 《Native
跨端融合分会场》将带你领略“天下大势,分久必合”前的腥风血雨。

ionic是一个轻量的手机UI库,具有速度快,界面现代化、美观等特点。为了解决其他一些UI库在手机上运行缓慢的问题,它直接放弃了IOS6和Android4.1以下的版本支持,来获取更好的使用体验。

分享主题

weui  17.7k

本次腾讯 IMWeb
团队,邀请到了业内各大公司的著名前端布道者,围绕“跨端融合”这一主题,为您带来全新的核心理念、设计思路专场剖析。

WeUI is an WeChat-like UI framework officially designed by the WeChat

主题有:

Design Team, tailor-made for WeChat Web development, in order to improve

  • 多端统一开发框架:Taro 深度剖析 – 李伟涛(京东)
  • Hippy – 过亿量级动态运营解决方案介绍与应用 – 赵宏罡(腾讯)
  • Hippy – 终端架构设计与核心优化 – 盛波(腾讯)
  • Weex 内核的原理和演进方向 – 张翰、申远(阿里)

and standardize the experience for WeChat users. Including components

亲临现场,你将收获:

such as button、cell、dialog、 progress、
toast、article、actionsheet、icon.

  • 与前端大咖面对面交流
  • 了解跨端技术的发展史和最新动态
  • 深入挖掘跨端技术的原理
  • 了解方案之间的异同
  • 认知哪种方案最适合自己业务

Weex  16k

10月14日,我们与您不见不散!

2016年4月21日,在Qcon大会上宣布跨平台移动开发工具Weex开放内测邀请。

会前问答

Weex

IMWeb Conf 2018 是诚意满满的一次前端嘉年华。

是一套简单易用的跨平台开发方案,能以 web 的开发体验构建高性能、可扩展的
native 应用,为了做到这些,Weex 与 Vue

为了让大家提前感受到大会的氛围,我们准备了干货满满的分会场提前问答。

合作,使用 Vue 作为上层框架,并遵循 W3C 标准实现了统一的 JSEngine 和 DOM
API,这样一来,你甚至可以使用其他框架驱动

采访的对象,是分别来自阿里与腾讯的赵宏罡张翰两位前端技术专家,我们来看下他们对“跨端融合”的一些看法吧。

Weex,打造三端一致的 native 应用。

问题1:最近有少量国外企业在放弃 RN,重新回到 native
开发,让业界对RN的信心有所动摇,那在技术选型的时候,是否有必要继续在
RN上面投入?新项目是否依然应该选择RN?

Weex能够完美兼顾性能与动态性,支持iOS、安卓、YunOS及Web等多端部署。

赵宏罡:技术选型没有“银弹”。没有一种技术方案可以完美的解决所有业务场景的所有问题。在
Airbnb 这类开发资源充足,且对动态化需求并不是那么强烈的业务场景,RN
的优势并不突出。因为一些坑选择放弃 RN 可以理解。

amazeui 11.4k

但是对于追求更高开发效率,以及对动态化运营需求很大的业务场景。RN
依然是一个不错的选择。因为原生 Native 开发,H5
开发各自都有很大的痛点。而 RN
这类大前端框架,通过结合二者的优势真正的抹平了这些痛点。只是目前的大前端框架都还不够完善,本身又引入了一些新的坑。
但是在我们长期的实践中,发现其实很多坑都是有解决方案的。腾讯的 Hippy
框架就是站在巨人的肩膀上,不断优化,让大前端框架成为“不坑”的选择。
因为大前端方向本身很好的解决了 Naitve 和 H5
原生的问题,而它自身的问题也是可以解的,所以我们有理由相信它就是移动开发的未来。

中国首个开源 HTML5 跨屏前端框架。

问题2:facebook 最近在重写 RN,是否意味着当前 facebook 也意识到了 RN
的部分性能问题;未来如果 RN
新的版本出来,且明显高于一些类似的框架,在协议允许的情况下,如何可以快速切回RN?

Amaze UI 以移动优先(Mobile
first)为理念,从小屏逐步扩展到大屏,最终实现所有屏幕适配,适应移动互联潮流。

赵宏罡:其实RN的诞生并非考虑周全的系统架构下的产物。先诞生了 Android
版,之后才有了 iOS
版,而且也不是一个团队在统一维护。所以它的一些问题是可以预见的。仔细看过
RN
的代码也会发现,有些性能瓶颈,就是底层设计不合理带来的。从一直没有1.0版本的出现,也可以看出
Facebook 显然对 RN 的现状是不满意的。想要真正被大众接受,重构势在必行。

Vux 11.3k

其实也很期待RN的重构版。他们重构声明里提到对前终端通信机制的重新设计还挺令人振奋。不过他们也说明了本次重构只是在底层“大刀阔斧”,对上层API是保持了兼容的。而腾讯的
Hippy 框架,也是在上层兼容了 RN 的API。这意味着,如果你用 Hippy
构建了应用,又想要切回 RN 的时候,业务层的工作量是非常小的,几乎0成本。

Vux(读音
[v’ju:z],同views)是基于WeUI和Vue(2.x)开发的移动端UI组件库,主要服务于微信页面。

问题3:JSBridge是前端和 native
进行通讯的桥梁,多次频繁的调用,会导致整个渲染和通讯效率很低,所以对于渲染和动画,常见的优化方案是降低传输字节数,降低调用的频次;那除了这些常规的手段,还有那些深入的通用优化方案,可以进一步优化整个解决方案的性能?

基于webpack+vue-loader+vux可以快速开发移动端页面,配合vux-loader方便你在WeUI的基础上定制需要的样式。

赵宏罡:当前的经验还有2个:

vux-loader保证了组件按需使用,因此不用担心最终打包了整个vux的组件库代码。

  1. 大部分 JSBridge 都是基于 JSON
    来通信的。在设计协议时,应该尽量减少数据的层级。用平铺的方式是最好的。对于层级很深的情况,序列化和反序列化会更加耗时。
  2. 对于大前端框架自身而言,不一定非用
    JSON。还可以设计更轻量的定制化通信协议。比如 Weex 有 wson,Hippy 有
    hippy buffer。用描述式的协议设计让编解码更小更快。

vux并不完全依赖于WeUI,但是尽量保持整体UI样式接近WeUI的设计规范。最初目标是创建一个易用,实用,美观的移动端UI组件库,现在离理想状态还有不少距离,因此需要大家及时反馈问题及贡献代码。

还有更加面向未来的方式:

即使你不使用vux的代码, 但能从源码得到一些参考那么也是件让人高兴的事情。

把尽量多的工作直接交由JS引擎来完成。比如 vdom 的
diff、排版,渲染计算等。在C层做更多的事情,JSBridge的负担自然就降下来了。这是也是腾讯的
Hippy 团队正在预研的方向。

Mint UI  9.8k

问题4:很多大企业都推出了一套自己的解决方案,比如阿里的 weex,京东的
taro,腾讯有 hippy、plato,携程深度定制了 RN
等;业界有很多方案以供选择,选择困难症如何破?如果碰到不在持续维护和更新的技术方案,如何处理?

基于 Vue.js 的移动端组件库

张翰:选择困难可能来自于对自身技术需求和对大厂开源框架能力没有精确的把握。解决好这两点应该就不会选择困难了。

Mint UI 包含丰富的 CSS 和 JS
组件,能够满足日常的移动端开发需要。通过它,可以快速构建出风格统一的页面,提升开发效率。

第二个问题,如果从开源社区的角度看,任何一个开源项目的成功只依靠一家公司的力量是远远不够的,需要社区开发者和企业的共同参与才能带来持久生命力和繁荣。所以“不持续维护和更新”在我看来是个伪命题,个人更呼吁业界开发者和团队破除用户思维,真正参与到项目的建设中来,成为开源项目的贡献者,亲手赋予这个项目持久生命力,让自己的思路在开源项目里得到体现。

真正意义上的按需加载组件。可以只加载声明过的组件及其样式文件,无需再纠结文件体积过大。

另外如果真的不想贡献开源又想要保证框架的稳定性和持续维护,那么也可以考虑购买大厂推出的移动研发商业服务产品(如阿里巴巴的
EMAS 产品线)。

考虑到移动端的性能门槛,Mint UI 采用 CSS3
处理各种动效,避免浏览器进行不必要的重绘和重排,从而使用户获得流畅顺滑的体验。

问题5:大前端时代,无论是哪种框架;native都在和前端逐步融合。从最初的H5,到hybrid
App,再到RN跨端融合,都是想让用户体验更好,所以很多组件都直接使用 native
组件进行渲染,但是又不缺失前端的灵活性;那从前端的角度来看,除了可以在构建打包,dom-diff,vdom处理外,还有哪些方面可以进一步挖掘前端的价值?

依托 Vue.js 高效的组件化方案,Mint UI
做到了轻量化。即使全部引入,压缩后的文件体积也仅有 ~30kb (JS + CSS)
gzip。

张翰:“向Native要性能”是我们持续在探索的一个重要方向,如用 binding
取代 bridge、TS 强类型等 JS 引擎层优化,vdom、dom-diff、布局能力 native
化,以及用直接绘制方式取代系统 UI
组件以增强特定场景性能表现等方案,均是可以挖掘的地方。

mui 8.4k

以上是前端专家们的部分精彩问答,如果你想了解更多问题,或者有疑问想进行面对面交流,一定不要错过参加
IMWeb Conf 2018 的机会!

性能和体验的差距,一直是mobile app开发者放弃HTML5的首要原因。

参会信息

浏览器天生的切页白屏、不忍直视的转页动画、浮动元素的抖动、无法流畅下拉刷新等问题,这些都让HTML5开发者倍感挫败,尤其拿到Android低端机运行,摔手机的心都有;

大会提供线下票和线上票两种票型。

另一方面,浏览器默认控件样式又少又丑,制作一个漂亮的控件非常麻烦,也有一些制作简单的ui框架但性能低下。

线下票(现场)

mui框架有效的解决了这些问题,这是一个可以方便开发出高性能App的框架,也是目前最接近原生App效果的框架。

购买现场票的观众将可以前往现场,获得与讲师近距离接触以及面对面提问的机会。购买链接:

wepy 6.7k

线上票(网络直播)(👇点击阅读原文即可跳转链接)

WePY
是一款让小程序支持组件化开发的框架,通过预编译的手段让开发者可以选择自己喜欢的开发风格去开发小程序。框架的细节优化,Promise,Async
Functions的引入都是为了能让开发小程序项目变得更加简单,高效。

如果您无法到达现场,也可以购买线上票,通过网络直播观看所有演讲,会后也可以观看回放。【Native
跨端融合会场】购买链接:

Muse-UI 5.5k

其他会场购买链接:

基于 Vue 2.0 和 Material Desigin 的 UI 组件库

主会场:

特性

Node 服务与性能专场:

1.组件丰富

小程序快应用专场:

Muse UI 基本实现了 Material Design
设计规范类的所有组件,另外还开发许多的功能性的组件

可视化与动画专场:

2.可定制

优惠课程包:

Muse UI 使用less文件,所有的颜色都有一个变量维护,通过编写 less
文件完成自定义主题,另外组件内部也提供一些修改效果的参数

其他信息

3.基于 Vue 2.0

Conf 官网: 会议时间:2018年10月14日(周日)
会议地址:深圳科兴国际会议中心B栋4单元 负责人微信:guofengmian
负责人邮箱:coverguo@tencent.com

Muse UI 基于 Vue2.0
开发,Vue2.0是当下最快的前端框架之一,小巧,api友好,可用于开发的复杂单页应用

移动端请扫码进入官网:返回搜狐,查看更多

vonic 2.5k

责任编辑:

一个基于 vue.js 和 ionic 样式的 UI 框架,用于快速构建移动端单页应用。

和 ionic 的关系:没有关系,只是在样式方面以 ionic 的 css
文件为基础(做了一些调整)

vue-carbon 0.8k

基于 vuejs 1.0 开发 material design 风格的移动端 WEB UI 库。

使用文档地址

zanui-weapp 0.3k

高颜值、好用、易扩展的微信小程序 UI 库,Powered by 有赞。

frozenui 0.2k

FrozenUI的CSS组件库,基于腾讯手Q样式规范,腾讯QXD出品。

VUWE 0.1k

vuwe是一款基于微信WeUI所开发的,专用于Vue2的组件库。

它与WeUI完全解耦。用户通过自定义WeUI的样式文件,可以方便地对VUWE实现定制化。


更多angular1/2/4/5、ionic1/2/3、react、vue、微信小程序、nodejs等技术文章、视频教程和开源项目,请关注微信公众号——全栈弄潮儿

图片 1