大前端技术选型 Native原生iOS, Android, React-Native, Flutter, 微信小程序, HTML5

说明

笔者于2020年5月15日在世界500强企业,做了一场300+人次的技术分享。特此记录主要内容。
在这里插入图片描述

1.淘宝架构

1.1淘宝整体架构

在这里插入图片描述
淘宝架构图如何剖析,从外围到内围,从左到右。外围都是用户,数据的生产者,内部是数据的消费存储者;左边都是数据处理的源头,右边到达大数据平台,是大数据的分析。经过大数据的分析,为运营和产品提供优化方向,进一步提供更好的产品、商品、活动,提高GMV、DAU等。

1.2 淘宝App架构

在这里插入图片描述
淘宝APP通过插件的方式引入各个业务模块,实现轻量级可插拔的系统。上半部分未业务部门模块,通过下面的bundle模块和基础模块组合而成,很像乐高,比如手机淘宝,聚划算,淘点点,农村淘宝等。下半部分分为:Bundle为公用的业务模块,比如商铺、购物车、商铺详情等;底层bundle为基础功能模块,比如扫码、路由、热修复等。

在这里插入图片描述
单个Bundle内部架构,淘宝分为多个App,比如淘宝、天猫、聚划算等。每个App的架构都是一样的,分为业务层、核心层、基础层。

APP由URLRouter来解耦各个Bundle的互相引用。比如通过路由taobao://car可以访问到购物车模块,不管是Native还是H5都是用的同一个路由,通过参数区别调用Native还是H5,这样子就可以通过Server端下发参数的形式,或者App内部策略来实现降级(比如Native crash 连续crash2次以后,这个页面用H5打开)。并且不需要引入跟个类的头文件,通过Protocol接口的方式实现。

1.3 Flutter架构

在这里插入图片描述
Flutter为Google出品, 用Dart语言编写,实现一次编写,实现跨端运行iOS,Android。因为React-Native是通过iOS WebKit的bridge,Android的V8引擎来解析H5,最后生成纯Native代码,性能多多少少有点被诟病。Flutter解决性能问题,并且兼容Google下一代Web操作系统。所以阿里巴巴、腾旭、字节跳动都早早的入局Flutter。

1.4 大前端未来

在这里插入图片描述
Flutter这些跨端的技术,相对还有代码维护的噩梦。比如很多老代码都是推倒重来,现在Google,Microsoft都在大力收购无代码编程公司。详情可以参考下面链接。
https://www.softwaretestinghelp.com/low-code-development-platforms/

1.5 初创团队如何选型

在这里插入图片描述
初创公司如何选型?这里举阿里巴巴淘宝和腾讯QQ的例子。

  1. 回想2003年淘宝的第一版本。马云老师说1个月之内要上线,技术团队考虑多方位因素以后,决定花了XX美金买了一个PHP电子商城网站。
  2. 腾讯2000年版本的QQ,实际上就在ICQ的基础上做了一点微创新。ICQ没有把数据存储到服务器,只有存在用户本地机器。对于当年比较落后的国内环境来说,绝大多数人只能去网吧。所以QQ实现了聊天记录上传到服务器,在任何电脑登录都可以看到聊天记录。

总结,初创团队一定要从多方位要素考虑产品选型。切记不要照抄现在大厂,找个最合适的Miss 或者 Mr Right。

2. 选型需要考虑什么要素

在这里插入图片描述
产品如何选择:

  1. 选择Native元素开发实现(iOS, Android), 还是通过React Native, Flutter来实现。
  2. 实现HTML5 不受APP限制
  3. 实现微信小程序,目前只能在国内用,并首先与微信的审核。

在这里插入图片描述
需要考虑各种产品的优劣,笔者写了另一篇文章,详细描述。请参考:
移动端产品iOS, Android, 小程序, H5, 混合开发优劣对比

3. 笔者推荐初创公司选择React-Native

在这里插入图片描述
React Native的编程语言为H5,市场上有很多前端开发者,成本比较低。可以看到JavaScript(UI)绿色部分未开发人员开发的部分;黄色Android Bridge, iOS Bridge 会有少量的与Native交互;蓝色部分未组件化开发,要到SDK级别才会接触。

在这里插入图片描述
笔者写了React-Native的入门文章,详细请参考:
实战ReactNative 从入门到精通 重要技术解析,5分钟搭建iOS, Android App 实战一

感谢观看
在这里插入图片描述

©️2020 CSDN 皮肤主题: 书香水墨 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值