应届前端的逆袭（上）

不知不觉毕业一年了，正式工作也满一年了。其实一直想写一篇文章总结一下一年来自己到底成长了多少，但因为各种原因一直拖到现在。今天总算难产出来了 😂 系列其他文章👇👇

• 应届前端的逆袭（中）
• 应届前端的逆袭（下）

• 原本打算上下两篇就写完这个系列的，但是实际写的过程中发现如果揉在一块，篇幅会十分长😅，所以还是决定拆成 3 篇。 上篇主要介绍当前及未来前端发展的趋势，高效团队协作的开发配置；中篇主要是职业规划和选厂建议；下篇专门讲讲怎么从零开始搭一个前端项目。
• 这篇文章主要是写给刚毕业，或者刚转行入坑前端的同学， 总结了一些经验和学习心得，也算是以自身经历为例子的职业入坑指引吧。
• 文章中涉及到的技术栈和框架不会太深入去讲，主要是介绍职业规划和个人成长规划。对文章中某个点感兴趣的同学可以私我。

写给刚入行的你

2020 年可谓不太平的一年。因为一些众所周知的原因，读研的同学担心毕不了业；工作的同学纠结经济不景气；大三大四的同学正苦于就业...这一年来听到太多太多的抱怨了，无论是在校生还是已经毕业的同学。

其实前段时间我刚刚跳槽完，也相当于重新找工作吧。我自己的感受并没有身边人或者网上说的那么怨声载道的样子。 我自己面试的结果来看，百度腾讯字节都过了，也算是对自己一年来成长的一个交代。

在正式开始写干货之前，我觉得我还是有必要给准备入坑，或者说想继续往更高处走的同学预先灌一些鸡汤，这些鸡汤都会在下一篇目中细说：

• 摆平心态

  自我读大学开始，总会听到两种声音。一是 “前端就是比较容易”，二是 “我找不到工作是因为没有工作经验”。在计算机领域，就没有哪个比哪个简单这一说，这个后面说趋势的时候会细说。至于把找不到工作这口锅甩在没有工作经验上，只是逃避技术现实的一个自我台阶罢了，在下一篇目会细说。

• 认清事实

  给自己系统全面的规划，定期自我反思，知道自己几斤几两，处于什么阶段做什么事。不要过高或过低评估自己的能力，在下一篇目会细说。

• 持续学习

  经常会听到这两种说辞：“唉我的学历好低啊，普通本科根本找不到工作”，“读书有什么用，xxx专科还不是月薪x万”。其实在我看来，能给自己带来好工作好生活的，不是学历，而是学历背后的学习态度。在下一篇目会细说。

前端的趋势

继上文所述，作为一个前端开发者，首当其冲的是要摆平心态。都 2020 年了，如果你入坑的理由还是 “因为前端更简单” 的话，我还是劝你尽早转行找到自己喜欢的岗位吧...

放在 20 年前，的确前端就是一个做静态页面的活，连 ajax 都没有的年代那时候的前端和大字报差别并不大；放在 10 年前，说前端简单我也还能理解，毕竟那时候主流仍是模板引擎或者是面向 DOM 开发，也没有成熟的 node 生态。但是 2020 年的今天，说前端简单那就说明这几年你丝毫没有进步。

如今的前端生态可谓是百家争鸣，各种技术，框架，乃至设计理念与架构层出不穷。在这里我先说说我眼里的前端生态是什么样子的：

• 从狭义上看，前端指的还是基于浏览器运行时的可交互应用
  • 现代浏览器内核大多是 webkit 或者其衍生产品，引擎大多是谷歌的 V8
  • JS 框架基本被 Angular，React，Vue 三分天下，还有诸如 Typescript 等强类型补充
  • 预处理器基本被 Sass，Less，Stylus 三分天下
  • 前端工程化相对完善，能专注与业务开发，Webpack 是比较流行的打包工具
