Web Components：原生组件化开发新趋势——一个从外包跳槽甲方的Java程序员的自白
去年十月的一个周五晚上，我坐在杭州文一西路租住的单间里，窗外下着小雨，桌上泡面已经凉了。老婆在老家刚发来消息：“爸妈说隔壁老张家儿子回县城开了个奶茶店，一个月能赚八千，还照顾孩子。”我盯着屏幕苦笑了一下，手指无意识地刷着脉脉，看到一条帖子标题写着：“35岁前不进大厂，只能回老家？”
那一刻，我月薪22k（税前），比三年前在外包公司那会儿的15k涨了不少，但房租3500、通勤两小时、加班到九点是常态。更重要的是——我好像离“技术”越来越远了。
从外包到甲方：我以为进了天堂，其实只是换了个牢笼
三年前，我终于从外包公司跳槽进了某一线互联网大厂做Java后端。当时HR电话里说“我们这边是核心业务线”，我心里乐开了花——终于不用再被客户指着鼻子骂“你们外包的代码怎么又崩了”。入职第一天，我穿着新买的衬衫，在工位上偷偷摸了摸MacBook Pro的触控板，心想：这下稳了。
可现实很快打了脸。
我的日常工作变成了：改需求、联调前端、查日志、写PRD、开站会、配合测试……偶尔还要帮产品同学解释“为什么这个功能不能明天上线”。有一次产品PM拍着桌子说：“你们后端能不能快点？用户等不及！”我默默喝了口冰美式，心里嘀咕：“你倒是先定好需求啊，上周三改了四版，现在怪我？”
更让我焦虑的是——技术成长停滞了。
虽然每天都在和Spring Boot、Redis、Kafka打交道，但都是“用”，而不是“懂”。有次面试实习生，我问了个问题：“Web Components和Vue/React组件有什么本质区别？”对方支支吾吾答不上来，我本想装个X，结果自己也卡壳了。回去翻资料才发现，我对这个“原生组件化”的概念居然一知半解。
那天晚上回家，我在地铁上刷知乎，看到一句话：“当你开始只关心CRUD和OKR，你就离技术边缘化不远了。” 我心头一紧——这不就是我吗？
面试题里的Web Components：差点成了我简历上的“污点”
今年年初，我偷偷投了几家老家省会城市的公司，想着万一不行就回老家发展。其中一家做智能硬件的甲方公司约我二面，技术总监是个四十多岁的老哥，看起来很和善。聊到前端集成时，他突然问我：
“你们系统有没有考虑过用Web Components做微前端拆分？比如把支付模块、用户中心做成原生组件，不同团队独立维护？”
我愣住了。
我脑子里飞速闪过几个关键词：Shadow DOM、customElements、slot……但就是串不起来。我硬着头皮说：“我们目前用的是iframe+微服务，Web Components……呃，理论上可行，但浏览器兼容性可能有问题。”
他点点头，没说什么。但我知道，这题我挂了。
回家后我越想越不甘心。翻出简历一看，“熟悉前后端分离架构”、“参与微前端方案设计”——这些话写得冠冕堂皇，可真要深挖，连Web Components这种原生能力都说不清，不是打脸是什么？
那天晚上，我泡了杯浓茶，打开MDN文档，决定从头学起。
Web Components到底是什么？一个Java程序员的入门笔记
说实话，作为后端出身，我对前端一直有点“敬而远之”。总觉得React/Vue这些框架太花哨，动不动就“声明式”、“响应式”、“虚拟DOM”，听得头大。但Web Components不一样——它是浏览器原生支持的，不需要任何框架！
简单来说，Web Components让你像写HTML标签一样，定义自己的组件。比如你可以写：
<my-button primary>提交</my-button>
然后通过JavaScript注册这个组件：
class MyButton extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>/* 样式隔离 */</style>
<button class="btn"><slot></slot></button>
`;
}
}
customElements.define('my-button', MyButton);
三个核心技术：
- Custom Elements：自定义HTML标签
- Shadow DOM：样式和DOM隔离，避免污染全局
- HTML Templates：用
<template>预定义结构
最打动我的是——它完全解耦于框架。你可以在React项目里用，也可以在Vue里用，甚至纯静态页面也能嵌入。这对甲方公司太友好了！想象一下：产品团队要做一个“活动弹窗”，前端A用React写了个组件，但另一个团队用Vue，还得重新造轮子。如果用Web Components，大家直接复用同一个<promo-modal>，连npm包都不用装。
项目实战：我在内部工具中试水Web Components
上个月，我们部门要做一个内部运营平台，需要嵌入多个第三方系统的UI模块（比如风控看板、用户画像）。以前的做法是让各团队提供iframe链接，结果性能差、样式乱、通信难。
我主动提议：“不如试试Web Components？每个团队输出一个.js文件，我们动态加载就行。”
老大将信将疑：“靠谱吗？别又搞出兼容性问题。”
我说：“现代浏览器基本都支持了，IE我们早就放弃了，对吧？”
于是我和前端同事搭了个最小原型：用Web Components封装了一个“数据卡片”组件，支持传入JSON配置，自动渲染图表。部署后，其他团队只需在页面加一行script和一个自定义标签，就能显示数据。
效果出奇的好：
- 加载速度比iframe快60%
- 样式完全隔离，再也不怕别人CSS污染
- 通信通过
dispatchEvent和addEventListener，清晰可控
最让我感动的是，产品同学跑来跟我说：“这个卡片能不能加个‘导出PDF’按钮？”我改完组件发布新版本，所有引用方自动生效——零沟通成本！
那一刻，我突然觉得，技术真的能改变协作方式。
回老家？还是留下？Web Components给我的新视角
上周六，我和老婆视频。她问我：“那边工作咋样？要不回来吧，房价才六千，咱们首付够了。”
我沉默了一会儿，说：“再给我半年时间。我想把这块技术吃透，说不定能带团队做点不一样的东西。”
其实我心里清楚：回老家未必是退路，也可能是新起点。但如果现在回去，带着一份“只会CRUD”的简历，和那些本地小公司谈“微前端”、“组件化”，大概率会被当成吹牛。
但如果有实打实的项目经验，能把Web Components落地到真实场景，哪怕在小城市，我也能成为稀缺人才。毕竟，真正懂“跨团队复用”、“前端标准化”的人，永远有市场。
给同行的建议：别让简历变成“需求文档”
回想我当初写简历，满篇都是“参与XX系统开发”、“负责XX模块接口”。看起来很充实，但一问细节就露馅。现在的我，会在简历里写：
- 主导内部UI组件库建设，基于Web Components实现跨框架复用，减少重复开发30%
- 设计事件驱动通信机制，解决微前端环境下组件间数据同步问题
- 输出组件接入规范文档，推动5个业务线落地标准化方案
面试官爱听的不是你“做了什么”，而是你“解决了什么问题”。
如果你也在焦虑技术深度，不妨从一个小方向切入。Web Components可能不是最火的，但它足够“原生”、足够“底层”，能帮你理解前端组件化的本质。而且，它正在被越来越多的大厂采用——Google的Material Web、GitHub的Primer Components，都是基于Web Components构建的。
最后一点真心话
写这篇文章的时候，已经是凌晨一点。窗外雨停了，杭州的夜很安静。我忽然想起三年前那个挤在外包办公室、被客户骂到不敢抬头的自己。现在的我，依然会加班，依然会被产品催，但至少——我找回了一点对技术的热情。
Web Components不会让我年薪百万，但它让我明白：无论在哪，只要持续学习，你就有选择的权利。
回不回老家？我不知道。
但我知道，如果哪天我真的回去了，我希望带回去的不是一个“逃兵”，而是一个能带回新思路、新技术的人。
共勉。
后记：如果你也在外包、也在焦虑、也在考虑“要不要回老家”，欢迎留言聊聊。技术人的路不好走，但至少，我们不是一个人在战斗。
评论 0