[万字总结]我还在正确的道路上么?2021年一个前端新人的半年学习工作总结

14,950 阅读22分钟

「时光不负,创作不停,本文正在参加2021年终总结征文大赛

大家好,我是速冻鱼🐟,一条水系前端💦,喜欢花里胡哨💐,持续沙雕🌲
欢迎小伙伴们加我微信:sudongyuer拉你进群,一起讨论,期待与大家共同成长🥂

前言🐶

提醒一下,文章有近万字,可以先看一下目录,也可以直接阅读~

ade9921fa73c441a9d5a4a0b7dc7a16f

2021年就快要结束了,其实在三个月前在就自己的博客写过一篇三月总结,当时只公开了几个小时,时光飞逝,匆匆流去,又过去了三个月,算上我来到现在公司马上就6个月了,半年时光也悄然而至,趁着掘金活动🎡也再次总结一下这半年的学习工作经历吧,希望对自己激励,也希望能够得到各位前辈们的建议和指导~

面试入职

咚咚咚,时隔一年后我没想到自己又会捡起计算机这个我曾经热爱的专业🧮,之前因为自己身体原因休息了一年时间😢,回想起来确实浪费了挺多时间的,好在以前还有一点点基础,很快我便又捡了回来。

我开始了我的面试,我就面了几家公司,因为之前休息了一年,代码能力啥的肯定差的一批,而且大学做的项目更多的是API调用工程师没什么技术含量(java居多),所以我抱着谦逊的态度面试完了几家公司,还比较顺利,我拿到几家在成都的中厂和几家小厂offer,我选择了我现在这家小而美的公司,待遇不是最好的,但是公司氛围领导我很喜欢,当时面试官问我问题的时候,其实我就已经决定了,如果它给我发offer我肯定就会来,果然我们彼此还是心有灵犀的,我来了~~

为什么来这

  • 公司是一个创业公司,但是却敢于实践新技术,而不是墨守陈规,我很喜欢这点,在vite刚出来的时候公司就开始尝试了,老大也提了PR,边维护边使用~

  • 公司的氛围非常年轻化,清一色年轻人,而且个个人都很nice(全是帅哥美女🤵‍♂️),公司也没有加班制度,早10晚7也挺好的。

  • 当然最重要的一点是因为面试官,我明明面试的是前端岗位,但是他问的问题吧,就几乎没有几个前端问题(后来我才知道原因是我老大是安卓大佬,而且不止安卓,挺全能的,这可能就是年纪轻轻就当CTO的原因吧😂),但是他问的问题吧和之前我面试的几家公司问的就完全两个维度,前面的基本都是一些基础知识和API相关问题,没啥意思(而且我也能间接感觉出来面试官的水平),而我领导问的问题却是拿了一个github页面开始灵魂拷问,后来我才知道这是他的面试技巧,如果现在再问我一次,我一定能回答的比之前好(毕竟后边修炼了一下)~

自我认识

我刚进公司,好家伙,直接丢给我一个聊天室项目,里面的代码写的很乱vue3的壳vue2的代码,而且没有注释,而且公司自用的websoket通信基础库也还没有完全调通,于是我一边尝试读懂websoket通信库源码的同时一边开始完善聊天室项目,好在最后还是完成了任务。 通过这个聊天室项目让我意识到,我自己要学习的东西特别多,而且很多基础需要重新补起来,于是就有了我的后文,我开始慢慢学习,慢慢进步,一步步有了清晰的目标学习计划

技术栈提升🐱

以下是我技术栈的提升,但不是所有都有较深的理解,但我都将自己的理解简单描述了一下

vue2全家桶切换到vue3全家桶

主要学习了vue3 compositonAPI,一些基本原理,主要是为了快速上手vue3的项目

