在字节做前端一年后，有啥收获~

缺乏、安全感 2022-09-01 15:50 222阅读 0赞

> 今天分享这篇，相信读完会有些收获。本文经作者授权转载，原文链接：https://juejin.cn/post/6980671091526074404

点击上方 程序员成长指北，关注公众号

回复1，加入高级Node交流群

# 个人简介 #

19年底12月进入字节实习， 第二年7月毕业转正。到前几天正好全职一周年。

进入公司前在一个普通一本大学的数学院，四年总的来说，折腾了一年前后端PHP + JQuery一把梭，折腾了一年游戏，折腾了一年AI， 最后一年本来打算考研，由于个人兴趣原因放弃，转而到字节专心做前端。感兴趣的可以看这篇标题党：我是如何从双非非科班到大厂程序员的？

目前在**字节跳动国际化电商**团队， 主要做中后台相关的工作。目前团队还在北京、上海、深圳招聘前端工程师，包括但不限于**实习、校招、社招**。感兴趣欢迎翻到**文末**了解**投递信息**。

入职这一年多来做过中台业务、C端业务、B端业务。从0到1做过C端组件库，目前也在折腾procode提效工具。整体而言，还是经历了不少。

# 个人经历 #

## 某中台C端业务 ##

### 经历 ###

正式毕业前做了一段时间的中台支付页面。

彼时项目草创， 需要用服务端提供的shell脚本生成一个id，然后在本地起node服务的时候还需要手动去mock一些cookie，账号之类的， 上线前再把mock代码去掉。

其次是当时开发的Form， 在需求开发中不断加入了新的功能， 代码逐渐变得难以维护。当时准备调研业界的表单方案，做一个重构。一个是当时的前端水平还有限，一个是需求紧张排不上日程。

当时还因为一些页面组件同时承载了多个业务方，到我开发第三个业务方的时候， 需要测试和回归的工作量也进一步加大。所以冒着风险重构拆分， 将公共的部分抽离为公共组件的形式。

### 感悟 ###

当时没有意识到，其实有很多问题反而是一种机会，这受限于当时**的技术视野和能力**。现在看来，可以从研发提效到质量保障推进许多方案。

比如最简单的把需要mock改代码的地方抽离到多环境env文件中，通过自定义webpack-plugin的方式来实现启动时自动生成id号。

比如梳理现有业务并考虑未来变化建设C端组件库。

使用e2e测试对覆盖关键case，确保上线的质量等。

## C端组件库建设 ##

### 经历 ###

在团队启动国际化电商业务前有一段时间的空窗期，感激这段时间的自己，每天像海绵一样吸收团队现有项目中的技术实现，学习相关技术栈，从一个对前端工程化一窍不通到具有一定的认识。

很幸运能在刚毕业的时候就有机会自主对一个C端组件库从技术选型到开发落地，当时调研了公司内外的C端组件库技术方案，结合我们业务的特点整理了一套技术方案。

除了实现组件库本身， 也适当“折腾”了一下，比如当时我们习惯使用的styleguidist不支持移动端预览， 不支持RTL\[1\]、暗黑模式的预览， 为了避免重复去写一些h5 Demo页供UI验收， 使用webpack的别名的方式+自定义展示容器的方式实现了styleguidist在移动端的预览。后面产出了技术分享: 聊聊 React 组件库的技术选型与设计

### 感悟 ###

这段时间面临了较多的技术挑战，在完成工作的同时技术水平得到了快速的成长。搭上了业务快速发展的便车。

# 国际化电商中后台业务 #

## 经历 ##

这是最近半年多做的一块业务， 整体投入到业务中的一个小模块。

技术上接触到了微前端、中后台低代码搭建体系等， 针对中后台常见的表单+表格场景折腾了一个procode代码生成工具，目前正逐步完善中。

业务上开始了解自己负责的业务模块的背景知识、业务数据， 参与业务的中长期规划，合作各方角色的双月目标。和两三名同学一起进行该模块的开发，跟进项目进展。

同时开始作为新人导师带领新人融入团队和工作中。

## 感悟 ##

这个阶段遇到了许多业务之外的挑战， 个人的软素质逐渐成为成长的瓶颈， 对于新人的培养等事情也缺少经验。需要再多思考、多总结， 优化做事情的方式方法。

# 对前端技术的认识 #

个人目前对前端的认识主要是三驾马车：效率、 性能和质量。

