前端是有多难？

最近感觉追不动前端的发展了，写篇文章感叹一下。

HTML

我知道有一些学校会教一些简单的网页制作，就是用 Dreamweaver 点一点的那种。大多也会留作业，最后交作业的时候看起来也像模像样。

只要不看代码。

看了代码感觉宁愿选择死亡。

table 布局，无意义的 dom 节点。大小写混用，缩进混乱。

作为一个前端工程师，至少要写明白自己写的声明是什么意思对吧？

然后还得减少不必要的 dom 节点，毕竟很多文章说节点多会影响渲染速度(ps: 我是不在乎的，我觉得有点儿矫枉过正的味道了)

然后比较重要的一点儿是对于语义化标签的见解。比如什么时候该用ul, 什么时候该用section,aside

至于 head 里面的那些无聊的声明只要会复制粘贴就好了，我觉得没什么意思

自信做到这些的应该算差不多了

文章说的是前端有多难，很多人都觉得这些标签简单。然而想象一下，要写多少的标签才能理解语义化的意义？要写多少页面才能真正的明白这个节点应该写什么标签？如何组合才算合理？

CSS

然后是关于 CSS，我觉得这方面是很复杂的。并不像很多人觉得只是一些单词的组合。

一开始我会改background-color觉得开心得不行，以为掌握了

后来无限突破视野。

在第一次写超过50个class之后就感觉想死，重复性劳动，样式修改调试，写法丑。。。

接触到 Sass 之后像是发现了新大陆，有一段时间甚至不会写原生 css 语法了。

然后折腾: Sass -> Stylus

到这里结束了么？ naive

后面还有postcss, cssnext 这些东西。

在 react 生态中还有 css-modules, css-in-js 这些鬼东西。

虽然语法都不是很难。但是这么长时间的折腾下来，虽说提升是有的，但并没有感觉到生产力有多少巨大的提升。

css 到这里还没完。

还有BEM的命名方式要去理解。

到这里依旧没有完。

css3 的新特性，还有各种 hack。比如如何实现footer始终在底部，内容始终撑满全局？如何实现条纹？

到这里结束了么？

依旧没完。

css stage 4 等着去学习。

还有精力？

可以试着多做些兼容性相关的东西。会崩溃，相信我

到这里？

在我的视野中差不多算结束了，然而有谁能确定明天有没有一个什么new-css之类的东西解决什么问题。

JS

来了来了，前端的一个核心。

说JS轻松么？咱们来扯扯。

首先是各种 dom 的增删改，然后是ajax相关。学会了差不多能做简单的页面了。

然后对异步的理解。只有理解了异步才能正常地写js。

然后是对js语言特性的理解。比如ES5如何实现继承什么的，闭包。

总之这些就是面试题总是会问的东西。

之后还应该理解设计模式对吧？

到这里是正常的语言应该学习的内容了。然而js到这里只是起步。

之后一个前端工程师还得会 ES2021年/2021年 之类的吧。现在不写个async谁好意思说自己是写前端的？

之后应该是配合工具了，后文说。

继续顺着语言往下说。会了 ECMAScript 就能做个合格的前端了么？

还早呢。

之前火的coffee script现在不行了，然而TypeScript火了啊。不学一下怎么好意思追前端？

ts 对于之前写 Java, C# 的非常友好，基本语法没什么变化。然而可苦了那些不写这些语言的同学。语法改变倒是其次，思维方式的转变才是难以接受的。

现在还有Elm了。。。

我觉得我老了，追不上了

Tools

都说二流程序员爱玩工具，那我应该算是三流程序员了。对于vim如果我不算狂热，那可能没有几个人算是教徒了。

我一直觉得编辑器应该够快，能够跟上我思考的速度。在折腾了两年总算契合了我的习惯。

对于其他编辑器，我只有一个不去选择的理由：太慢

好了，说完了我自己的选择，得来看看我用过的编辑器了。

最初我也没用过几天的 Dreamweaver。直接上了 sublime。之后跟着快乐的sublime编辑器这套课程用了起来，应该是我用过除了vim外时间第二长的编辑器。

最初只觉得好看就用起来了。

然后学了一段时间PHPStorm，大概会用了JetBrains家的东西。说实话，他们家的东西是不怎么好学的，细节太多。

然后我用起了vim。

作为一个0基础起步的人，我在编辑器上折腾了两年多才算找到了还算合适的方式。

