【总结】1038- 校招前端在字节跳动一年的收获

快来打我* 2022-09-02 14:46 144阅读 0赞

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

![6ca304e746047d9a154fd81d144cf312.png][]

# 个人简介 #

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岁的焦虑， 我刚入职的时候也经历过很长一段时间的这个焦虑。所谓狭路相逢勇者胜，我们在自己的这条赛道上付出更多些，做得更好些也就不错了。这个阶段，更多把精力放在适应工作节奏以及个人的成长上面去， 面向未来两三年做规划，关注成长、保持学习即可。

### 参考资料 ###

\[1\]

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

![40c3a1dc9f83b73026d0757a9afb9c12.gif][]

[1. JavaScript 重温系列（22篇全）][1. JavaScript _22]

[2. ECMAScript 重温系列（10篇全）][2. ECMAScript _10]

[3. JavaScript设计模式 重温系列（9篇全）][3. JavaScript_ _9]

4. [正则 / 框架 / 算法等 重温系列（16篇全）][_ _ _ _ _16]

5. [Webpack4 入门（上）][Webpack4]|| [Webpack4 入门（下）][Webpack4 1]

6. [MobX 入门（上）][MobX] || [MobX 入门（下）][MobX 1]

7. 120[\+篇原创系列汇总][Link 1]

![84165be0b40f6d2a6ccdb931a5df5595.gif][]

回复“**加群**”与大佬们一起交流学习~

点击“**阅读原文**”查看 120+ 篇原创文章

[6ca304e746047d9a154fd81d144cf312.png]: /images/20220829/becfb63901704e40991eda2fb36fdbae.png
[40c3a1dc9f83b73026d0757a9afb9c12.gif]: /images/20220829/9ccf9e626ecb46569fb2acaaa60376e6.png
[1. JavaScript _22]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224ea86b5adfc10c3aa1841be3879b9360d671e98cc73391c2490246f1348857b9821d32c&idx=1&mid=2458453187&scene=21&sn=a69b4d7d991867a07a933f86e66b9f55#wechat_redirect
[2. ECMAScript _10]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e086b5adf6dad41a0d36b77a9bfb4bc9f0d29a816266b3e28c892e54274967dbce380b&idx=1&mid=2458453193&scene=21&sn=e5392cb77bc17c9e94b6c826b5f52a83#wechat_redirect
[3. JavaScript_ _9]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e386b5adf554ab928cdeaf7ee16dbb2d895be17f2a12a59054a75b913470ca7649bbc7&idx=1&mid=2458453194&scene=21&sn=e7f0734b04484bee5e10a85a7cbb85c1#wechat_redirect
[_ _ _ _ _16]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e286b5adf432850f82db18cc8647d639836798cf16b478d9a6f7c81df87c6da5257684&idx=1&mid=2458453195&scene=21&sn=1e0c8b7ea8ddc207b523ec0a636a5254#wechat_redirect
[Webpack4]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251f86b5ac09dbbbb7c8e1d80c6cbd793a523cdfa690f8734def57812e616b9906aeec79&idx=1&mid=2458453302&scene=21&sn=904e40a421024ea0d394e9850b674012#wechat_redirect
[Webpack4 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251e86b5ac08464872cd880811423e0d1bbcebbe11dcac9d99fa38c5332c089c06d65d95&idx=1&mid=2458453303&scene=21&sn=422f2b5e22c3b0e91a8353ee7e53fed9#wechat_redirect
[MobX]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264c86b5af5aa7300a04d55efead6223e310d68e10222cd3577a25c783d3429f00767960&idx=1&mid=2458453605&scene=21&sn=0a506769d5eeb7953f676e93fb4d18eb#wechat_redirect
[MobX 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264086b5af5611524eedb0d409afe86d859dce6ceff1c17ddab49d353c385e45611a73fa&idx=1&mid=2458453609&scene=21&sn=f0c22e82f2537204d9b173161bae6b82#wechat_redirect
[Link 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224dd86b5adcbd98189315e60de6a0106993690b69927cc1c1f19fd8f591fefce4e3db51f&idx=2&mid=2458453236&scene=21&sn=daf00392f960c115463c5aaf980620b4#wechat_redirect
[84165be0b40f6d2a6ccdb931a5df5595.gif]: /images/20220829/528423504187445aa3bd0a3d5560de35.png