专栏首页腾讯NEXT学位漫极客 CTO 李焱:大前端之路 - 如何用Web技术一统三端(Web、Desktop、Mobile)开发

漫极客 CTO 李焱:大前端之路 - 如何用Web技术一统三端(Web、Desktop、Mobile)开发

不安分、爱挑战的“折腾”之旅

我是李焱, 来自成都漫极客科技有限公司。 我于 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 的浏览器兼容也做得挺好了。


本文作者:赵新龙Frank

原文链接:http://www.infoq.com/cn/articles/web-desktop-mobile-frontend-develop

本文分享自微信公众号 - 腾讯NEXT学位(NextDegree)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2017-11-03

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 小游戏内存优化与性能优化

    ? | 导语 听说你的小游戏内存超标?进来了解一下吧。 本文主要跟大家一起来探讨一下Cocos Creator小游戏开发过程中内存优化、性能优化和包体优化。 ...

    腾讯NEXT学位
  • Python工匠:数字与字符串(上)

    “ 编程某种意义上是一门『手艺』,因为优雅而高效的代码,就如同完美的手工艺品一样让人赏心悦目。 ” 致“匠人” 数字是几乎所有编程语言里最基本的数据类型,它是...

    腾讯NEXT学位
  • 干货| WEB安全漏洞之SSRF

    “ ? ” ? 什么是SSRF 大家使用的服务中或多或少是不是都有以下的功能: 通过 URL 地址分享内容 通过 URL 地址把原地址的网页内容调优使其适合手...

    腾讯NEXT学位
  • 「无文件」攻击方式渗透实验

    前几天看了一个文章《全球上百家银行和金融机构感染了一种“无文件”恶意程序,几乎无法检测》,觉得powershell很是神奇,自己希望亲手实验一下,以最大程度还原...

    FB客服
  • 前京东陌陌高级架构师的直播笔记分享(Java 内存问题排查和解决:内存概览,内存问题出现的原因,问题代码,案例分析)

    上一周我有幸观看了高级架构师李国讲师的直播,内容是关于 Java 内存问题排查和解决。

    RendaZhang
  • PE知识复习之PE扩大节

      上面我们讲了,空白区添加我们的代码.但是有的时候.我们的空白区不够了怎么办.所以需要进行扩大节.

    IBinary
  • Spring+SpringMVC+MyBatis+easyUI整合优化篇(十四)谈谈写博客的原因和项目优化

    阶段总结 又到了优化篇的收尾阶段了,这其实是一篇阶段总结性的文章,今天是4月29号,距离第一次发布博客已经两个月零5天,这两个多月的时间,完成了第一个项目ssm...

    我是十三
  • Require.js配置全局和配置非amd规范JS

    我们来说全局配置,我们知道导入require.js之后会设置data-main属性来执行入口文件,然后再入口文件中进行require的配置。

    小明爱学习
  • NIO DirectByteBuffer 内存泄露的测试

          写NIO程序经常使用ByteBuffer来读取或者写入数据,那么使用ByteBuffer.allocate(capability)还是使用ByteB...

    小程故事多
  • 让你的「微信小程序」运行在Chrome浏览器上,让我们使用WebStorm

    「微信小程序」的开发框架体验起来,还不错——自带了UI框架。但是问题是他的IDE,表现起来相当的糟糕——其实主要是因为,我当时买WebStorm License...

    Phodal

扫码关注云+社区

领取腾讯云代金券