vite 一个超快的打包构建工具

  • 一个开发服务器,基于原生的ES模块,提供了超快的HMR。
  • 将代码通过Rollup打包静态资源用于生产环境(因为Rollup好用就是因为它提出的TreeShacking)
  • 使用esbuild 作为开发时的打包器,因为它是用GO语言写的所以速度特别快(直接将代码编译为native),比基于 JavaScript 的打包器快 10-100 倍的预打包依赖项
  • 为什么不适用esbuild作为生产环境的打包器呢?因为esbuild对代码分割和css处理还有待加强。
  • 简单说一下vite为什么那么快,利用http标头,对依赖项和源代码模块做了不同的缓存处理。还有一点是Native ESM based dev server 和 Bundle based dev server 的区别,vite先启动开发服务器,再根据浏览器请求按需加载对应模块,而Bundle based dev server是一旦有source改动,就会重新打包所有代码,显然效率很低。

RxJS

个人理解RxJS就是一个使用观察者模式的基于事件的一个处理异步函数的一个库。

为什么会学习这个RxJs呢,是因为公司websocket基础库是基于RxJs的,所以为了维护它,所以去学习了RxJS

主要的概念

  • Observable: 可观察的。
  • Observer: 观察者。
  • Subscription: 表示一个Observable的执行,主要用于取消执行。
  • Operators: 它们是纯函数,能够使用函数式编程风格处理集合,并使用map filterconcatreduce等操作。
  • Subject: 它相当于一个啥呢,相当于一个二层交换机,将事件多播给观察者

WebSocket

  • WebSoket主要用于解决客户端和服务端双向通信麻烦的问题诞生的,就好比HTTP2是为了解决HTTP1.1传输速度过慢,对头阻塞问题才诞生的。
  • WebSocket就是HTTP上的Socket通信规范,是全双工通信协议,服务端也可以主动推送消息,提供了类似TcpSocket的功能,但是由于浏览器沙盒的限制,不能直接获取TCP数据,所以WebSocket就搭乘了HTTP的顺风车来实现类似TCPSocket的操作。
  • WebSocket是对TCP的一层薄薄的封装,WebSocket over Tcp,WebSocket按照层级来分它应该是属于和HTTP为一个层级的应用层协议,它利用了HTTP(upgrate)来进行WebSocket握手,然后就可以进行通信了。

Grid/Flex 主流布局方案

简单总结一些,Grid是一个比Flex更强大的布局方案,Flex主要处理的是2维坐标的布局,而Grid更适合处理三维的布局。

PWA

PWA字面意思就是渐进式WEB 应用程序,为什么这样说呢,它有点类似于将我们的web应用程序作为原生应用,它可以推送一些通知,但在我们的项目中,主要利用PWA里面的serviceworker来做离线缓存。

React17及全家桶

其实我个人更喜欢Vue3多一些,但是呢,公司开始选择使用React作为主要的前端UI框架,所以我也就去学习了React17,以及相关的一些生态,React17对我来说最大的感受就是hooks对编码带来的便利,它简单易用好上手,个人觉得它和Vue最大的区别就是写React感觉在开手动挡的车,写原生js一样,写Vue更像是在开自动挡。

Redux

学习React17,当然也要学习状态管理容器ReduxRedux是一个基于事件驱动模型的一个状态管理容器,最佳实践还是使用Redux Toolkit,但是刚开始学,可能概念有点不好懂,反正理解了它的核心思想就好了,至于API要用的时候再去查查文档就好了,核型概念就是store作为我们的容器,action作为我们的时间,reducer作为我们处理事件的聚合函数,就是给定一组输入返回一个特定的输出(reducer是纯函数,尽量避免在里面执行一些effect),还有一些常用的中间件,像react-thunk 比较适合于简单的API请求的场景这样的中间件。

TailWindCss

TailWindCss之所以去了解它,是因为它将CSS样式原子化,我们不用去过多关注样式名该怎么去取,但是在实际使用过程中我发现,它很多内置的样式不太符合业务需求,改也来也不是特别方便,后边就没有再尝试使用它了。

UnoCSS

是一个由我的偶像antfu主导的css原子化引擎,它受tailwindcss启发,但我还为对它有什么升入的研究,后边应该会好好看看文档

