面向自己的2018前端开发指南
当我每次觉得这世界上再也没有比爱情更让人捉摸不透的东西的时候，我都会摔一本最新出版的前端书籍到我的脸上。。。
弹指一挥间，2017年已经过去，又到了新的一年。如果让我写年终总结的话，我是绝对不会提到我的那些在2015年定下的要在2016年实现的直到2017年还没完成的计划的。而如果让我许下一个2018年的新年愿望，那么，它一定是这样的：
“2018年的某天，一款名叫universal.js的框架诞生了。发布后的10分钟内，github上的star数就已经超过100k。随之而来的，是整个前端开发界的赞叹和膜拜。universal.js的语法简洁精致但不失严谨，加上天生的高效性能和灵活到万能的使用场景，从此以后，人们再也不用为学习何种JavaScript框架、语法而烦恼，前端疲劳将不复存在，一招universal.js便可通吃前端的天下。”
如果2018年真的有这么一款大一统的前端框架出现的话，所有的前端开发者们估计晚上睡觉都会被笑醒吧。
YY结束，还是回到现实，让我从自己肤浅的角度出发，理清自己的思路，探索一下2018年的前端开发领域究竟有哪些值得我重点关注和投入时间学习的地方。
一. 开发工具/软件
1. Text Editor/IDE
开发工具/软件
IDE的庞大和臃肿并不适合前端开发。也因此，轻便的文档编辑器成为了前端们的挚爱。在众多流行的文档编辑器中，VSCode (微软出品)、Atom (GitHub出品)、Sublime Text (Jon Skinner出品，一位谷歌大神)是我个人最感兴趣也最喜欢的三款编辑器。网上有很多关于三者性能比较的文章，大致的结论是VSCode和Sublime Text的综合性能（包括打开关闭文件、搜索等等）旗鼓相当，在需要打开大量文件的场景下Sublime Text的速度最快最流畅，而Atom则最差，经常有卡顿崩溃的情况发生，资源占用最大。
就我个人而言，我之前一直在使用Sublime Text，一年前的某天无意间被Atom的一款package (Active Power Mode，那特效简直了，可以让你瞬间爱上写代码……) 给种了草，便毅然决然的放弃了性能最强的Sublime Text，转战Atom。在使用Atom的这一年时间里，的确经常遇到卡顿、死机、还有崩溃。但我依然没有放弃它，就因为我实在是太爱Atom的package了。截止到此时此刻，GitHub上已经有7171个package可供Atom使用了，可谓是后宫佳丽七千人啊。也正是它们的存在让我可以忍受Atom性能上的问题。
相对于2014年才发布的Atom，Sublime Text早在2007年便已登场，出道整整十年。可想而知，Sublime Text会拥有多少狂热的粉丝。在2017年的Stack Overflow开发者调查报告里，Sublime Text在最受欢迎的开发环境中排行第三。我相信，凭借着出色的性能以及和Atom不分伯仲的package数量，Sublime Text依然会在2018年稳坐开发环境排行榜的前三名。
2017开发环境排名 from Stack Overflow
作为三者中最年轻的VSCode(2015年中发布)，我之前并没有使用过它。但我之所以把它列了出来，理由和一年前从Sublime Text转战Atom一样，被它的一款Plugin种了草。没错，就是那个可以直接在VSCode里映射Chrome的debug功能，断点调试JavaScript，真心666。当然，因为最年轻，Plugin目前不如Atom和Sublime Text那样丰富。但这不妨碍我对它的浓厚兴趣，2018年我一定要尝试一下VSCode。
2. 浏览器
如果要投票选出最佳浏览器的话，Chrome和Firefox会让我陷入长久的纠结之中，因为它们在我心中都是最佳。如果你是IE浏览器的忠实粉丝 (你确定？)，那么你可以跳过这一段。很抱歉，我无法对于IE做任何评论，因为我对它真的不太了解 (主要是不想了解……)，每次都是用现成的polyfill腻子脚本来招待IE。
对于Chrome和Firefox，我的态度就完全不同了，两者拥有的丰富插件令人爱不释手。Chrome自带开发者工具，而Firefox更是提供了一款完全面向开发者的浏览器 —— Firefox Developer Edition。前段时间Firefox刚刚发布的最新版本的Firefox Quantum浏览器，其性能已经达到了普通版Firefox浏览器的两倍有余。它不仅内置了新一代的CSS引擎，更是第一款对CSS Grid的开发设计提供定制化工具的浏览器 (之后推出的Chrome57也添加了对CSS Grid特性的支持)。
Firefox Quantum Developer Edition
在日常开发中，我还是更习惯使用Chrome的开发者工具，因为入门就是从Chrome开始的。而Firefox更多只是作为一款浏览器兼容测试工具使用。在我了解了Firefox Quantum的众多出彩的特性以后，我愈发觉得仅用来做浏览器兼容实在是暴殄天物。是时候要好好研习一下Firefox的Dev Tools了。
3. User Interface
UI这一部分我平常很少做，一般是由Web Designer来完成。但Photoshop和Sketch这两款UI设计工具我还是用过的，不过也仅仅只是用过而已。我个人很喜欢Sketch，个人感觉对于入门这一级别来说，Sketch的学习曲线相比较Photoshop来说更加的平缓一些，可以让人快速上手，也更加User Friendly。所以，对于想尝试设计的入门开发者，我个人推荐Sketch。如果有时间，我也一定要补一补Sketch的课，提高自己使用设计类软件的姿势水平。
二. HTML/CSS
HTML/CSS
1. CSS Flexbox and Grid
CSS框架用多了之后有一个坏处，就是让人慢慢忘记了CSS…… 忘记了怎么不依赖CSS框架写布局，甚至也忘记了CSS的一些最基本的知识。当我把大部分时间投入到了JavaScipt的学习上，蓦然回首，却惊恐得发现自己已经不知道怎么用CSS实现复杂一些的布局了。这就好像我在车里钻研驾驶技术，却猛然发现车的轮胎没了。就算请来驾驶技术再高超的老司机，也发不了车了。所以，新的一年，我需要“补胎”。那么从何补起呢？当然是从Flexbox和Grid开始。
我现在对于CSS布局的理解依然停留在利用block, inline, position, table和float的年代，而当我搜索CSS相关的博客文章时，发现CSS布局已经进入到了Flex和Grid的新时代。看来，仅仅利用传统的几个CSS display属性已经无法满足日益复杂的网页布局需求了。而新加入的flexbox和grid这两个模块，则为解决复杂的响应式网页布局提供了更为全面的技术手段。你要问学习哪个模块更好？答案是没得选，两个都得学。它们之间并不存在竞争的关系，而是互补。因此不存在谁更好的问题，只存在在某个特定的布局场景下，用谁更合适的问题。
2. CSS预处理器
什么是CSS预处理器？我觉得可以用类比来解释。CSS预处理器就好像是CSS版本的Babel，是一个CSS的转码器。Babel可以将ES6转码为有更多环境支持的ES5，而CSS预处理器则是将特定的脚本语言转码为传统的CSS代码。特定脚本语言的语法取决于你所使用的那款CSS预处理器。使用CSS预处理器可以让我们写出更简洁易懂的代码，节省时间，便于组织规划，并且利于之后的维护。
目前最主要的CSS预处理器有三款：Sass, Less和Stylus，其中最受欢迎的是Sass。这不是我说的，有图为证：
CSS Preprocessor Ranking.jpg
这三款预处理器中我只学习使用过Sass，原因就是因为它最受欢迎。在前端开发领域估计大家都有选择恐惧症，随便讨论一个前端的分支都有一堆成熟的技术方案可供选择。我为了避免让自己经历这种“恐惧”，便采取了最简单粗暴的方法：在性能使用场景等方面没有很大差异的前提下，哪个最流行学哪个。于是，我相中了Sass。Sass另外一个让我喜爱的原因是，它的粉红色logo让我看一眼就想起了我最喜爱的一款游戏——侠盗猎车罪恶都市。看来，选择一款技术产品也是要看眼缘的……
3. HTML/CSS Framework
刚说完选择恐惧症，HTML/CSS的众多框架就来给我提供最鲜活的例子了。Twitter Bootstrap， Materialize CSS，Semantic UI，Zurb Foundation，Bulma等等，数不胜数。Bootstrap作为最受欢迎的一款CSS框架，已经推出了第四版，源代码使用了Sass作为CSS预处理器。至于框架的学习与使用选择，同CSS预处理器部分，选最受欢迎绝对不会后悔。
三. JavaScript
JavaScript
1. 原生JavaScript
对于如何治愈JavaScript疲劳，方法可谓五花八门。但据我所知，业界大牛们都有这样一个共识：学好原生JavaScript。这听起来好像令人感到轻松了很多，因为我们不需要再面对那长长的包含各种工具框架的学习清单了。而事实上，我认为，学好原生JavaScript反而是最难的，最消耗精力和时间的。对于我而言，当我能够做到以下三点时，我才会觉得自己学好了原生JavaScript：
(1) 对于DOM的熟练操作（摆脱jQuery）
“这人啊一操作DOM就忘了JS该怎么写，过去一天百度/谷歌三遍，麻烦！现在好了，有了jQuery，查一遍顶过去五遍，效率高，代码少，一口气就把DOM给操作了，不费劲！”
我不知道大家是什么感受，反正这是我用了jQuery之后的切身体会。确实好用，但坏处是加速了原生JS的遗忘。如果说原生JavaScript是基本功的话，那么jQuery就是JavaScript的奇技淫巧，它只是披了一层简洁易用外壳的JavaScript。对于如何让自己的DOM操作在不使用jQuery的情况下依旧熟练，我的想法是向jQuery学习。学习它的源代码，学习它的设计模式。既然jQuery可以把原生JavaScript封装、设计得如此简洁快速，那么它一定是“最懂”原生JS的，它一定是一名优秀的“原生JS老师”。
(2) ES6/ES2016/ES2017新特性
我之所以认为学好原生JavaScript真的不容易，很大程度上是因为从2015年ES6发布以后开始，ECMAScript标准每年会定期更新一次。更新带来的不仅仅是更高效易用的JavaScript，也带来了伴随着新特性新语法而提高了的学习成本。不过，幸好有Babel的陪伴，可以让我们放心大胆的学习使用ES6。毕竟有它来兜底，基本可以解除我们对于浏览器不支持的忧虑。我已经看到了ES2018在前方挥手呢，接着学吧。
ES6 Arrow Functions is Awesome!
(注：awesome在美式口语中是极好的很棒的意思。千万别按字典上的来，因为字典总是把awesome翻译成可怕的。。。迷信字典才是可怕的。。。)
(3) 能自己写出类似Lodash工具库中的各种工具函数
我第一次用Lodash的时候，有一种自己在用PHP的感觉。PHP的函数库虽然混乱不堪，令人诟病，但不得不承认，PHP写起来真的太方便了，工作中遇到的和我能想到的几乎所有功能PHP都有现成的函数供我使用。而Lodash和Underscore这一类的JS工具库，不仅优化了JS本身存在的函数，也加入了很多实用的新函数。不过，随着ES6的普及和众多新特性的加入，类似 Lodash等的工具库似乎已经走向了末路，毕竟不是亲生的。然而，和jQuery一样，Lodash也“浓缩”了一批精华，包含着各种五花八门的原生JS操作和设计的技巧。对于目前只会使用它但一旦自己尝试去实现一个函数就会漏洞百出的我来说，Lodash绝对会有醍醐灌顶之力。
2. JavaScript框架
React, Angular, Vue究竟孰优孰劣，鹿死谁手？2018我会入谁的坑？分析完估计需要千字左右。。。为了保证阅读体验，且听下回分解。。。（其实是一口气写了这么多暂时有点写不动了，容我缓缓）
React vs. Angular vs. Vue
To be continued...未完待续
网友评论