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

大家好,我是若川。今天分享这篇,相信读完会有些收获。本文经作者授权转载,原文链接: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年内前端人走向前列。

点击方卡片关注我、加个星标

今日话题

略。欢迎分享、收藏、点赞、在看我的公众号文章~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/275668.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

app用户隐私协议相关法律_隐私图标和法律设计

app用户隐私协议相关法律During its 2020 Worldwide Developers Conference, Apple spent time on one of today’s hottest topics — privacy. During the past couple of years, Apple has been rolling out various public campaigns aiming to position itself as a compa…

35 点击全图后发现地图“不见了”

相信很多用ArcGIS软件作图的时候会习惯用全图按钮,但是有的时候工程文件是他人提供的,也不太清楚是怎么做的,一点全图,软件界面就一片空白,找数据找半天,很是苦恼啊 这虽然不是什么大问题,但还是…

成为优秀沟通者的要素_如果您想成为更好的设计师,请成为更好的沟通者

成为优秀沟通者的要素Little changes that go a long way.小变化大有帮助。 I started my career in motion design.我的职业生涯始于运动设计。 My focus was on the visual and technical skills required to make emotionally compelling work. I believed great design s…

我读源码的经历~

你好,我是若川。最近来了一些读者朋友,在这里简单介绍自己的经历,也许对你有些启发。可以点击 ruochuan12 加我微信进群交流。这是我的公众号卡片,可以加下星标。我是谁我是若川,毕业于江西高校,《面试官问…

php建一个表按删除就删除,php怎样删除数据库表_后端开发

php删除数据库表的要领:起首建立一个PHP示例文件;然后衔接mysql数据库;末了经由过程“DROP TABLE runoob_tbl”语句删除MySQL数据表即可。引荐:《PHP视频教程》php MySQL 删除数据表MySQL中删除数据表是异常轻易操纵的&#xff0c…

字节招人

大家好,我是若川。这应该是第五次发招聘了,友情帮一个朋友宣传。普通高校的很多大学生因为信息差导致慢一两年才醒悟过来,原来大三就有校招了。如果能早些知道早做准备,结果可能会更好。而知名高校,身边很大学长学姐进…

人工智能和Adobe Sensei

Adobe概述 (Adobe Overview) The design process changes from person to person, practice to practice, and profession to profession. As we advance further into the 21st century, the design process for many people leans heavily on technology. Adobe leads the ch…

梳理了一下前端面试必考知识点

大家好,我是若川。最近收到不少朋友留言说,前端面试越来越难,尤其是技术面。既要熟悉各种框架,又要精通每个知识点的底层逻辑,甚至连前端工程化的内容都拿来考察。哪怕是有 3-5 年经验的老前端,都极有可能翻…

笔记本徽标键不起作用_为什么我们(不应该)关心徽标

笔记本徽标键不起作用Back in my art director days—when I was attempting to build a brand for myself on Instagram—I would often come across posts comparing two logos, side-by-side, prompting the community to comment on which was better: Version 1 or versio…

用手机EchoEcho问询朋友所在的位置

“我的朋友,你现在在哪儿?”这个简单的问题,在移动互联网时代能得到怎样的解答呢? EchoEcho就是这样一款新型的 LBS 服务,它跟 Google 纵横和 4SQ 签到都不太一样,能更准确地告知朋友们的位置。可以说&…

Error merging: refusing to merge unrelated histories

解决方案:git pullgit pull origin mastergit pull origin master --allow-unrelated-histories idea提交git提交文件的时候报错。因为是刚刚在码云上初始化,然后要把本地的项目提交上去,所以出现了 最上边两行黄色部分是向远程码云上提交的错…

小学接触web的我是如何拿下蚂蚁实习 Offer的

大家好,我是若川。我经常说在校生要尽早准备,消除信息差。如果你是在校生或者毕业年限不长就关注了我的公众号,大概率说明你比很多人优秀且热爱学习。比如很多加我微信 ruochuan12 好友的大学生都是在大厂实习的。本文就是小学就接触到了web的…

群晖第三方套件存储库_如何包装以及在何处存储品牌标识套件

群晖第三方套件存储库At Pics.io, we are lucky to support dozens of creative teams, offering digital asset management solutions. When we chat with designers, marketing managers, or videographers, we hear a lot about the issues teams face (drowning in multipl…

【WP7进阶】——扩展框架组件

组件描述 该组件为Windows Phone 7 本身C#框架扩展了一系列方法,可以使你在编写代码的时候减少重复复制,并且增加了许多通用功能,使你的编写代码的时候可以更加流畅和得以应手。 扩展类别 该组件是将我们日常常用到的数据类型或者集合等操作再…

尤大是如何发布vuejs的,学完可以应用到项目

大家好,我是若川。本文是读者NewName 投稿,看了我推荐的vuejs如何发布的源码(200余行),并成功写了一个小工具。推荐的当晚看到挺晚,这执行力这努力程度超过很多人啊。我本来是打算自己写一篇这个文章的&…

(转)从零实现3D图像引擎:(6)向量函数库

1. 数学分析 1) 基本定义&#xff1a; 向量由多个分量组成&#xff0c;2D/3D向量表示一条有向线段。下面的ux,uy就是两个分量。 向量u <ux, uy>&#xff0c;如果从点P1(x1, y1)指向点P2(x2, y2)&#xff0c;则&#xff1a; U p2 - p1 (x2-x1, y2-y1) <Ux, Uy> …

chrome黑暗模式_黑暗模式-并非时尚

chrome黑暗模式In this post I’ve shared my research and views on how the extremely popular “Dark Mode” has moved beyond it’s initial label of “The App Design Fad of 2019”.在这篇文章中&#xff0c;我分享了我的研究和看法&#xff0c;探讨了非常受欢迎的“黑…

花了一天精选了20多篇好文,只为与你分享

大家好&#xff0c;我是若川。很多小伙伴因工作繁忙而没有很多自己的时间去学习新知识&#xff0c;更多的是通过一些碎片化的时间来阅读一些他人的技术文章来提升自己的技术视野以及扩展自己的知识储备。这次我精心整理了一批大佬们的优秀文章&#xff0c;感兴趣的可以阅读关注…

matlab判断电话播键音,MATLAB电话拨号音的合成与识别

1.实验目的1.本实验内容基于对电话通信系统中拨号音合成与识别的仿真实现。主要涉及到电话拨号音合成的基本原理及识别的主要方法&#xff0c;利用 MATLAB 软件以及 FFT 算法实现对电话通信系统中拨号音的合成与识别。并进一步利用 MATLAB 中的图形用户界面 GUI 制作简单直观的…

jquery插件之无缝循环新闻列表

一、效果图&#xff1a; tips源码下载&#xff1a;http://files.cnblogs.com/waitingbar/newslist.rar 二、jquery源码: (function($){$.fn.extend({newsList:function(options){var defaults {actName:li, //显示条数名&#xff1b;maxShowNum:6, //最多的显示…