• 从广义上看，前端指的是能与用户交互的终端生态，以及终端生态上下游的扩充
  • 除了浏览器环境之外，混合开发 Hybrid app，跨平台开发如 RN，Flutter，Electron 等也充斥着前端生态
  • node 的诞生提供了服务器端的能力，ssr 的能力，进而涉及数据库操作与一些如 ejs 等模板引擎的渲染，或者虚拟节点的渲染
  • node 也可以提供强大的构建工具的能力，BFF 的能力，甚至操作系统和代理服务器的能力
  • 其他领域也开始有所涉及，如机器学习领域的 tensorflow.js 或一些 IOT 领域

看到这里，是不是突然感觉要炸了：“卧槽说好的前端简单呢？博主你不是撒币吧？讲这么复杂装什么逼？” 🤮🤮

其实这就是前端的现况。所以说不要觉得会用 Vue 写个页面，看两个 MDN 的 API，参与过一两个项目就很满足了。或许你会说：“你说的很多都是后端的工作了，我只想做前端而已。” 但事实上这几乎是所有大团队的用人标准，如果你还坚持相信 10 年前的那个前端生态，那我打赌很快你会被淘汰掉。 当然如果你甘于现状做一条咸鱼，在一个小作坊上班过个日子，那当我没说。

我想还有一部分同学是这样的：他们知道前端要做的东西很多，但是也太高估前端的能力。我身边也有一些同学就觉得前端牛逼，万物皆前端，当然他自己也是牛逼的，看不起周遭的一切。在这里我想说的是五个字：术业有专攻。 的确 JS 能做的东西很多，但很多情况下它并不是最佳实践。就拿服务器来说，你不得不接受的一个事实就是相同精力的投入，有时候 GO 写的无论从性能还是开发体验上，就是比 JS 要好。包括跨端渲染层的方案也是，JavaScript Bridge 做桥接，性能的损耗就是比 Flutter 原生绘制的消耗要大。

归根结底就是，摆平心态，不骄不躁。既不要觉得前端容易才入坑，也不要觉得前端是万能的就是牛逼。

配置工作流

讲了一堆废话，来聊点干货吧。这篇文章我并不打算写太多技术相关的东西，我并不想把它变成一篇 “面经贴”。现在网上有很多面试向的文章，但是却极少有人介绍前端的 workflow。而事实上对于一个刚入坑的萌新来说，我觉得工作流和团队协作的配置才是最关键的。因为这关乎你能不能快捷的接入项目研发，高效的和团队小伙伴们一起协作。 所以我打算写一些关于前端工作流的配置。

下面所说的都是基于 Mac 的生态，Linux 的同学理论上也适用。（除了 homebrew）Windows 的同学就抱歉了，可能要自己按着文章中的思路去搜一下具体的配置方法。因为我没有配置过 Windows 下的工作环境（讲道理我的 PC 只是用来打游戏而已，不会拿来工作😂）

首先 Mac 的同学清一色先去 Apple Store 把 Xcode 装了，Mac 上不装 Xcode 是没法玩下去的。 然后咱开始正文。

终端与 Vim

为啥这个最先写，因为配置好终端是后续所有操作的基础，能省很多事，不然会有很多坑。

• 安装 iterm2，然后配置 zsh 代替默认 bash

# 装好 iterm2 后，在终端中执行，要是没有权限就加上 sudo
chsh -s /bin/zsh

# 安装 oh-my-zsh，感兴趣的同学自己搜一下
sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

iterm2 有一些很爽的特性，比如吸顶，一键唤出等。也有很多很爽的快捷键，比如 command + d 新建一个子窗口，command + t 新建一个标签等，这里不过多介绍，感兴趣的同学可以搜一下 Mac iterm2 配置，我贴一张图大家看看，如果大家想看配置的话下次专门写一篇。

• 常见终端命令

很多刚入坑的同学对终端是很不熟悉的，甚至有一部分同学觉得这是后端和运维的事情。其实只要是个码农，就离不开操作终端的宿命。所以基础的命令还是要掌握的。

# 查看目录下的文件，l 指的是详细信息，a 指的是隐藏文件也看，平时也可以直接 ls
ls -la

