daniel86

daniel86 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 该用户太懒什么也没留下

个人动态

daniel86 回答了问题 · 9月16日

解决请问现在那个使用那个跨前端技术会比较好。

希望weex可以起死回生啊,我们在用,didi也在用

关注 7 回答 9

daniel86 关注了标签 · 9月16日

weex

Weex 是阿里开源的一款跨平台移动开发工具,Weex 这个名字是取得 weeks 的谐音。

Weex能够完美兼顾性能与动态性,让移动开发者通过简捷的前端语法写出Native级别的性能体验,并支持iOS、安卓、YunOS及Web等多端部署。

对于移动开发者来说,Weex主要解决了频繁发版和多端研发两大痛点,同时解决了前端语言性能差和显示效果受限的问题。

开发者只需要在自己的APP中嵌入Weex的SDK,就可以通过撰写HTML/CSS/JavaScript来开发Native级别的Weex界面。Weex界面的生成码其实就是一段很小的JS,可以像发布网页一样轻松部署在服务端,然后在APP中请求执行。

与现有的开源跨平台移动开放项目如Facebook的React Native和微软的Cordova相比,Weex更加轻量,体积小巧。因为基于web conponent标准,使得开发更加简洁标准,方便上手。Native组件和API都可以横向扩展,方便根据业务灵活定制。Weex渲染层具备优异的性能表现,能够跨平台实现一致的布局效果和实现。对于前端开发来说,Weex能够实现组件化开发、自动化数据绑定,并拥抱Web标准。

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

关注 1690

daniel86 关注了专栏 · 6月30日

阿里技术

阿里巴巴官方技术号,关于阿里巴巴经济体的技术创新、实战经验、技术人的成长心得均呈现于此。

关注 1531

daniel86 关注了标签 · 6月15日

taro

Taro是一套遵循React语法规范的多端开发解决方案。

项目地址:https://taro.aotu.io/

现如今市面上端的形态多种多样,Web、React-Native、微信小程序等各种端大行其道,当业务要求同时在不同的端都要求有所表现的时候,针对不同的端去编写多套代码的成本显然非常高,这时候只编写一套代码就能够适配到多端的能力就显得极为需要。

使用Taro,我们可以只书写一套代码,再通过Taro的编译工具,将源代码分别编译出可以在不同端(微信/百度/支付宝/字节跳动/QQ小程序、快应用、H5、React-Native 等)运行的代码。

React 语法风格

Taro遵循React语法规范,它采用与 React 一致的组件化思想,组件生命周期与 React 保持一致,同时支持使用JSX 语法,让代码具有更丰富的表现力,使用Taro进行开发可以获得和 React 一致的开发体验。

代码示例

import Taro, { Component } from '@tarojs/taro'
import { View, Button } from '@tarojs/components'

export default class Index extends Component {
  constructor () {
    super(...arguments)
    this.state = {
      title: '首页',
      list: [1, 2, 3]
    }
  }

  componentWillMount () {}

  componentDidMount () {}

  componentWillUpdate (nextProps, nextState) {}

  componentDidUpdate (prevProps, prevState) {}

  shouldComponentUpdate (nextProps, nextState) {
    return true
  }

  add = (e) => {
    // dosth
  }

  render () {
    return (
      <View className='index'>
        <View className='title'>{this.state.title}</View>
        <View className='content'>
          {this.state.list.map(item => {
            return (
              <View className='item'>{item}</View>
            )
          })}
          <Button className='add' onClick={this.add}>添加</Button>
        </View>
      </View>
    )
  }
}
由于微信小程序端的限制,有极少数 JSX 的优秀用法暂时不能得到很好地支持,同时,为了遵循 React 语法,Taro 在写法上也有一些自己的规范,具体可以参考:Taro 开发最佳实践

快速开发微信小程序

Taro 立足于微信小程序开发,众所周知小程序的开发体验并不是非常友好,比如小程序中无法使用 npm 来进行第三方库的管理,无法使用一些比较新的 ES 规范等等,针对小程序端的开发弊端,Taro 具有以下的优秀特性

✅ 支持使用 npm/yarn 安装管理第三方依赖

✅ 支持使用 ES7/ES8 甚至更新的 ES 规范,一切都可自行配置

✅ 支持使用 CSS 预编译器,例如 Sass 等

✅ 支持使用 Redux 进行状态管理

✅ 支持使用 MobX 进行状态管理

✅ 小程序 API 优化,异步 API Promise 化等等

支持多端开发转化

Taro 方案的初心就是为了打造一个多端开发的解决方案。目前 Taro 代码可以支持转换到微信/百度/支付宝/字节跳动/QQ小程序快应用H5 端以及移动端(React Native)

关注 41

daniel86 关注了标签 · 6月15日

flutter

clipboard.png

Flutter 是 Google 用以帮助开发者在 iOS 和 Android 两个平台开发高质量原生 UI 的移动 SDK。

Flutter is Google’s mobile app SDK for crafting high-quality native interfaces on iOS and Android in record time. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source.

Flutter 官网:https://flutter.dev/
Flutter 中文资源:https://flutter-io.cn/
Flutter Github:https://github.com/flutter/fl...

关注 913

daniel86 关注了专栏 · 6月15日

好未来技术团队

好未来(TAL)是一个以智慧教育和开放平台为主体,以素质教育和课外辅导为载体,在全球范围内服务公办教育,助力民办教育,探索未来教育新模式的科技教育公司。 好未来作为一家科技驱动的教育企业,始终坚持“用科技推动教育进步”的使命。一直以来,好未来技术团队致力于教育科技技术的研究与创新。

关注 859

daniel86 关注了用户 · 5月25日

好未来技术团队 @haoweilaijishutuandui

好未来作为一家科技驱动的教育企业,始终坚持“爱和科技让教育更美好”的使命。
一直以来,好未来技术团队致力于教育科技技术的研究与创新。这里是好未来技术团队的对外窗口,每周推送精选技术文章,欢迎大家关注。

关注 124

daniel86 收藏了文章 · 5月25日

DStack--基于flutter的混合开发框架

混合开发这项技术由来已久,目前市面上主流的有Hybird,ReactNative,Weex,Flutter等。其中,Flutter以他独有的实现方式,优秀的性能,成为近两年最火的混合开发方案,我们学而思网校1v1客户端团队也是比较早的开始了Flutter技术的研究,在学而思网校1v1家长端和学而思网校1v1教师端两个App进行了大规模的实践尝试,由此也沉淀出了一套自己的混合方案DStack。

为什么要有混合方案?

  1. 学而思网校1v1家长端是个纯Flutter工程,虽然用Flutter开发App能大幅度的提高人效,但是纯Flutter工程还是有些页面需要用native来实现比较合适,比如说webView,视频页面等;
  2. 学而思网校1v1教师端是个有一定规模的原生App,只是部分模块接入了Flutter来实现。

上述两种情况都存在native页面和flutter页面进行交互的行为,当两种页面进行交互,比如,混合页面之间随意跳转、 页面间数据传递、手势滑动、内存资源控制、路由管理,这些都是需要解决的问题,基于此,我们参考了官方的解决方案,和阿里闲鱼团队的flutter_boost框架等,针对我们的业务和工程的具体情况进行了DStack的方案选型和具体实现。

一、DStack定义

DStack是什么?

学而思网校1V1客户端团队自研的,基于节点进行管理的,使用简单,易于集成,性能优秀的混合开发框架。
目前框架已经在学而思网校家长端和教师端App上线,内存性能明显提升,稳定性表现良好。DStack也给Flutter社区提供了混合栈管理的新思路,改变了固有的移动研发模式。

二、DStack的实现和特点

什么是混合栈

当进行混合开发时,native页面和flutter页面依次打开时形成的栈结构,存在多种页面类型,以下图为例
image20200516171621915.png
蓝色方块NA代表native页面,橘色方块F代表flutter页面
DStack对标flutter_boost

我们可以看到,页面栈结构存在native页面和flutter页面交替的情况,关于如何处理这种不同页面间打开关闭的场景,目前flutter社区开源的此类框架只有flutter_boost,flutter_boost是阿里闲鱼团队自研的Flutter混合开发栈管理框架,该项目在github有3.9k的star。

image-20200516183654129

那看到这儿可能会有疑问,既然社区有成熟的解决方案,我们为什么不用?主要有以下几点原因,一是flutter_boost的实现原理不适用于我们的纯Flutter工程,二是为了我们团队后续的mac,ipad,pc端进行混合开发做准备,三是我们对性能有很高要求,flutter_boost的实现方式决定了它没有利用flutter技术的特性,性能方面不够好。综上所述,我们需要自研适用性更强的混合开发框架DStack。

怎么做?

1.基于“节点”进行混合栈管理

image20200516181118354.png

image20200516181122507.png

在DStack框架实现中,我们把每个native页面和flutter页面抽象成了“节点”数据结构,每个页面对应一个节点,节点有页面的若干信息,通过节点这种数据结构,我们就在实现底层屏蔽掉了页面的具体类型差异。

基于节点有什么好处?

  • 抽象了具体的页面实现,便于管理;
  • 提供了更强大的扩展性。

image20200516182100758.png

NA代表native页面,F代表flutter页面,H代表Hybird页面。

因为我们已经把不同类型的页面抽象成了“节点”,所以后续如果除了flutter页面和native页面,我们甚至还可以接入ReactNative页面或者Hybird页面。

2.确定节点与页面行为的关系
image-20200516183654129

图片中的pop表示返回上一个页面,popTo表示返回指定页面,popToRoot表示返回根页面,popSkip表示返回指定的模块,如图就是把“登录”模块的所有页面都返回。
image-20200516183654129
每个页面返回和打开,都对应一次的节点记录,用户的行为触发节点管理,节点管理驱动页面跳转(即栈管理),考虑到Android和 iOS实现的差异性,节点管理放在了native侧处理。

3.设计使用简单的api
image20200516183344148.png
4.设计便于集成的框架接入方式

image20200516183440612.png

image20200516183513652.png

我们已经把DStack做成了flutter侧的pub库,只需要在flutter工程直接引用依赖即可。

5.利用引擎复用,框架内存优秀
image-20200516183654129
在flutter的1.12版本之后,我们运用了flutter官方提供的flutter engin复用机制,做到了不同的flutter控制器共享同一个flutter engin,内存性能优秀。

三、目前取得的成果

1.业务上
image-20200516183654129

2.性能上

image-20200516183654129

性能上我们主要对比了flutter_boost框架,我们可以看到不管是iOS侧还是android侧,flutter_boost每打开一个新页面内存都会涨,而我们的除非新打开flutter控制器会有内存消耗,其他情况内存数据很稳定。

image-20200516183654129

这是android侧页面打开速度对比,我们可以看到除非是新打开了flutter控制器时,flutter_boost和DStack的页面打开速度差不多相同,其他情况下DStack的页面打开速度明显优于flutter_boost。

3.功能上
image-20200516183654129

这是DStack和官方方案与FlutterBoost在功能上的一些对比,Y代表有,N代表没有。

四、后续计划

1.持续输出文章

这是DStack投稿的第一篇文章,只是简单介绍了一下框架,后续我们会把详细的实现和采坑指南等持续的投稿,把我们的技术共享给整个集团。

2.内部开源

我们有计划把DStack在集团内部开源,也希望得到其他事业部老师们的意见和建议。

3.外部开源

我们有计划把DStack进行外部开源,回馈整个Flutter技术社区。

招聘信息

好未来技术团队正在热招测试、后台、运维、客户端等各个方向高级开发工程师岗位,大家可扫描下方二维码或微信搜索关注“好未来技术“,点击“技术招聘”栏目了解详情,欢迎感兴趣的伙伴加入我们!

也许你还想看

GPU计算的基本概念

WebRTC源码分析——视频流水线建立(上)

浅析深度知识追踪如何助力智能教育

轻量型TV端遥控器交互类库最佳实践

"考试"背后的科学:教育测量中的理论与模型(IRT篇)

用技术助力教育 | 一起感受榜样的力量

想了解一个异地多校平台的架构演进过程吗?让我来告诉你!

摩比秀换装游戏系统设计与实现(基于Egret+DragonBones龙骨动画)

如何实现一个翻页笔插件

产研人的疫情战事,没有一点儿的喘息

查看原文

daniel86 关注了专栏 · 2019-02-22

WeexBox

一套简洁高效的APP混合开发解决方案

关注 7

daniel86 关注了专栏 · 2019-02-22

WeexBox

一套简洁高效的APP混合开发解决方案

关注 7

认证与成就

  • 获得 1 次点赞
  • 获得 1 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 1 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2016-10-08
个人主页被 24 人浏览