其实我觉得很多人并没有找到自己合适的编辑器，导致写代码的热情都降低了。

对于编辑器的总结是只能自己踩坑才能找到合适的编辑器和配置。然而需要时间踩坑啊！

另外的工具大概是前端的工具集了，就像是gulp这类的东西。

我在初学的时候流行的是grunt，然而我看到那个配置文件写的就完全不想用。

然后gulp就流行了起来，配置文件看起来简单好多，学！

然后gulp刚刚入门就发现世界已经被webpack统治了，怎么办，学啊。

这么长时间的折腾结束了么？没有啊！

还有rollup打包这些东西了。

像是php或者java就没这么多破事，代码不用打包，直接跑起来，哪里会半年换一套方案。

到现在，HTTP/2大行其道，可是前端却没有一款适合HTTP/2的打包工具。所以我觉得半年到一年左右还会有新的工具出现，大家准备好重新学习吧 🙂

刚刚突然想起了还有版本控制工具也算是工具。

一开始不用版本控制，然后学Git， 然后有些公司使用svn，又得学。会用是一回事，深入理解又是另一回事了。咱们得稍微深入地理解一些吧。比如版本控制如何看待移动文件这件事的？

然后会了Git， 怎么说也得上Github混混脸熟吧。然后跟Gayhub上的一堆基佬交流一下，怒了提交个issue。过几天发现这么简单的bug还没fix掉，忍不了，我自己写patch，发个pr上去。

上面一行话说得轻松，然而没个一年半载哪里做得到。

版本控制会了，企业级私有仓库还得折腾一下吧，踩踩坑。

Functional

又一个重点来了。

就是js什么范式都能写。

OOP么？约起！class Foo {}走起来。

因为大多数人都是从C/C++学起的，所以总能先接触到OOP思想。而且OOP挣钱容易，所以这其中大部分人是不愿意接触不怎么挣钱而且还得重新学的的其他部分的，用我爹的话说就是别搞那些没用的。

然而现在不学FP真的能行么？

并不能啊，兄弟。

现在不写个 react 好意思跟人说自己是写前端么！写了react怎么说也得接触一下 redux 吧。然后就完了。。。和之前完全不同的新思维就来了。

之前jQuery绑定一个数据直接改就好了。现在出个单项数据流，什么操作都得发个 action ，视图得订阅 store 。好吧，这还不算FP的范畴。

高阶函数总是了吧。我之前从来没想过高阶函数怎么在 react 里面用，直到看了 connect 源码吃了一惊，卧槽，还能这么写！

还有说烂了的柯里化。

现在还出现了很多js的函数式语言变种，就像Elm,clojurescript什么的。

我真的觉得不学门函数式现在很难做前端了。

所以从入门的OOP到函数式，得费多大功夫才能学会。人家都是学好一种就可以了，做前端的都得会

Back-End

Node.js带来了前端的春天。然而也加重了前端的负担。

之前写点儿jQuery就成了，现在还得会Node, 自己写后端。

写过后端的人多少都知道，代码写起来并不算很难，难的是负担。如何设计才能承载高并发大流量。如何应对这些情况，宕机了怎么办。

原来前端不用关心的东西现在都得考虑。毕竟 Node 和前端靠的近，人家问起来自己不会多尴尬。

在我个人看来，很多写Node的只知道堆package, 对于Buffer,Event,Stream,Http并不是很了解。

所以写 Node 的前端同学们啊，咱们的学习之路任重而道远。

学通了之后呢？那就已经脱离前端的范畴了。

Database

这都说到后端了。得扯一下数据库吧。

数据库绝不是简单的拼一下SQL语句就可以了。

在设计表结构的时候要充分考虑之后的应用场景，可维护性，承载量级。

就算不考虑上面的几条，那至少得遵守到三范式吧？

数据库应用的时候还有很多要了解，比如一个表关联是什么意思，事务是什么东西，应用场景在哪里，如何处理慢查询。

而我发现有些人都被ORM惯坏了，写SQL都生疏了。

好了，一个前端工程师做到这份上也算是仁至义尽了。后面的交给DBA吧。

Server

做一个独立前端自然少不了和server打交道。关于 Nginx 至少得会安装。然后会写简单的配置文件。这样，就可以自己上一个网站了。用了 Node 还得学学反向代理的东西。