# 跳转去某个目录，没有输入完路径时，可以按 tab 自动补全路径，~ 指的是用户根目录
cd ~

# mv 移动文件，移动 a 到 mydir 文件夹下
mv a.md ./mydir/

# mv 重命名，a 重命名为 b
mv a.md b.md

# ps 查看进程，aux 和 -ef 功能类似，都是看目前内存中有哪些进程
# | 这个符号是管道运算符，加上 grep myapp 表示过滤只看 myapp 相关的进程
ps aux | grep myapp

# tail 表示查看某个文件结尾，-f 表示实时查看，有新的内容就会滚动展示
# | 加上 grep 表示过滤只看 127.0.0.1 相关的信息
# 这个组合命令常用在查看日志中
tail -f app.log | grep 127.0.0.1

# 其他还有很多命令就不过多介绍了
# 比如 cp，tail -n 1000，ln，cat，还有压缩相关的命令，大家可以去了解

• vim 相关操作

vim 是命令行编辑器的神器，有一些硬核的老铁甚至会拿 vim 来开发。也有很多很暴力的插件能把它整的和 vscode 这种 IDE 一样。但是我不推荐用 vim 开发，一是因为熟练运用它需要一定的学习成本，二是因为折腾它的过程中可能遇到各种奇奇怪怪的问题。但是为什么还要介绍它呢，因为看日志和命令行操作的时候，几乎是离不开它的。

Mac 是预装 vim 的，所以大家直接用就好了。对于 vim 0基础的同学，建议大家网上搜一下最基本的使用方法。我这里只做简单介绍。

vim 有两种模式：命令模式与编辑模式
命令行中 vim xxx 就直接进入这个文件的命令模式，这个时候是不能打字的
进入命令模式后输入 i 将进入编辑模式，这时候可以打字

命令模式常见指令
1. “hjkl” 代表着 左下上右 四个箭头，“10j” 表示向下移动 10 行
2. “^” 能直接去行首，“$” 能直接去行尾
3. 上下翻页是 “control + f” 和 “control + b”
4. 前后单词是 “b” 和 “w”
5. “dd” 能删除一行
6. “u” 是撤销操作，和平时的 “command + z” 是一样的

编辑模式常见指令
1. “: + q” 表示推出命令模式
2. “: + q!” 表示强制退出，比如修改了内容又不想保存的时候
3. “: + wq” 表示保存并退出

前端环境配置

• Mac 首先要装一个叫 homebrew 的玩意，这东西是一个包管理工具，类似于 Ubuntu 的 apt，👉戳这里去官网

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

• 然后首当其冲是 node 配置。Mac 可以用 homebrew 去安装 node，但我建议用 nvm 来管理 node 的版本。nvm 是一个超好用的 node 版本管理工具，可以很方便的安装某个版本的 node，也可以很方便的在多个版本中切换。👉戳这里去 github

  实际开发中可能不同项目依赖的 node 环境不一样，比如有的老一点的项目需要 8.x 的环境，而有的新项目可能需要 12.x 的环境，这时 nvm 就能派上大用场。

# 安装 nvm，安装完之后刷一下 .zshrc，或者直接重启 iterm2
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.36.0/install.sh | bash

# 重启之后就可以用 nvm 安装 node 了，找到你想安装的 node 版本直接装
nvm install 12.18.4

# 查看已经安装过的 node 版本
nvm list

# 切换 node 版本
nvm use 12.18.4

# 设置默认版本
nvm alias default v12.18.4

# 查看当前 node 版本
node --version

# 顺带把 yarn 也装了
npm install -g yarn

• 安装 nrm，用来切换源

# nrm 是用来切换源的，主要用在两个方面
# 一是国内墙的原因，有时候要切换到淘宝源。二是可能有些包是在自己公司私有源上的，可以添加私有源，方便切换

# 安装 nrm
yarn global add nrm

# 查看当前源
nrm current

# 查看所有源
nrm ls

# 添加一个叫 mynpm 的源，地址是 http://mynpm.test.org/
nrm add mynpm http://mynpm.test.org/

