大前端战略-从Weex开始

Posted 2021-04-29 瀚林府

  小程序达到 10 亿用户、苹果全面拥抱 PWA、谷歌收紧     非公开 API 使用，   一切迹象都表明，移动 Web 的时代全面到来了。

在 5 年前，尝试了 Sencha Touch+PhoneGap 来开发跨平台的移动端 App。因为性能达不到要求，开发成本，生态环境，硬件性能等等原因。最终，我们全面转向了移动 (Native) 开发。

现在的整体的技术趋势是大前端。似乎需要移动 (Native) 开发者也能具备前端开发的能力，成为大前端开发者。但是令人忧心的是，有不少移动 (Native) 开发者之前根本没有开发前端经验。那我们应该如何拥抱变化，拥抱大前端呢？

  选择 Weex 开发一个实际简单的项目是一个很好的开始。

为什么是 Weex？

Weex 是阿里自研的、高性能、跨平台、移动开发框架，最大的特点是解决了频繁发版和多端研发两大痛点，一套代码适配 android、ios、 移动 Web、PC Web 等多端，极大地解放开发者的同时又保证了用户体验

但是 Weex 令人诟病的问题也很多：担心有人生没人养、文档不全、文档不够友善、坑多、Issue 没人解决、生态环境等。

文档不全那是你要找对地方：https://weex.apache.org/

坑确实有一些，不过你要是学会看源码了解原理也不成问题。Weex 生态环境确是需要慢慢培养，可用的轮子相对有点少，所以现在还是 Apache 孵化项目。

另外 Weex 也需要大量的 Native 实现，作为 Native 开发者在 Native 你有很强的参与感。

什么实际项目是适合的简单的呢？

我们用 Weex 来做一个 App 吧？是新 App，还是旧 App 重做呢？重做的话显然工作量太大了。不如把旧 App 的某些页面，比如有动态化需求或者本来就是 H5 做的改成 Weex 吧，从一两个页面开始。这个我认为是合适的。

选择的页面本身业务不能太复杂，需要尽量简单作为一个开始。这个我认为是简单的。

因为是现有 App 项目的实际页面，那必然是一个实际项目，且还有一个非常明确的目标：体验和功能要和原来 Native 的一致。

• Weex 在 Native 层的三个重要概念

• Components UI 组件

• Modules 功能模块

• protocol/adapter 部分功能需要接口实现或扩展

• 为了跨平台

• Native 层面需要 iOS 和 Android 各自实现相同功能

• 需要 iOS 和 Android 的 Native 开发者都参与

• Vue 部分并不是很困难，Native 开发者也可以搞定

不考虑使用 Scss、Less、PUG 等，直接写 css、html、es6

值得一提的是：

需要考虑好高度的适配。比如 iPhoneX 的刘海，比如 status bar，比如 navigation bar，比如 tab bar。按照我们首页的例子，我们的 Weex 页面等同于整个屏幕，我们使用 JS 代码动态的流出了顶部和底部区域，理由是这样最为灵活。

开始写业务代码

• 一定要了解 promise

• 可以不使用 async/await

• 学以致用 Vue、CSS、CSS animation、ES6

• 网络请求一个好的推荐 Weex-axios

• 如果有点追求的话，建议加上 ESLint

• 在 js 中断点你可以在代码中写 debugger

摆弄你的代码，实现原来的功能。当中可能会遇到很多问题，那些不是坑，而是你可能对前端不了解。克服这些问题，你才能再进一步。

发现问题，解决问题

• 比如你可能会发现图片加载不出，原来是需要在 Native 实现一个协议

• 比如有些 UI 样式或组件 Weex 不支持，我们可以扩展 Components

• 比如我有分享功能该怎么实现？你可以使用你原来 Native 的分享代码，使用 module 封装给 JS 使用

• 比如埋点怎么埋？Native 包装，或者 JS 自己实现，或者 JS 加载一个可用的库

• 比如 Native 暴露的异步方法和同步方法的区别

• 比如线程问题，看看源码你就明白了

• 比如一些组件想复用，你可以学习 Vue 的组件开发方式，自己封装

• 比如解决嵌套滚动手势问题等。解决不了，改源码吧。本来在 Native 层面也是老大难问题，所以不要想 Weex 就帮你简单搞定了。

• 比如要改源码。源码是一定要改的。不是因为 Weex 烂，而是很多东西是你们自己业务特有的，人家也想不到。改源码的话，尽量扩展吧。然后要保留官方 git remote，将来还有机会升级。

值得一提的是：

为了高性能，要尽量避免 Weex 和 Native 通信。module 尽量不要使用同步方法暴露。

准备上线了，代码下发怎么做？

可以参考的东西不少，全在网上。bundle 包放在哪里，目录结构是怎么样的，都可以自定。

代码下发服务是我们自己做的。对的，使用 Node 写的。这才叫真正的全面拥抱大前端吧。

最后发现，我们写了不少 iOS，写了不少 Android，写了 Vue，工作量是 1+1+1=3。但是随着时间，项目更迭，components 和 module 还有 Vue 组件的积累。最终工作量会变成 1。

在一个实际的简单而又不简单的项目中，作为 Native 开发者你有自己的用武之地，也能有机会逼迫自己离开自己的舒适区去一个陌生领域学习，并且学以致用。以 Weex 开发经历为基础去了解更多更广泛的前端知识，比如：Webpack，TS，Scss，Stylus，Less，Babel，CSS3，PUG，ESLint，NPM，Karma，Vue，React，Angular 等等。