【編者按】本文作者為 OneAPM 工程師李哲崭倘，文章主要介紹前端知識(shí)對(duì)于編程的必要性翼岁。
這里說的前端知識(shí)是比較通俗的前端知識(shí)司光，包括網(wǎng)頁琅坡，桌面或移動(dòng)端程序的界面，命令行程序的提示等等残家，即和用戶進(jìn)行交互的那一部分脑蠕。我的工作經(jīng)歷中，很多人是不在乎這一部分的跪削，更有很多人覺得這個(gè)很 low谴仙，在年初的時(shí)候，還聽到一位這樣說碾盐，“前端無非就是 Copy Paste”晃跺，在前端技術(shù)發(fā)展這么迅猛的現(xiàn)在，還能說出這樣的話毫玖，可見這個(gè)人的眼界是多么的狹小了掀虎，連沖他苦笑的時(shí)間都騰不出來。
由于工作內(nèi)容的關(guān)系付枫，大部分情況都是在 Linux 的虛擬終端下烹玉，也就是敲擊鍵盤輸入各種命令，等著系統(tǒng)的反饋阐滩。我使用過很多更好用的命令行程序的替代品二打，比如 top 命令的替代 htop，看看 top 和 htop 的區(qū)別吧掂榔，很明顯 htop 要更好用继效。
虛擬終端用了那么多年，也沒有什么實(shí)質(zhì)上的改進(jìn)绩鸣，只是多了幾種 shell 的變種穴豫，比如 zsh凡简，fish 等等。實(shí)際上有很多人在做這方面的嘗試，原因也就是現(xiàn)在的虛擬終端太難用了秤涩。讓我們看看 black-screen 是什么樣子的翁逞。black-screen 基于 electron 開發(fā)，也就是 github atom 的底層引擎溉仑。做的還不是完全兼容，能滿足一般使用吧状植。
即使在虛擬終端這個(gè)領(lǐng)域，大家都在追求友好的界面設(shè)計(jì)津畸，以及交互的友好振定。如果你認(rèn)為 black-screen 沒有什么技術(shù)含量的話，那就大錯(cuò)特錯(cuò)了肉拓，一個(gè)頁面里渲染那么多的內(nèi)容后频，如何提升渲染的性能，是一個(gè)很大的難題暖途，github 對(duì) electron 有很多的優(yōu)化卑惜，都是在如何渲染字符上下的功夫，可 github 的技術(shù)實(shí)力驻售，相比微軟還是差了一大截露久，微軟的 VSCode 同樣基于 electron，但是啟動(dòng)速度欺栗，運(yùn)行速度都甩出 github 的 atom 幾條街毫痕。有點(diǎn)扯遠(yuǎn)了，O(∩_∩)O~迟几。
前面兩個(gè)例子可能有人沒有辦法理解消请，這和前端有什么關(guān)系？從我使用這兩個(gè)工具的感覺是类腮，他們更加好用臊泰，與原來的 top 和 terminal 來對(duì)比的話，我發(fā)現(xiàn)他的界面漂亮蚜枢，使用起來簡(jiǎn)單因宇，出了錯(cuò)誤的時(shí)候提示比較友好，比如 black-screen 在執(zhí)行了一個(gè)長(zhǎng)時(shí)間運(yùn)行未立即返回運(yùn)行結(jié)果的命令時(shí)祟偷，它會(huì)顯示一個(gè)滾動(dòng)的進(jìn)度條察滑，而傳統(tǒng)的終端就是停在那里，也不知道它是不是已經(jīng)僵死了修肠。
現(xiàn)在通常意義上的前端贺辰，就是 HTML，CSS，JavaScript 了饲化，還有無數(shù)的前端框架莽鸭，對(duì)于非專職的前端工程師來說，僅僅需要懂些基本的 HTML吃靠，CSS硫眨，以及一些 CSS 框架就可以了，比如 Twitter 的 Bootstrap巢块，在真正的前端工程師看來礁阁，這些都是小菜一碟，而對(duì)于一個(gè)只搞后端的工程師來講族奢，那真是全世界最難的事了姥闭，他們看不起前端，卻又做不出來越走。缺少界面棚品，你做的工具就沒有辦法用，界面難用廊敌，工具也就很難用铜跑，雖然里面的代碼可能寫的很棒。
拿我們用了一年的 OpenTSDB 說吧骡澈，那個(gè)界面真是讓人想死的心都有疼进，動(dòng)不動(dòng)就是直接報(bào)錯(cuò)，雖然是好東西秧廉，可是這臉面真是不能恭維伞广。對(duì)比一下它和Grafana。
其實(shí)也不用做這么好看，但是最起碼是可用的蔽豺，看起來是整整齊齊的区丑，就像命令行的幫助文檔那樣，雖然是基于字符的修陡，但是一看就是認(rèn)認(rèn)真真的做出來的沧侥，像 OpenTSDB 那個(gè)明顯是出來糊弄事兒的。
這個(gè)都比 OpenTSDB 的界面好
說點(diǎn)歷史問題吧宴杀，最早的程序員根本不分前后端，VB拾因，Delphi 的 C/S 時(shí)代旺罢，界面就是妥妥拽拽旷余，寫任何程序都是要自己做界面的；后來到了 B/S 時(shí)代扁达，做網(wǎng)頁的稱為美工正卧，終于提取出這樣一個(gè)工種，還需要懂 PS 切圖跪解，又出來一個(gè) Dreamweaver炉旷，也是想拖拖拽拽的解決問題。再到后來叉讥，網(wǎng)頁前端越來越復(fù)雜窘行，像 Java 社區(qū)出的 JSF ，還有 HTML5 崛起前的那兩年节吮，Adobe 的 Flex，AIR判耕，很多工作流軟件就是用這兩項(xiàng)技術(shù)做的透绩，以及 Java 從誕生起最雞肋功能 — JavaFX。那個(gè)時(shí)候壁熄，真正用軟件的人少帚豪，其實(shí)也是人們不會(huì)用，因?yàn)榻缑嫔弦簿褪乔岸肆瞬萆ィ瑳]有人用的明白狸臣，太復(fù)雜。直到最近五年昌执，到了每個(gè)人都會(huì)用軟件的時(shí)代烛亦，技術(shù)雖然是進(jìn)步了，但是讓人們懂拾，從小孩到老人都能去用這些軟件的根本原因不僅僅是技術(shù)進(jìn)步煤禽，更重要的是界面的交互設(shè)計(jì)進(jìn)步了，它讓每個(gè)人都能很簡(jiǎn)單的學(xué)會(huì)如何操作岖赋。
現(xiàn)在到了大數(shù)據(jù)的時(shí)代檬果，存儲(chǔ)數(shù)據(jù)是一個(gè)要解決的問題，從數(shù)據(jù)中發(fā)現(xiàn)價(jià)值是另一個(gè)要解決問題唐断，而數(shù)據(jù)可視化可淺顯的歸為前端工作选脊，畢竟是要從數(shù)據(jù)中“看到”價(jià)值，當(dāng)然脸甘，這部分工作只是懂前端知識(shí)是不夠的恳啥，所以如果大數(shù)據(jù)工程師能夠懂得如何將數(shù)據(jù)可視化出來，也許更能體現(xiàn)他們的價(jià)值丹诀，而不僅僅是把那些大數(shù)據(jù)的組件玩的滾瓜爛熟角寸，卻不能“看到”什么東西菩混。
前端已然發(fā)展成為一個(gè)和大數(shù)據(jù)一樣熱門的職業(yè)了，雖然你可能不是一個(gè)前端工程師扁藕，但是稍微學(xué)一點(diǎn)沮峡，不要讓時(shí)代把你給落下了。
OneAPM Browser Insight 是一個(gè)基于真實(shí)用戶的 Web 前端性能監(jiān)控平臺(tái)亿柑，能幫助大家定位網(wǎng)站性能瓶頸邢疙，實(shí)現(xiàn)網(wǎng)站加速效果可視化；支持瀏覽器望薄、微信疟游、App 瀏覽 HTML 和 HTML5 頁面。想閱讀更多技術(shù)文章痕支，請(qǐng)?jiān)L問 OneAPM 官方技術(shù)博客颁虐。
本文轉(zhuǎn)自 OneAPM 官方博客
