游戏“头号玩家”：像做游戏一样做Web开发
Editor's Note
The following article is from HaloTech瑶光栈 Author HaloTech
嘉宾介绍：dexteryy 来自字节跳动，负责打造下一代应用开发工具套件。他希望应用软件的开发可以像游戏行业一样高效、低门槛、且富于创造力。
作为国内最早一批 Web 前端从业者，dexteryy 熟知 Web 开发的来龙去脉，去年曾在台北 JS 开发者大会分享过“现代 Web 开发的现状与未来”，这给从业者很多启发。实际上，dexteryy 并非 CS 科班出身，他开始写代码这个事情也说来话长，可能要从更早时候讲起。
“说说小谎、泡泡网吧”的游戏少年
dexteryy 并不是通常意义上的“好学生”。
从小学二年级开始，他就不怎么做作业，每天放学后编造“小谎言”泡在街机厅里，辗转街头巷尾的“电脑房”。
也许，父母以为玩电脑的兴趣会让他爱上编程，四年级时送他去培训班学习 QBasic。
dexteryy 却感觉写出来的程序没有意思，之后不再接触编程。
即便如此，在小升初的考试中，他却阴差阳错地考了不错的成绩。下意识里，他在本该努力学习的中学时期保持了“花费更多时间玩游戏”的习惯。从游戏杂志上，dexteryy 了解到欧美奇幻文学和“龙与地下城”，他在网络上找到爱好者网站，看了《龙枪编年史》，沉迷其中，对架空世界设定集滚瓜烂熟，硬盘上存了大量资料，为后来做网站打下基础。
高考成绩不佳，专业选择范围有限，dexteryy 选了感觉跟计算机关联最多的"教育技术学"，很多年后他意外的发现对现代 JS 影响深远的 Douglas Crockford 也是这个专业。
大一暑假期间，dexteryy 重新搭建个人网站“最深的地下城“，如愿实现了拟物 UI 和游戏化结构。dexteryy 说：“这个网站很长一段时间是华语圈最大奇幻/TRPG 资料站，很多经常访问网站的人后来入行做起了游戏设计。”
他接着说，“最深的地下城”是用 PHPArticle（CMS）搭建的，页面模板是用 Dreamweaver 做的。大学期间，他只写过两种代码，一种是脚本，对数据库内容做批量替换，另一种是在魔兽世界早期版本里写 Lua 的宏。
资深玩家游戏价值观—体验&虚拟
闲暇时间，dexteryy 喜欢打游戏，最喜欢 PC 平台的模拟游戏、策略游戏、角色扮演游戏。
谈到奇幻类游戏，他说：“我只玩施法者（Spellcaster）角色，真正梦想的职业是大法师（Archmage），所以在现实世界中选择了最接近施法者的职业——程序员。” 他希望像玩游戏一样，自由选择、对自己负责，去自主体验世界和推进个人成长。
“在我看来，游戏最大的价值在于‘体验’。它让玩家可以成为市长、罗马皇帝、匪帮、星际舰队指挥官、神，等等，让人体验核战末日后的生存、多元宇宙中心的思想碰撞、替代历史、赛博朋克等世界观和文化艺术，体验史诗故事、传奇场面、细分领域和各种选择的后果，相当于经历更多人生和可能。”
dexteryy 接着说，“另一大价值是‘虚拟’，‘真实’往往只能存在于‘虚构’之中，这个价值延伸出来就是‘学习’。游戏一方面提供模拟实践的场所，用简化的环境和过程来突出实践的重点和可能性，一方面通过艺术性、奖励回报等正反馈让玩家对游戏中的相关事物产生好感和兴趣，去学习钻研一些原本枯燥的东西，扩大视野和掌握跨领域知识。”
他建议，国内游戏产业不应止步于“创造流水、创造娱乐、创造技能”三个初级阶段，而应逐步走向“创造快乐、创造体验、创造文化、创造世界”的高阶时期。
从设计到开发
2005 年前后是 Web 2.0 爆发的时期，也是 Web 前端技术的起点。
dexteryy 每天开始试用各种新产品，从 MSN Space 开始写博客。
偶然一次，他在书架上瞟到 Jeffrey Zeldman 的《网站重构》，站在原地一口气看完大半。
之后，他开始从表格布局转向手写的 HTML+CSS+JS 代码。不像 Java，JS 的即写即现、及时反馈像游戏设计一样，深深吸引了这位少年。在技术还不成熟时，他几乎与业界同步“发明”了三栏布局、滑动门等技术，在工作中引入 Firebug 和 Eclipse，热衷于用 JavaScript 写动画和交互，并主动在公司项目中搞模拟 OS X 的 dock 效果，做企业 Web 桌面、各种 UI 元素拖拽、所见即所得编辑器，等等。
dexteryy 回忆说：“到现在，我还记得是从一篇繁体中文的 JS 技术文章了解到补间动画。从而触类旁通，瞬间领悟到‘简单的指令每秒重复 100 万遍就是魔法’。”
为了加入 Web 2.0 这场革命，他放弃了 ShopEx 等外企的职位邀请，成为土豆网的第一个 JavaScript 工程师。加入土豆后，他开始负责实现所有富客户端功能，比如相册视频编辑器、个人主页可视化设计工具、视频信息流播放器。也做工程建设和语言层面的探索，让 JS 往成熟软件开发技术的方向发展。
2017 年 JSConf CN 大会上，dexteryy 回顾了 Web 开发的发展历程。
在这次访谈中，他将 Web 技术大致总结为以下几个阶段：
超文本时期，主要面向“内容”，是标记语言和超链接技术，把信息/知识连接了起来。
到了 CGI 阶段，一些内容开始动态化，Web 上出现了“内容”和“跳转”之外的功能，开始引入服务器端编程。
模板语言阶段，服务器端编程发展出了针对 Web 的 DSL。HTML 变成目标语言加上所见即所得编辑器的流行，HTML 进一步被架空，变成接近一种数据的格式，人类不可读、机器也不可读。
Web 标准和 Ajax 阶段，业界开始拨乱反正，内容样式行为分离、跨浏览器兼容、前端技术出现。Ajax 的应用让 Web 前端技术从纯内容向富客户端发展。
服务器端 Web 框架阶段，Ruby on Rails 带来的 MVC 架构普及，让服务器端继续统治 Web 开发，前端是其中的视图层和静态文件。
进入前后端分离和移动时代，Node.js 和 npm 的发展补齐了前端技术的工程短板和生态系统，前端程序独立，服务器端开发反向发展，向分布式和大数据下沉。移动互联网带来了多端，进一步促进了前后端分离以及 SSR、BFF 等技术的发展。
组件化和前端 Web 框架时代，前端 Web 框架开始统治 Web 开发，MV* 架构普及，JS 生态爆炸式发展，导致了 JS Fatigue。
现代 Web 开发阶段，也是整合时代，Web 开发范式正在被整体重新定义和抽象，向完善 GUI 软件技术发展，同时也在引领应用软件开发范式的变革。
移动互联网下的新挑战
dexteryy 表示，移动互联网时代的到来，给 Web 开发带来了一些突出的问题和挑战。
首先，Web 开发从以“内容”为主发展成以“服务”为主，这对客户端技术提出更多要求。传统互联网的使用场景是固定且局限的，只适合提供特定领域的“服务”，以消费“内容”为主，移动互联网把使用场景扩展到现实世界的每个角落，把更多事物连接到云端，带来海量的服务需求。此外，移动端设备屏幕尺寸有限，对 UI 交互的复杂度和开发成本提出了更高要求。因为资源限制更多，设备资源有限，网络环境多变，Offline First、SSR 等技术要求变高。
移动互联网时代让客户端不再唯一，传统的单一产品变得系统化，这在服务器端有更强的分层需求，需要 client-agnostic 的微服务。所以，BFF、Serverless、JAMStack 等架构变得更重要。再有，客户端运行环境不再被少数浏览器统治，“Web 平台”暂时分裂为更多的超级 App，以及小程序等非标准的 Web 技术和跨端技术。
以桌面应用开发为例，dexteryy 认为，未来桌面应用的整体占比是越来越低的，但绝对量不会变低反而扮演很重要的角色。PC 桌面本质上是一种沉浸式的人机交互场景，比如脑力工作、大量信息处理、复杂操作、重度游戏、沉浸式的内容消费和社区参与对桌面应用始终是有需求的，并且随着社会的发展和成熟，需求会增加。
目前，适合桌面电脑和大屏设备（比如 iPad Pro）的应用类型，有生产力工具、创意工具、行业应用、各种 SaaS 服务（特别是 B 端 SaaS 平台）、中后台应用，还有沉浸式、时长高的游戏、视频、社区等。
不过，dexteryy 也提出：“当前的桌面电脑和大屏设备可能只是一种过渡，虚拟现实 VR 技术可能触发下一代沉浸体验型应用的爆发式增长。”
所以，相比传统 Web 前端开发者，现代 Web 前端开发者需要掌握一些新工作方式。
现代 Web 前端开发者新工作方式
dexteryy 把现代 Web 前端开发者分为两类，一类是“现代 Web 开发者”，一类是传统 Web 前端开发中偏视觉、体验、可访问性问题转化而来的“前端的前端”或者“前端设计”。
“现代 Web 开发者” 除了要掌握两大传统技能，也就是内容/图形/效果的渲染、跟各种 Web 平台打交道，这类开发者还需要全面负责业务逻辑、软件开发复杂度、工程质量和产品系统架构。
“现代 Web 开发以前端为中心，基于前端 Web 框架。服务器端部分也包含在前端框架之中，是相对很薄的一层甚至可以做到 Serverless 化。而传统 Web 开发是基于后端 Web 框架，前端只是其中一层，”dexteryy 进一步解释，“现代 Web 开发者是产品/应用软件开发者，面向的始终是人类，而更多面向机器和数据的开发工作分化到了更底层。以 JS 为中心的现代 Web 开发，要求原来的开发人员摆脱传统上以 HTML（内容）为中心的思维定式。”
至于第二类现代 Web 前端开发，也就是传统 Web 前端开发中偏视觉、交互、体验、可访问性的同学，他们的过渡形态是通过写组件代码和 CSS 来协作，完全形态是借助以代码为中心的次世代设计工具。
谈到未来 Web 技术发展的问题，他认为引入“去中心化”是大概率的。
回顾历史，可以发现“中心化”和“去中心化”问题一直处于永恒的轮替状态。
计算机技术的早期是中心化的，少数大企业如 IBM 提供大型机，掌握“机器智能”的权力。Apple II 引领的个人计算机革命开启“去中心化”。个人计算机普及后，软件成为最高抽象层级，这时又发展成了中心化，权力掌握在控制操作系统和办公软件的企业手里。随着 Netscape 的出现，操作系统开始被“架空”，Web 成为最前沿，用“去中心化”的方式爆炸式发展。
之后，少数企业依靠网络效应、规模化和暴利发展成了科技巨头（Google、Facebook 等）。他们的产品和基础设施（云）成了新的平台，原有的互联网基础设施被“架空”，互联网再次变得相对中心化。这导致围墙花园、信息孤岛、数据隐私、财富分配、发展不均等一系列重大问题，让天平重新开始倾向“去中心化”的一端。
区块链技术可能只是 Web 3.0 架构形成前的过渡技术，在科技巨头的云之上搭建的公链平台和生态，可能发展成新一代 Web 基础设施，扮演重要角色。
自我重构，发力应用开发变革
和很多人一样，dexteryy 在经历过巅峰期后也进入过一段迷茫期。
在豆瓣，他曾全力开发了 2D 虚拟世界阿尔法城和全套技术栈。开启下一段征程前，他发现自己潜意识里投入了更多精力在应用开发方式上，并不是之前认为的 C 端产品开发。
应用软件开发长期面临一个瓶颈问题，近年已经越来越受重视，且成为热门领域，有很多产品都在从各种角度和切入点尝试解决。dexteryy 指出，这个问题就是软件应用的产生和迭代过程是一种”接力（handoff）“模式，只有应用开发者在跟最终结果/真实产品的代码打交道，真正掌握需求和懂业务的其他分工，比如产品、设计、运营只能间接影响最终的产品。
各工种排好队像接力一样传递自己的输出物，而这些输出物只是沟通工具和对真实产品的”效仿“，这就导致创新和迭代成本较高，质量和效果方面的问题不断出现。
同时，应用开发者需要实现其他职能协作成员传过来的一切。这个单点依赖的环节，消耗了应用开发的大量精力。只在开发环节做基础建设，解决不了根本问题，能实现的提效程度很有限。
与此形成鲜明对比，成熟的游戏开发项目里，所有职能分工比如美术、关卡设计师、游戏客户端开发者等都是基于一套叫作”游戏引擎“的工具套件来工作的。
这种“圆桌”模式是，围绕最终产品的代码，不同分工用专属的工具（美术生产管线、关卡编辑器、IDE…）直接跟代码打交道，游戏开发者可以把精力放在真正能创造价值的地方，比如实现新玩法、特定的图像效果、做新的工具，等等。
这种成熟的游戏引擎模式，不仅存在于大企业的 3A 游戏开发中，小团队的独立游戏也能快速创新。
只从开发环节本身来看，目前也并不完善成熟，前端工程化发展遇到瓶颈。“抽象程度远远不够，很多业务项目还停留在靠样板文件、项目模板、生成器和二次开发来实现工程环境、SSR、状态管理、UI 模式复用的阶段。工程化工具随用随抛，不同项目之间缺乏统一的技术交付平台，使工程建设停留在初级程度，” dexteryy 接着说，“业务代码和琐碎重复的底层技术细节混在一起，让开发者把握不清开发范式的本质和重点，无法专注于价值创造。另外，前端工程化需要工作人员学习熟悉一堆底层细节、配置方式，承担引入解决方案的成本，这导致很多原本有收益、对产品带来竞争力和可能性的技术被降低优先级，错失生态红利。”
dexteryy 所在的团队，目前正全力开发“Web 开发引擎”，他们的愿景是让创造应用软件的过程，像成熟的 3A 和独立游戏行业一样高效、聚焦、低门槛、富于创造力，让少数有限的开发者支撑更多的应用开发需求（用微软的话来说，未来 5 年的应用开发需求会超过过去 40 年），让真正掌握需求、懂业务、懂设计的非开发者也能直接参与产品设计，实现最大程度的提效。
dexteryy 说：“经过摸索和实践，现在我们比较确定这件事情可以从三个方向来推进，分别是开发套件、建站套件、设计套件。”
开发套件面向专业的应用开发者，提供从 meta-framework、部署平台到 Pro-Code/Low-Code 开发助手在内的工具套件。
设计套件面向设计师，帮助设计环节实现 DesignOps（设计工程化），跟其他环节打通，逐步获得能直接控制真实产品代码的工具和更加创造价值的工作方式。
建站套件涉及面比较广，同时面向专业应用开发者，懂技术但不懂专业应用开发的人，以及不懂技术的需求方，本质上是在解决软件开发复杂度问题，把不可避免的复杂度留给专业开发工具，把其他部分解耦抽象出来实现 No-Code / Low-Code 搭建等更高效的工作方式。
三个方向中的每个项目都可以独立使用，快速产生收益并做验证，同时也能整合使用、互相协同，基于彼此实现单个项目做不到的事情。由于把这些事情放在一起来做，就不需要像其他公司一样，去追求其中某个工具或解决方案能覆盖所有场景和形成闭环，而是可以用不同项目不同路径去针对最适合的用户定位和场景，只要最终加起能覆盖所有场景就行。
拒绝闭门造“轮”，拥抱国际社区
dexteryy 本人一直致力于推进 Web 技术的演进，为此做了很多开源项目。
其中的《现代 Web 开发咒语大全》从内容上看非常全面，提供了三条学习路径：学习路径、查找开源库、架构和基础设施。可以说，这是前端的完整知识图谱。
他认为，基础设施完善的情况下，前端同学只需要了解“学习路径”上的全貌和按需深入掌握即可，不用都深入研究“架构和基础设施”里的底层琐碎技术细节，也不应该被“查找开源库”这部分的庞大生态感到困惑和疲惫。
dexteryy 发现，国内技术圈里一直存在“越底层越高大上、技术越好”的普遍谬见。他认为，就像俄罗斯方块一样，软件技术的发展过程就是不断垒加抽象层，最容易最需要创造价值的地方永远是最高的抽象层级。直插底层做革新和填补空白虽然能带来很大影响，但机会少，刻意追求反而高不成低不就。
开源生态、市场上的各种技术中台产品、API 服务、开发工具和平台，相当于为每个独立开发者、ISV 和中小企业提供了科技巨头内部的基础架构工程建设，所以，“多数开发者既不应该固守习惯的初级开发方式，也不应该过度关注底层技术而忽略已有的生态红利和市场环境”。科技巨头内部的开发者也应该对生态和市场有基本了解，避免与世隔绝闭门造轮子、沉浸在扭曲的内部解决方案中，这样不但没引领趋势反而封闭落后。
dexteryy 个人很推崇知识的“整体图景架构”，他认为，“知识等于信息的关联方式，‘整体图景’有利于看到或发现关系，避免过早或不必要地陷入到某个具体信息细节中，它还可以先留下初步认识，从‘不知道自己不知道’的无知进步到‘知道自己不知道’的无知，有助于后续实践中，在信息之间建立起关联，形成知识积累。”
关于开发人员需不需要创建和维护技术博客的问题，dexteryy 认为，方法得当的话坚持写技术博客是有好处的。不能给别人讲清楚的事情，就不算真正的掌握。理想情况下，写技术文章应该像做项目一样，是系统化地推进，持续更新内容，能在某一问题上起指导作用、经受反复引用的。
除此之外，笔记和脑图也是很有效的。特别是脑图，它省去了我们掌握的上下文和具体细节，只梳理自己关心的抽象“关系”。
访谈的最后，dexteryy 还分享了几条经验。
第一条是：“最好的”技术不一定是最适合的，我们并不会简单地选择“最好的”技术，而是选择可以接受的折衷方案(The ‘best’ technology often doesn’t win. We don’t simply choose the ‘best’ technology. We choose the tradeoffs we can live with)。
第二条是 Publish or Perish，是指研究成果不发表就会死亡，技术领域也是一样。但这里的 publish 不仅仅是写篇技术文章、申请专利，还要求全套的、持续投入的社区建设。
第三条是要聚焦和协作，个人的强编码能力并不意味着能把这些事情同时做好做成。
第四条是要多协作交流，保证团队里思维和经验的多样性，避免高估个人的移情思维。
(责任编辑：刘敏)
字节跳动 Web Infra 团队招聘
字节跳动 Web Infra 团队，是服务字节跳动全业务线的前端基础架构团队。目前团队专注的方向包括：
>> 现代 Web 开发解决方案、Node.js 基础架构、Serverless、跨端解决方案、低代码搭建、APM、D2C、Web IDE、Test Infra、终端基础体验、技术中台商业化等等。
作为公司的基础技术团队，我们的目标是提供优秀的技术解决方案，助力公司业务成长，同时打造开放的技术生态，推动公司和业界前端技术的发展。已经在多个地方设立了研发团队，包括 北京、上海、杭州、广州、深圳、新加坡。
团队信息：https://webinfra.org/about
投递方式：webinfra@bytedance.com
邮件标题：应聘+城市+岗位名称
>> 详细岗位信息请点击阅读原文