# 切换源
nrm use mynpm

• 全局装自己需要的框架

# 需要 react 的装 react，需要 vue 的装 vue
# 以 vue 为例，我个人习惯用 yarn 安装，如果你习惯用 npm 就改成 npm
yarn global add @vue/cli

# 全局安装 typescript 和 ts-node
# ts-node 是 node 端用来执行 ts 文件的
yarn global add typescript
yarn global add ts-node

# 另外推荐一个好用的全局包 gtop
# gtop 可以很方便的看系统资源的状态
yarn global add gtop 

高效的 IDE 配置

前端的 IDE 有很多选择，早些年的 sublime，后来的 webstorm，再后来火遍大江南北的 vscode，甚至有些硬核选手会用 vim 作为开发工具。我个人最推荐的还是微软家的 vscode，轻便简洁，又不缺强力插件，调试也方便。我主要推荐几个提高效率的插件，至于语言支持和主题样式因人而异，根据自己需求和喜好来配就好了。

插件名	功能
Auto close tag	自动闭合标签
Auto rename tag	一次性修改标签的名字
Better comments	给代码添加高亮注释
Bracket pair colorizer 2	高亮括号
Code runner	直接右键可执行代码
Color highlight	高亮颜色
Comment translate	选中自动翻译
Debugger for chrome	开一个 chrome 视窗 debug
Docker	docker 相关的插件
ESLint	eslint 相关插件
Gitlens	git 管理工具
Import cost	自动计算引入包的大小
Markdown preview mermaid support	markdown 预览支持 mermaid 风格的 uml 图
Npm intellisense	引入 npm 包自动补全路径
Open in browser	右键支持浏览器打开
Prettier	格式化插件
Settings sync	同步 vscode 配置
TSLint	tslint 相关插件
Visul studio code commitizen support	支持 commitizen 提交 git 校验
Vscode-fileheader	给文件添加个人信息的注释

装完之后可以设置一下保存自动格式化，然后用刚安装好的 Settings sync 进行备份，下次换设备或者重装系统，直接从云端同步配置就好。

1. command + shift + p 呼出面板，输入 open setting，选 json 打开
2. 在打开的配置文件里面加一句 "editor.formatOnSave": true, 然后保存
3. command + shift + p 呼出面板，输入 sync 选择 update 配置，然后跟着提示备份数据
4. 需要从云端恢复配置的时候，呼出面变输入 sync 选择 download 即可。
5. 呼出面板，输入 shell，选择在 PATH 中安装 code 命令，在命令行中就可以 code xxx 用 vscode 打开文件或者目录

贴一张我的 vscode

Git 与团队协作

工作与学生时代（或者说个人项目）最大的区别就是：需要团队协作。这就涉及到如何高效进行团队协作，以及如何规范团队研发流程。Mac 预设就带 git，没有 git 的同学可以去官网下。

git 是每个程序员的必修课，不熟悉的同学一定要抽时间把 git 系统性的学习一遍，廖雪峰老师的 git 教程就够用了。这里主要讲讲 git 的配置和常见用法，熟悉的同学可以跳过。

• ssh 和 git 初始化

# 配置 ssh 关联 git 仓库
# 邮箱换成自己的，另外生成前检查一下 ~/.ssh 目录，如果有这个目录，重新生成会覆盖
# 输入完命令后会让你填一些东西，一路回车就好，不然容易有坑，除非你清楚你在干啥
ssh-keygen -t rsa -C "o953328679@gmail.com"

# 确保开启 ssh 代理
eval "$(ssh-agent -s)"
ssh-add ~/.ssh/id_rsa

# 复制 ~/.ssh/id_rsa.pub 的内容
# 然后去你的仓库，比如 github 里找到 setting 选项，然后选 ssh key 选项，新建 ssh key，然后粘贴进去
# 然后你就可以潇洒的 git clone 你的仓库了
pbcopy < ~/.ssh/id_rsa.pub