通过这三驾马车对业务产生基本的完成需求以外的更大的价值。比如人效的提升可以支撑更多的业务需求， 性能的提升可以提高用户的留存和在漏斗中的转化率。质量的保证能确保用户稳定的体验。

除了业务开发以外的事情，基本都围绕这三件事情来展开。

对于前端体系的认识这里不在展开，已经有太多相关的总结和结构图。

# 对前端工程师的认识 #

一个靠谱的前端工程师不仅需要扎实的技术基础，更需要思考技术对业务的价值。

很多事情说起来很简单， 但少有人能做到， 比如靠谱二字， 比如

*  事事有回应， 件件有着落。
 *  充分考虑工作的优先级， 有序进行。
 *  合理排期， 及时暴露项目风险。
 *  ......

除了技术之外， 还有许多具有挑战的事情， 比如新人的培养等等。

# 工作习惯建议 #

分享一些很普通但有用的工作习惯。

## 每天第一件事情 ##

*  每天上班的时候，我会先看看今天的日程，有哪些必须参加的会议，占用的时间。
 *  然后是清理待办事项，比如目前手上有哪些需求，是否需要和合作的同学沟通当前的进展和排期。
 *  接着估计，今天有多少可支配的时间，按照优先级规划一下今天在不同时间段做的事情。

## 收录 ##

*  首先工作中遇到的一些重要文档，我会收录在一个个人的doc里。
 *  按照和我相关性的高低来分类， 依次是物流 -> 运营平台 -> 麦哲伦电商。
 *  特别是做一个需求的时候，可能会有PRD（产品文档）、服务端技术文档、测试case文档等等，为了避免需要的时候找不到文档，及时收录是非常有必要的。当然如果这个需求需要出前端技术文档，可以归拢到前端技术文档中。

## 开会之前 ##

*  重要会议之前必须认真阅读文档（一般是PRD或者技术方案），做到心里有数，带着问题来参加会议，提高效率。
 *  会上整理TODO， 如有必要发到群里at相关处理人。— 会后将相关文档整理到个人的工作文档集中，确保需要的时候能快速检索到。

# 学习建议 #

## 方向 ##

前期结合自己的工作来学习，优先学目前以及未来一段时间工作用得到的。这样能有更多正反馈，保持学习的动力，同时也能更快地把学习转化为工作上的产出。后期再考虑学得更加系统，建立体系化的知识。好奇心 多一点好奇心，比如工作中为了插入一个icon用到了svg，使用base64的方式无法覆盖它的颜色，通过更改源文件的fill属性解决了问题。那么使用svg还有哪些方式？各种方式的优缺点？如果项目使用了svgr/webpack将所有的svg作为React Component引入了， 这时候有部分svg文件又希望用base64的方式引入要怎么做？等等。再比如，每天都在跑的项目， 是如何配置的？yarn dev背后做了什么。提交的代码经过了CI/CD。我们的项目是怎么配置CI/CD的？这些都可以在完成需求之后， 有余力的时候去学习。我们的项目本身就是一个最好的学习资料。因为它是真正的一些技术在实战中的落地，有疑问可以请教相关同事。

## 深度 ##

一个是你自己切实做的事情，从技术调研、选型到落地， 并产出分享，这是最扎实的。

## 广度 ##

可以用中午休息的时间，会议中间的碎片时间，或者需求之间一些比较休闲的时间来多看看。比如其他部门的周报，了解他们做了什么，公司内外的技术社区等。这些内容简单浏览并不能学得非常深入，但是可以成为你后面做技术调研时候的想法的来源，遇到能借鉴的场景的时候，能想到它们。同时也逐渐对前端技术有一个整体的认识。

## 热情 ##

是否对于技术抱有热情，这可能是非常重要的一点。如果对技术的热情一般，也可以通过学习和工作最相关的技术，转化为在工作中结局问题，来使自己获得充实感。因为有些技术，局限于我们当前的工作用不到，可能很长时间是比较难在工作里运用的，容易打击学习的积极性，这也是为什么更加建议从工作相关的部分入手。

## 开放 ##

需要对技术抱有更加开放的态度，能接受和了解不同的技术选型、技术观点。可以去做一些分享，让其他人来帮你review和提出建议。

## 新人落地建议 ##