然而到这里哪里能满足爱折腾的前端？

HTTPS 走起！从几家服务商中选择自己喜欢的，口碑好的，然后搞定证书。

跑了HTTPS依旧不满意，追新的我们怎么还用几十年前的 HTTP/1.1 ？ HTTP/2 走起，自己下载编译安装 Nginx ，然后调参数，改配置。

这个阶段得学会 Linux系 编译， SSL/TLS 的知识，加密算法，HTTP。。。

一个写前端的还得学这些 T_T

还没完啊，HTTP懂了还有TCP/IP等着啃，Socket协议还得了解。

算法数据结构与数学

一万个人告诉我算法和数据结构才是计算机科学的核心。

List, Graph, Tree 什么的还得学学。反转二叉树这种知名题目还得写写。快排，水仙花什么的还得写一些

这个时候可能有些前端会问，跟我有关系？

关系太大了。

我在实习的第一个月在做module load的一些方案，因为对算法了解不深，写了很多操蛋的代码。好在后来各种重构没让我太过羞耻。

前端多多少少会接触 canvas 和 WebGL 这些关于图形学的东西。可是如果线性代数学的不到家怎么可能写得好图形学的代码？

至于那些数据结构对于前端应用可能并不是很明显，然而一旦碰到将是致命的。比如对于Immutable.js的理解

所以一个合格的前端算法还得过关。

工程化

工程化是我一直觉得前端的最最困难的地方。和其他的后端所不同的是，前端工程化的重要性远超算法数据结构。

前端虽然也有几十年了，可是一直处于边缘地带。没有非常稳定和合适的工程化实现。

千禧之前大多用C直接写(前端渲染用什么我真不知道，求老司机教)。然后用PHP做后端，直接在HTML里面拼接。

然后出jQuery一统江湖。改dom解决所有问题。

可是到这个时候是无法解决大量页面所带来的问题的。比如性能，比如缓存，比如代码重复，比如代码可读性差。

之后的Angular1的出世应该算是一道惊雷。在我看来前端工程化大概从这里起步了。

源自于后端常用的依赖注入控制反转之类的思想开始在前端崭露头角。

到现在，虽然群星闪耀，却仍旧没有一个稳定的最好的解决方案。

从MVC -> MVVM -> Flux 的变化，现在似乎Reactive有着火起来的趋势。

如何组织构建页面，如何在大量页面中仍然能优秀地组织好文件结构，如何在面对需求变更的时候通过尽量少的修改代码来实现需求。如何减少错误的发生，和排错的代价。

在我看来，在前端领域，优秀的工程化方案要比优秀地算法更重要一些。

硬件

再来扯扯硬件吧。

最重要的自然是电脑，毕竟我们这样的“网瘾少年/女”每天八九个小时都要对着电脑，甚至可能比和对象呆一起的时间都长。

所以，颜值怎么能差！长得丑还有心情撸代码？

所以，性能怎么能差！女朋友老生气谁受得了。

我个人最想要的应该是顶配版 MacBook Pro 了。等发新品了，就算卖屁股也得买一台

所以看看做个前端成本多高！不仅要写代码熬成白发还得兼职卖屁股 T_T

然后是键盘，这个我保证比碰男女朋友时间长。

自从我买了 HHKB 我只觉得没有网上盛传的那么神奇。我该怎么用还是怎么用，代码速度依旧，开心程度依旧。

所以我觉得可能一把500块的cherry就够了。

关键是一定要把大写锁定map 到ctrl！！！

关于 remap 的问题。。。我觉得有些同学还是不愿意干的，毕竟麻烦。

然后继续谈谈做前端的成本问题。

我大二就买了个独立显示器，应该算是比较早的了。

不买个独立显示器对这个小屏幕，鬼才愿意写代码。

然而屏幕烧起来可是贵了不少。好在我穷得烧不起(此处插入微信smile表情)

然后是椅子。我前一段时间想买一把好点儿的椅子。

然后我刷了一遍各种评价不错的椅子。觉得好像拖到40岁得个腰间盘突出比较值

结论

到这里，你发现了么

前端一点儿都不简单啊。

要学各种注定被淘汰的所谓“新”东西。还得学贯前后端，熟悉算法，了解工程化方案。

别人攒钱买房，咱攒钱买键盘。

所以这辈子做前端的上辈子都是折翼的天使，请善待你身边的前端同学