# 顺便设置一下 git 个人信息
git config --global user.name "Evan"
git config --global user.email "o953328679@gmail.com"

• 在现成项目上开发

# cd 到你的工作目录，假设你有个 workplace 的目录
cd ~/workplace

# 克隆仓库
git clone git@your-address.git

# 拉一个新分支
# 然后在上面开发
git checkout -b your-branch

# 开发完毕后，暂存变更
git add .

# 提交并添加备注
git commit -m "init"

# 推送到远程仓库
git push

• 新建远程仓库并且关联本地项目

# 进入工作目录
cd your-workplace

# 初始化并关联仓库
git init
git remote add origin git@your-address.git

# 拉取代码
git pull origin master

# 查看关联的远程分支
git branch -vv

# 暂存变更
git add .

# 提交并添加备注
git commit -m "init"

# 推送到远程仓库并指定分支
git push --set-upstream origin master

• 介绍一下主流的 git 工作流程
  • master 分支是最稳定的分支，随时能打一个 release 上线。master 一般不允许直接修改，只允许合并其他测试完毕的分支。
  • develop 分支是用于测试一些功能分支的，他是最新的版本，但是不稳定。比如开发了一个新的还未经测试的功能，就合并到 develop 分支上。同样一般他也是不能直接修改的，只允许合并其他分支。
  • feature 功能分支，用来开发新功能。开发一个新功能就拉一个分支，开发完就合并到 develop 测试。
  • release 发布分支，当 develop 分支测试通过，将从 develop 拉一个 release 分支出来。release 分支只允许修复 bug，不再接入新功能。确定无误后即可发版合并到 master 中。同时也要合并会 develop 分支保证 develop 代码是最新的。
  • hotfix 分支是紧急修复线上 bug 的分支。修复完之后合并回 master 和 develop 分支。

至于团队研发流程的规范，一般来说是开发时 eslint / tslint 校验，提交时 pre-commit 配合 husky 的检查，开发完后提交 code review 让同事审查，审查通过后提交 merge request 再合并分支。整个流程详细说要花费大量篇目，这里引用一篇阿里的文章，写的比较详细了。👉文章看这里

其他

除了上述的这些常见的配置之外，还有一些其他常见的研发配置以及一些提高效率的工具。我这里列一下，不展开细说了，大部分都是官网有详细的教程。

名称	说明
Mongodb	docs.mongodb.com/manual/tuto…
Mysql	dev.mysql.com/downloads/m…
Redis	redis.io/download
Docker	www.docker.com/get-started
Markdown	我用的是mweb，要收费但是很好用，配合脚本可以直接发布博客
Postman	www.postman.com/downloads/
Alfred	很方便的搜索工具，我用来代替mac自带的spotlight，因为它可以在某个站点内搜索，比如我可以直接在npm搜索，直接在github搜索等

贴一张 Alfred 的图吧

workflow

最后介绍一下我自己的工作流。我有写一些自动同步日历日程的脚本，写了一些机器人提醒我干活。一般来说开完会之后，我会直接同步我的待办事项和日程。然后到要干活的时候就直接开整：

• option + 空格 呼出终端，直接去工作目录，然后 code . 打开当前目录
• 回到终端，command + t 新增终端窗口，跑 dev
• git 一套操作开发，然后提一个 code review 需求给同事，完事了提 merge request 然后合并代码
• 过程中有需要查阅资料的，就 command + 空格 呼出 alfred 搜
• 遇到有需要记录的就打开 mweb 记录下来，后续再整理
• 部分需求需要查日志，呼出终端上到跳板机，然后去开发机，经过开发机查测试环境的日志
• 部分需求需要做后端或者 bff 的，就用 postman 调试

以后有时间，再分享一篇平时学习的 workflow，以及一些高效的日常配置，同步博客记录，机器人消息推送等。

下篇预告

写了万把字，总算把上篇写完了。在下篇中，我会介绍如何巩固自己的知识壁垒，职业规划和选厂建议。感兴趣的同学可以关注一下，没人看我就当作日常记录😂😂

2020.10.15