前端是有多難？

最近感受追不動前端的發展了，寫篇文章感嘆一下。

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到這裏只是起步。

以後一個前端工程師還得會 ES2015/2016 之類的吧。如今不寫個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歲得個腰間盤突出比較值

結論

到這裏，你發現了麼

前端一點兒都不簡單啊。

要學各類註定被淘汰的所謂「新」東西。還得學貫先後端，熟悉算法，瞭解工程化方案。

別人攢錢買房，咱攢錢買鍵盤。

因此這輩子作前端的上輩子都是折翼的天使，請善待你身邊的前端同窗

Ps

sf 居然支持 emoji 了，還真不錯哦

前端是有多難？