每个新人必定经历的就是熟悉公司内的基建， 到能完成中小规模的需求（针对校招、实习同学来说）。在逐渐达到这个能力的过程中，可以从一些简单但是很有价值的事情入手， 做的需求中有没有哪些组件是可以复用的， 抽象成公共组件？如果原来一个组件只是在你的页面上使用，那么它的设计和通用性都没有那么严格，如果是需要作为公共组件，还需要考虑哪些？前期还是集中精力在自己能力范围内写好代码，对于沟通、对业务的理解都可以在能把代码写得相对OK之后再花心思去做， 毕竟成长具有阶段性。同时可以思考自己的长处和短板，发挥长处相对来说比较容易，但克服短板可能是一个长期的过程。就我来说，我的短板在于过于焦虑，这一点从我的经历中可以很明显的看出。最近在慢慢让心态变得平和一些，希望可以克服这个短板。新人比较大的一个问题就是容易有问题不及时沟通， 逞强。这一点我也是这样，有一些同学会做的比我好些。排期上明显不合理，遇到的问题确实自己思考了也无法解决，这时候就要寻求mentor、 其他同事、leader的帮助。

## 关于焦虑 ##

我常常很焦虑，所以关于这个，可能是比较有经验的，主要考虑以下几点：

*  正视自己的成长是有阶段的， 是需要时间的。
 *  对未来需要有计划和预估，但做事情的时候更多关注当下，这样你会更专注，也能减少一些焦虑。
 *  多付出。焦虑本身是一种对自己的状态不满意的心理，如果希望做得更好，首先要接受付出更多。要正视到付出得到回报是有延迟的。就比如各位在进入公司之前也花了一段时间准备和学习，那个时候头上并没有一个距离拿到字节offer还有多少的进度条。所以这件事，还是一个延迟满足的问题。同时，可能要偶尔思考一下付出是否在一个正确的方向。比我我刚入职那会看现在写博客很热，也想着去写一些博客。但是现阶段更重要的还是输入，自己的提高。付出这件事情，考虑清楚优先级和方向，持续投入，然后相信会有回报。

可能网上（主要是脉脉和知乎）会有许多关于前端和程序员35岁的焦虑， 我刚入职的时候也经历过很长一段时间的这个焦虑。所谓狭路相逢勇者胜，我们在自己的这条赛道上付出更多些，做得更好些也就不错了。这个阶段，更多把精力放在适应工作节奏以及个人的成长上面去， 面向未来两三年做规划，关注成长、保持学习即可。

# 一起战斗 #

**字节跳动国际化电商（麦哲伦）团队**招新啦！**校招实习皆可投递，不打杂，可转正，可回捞**！

【加入国际化电商（麦哲伦），美好生活触手可及】 盼望着，盼望着，字节的机会又来啦～就现在！有一个绝好的机会（麦哲伦项目）摆在你面前哦，快来找我内推吧！来这里，你的每一行代码都在影响众多消费者，每实现一个功能都会被商家使用。来这里，你将有机会对接字节跳动全产品矩阵，见证国际化电商业务（麦哲伦）团队成长，支撑公司的收入增长。如果你也想和我们一起探索下一个国际化电商引爆点，在亿万级用户的场景中应用最新技术，解决业界顶尖的技术难题！那就快来加入我们吧！各岗各级，统统都喜欢！最nice的团队氛围和最nice的成长机会，还等什么？快来找我内推！

【岗位类型】：前端/后端/客户端/测试开发工程师等。

【职位地点】：北京/上海/深圳

【投递方式】：发送邮件， 主题格式【名字+手机号码+城市+岗位+实习/校招/社招】到**xushaojun.0@bytedance.com**. 可以**随时发送邮件查询投递进展**，可以加wx: xushaojun0获取简历优化建议、 面试准备建议。

### 参考资料 ###

\[1\]

RTL: https://developer.mozilla.org/zh-CN/docs/Web/CSS/direction

**如果觉得这篇文章还不错**

**点击下面卡片关注我**

**来个【分享、点赞、在看】三连支持一下吧![63f9e8ee8c6f6628ac1a23fb66166309.png][]**

![9eb877bf94e7023388ef2ba64e5c9909.png][]

**“分享、点赞、在看” 支持一波** ![239a71790e443602e12b90f0826d3db6.png][]

[63f9e8ee8c6f6628ac1a23fb66166309.png]: /images/20220829/ff5cad8b4b774db2b47be56e41f4add7.png
[9eb877bf94e7023388ef2ba64e5c9909.png]: /images/20220829/b1e52a275ada41c1bcae1e5c8d5d848c.png
[239a71790e443602e12b90f0826d3db6.png]: /images/20220829/4a5afdc16c3342eaae70ba1ce870e2e0.png