【編者按】本文作者為 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 官方博客