大家好,我是若川。今天分享这篇,相信读完会有些收获。本文经作者授权转载,原文链接:https://juejin.cn/post/6980671091526074404
个人简介
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
最近组建了一个江西人的前端交流群,如果你是江西人可以加我微信 ruochuan12 私信 江西 拉你进群。
推荐阅读
我在阿里招前端,该怎么帮你(可进面试群)
毕业年限不长的前端焦虑和突破方法
前端抢饭碗系列之Vue项目如何做单元测试
老姚浅谈:怎么学JavaScript?
················· 若川简介 ·················
你好,我是若川,毕业于江西高校。现在是一名前端开发“工程师”。写有《学习源码整体架构系列》多篇,在知乎、掘金收获超百万阅读。
从2014年起,每年都会写一篇年度总结,已经写了7篇,点击查看年度总结。
同时,活跃在知乎@若川,掘金@若川。致力于分享前端开发经验,愿景:帮助5年内前端人走向前列。
点击上方卡片关注我、加个星标
今日话题
略。欢迎分享、收藏、点赞、在看我的公众号文章~