image-20211127160748404

EmotionJS

EmotionJs是一个CSS in js的一个库,可以让我们在js中编写css样式。

TypeScript

  • JavaScript 超集,通过一段时间的学习,我发现TypeScript是真的特比强大,特别强调一点它是结构化类型系统也就是Duck类型,也使用了TypeScript编写了一些前端基建库。

  • 它对我来说最直观的感受就是将我们的代码在编译期间可能发生的错误都暴露了出来,提高了我们的代码健壮性。

  • 编写代码的提示也极大的提升了我们的开发效率,不过TypeScript的学习并不是那么简单的,需要经过大量的联系和阅读,对我来说泛型对我来说掌握的还不够,也是后边学习的重点。

  • TS内置很多Utility Types也挺好用的。

  • TypeScript之所以能检查出我们的类型错误其背后是先将TypeScript代码解析为TypeScript AST抽象语法树,然后做类型检查,然后再编译为JavaScript,再到JavaScript AST, 再到字节码的过程。

Docker

什么是Docker呢?,简单来说Docker就是一个隔离虚拟的容器(就把它当作是一个加班强版的虚拟机吧),它有几个关键的概念。

  • Image:镜像,是一个只读模版,用来创建容器。
  • container:容器,是一个可以运行的镜像实例。
  • DockerFile:是用于构建镜像的模版,描述镜像构建的步骤。

Kubernets

是阿里云上面的一个镜像容器服务软件,它用于管理我们上传的镜像和容器,平时我们写好的一些服务web应用就是打包成docker镜像然后交给了Kubernetes来管理。

负载均衡

平时最多使用负载均衡器就是利用它来提供公网的IP,以及对流量的分发,通过负载均衡我们就可以根据不同的域名和端口访问到我们部署的各个虚拟容器(容器里面运行的就是我们的WEB应用和一些后端服务)。

CDN

  • CDN字面意思就是内容分发网络,它就是一个代理服务器,利用了DNS来做负载均衡
  • 我们将域名解析的NS记录配置为我们的CDN,它就会加速我们的网站,通过域名解析,将会返回一个离用户最近的代理服务器,响应用户的请求,代理服务器上面就缓存了我们源站的很多资源
  • 客户端访问某个域名的时候,首先会从浏览器缓存中找域名所对应的IP地址,没有从系统缓存找,没有从hosts文件找,没有从本地DNS服务器找,直到根域名服务器,然后根域名返回一个cname指向提供CDN服务的厂商(就拿CloudFlare为例吧),然后连接到CDN全局负载均衡GSLB,CDN做了一些列复杂算法,匹配了一个离用户最近的SLB并返回给客户端IP,于是客户端拿着这个IP访问就比较快了,CDN主要就是看缓存的命中率回源次数。一般缓存静态资源。也可以利用CDN做很多骚操作,这里就不写了😂

域名

域名真的是一件很繁琐的事情,尤其是买了域名以后还好进行审批,那叫一个麻烦!买了域名之后我们的域名还不能直接使用,我们还得配置一个NS记录来配置这个域名交给哪个域名服务器来解析。后边我应该也会自己买台ECS服务器买个自己的专属域名重新搭建一下我的个人网站

PixiJS

Pixi是一个非常快的2D sprite渲染引擎,可以轻松地使用JavaScript和其他HTML5技术制作游戏和应用程序,他可以根据客户端的支持情况,来使用canvas或者WEBGL来渲染我们的游戏和动画,使用PixiJS对我最直观的感受就是开发不是很方便,编写pixiJS就像在写原生的JS应用,没有比较好的完整解决方案,但是国外挺火的🔥,可能是我自己的问题。

它里面核心概念主要有

  • stage:舞台,我们所有的动画游戏就是在舞台上进行
  • sprites:精灵,精灵就可以理解为一个个的小玩意,就是游戏里面的人物呀,每一个单独的实例就是一个精灵
  • Texture:纹理,纹理就是指的我们的jpg、png素材经过加工后的特殊格式,使用Texture来创建我们的精灵

