不安分、爱挑战的“折腾”之旅
我是李焱， 来自成都漫极客科技有限公司。 我于 2010 年从北京大学毕业，获得信息管理系学士学位以及计算机软件学士学位。毕业之后，我在酷我音乐商务组从事 web 开发，主要负责公司广告系统、VIP 会员等级体系、音乐盒内弹窗等业务。
两年之后，我觉得前端开发技术难度比较小，而且浏览器兼容性问题很大，大部分时间都是纠结于一些莫名其妙的 bug，不值得继续做下去，选择在后端深入下去。然后，我跳槽去了人人游戏，加入钢铁元帅项目组，做游戏后端开发，用到的技术主要包括网络协议、服务器缓存、并发、数据库优化等。北京天气很差，我常年犯鼻炎，于是一年之后选择南下回成都。当时觉得成都的互联网环境还不太好，所以我在 2014 年去了深圳腾讯，在 MIG 无线合作开发部门，做应用宝相关开发工作，对大厂的产品设计、需求评审、开发、提测、部署上线等整个研发流程以及敏捷开发有了深入认识。
2015 年，成都创业公司的朋友联系我，希望由我带领大前端技术团队，我就回成都了。在公司，我主要推进公司前后端分离，逐渐用 React、Redux、React Native 等技术架构统一 Web 前端、Android、iOS 三端，以及微信平台开发。一年之后，公司的原 CTO 离职，工作交接给我， 我继续带领后端团队做微服务，推动 CI / CD 相关工作，把服务迁移到阿里云等。
2017 年 5 月底，我离职创业，成立漫极客科技有限公司。公司口号是“用科技优化生活”，致力于用技术提高人们工作效率、改善人们生活质量。公司英文名是 MagicFun.AI，其中 fun 既是有趣的意思，又是编程里面 function （函数）的缩写。我们希望自己扮演的角色是“由 AI 技术等赋能的神奇有趣的函数”，帮助用户快速成长发展。公司目前业务主要包括在线IT教育、IT咨询，以及企业定制开发包括 Web 、APP、微信公众号、小程序、数据分析和可视化等。此外，我们目前在准备开发一个深度增强学习和游戏相结合的项目。
多重因素，开启大前端之路
刚毕业的时候，其实不太懂什么叫前端。有师兄建议从前端做起，理由很实在：做后端的全是男生，前端有女生，还有 UI 设计师基本都是女生。
同时，现在的前端已经远非用用 jQuery 和写个页面，然后解决一堆坑爹的浏览器兼容性问题了——而这些是我当时刚接触的时候的常态。前端技术越来越复杂，有不低的技术门槛。同时，前端越来越重要，能做的事情越来越多，比如微信开发、APP、Desktop、AR / VR 等。
更重要的是，我认为，前端更接近产品本身，能直接跟用户、产品经理、UI 设计师、市场等沟通，有利于自己全方面发展。后端发展会越来越“云化”，我的判断是，以后后端程序员会分两大类，一类是做云的， 一类是用云的。尤其是随着 Serverless 等技术的发展，在产品规模比较小的情况下，可能都不需要专门的后端程序员——或者依赖很小。
“大前端”，以何为大
说到前端，一般大家还都是指的 Web 开发。其实现在 Web 能做的事情已经非常多了。
WebRTC 语音视频通话
WebRTC 其实是一个开放标准，在浏览器里面可以直接做视频聊天或语音聊天。目前的浏览器支持情况也是十分好的，包括较新的 iOS 11，下图是 WebRTC 的浏览器支持情况。
（点击放大图像）
图片来自 https://caniuse.com/#search=webrtc
P2P CDN
WebRTC 能够做端到端的通信，也就能实现P2P技术。 目前已经有人基于这个实现了 P2P CDN，这可以节省很大的成本，比如 Serverless CDN 。
AR/VR
浏览器里也是可以实现AR/VR 效果的。WebGL 支持3D ，在此基础上有ar.js 的开发库， 可以比较高效的写出 3D 程序。刚刚说过，WebRTC 可以调取摄像头，摄像头结合3D就能做出AR和VR效果。 https://aframe.io 是火狐开发的专门做 AR/ VR 的框架。
这里有一些其他的 AR / VR 方面的参考资源：
- https://github.com/jeromeetienne/ar.js
- https://webxr.io/webar-playground/app/
- https://webvr.info/
大型3D游戏
浏览器一直有个很重要的问题，就是性能问题。现在，Web 技术已经可以在浏览器里面做大型 3D 游戏，下面是一些链接 demo，大家可以查看一下。
- https://www.awwwards.com/22-experimental-webgl-demo-examples.html
它主要用的技术，
- 一是WebGL，通过 GPU 加速，能快速渲染 3D 图形；
- 二是 asm.js 和 WebAssembly ，通过 Emscripten 编译器，把普通的 C++ 代码编译成 JS 的子集 asm.js，性能能够达到 C++ 原生代码本地速度的 50% ，后来Google、Mozilla、Apple、Microsoft等几家大公司又一起制定了 WebAssembly 标准，更进一步提升了性能，也得到更多浏览器的支持。
关于 asm.js 和 webassembly 的更多细节, 可以参考我最近撰写的一篇博客， https://magicly.me/fe-hpc/asmjs-and-webassembly/
webassembly的浏览器支持程度也是非常高的了，新版的火狐、Chrome、iOS、IE、Opera等都支持，如下图。
（点击放大图像）
机器学习
前端也可以做机器学习方面的内容，这里我提供两个参考链接给大家。先进个是李飞飞的高徒 Andrej Karpathy 开发的 ConvNetJS 。第二个是谷歌刚刚开源不久的 deeplearn.js 库。两个库都可以直接在浏览器里训练深度神经网络。
- http://cs.stanford.edu/people/karpathy/convnetjs/
- https://deeplearnjs.org/
前面提到的Web技术都是运行在标准的浏览器里面的，现在还有很多Web技术是运行在封装之后的浏览器内核里比如 Electron 和 NW.js ，比如桌面端的微信开发工具、Slack的桌面版本、桌面版Github等，还有一些已经不完全是运行在浏览器里的了，比如微信小程序、React Native、阿里去年开源的Weex等。
Web 技术一统三端开发实践
我认为的大前端应当包括以下内容：
- Web/H5
- APP（Android、iOS）
- 微信开发
- Desktop 端
- 数据可视化
- 视觉设计
- 新的人机交互技术，包括语音识别、计算机视觉、AR/VR 等
Web 是现在最流行的真正做到跨平台运行的技术平台：PC、Web、手机、手表、TV、Kindle、电冰箱……
Any application that can be written in JavaScript, will eventually be written in JavaScript. -- Atwood’s Law
下面介绍一下我们用 Web 技术统一三端的技术。
Web/H5
我从 2011 年开始关注 HTML5，HTML5 的功能越来越强大，新特性一直在涌现，包括原生支持 video、audio、WebRTC、WebGL, push notification、离线存储、service worker、webworkers、webassembly、PWA以及 Chrome、FF 等 addon 技术，增强 Web 能力。
Node.js
我认为 Web 的繁荣起源于 V8 引擎的出现，大大提高了 JS 的运行效率，然后 Node.js 的出现，使 JS 摆脱了只能写写页面动画的局面，然后各种构建工具、脚手架、开发框架等纷纷出现。比如现在的Ng、React、Vue等框架。
APP
RN 出现的时候，我们跟进了很长一段时间，觉得可以用在生产环境，我们先让 iOS 团队试用。当时的问题是，iOS 开发人员觉得这种技术性能有问题，同时跟平时开发习惯完全不一样，包括一开始写标签写 JS 很痛苦，之前都是在 Xcode 直接拖拽就能快速生成界面，用 CSS 和 JS 效率还太低。强行推下去一个月左右，大家就熟悉了，觉得用起来很方便，动态更新能让改动之后立马看到效果也很方便，大家就都接受了。三个月后，iOS 做得差不多了，也踩过坑了，我们就让安卓同学用 RN 重构代码。最后我们实现的效果是，安卓跟 iOS 基本上 50% 代码是公用的。
要用web技术做app开发，除了RN还有几个其他的选择，比如 PhoneGap/Cordova、Ionic、Weex。
- http://ionicframework.com/
- https://facebook.github.io/react-native/
- https://weex-project.io/cn/guide/
微信开发
然后出现了微信小程序。我们是先进批拿到微信小程序体验码的，看了之后发现它跟 RN 的思想很像。我们在原生的小程序接口上面做一层封装，得接口更接近于React，然后把之前的 HTML5 页面以很低的成本迁移到微信小程序。
PC 端
我之前没怎么做过PC端，最近刚好有个项目需要做 PC 软件，我先进想到的还是用 Web 技术去做。我做了调研，了解到一个是 NW.js ，一个是 Electron 。分析之后，我觉得 Electron 比较新，并且在它基础上已经有几个比较重量级的项目成功了，比如 Atom 编辑器、微软的 VSCode、Slack 桌面端、GitHub 桌面端等。
所以我们选择用 Electron 实现。
数据可视化
后端管理系统，包括统计报表、指标曲线等等，我们用的是百度开源的可视化框架 Echarts 。
另外我们也用过 D3 ，它是一个更灵活功能更强大的开源框架，专门做数据可视化。
AR/VR
去年VR特别火，我们也做过 360 度全景视频等，主要用到了 WebGL。 WebGL 是比较复杂的，我们是基于别人封装的库 Three.js 做的，一句话，很好很强大。
前面所说的，基本覆盖了我用Web技术开发过的东西，包括HTML5、APP、微信开发、PC 端开发、数据可视化、AR / VR等。
js性能的问题
很多人会怀疑 JS 的性能问题，比如它是单线程的、它是动态语言。怎么解决这些问题呢？
首先，JS 的性能已经很好了，大部分情况下，如果是简单的 Web 开发，已经没有什么瓶颈了。
另外一方面，像 webwokers 并发技术、WebAssembly 将原生代码编译成 JS 执行的技术以及利用 WebGL 做 GPU 加速技术的出现，基本上已经解决了 JS 的性能问题。
部署架构
最后说一下我们的部署架构。
如果是 SPA 这种单页面，基本就是把 index.html 部署到 nginx 后，其他打包部署到 CDN，包括JSS、CSS、图片、字体等。打包内容会用 WebPack 自动加上文件内容哈希码，然后把Cache-Control的max-age设置成很大，这样能够充分利用浏览器和 HTTP 协议的缓存，又能保证及时更新。
为什么 index.html 不放到 CDN ？因为如果CDN 缓存清除不好的话，入口文件没有更新就会导致所有的资源都更新不了，这是个很严重的问题。
如果觉得上面的方式首页白屏时间比较长的话，我们会选择 nginx 后端部署 Node.js 做服务端渲染，解决首页白屏时间过长的问题。或者也可以用 Gatsby 、 next.js 之类静态生成工具提前生成静态页面，等待首页加载完成之后，再去动态加载其他页面。
最近我看到几个项目，是把所有的项目全部部署到 CDN 的，他们提出了一个叫 JamStack 的架构，感兴趣的可以了解一下。
最后就是前后端分离。前端只负责页面和前端效果的实现，开发之前先制定好API接口，接口我们用 RAP 来管理，前端自己用 JSONServer 模拟数据，所有发布都是打包传到 CDN 上去。这样的话就会有跨域问题，我们用 CORS 解决。CORS 的浏览器兼容也做得挺好了。
