402com永利平台|402com永利1站|55.402com永利网址

您的位置:402com永利平台 > 互联网资讯 > 你该如何选择

你该如何选择

2019-08-31 13:05

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

react-native 60.4k

有幸参与了QCon 2016的上海站会议。官方宣传这是一个中高端会议,专题丰富涵盖了当前互联网各种技术领域。

大前端一定是可以预见到的未来的趋势之一(我能怎么办呢)

IMWeb Conf 2018 Native 跨端融合分会场

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

10月20号周四 10月21号周五 10月22号周五
前端技术实践 玩转大数据 Growth Hacking,IoT & React Native
安全之战 移动开发探索 互联网广告系统实战
新Java,新未来 移动视频 工程团队管理
无处不在的容器 让架构更简单 技术创业
微服务架构,我们该如何实践? 运维与监控 机器学习与深度学习
大数据应用与系统优化实践(厂商共建专题) 大数据服务与应用 用户体验设计
业务上云技术拆解(厂商共建专题) 高并发与实时处理架构设计(厂商共建专题) 研发支撑体系
智能出行 - 高德开放平台专场(厂商共建专题) 微服务实践与架构演进之路(厂商共建专题) 业务系统架构
大数据分析与应用
大规模前端系统

现在主流的ReactNative还是Weex,参考这篇还有那篇

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

React

QCon 上海站PPT 下载

不过最近fb的开源协议搞得沸沸扬扬,据说大公司都禁止react了,生怕出什么事。不过我觉得大公司怕是应该的嘛,地主有余粮。小公司其实无所谓,怎么方便怎么来,光脚的害怕穿鞋的吗?在我大天朝这么多人用盗版都不怕,就一个开源协议没必要(个人见解哈)

背景

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

其中每个专题会在固定的宴会厅进行,由专题出品人主持专题的会议开展。专题下面是各个议题,时长大致为45分钟包含Q&A环节。

weex是什么?

weex是一种跨平台的开发方案,简单的说就是把iOS,Android,H5的开发合并到一起,可以写一套代码,分别运行在这3个平台,最重要的是用户体验和原生语言开发的时候基本一样。

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

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

根据自身技术栈出发,我选择了以下专题

React Native App

Facebook发现Hybrid App存在很多缺陷和不足,于是发起开源的一套新的App开发方案RN。使用JSX语言写原生界面,js通过JSBridge调用原生API渲染UI交互通信。

优点:效率体验接近Native App,发布和开发成本低于Native App

缺点:学习有一定成本,且文档较少,免不了踩坑

举个栗子:Facebook、Youtube、Discord、QQ、百度等等

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

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

  • 20号 前端技术实践
  • 21号 移动开发探索
  • 22号 Growth Hacking & 用户体验设计 & 技术创业

Weex App

阿里巴巴开发团队在RN的成功案例上,重新设计出的一套开发模式,站在了巨人肩膀上并有淘宝团队项目做养料,广受关注,2016年4月正式开源,并在v2.0版本官方支持Vue.js,与RN分庭抗礼。

优点:单页开发模式效率极高,热更新发包体积小,并且跨平台性更强

缺点:刚刚起步,文档欠缺;社区没有RN活跃,功能尚不健全,暂不适合完全使用Weex开发App

举个栗子:淘宝、天猫、阿里云、优酷、闲鱼、饿了么等

一统三端这个对我还是比较有吸引力的,rn虽然现在用的人较多,社区活跃,但毕竟是两端。之前在上一家公司有时候还是要写hybird页面,作为一个native开发者,以后用这个写单页面还是不错的哈。

下回就开始weex之旅了~~~~

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

ionic  33.4k

前端技术实践

周四的专题对于 客户端开发来说稍显尴尬,没有与之相关的议题。 我选择了和客户端相对平等的前端专题。 下面重点介绍一下我认为有意思的议题:

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

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

Vue 2.0: 渐进式前端解决方案

讲师@尤雨溪,很早就关注他了。这次总算见到真人了。Vue已经在Github上收获了3w 颗star,对于开源项目来说,无疑是相当成功了。

我很认同他对框架的理解。框架的存在是为了帮助我们应对复杂度。但同时框架也有复杂度,Pick the right tool for the job.

开篇的框架理解引出了 Vue ,这个渐进式前端解决方案。可能就是他对当下JS开发环境的一个答案。

框架本身,我不是JS开发,没有使用经历就不做主观评价了。 回到一开始的"框架",他是如何解决框架复杂度的呢? 答案是"渐进式"。

图片 1

progressive

Vue框架提供 声明式渲染 核心功能,加上可选的附加库/工具链,来打造弹性复杂度。这个区别于传统框架,集成整合了一整套解决方案。提高框架复杂度,增加开发者的学习使用成本。

这种框架的设计思路,是明智的。

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

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

Progressive Web App:反击序章

讲师@黄玄开篇讲述了web在当下移动时代的窘境。有一定的技术高度看待这类行业问题是蛮赞的。不认可web在移动时代只有Hybrid这一种选择。

开始布道 PWA(Progressive Web App),认为这是web针对native的一次反击。
The new application model for Web

  • add To HomeScreen (web 也有像native原生应用一样的桌面图标入口)
  • Instant Loading & ReliableExperience (提供一种缓存机制,类似原生应用的首次下载)
  • Push Notifications (web 也可以像原生应用一样接受通知)