Cocos-Creator

  • Cocos Creator 是以内容创作为核心,实现了脚本化、组件化和数据驱动的游戏开发工具。
  • 开发游戏起来着实是很方便。
  • 一套代码可以导出多端
  • Cocos-Creator是利用的Rollup和Bable、TSC等工具将我们编写好的TS代码转换为JS然后打包的。
  • scene就是我们的场景,相当于PixiJS中的stage,其实游戏开发的概念都是大同小异的

Node.js

我的掘金相关文章:如何在nodeJs中使用ESM模块

这里不瞒大家说,我之前是真的蠢,我把node就单纯的认为是web服务器,后边写了基建读了文档才算是真正的了解了Node.js,也感受到了Node.js的强大,也非常感谢Node.js让前端能做更多的事,比如前端工具链,开发服务器,比如桌面应用等等。

  • Node.js 是一个开源和跨平台的 JavaScript 运行时环境, 它几乎是任何类型项目的流行工具!
  • Node.js 在浏览器之外运行 V8 JavaScript 引擎(Google Chrome 的内核)。 这使得 Node.js 的性能非常好。
  • Node.js 之所以强大就是因为有了v8的强大支持,并且它也提供了很多底层的API,所以我觉得Node.js非常强!!!
  • 要深入Node.js 就需要去了解操作系统相关知识!!!

Storybook

我在掘金写的相关文章:每个前端都值得拥有自己的组件库,就像每个冬天都拥有春秋裤⛄️

storybook-intro

  • Storybook是一个UI组件开发环境。它允许你浏览组件库,并查看每个组件的不同状态,并交互地开发和测试组件,非常简单快捷,而且很多公司在使用,而且你可以开发不同技术栈的组件库,相当方便,而且拥有一套成熟的CIDI方案。

  • 用我的话来说就是Storybook是一个可以让你专注于编写组件,而无需去关注文档的一个强大的组件开发环境,想试验,或者尝试组件开发的小伙伴都可以值得一试,成本极低,可以快速上线。

  • Storybook 提供了一个沙箱来独立构建 UI,因此您可以开发难以到达的状态和边缘情况。

完成的项目🐭

这里涉及到公司的产品和业务就不过分详细说明了,有一说一,我是公司唯一一个认真写README文件的人😂

聊天室WEB应用

这就是我来公司的第一个接触的项目,算是帮别人擦屁股吧😂,最后还是在生产环境用了起来,修改了以前的一些BUG,然后将后续未完成的逻辑完成了。

聊天室websocket通信库

修复了BUG,打通了之前未打通的逻辑。

InfoJS

repo地址:github.com/HaiyaoTec/i…

image-20211127173811506

我在公司编写的第一个纯自己写的基础库,很简单,但是也算是开启了基建之路,里面也涉及了一些技术。

  • vite插件编写
  • node服务端的编写
  • CLOUDFLARE相关配置

主要功能就是提供一些常用的信息给客户端,同时我还是厚着脸皮将它开源了hhh😂,谢谢我领导支持~

image-20211127173515941

craft-client

独立完成了一个提升了公司开发效能的一个工具链库,这个CLI能够帮助业务同学很快的将代码打包成docker镜像文件,并支持不同的模式,同样也开源在了Github

repo地址 :github.com/HaiyaoTec/c…

image-20211127174458497

heimdall-ts

独立完成了一个特别有意思的库,主要功能是根据StopLigh的API文档,直接自动生成前端的API调用模块,也是极大的提高了业务的开发效率,让业务同学不再需要花时间去查看API接口文档和API如何封装如何调用,直接开箱即用,也支持版本回退。目前还未开源,正在筹备中。

image-20211127174810758

还有一堆移动端、web端自适应的页面

这里就不展示了~~~,我在写这些页面的时候强行给自己增加了难度,刻意使用了React来进行编写,也算是自己给自己提需求吧

我在开源社区做的事🦊

说到这里就燃起来了哈,这是我最感兴趣的事情,在开源社区,你能认识到很多大佬,看到别的大佬在提交代码,在创建新的repo,这里真的就是程序员的天堂~

这里我先恬不知耻的放上我的Github地址希望大家能够关注我~~~🍉

👉 速冻鱼的github地址

image-20211127221855455

成为了Naive-ui 的Contributor

这是我参与的第一个比较大型的开源项目,为此我还写了一篇文章,完整地描述了这件事

vue3组件库」如何从0到1参与大型开源项目成为贡献者🎃

成为了vue-next的contributor

当然是提了一个非常微不足道的PR,但是被尤大合并了,放在这里也算是激励自己明年能真正提点有用的代码,也算是一种督促了

image.png

image-20211127220407555

成了vite的contributor

在贡献者列表最后一名是我😂

image-20211127220445975

在掘金社区🐼

掘金社区就是一个程序员发表自己总结的一个开放的社区平台,这里有很多大佬每天分享自己的经验总写,并以文章的形式输出出来,我也通过winter老师的训练营认识了寒草🍃草哥,他带我又走上了写作这条路

我的掘金个人主页: juejin.cn/user/286798…

image-20211127230434640

我的收获

  • 我书写了46篇原创文章
  • 收获221486文章展现数
  • 文章阅读数54924
  • 点赞数1060
  • 评论276
  • 收藏数560

这里我非常感谢,每天给我鼓励给我点赞留言的小伙伴,真的非常感谢你们💗~~~

感谢掘金送的一些小礼品

image-20211127232619255 image-20211127232630698

我的小群🦕

通过学习啊,和水群,认识了很多大佬和前辈,然后我也建立了自己的小群,目前有200多个优秀的小伙伴,有一些三观不正的被我T了,留下的都是非常nice的小伙伴~

希望热爱前端的同学可以加我 vx:sudongyuer 加入我们这个神秘的组织

我看的书🐙

因为我觉得我的基础很差,我就当自己是个小白鼠,从头来过了🐁

  • 图解HTTP
  • 图解网络硬件
  • 图解TCP/IP
  • 网络是怎样连接的
  • JavaScript高级程序设计第四版(还未看完)
  • TypeScript程序编程
  • 为什么精英都是时间控
  • 刻意练习
  • 我的第一本算法书
  • 过目不忘读书法
  • ......

部分书籍

image-20211127232357650

看的教程🐡

  • Youtube的XXX

  • 透视HTTP协议

  • 趣谈网络协议

  • React17精讲

  • 2021前端主流布局方案(Grid/Flex)

  • 玩转vue3全家桶(大圣老师还未更新完,我也就还未看完 😂)

  • 10x程序员工作法(还未看完)

  • ......

做的算法题🐳

算法还是太菜了,后边要开始针对性的刷题了

部分算法题

image-20211127231851444

一些趣事🐈

在公司当网管

前因是啥呢?我经常问我的老大一些奇奇怪怪的问题,然后有段时间一直在看网络相关的书啊啥的,特别感兴趣,然后正巧公司网络很差,于是我便跟着我司网络大佬(Giao哥)当了两天网管,收获很多,也将我的书本知识和硬件直接联系起来,受益很大

打线器,寻线器

  • 有了这个东西,你就可以在众多线中找到你想找的那根网线,主要原理我猜就是补货了电磁波信号(猜的),它还可以验证网络包是否能正常传输。
image-20211128212811062
  • 超大华为路由器
image-20211128213310981
  • 上天入地
image-20211128214117766

当时是以为路由器坏了,因为我们的路由器就是我们的接入路由,所有的网络包都会走这里过,所以当初以为是之前路由器负载不够,所以我们换了一个华为的企业路由器,从零到一配置好了公司内网环境,还有VPN。最后发现不是路由器问题😂

这里也简单总结一下,我们之所以能联网,是因为我们通过接入路由再通过光猫将数字信号转换为电信号,光猫又将电信号转换为光,通过FTTH接入网到达BAS(宽带接入服务器),然后它会校验用户信息,下发网络配置信息给我们的接入路由。然后它连接的是运行商的接入网路由器,后边就是互联网内部了,由POP/AOC 通过IX将各大运营商网络连接起来组成的互联网,其实就是一台台的路由器,通过路由转发,我们就能访问互联网中的任何机器了。

考信息技术教师资格证

之前考了一次挂了哈哈哈,今年是第二次😂抽空去考了资格证

image-20211128215419056

一些记录的照片🐈

为什么记录了照片呢?我想让自己一年后再看看自己以前在做什么,好有个念想😂

这本书叫TypeScript编程

这本书我当时看的时候,它里面内容很好,但是我水平不够,对我的提升不够大,后续我还会再看的

image-20211128220223717

JavaScript高级程序设计第四版

神书,不用解释,懂得都懂~

image-20211128220336077

winter老师签名的书签

image-20211128221110152

看书的仪式感😂

在这里看书唯一的缺点就是咖啡太贵了40多一杯!我淦~

image-20211128221418045

公司商场的吉野家味道不错

image-20211128221706674

认识到许多优秀的人🦨

在此期间,认识到非常多优秀的小伙伴和大佬,他们非常谦逊和可爱,非常感谢他们💗

  • 大圣老师(感谢大圣老师给我提供了很多指导和帮助)

  • Jude (我领导,巨佬,对我的帮助特别多,不止是技术上的)

  • 寒草草哥 (吉大巨佬,带我入坑写文章)

  • 海怪哥 (tx大佬,也问过海怪哥很多问题)

  • 三心哥 (掘金老名人了)

  • fly哥 (非常优秀的图形王子😂)

  • 三元哥 (字节巨佬,无敌的存在,未来前端金字塔尖的男人)

    等等,还有很多,就不一一写的,非常多优秀的人,从他们身上学到很多东西,你懂的~~~

总结🍁

如果您能看到这里,我真的非常感谢,也希望您能留言和我一起探讨一下后边应该怎么去进步,回扣标题,我还在正确的道路上么?希望能在评论区看见大家宝贵的意见

特别说明,人们往往在总结自己、表达自己的时候喜欢包装一下,所以你看见的和实际的可能不是一样的,意思就是我还是个菜鸟,不要被我写的迷惑了

  • 学的东西太杂了,倒是打开了广度,但是后边不会这样了
  • 要开始深入某一项技术了,T字
  • 继续算法,提高内功😂
  • 多敲,多敲,多敲
  • 保持热爱
  • 少水群(最近两个月水群太严重了)
  • 坚持

未来学习目标☀️

长期的~~~,通过这半年的学习,发现要学的东西越来越少了~

  • 在开源社区多贡献一点自己的力量,来点有用的贡献!!!

  • HTML

  • CSS

  • JavaScript

  • TypeScript

  • 深入理解某一个视图层框架

  • 计算机网络

  • 数据结构与算法

  • 编译原理

结束语🦚

image-20211128234458556

那么我的[万字总结]我还在正确的道路上么?2021年一个前端新人的半年学习工作总结这篇文章结束了,文章的目的其实很简单,就是对日常工作的总结和输出,菜不菜不重要,但是热爱🔥,也希望通过文章认识更多志同道合的朋友,如果你也喜欢折腾,欢迎加我好友,一起沙雕,一起进步🐟。

github🤖:sudongyu

个人博客👨‍💻:速冻鱼blog

vx👦:sudongyuer

写在最后

伙伴们,如果喜欢我的口水话给🐟🐟点一个赞👍或者关注➕都是对我最大的支持。

加我微信:sudongyuer,邀你进群,一起学习前端,成为更优秀的工程师~(群二维码在这里->前端要午睡, 二维码过期了的话看链接沸点中的评论,我会把最新的二维码放在评论区,当然也可以加我微信我拉你进群,毕竟我也是有趣的前端,认识我也不赖🌟~