...等等一些特性。让我这种native同学感到十分新鲜。确实在 纯web 到 纯navite 之间有许多可能的点

反观业界,应该很少有企业对自己的网站能支持到这种体验程度。特别是在iOS 9提供了 web mark机制之后,直接把web流量切给了native。不知道有没有统计过用户是愿意留在浏览器 还是 更愿意跳往原生应用

不过在原生应用开发实践中,我个人偏向于 hybrid 方案。这个取决于你的App大多数是什么样的业务场景,需要权衡体验和发布节奏等利益点。

  1. 纯native,体验是有可以保证的。 缺点就是发版受限
  2. hybrid,这里讨论指的是 RN,Weex这种跨端方案。好处是 发布不受限制,一人开发跨两端(iOS,Android) 节省人力。体验稍逊于native
  3. 纯web,包括不经优化,直接套用webview的这种。缺点是体验差,卡顿,load时间久

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

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

移动开发探索

这个专题与我息息相关,吸引的我是这些议题

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

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

React Native 业务实践和性能优化

图片 2

who use RN

讲师 携程@赵辛贵。 携程积极拥抱RN技术,多数业务和页面使用RN搭建。
好处明显

  • size优势,RN页面大小计算脱离原生包大小
  • 支持动态发布,跨端节省开发人力
  • RN技术成熟,社区活跃(参会时和旁边的途牛网开发交流,他们动态方案也是选择RN)

携程内部还演化出了CRN(ctrip RN)业务框架。做了性能和稳定性优化(思路参见PPT),规划支持CRN-web实现跨三端(iOS,android,H5)。

外界RN动态方案使用的如火如荼,他们正在证明这是未来移动前端开发的方向。

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

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

Weex 极致性能优化

公司同学分享,Weex性能优化的几个思路方向。围绕性能,干货较多。
不过,这种经历只能听听思路。 基本没有实践复用场景 :)
安利Weex性能很好,倒是真的。

分享主题

weui  17.7k

蘑菇街 App 的稳定性与性能实践

从用户角度出发看 性能和稳定性问题:

  • 闪退
  • 打开慢
  • 滑动不流畅
  • 耗电
  • 网络不畅/出错
  • 流量大

都是客户端常见的问题,相信各大公司都有自己的答案实践。

他们有一个比较有意思的工具:AppMate(小蘑菇) 提供给测试和业务开发进行开发阶段的一个性能把控。

或许是在阿里的原因,这些东西听来都不足以让我兴奋。

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

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

Growth Hacking 最新动态和最佳实践

这个是受团队运营产品委托,刻意留意了这个议题(我所在的天猫team也负责push通道来召回用户,提高留存)

主题有:

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

Growth Hacking 最新动态和最佳实践

  1. 数据看板 - 数据分析 - 数据监控
  2. 数据驱动产品决策
  3. AB 测试实验
  4. 灰度渠道发布

其中的数据分析提到:"Core Action" 指到的是核心操作,关键路径到达。
列举了几类APP的"Core Action"

APP类型 Core Action
Facebook connect(连接?相互关注?朋友互动?)
Slack/Wechat 接发信息
Pinterest 晒图
电商 浏览、下单购买
知乎 回答,点赞,收藏,感谢
互联网金融 购买理财产品
二手车 购买,砍价

这里有一个观点 重点关心产品核心操作是否被用户触达

图片 3

recall

这个模型 描述了 新客或流失客户(最近打开app的时候是在30-60天之前),我们应该积极的通过Push通道来进行用户召回,当用户下沉为忠实用户之后。要谨慎使用push。这个模型是可逆的,也就是说当用户不再活跃的时候,回归上层我们也要通过push相关利益点来进行召回。

分享了业界做病毒式扩散的几个经典例子:

  1. airbnb 分享给朋友,两方都能获得25刀的优惠券
  2. PRISMA 图片滤镜软件 制作图片打上软件水印
  3. Pokémon Go 户外现象级户外捕捉小精灵

这些快速扩散区别于 用户推荐和口口相传。分享者和你分享的时候,并不是在说这个平台或者软件如何如何,还是在和你分享他们得到了什么。分享一定要满足用户一些心理:增加声望、财富、乐趣。

最后病毒式扩散一定要作用在Core Action上。

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

and standardize the experience for WeChat users. Including components

产品思维和设计思维详解

讲师 @张玉婷,她的设计思路蛮不错的。她认为设计师设计产品交互的时候,一定是从产品架构出发分析产品用户需求,进而推导出产品界面。而不是接到需求在网上一通翻找竞品界面。不同的需求场景有不同的用户语境,进而有不同的视觉交互表达。

比如 从业参与的Weico客户端,是设计驱动的一个产品。目前是最大的微博第三方客户端,跳脱开 官方微博客户端的通用性和功能化,主打个性化和情感化。围绕核心功能(阅读和发送微博)进行 特色的设计扩展。

后面提及高德客户端的交互设计,虽然 App类型不同,设计很难参考。但思路是ok的。要关注 用户与产品发生交互的真实场景,介绍了高德在这方面的交互实践。

亲临现场,你将收获:

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

如何选好技术初创风口:从0到1,1到100

这个。实话说我睡着了,可能是吃完中饭乏了。恩,是的。

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

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

线上票(网络直播)(

本文由402com永利平台发布于互联网资讯,转载请注明出处:你该如何选择

关键词: