摘要：不過，前端開發(fā)的現(xiàn)狀其實(shí)也很瘋狂。并不是只有你感到抓狂。你要?jiǎng)?chuàng)建的網(wǎng)頁應(yīng)用基本上都會(huì)出現(xiàn)在鐘形曲線中間的某個(gè)位置。開始開發(fā)應(yīng)用時(shí)，關(guān)鍵在于在鐘形曲線上選取一個(gè)點(diǎn)，作為你的應(yīng)用最終復(fù)雜程度的上限。

【編者按】本文作者為 Sean Fioritto，主要闡述了 JavaScript 開發(fā)為何讓人有些無從下手的根本原因。文章系國內(nèi) ITOM 管理平臺(tái) OneAPM 編譯呈現(xiàn)。

網(wǎng)絡(luò)開發(fā)樂趣多多！Javascript 卻……讓人望而卻步。

網(wǎng)頁開發(fā)的其他所有東西都很配合，唯獨(dú)到了 Javascript，你會(huì)感覺好像比別人少了一大塊基礎(chǔ)知識(shí)，完全搞不懂它。

事實(shí)就是，沒錯(cuò)，你的確缺了幾塊拼圖。

不過，前端開發(fā)的現(xiàn)狀其實(shí)也很瘋狂。

拉把椅子坐下來。該寫個(gè) Javascript 應(yīng)用了。

首先要搭建和運(yùn)行本地環(huán)境。是用 Gulp，還是 Grunt，都不好……還是用 NPM 腳本吧！

Webpack 還是 Browserify？（不好意思地）還是 Require.js？要升級(jí)到 ES6 嗎？在預(yù)處理中加入 Babel 是不是太過了？

行為驅(qū)動(dòng)開發(fā)還是常規(guī)的單元測(cè)試？應(yīng)該選用哪種斷言框架？如果能從命令行運(yùn)行測(cè)試當(dāng)然是好事，那何不試試 PhantomJS？

Angular 還是 React？Ember 呢？Backbone 怎么樣？

有些 React 文檔寫道：“Redux 是 JavaScript 應(yīng)用可預(yù)見的狀態(tài)容器?！碧袅?！你肯定需要來一個(gè)。

讓筆者來幫你弄明白為什么這些看起來都這么瘋狂。首先看個(gè)例子，然后再看漂亮的圖片。

以下是 React 的“Hello, world!”應(yīng)用。

// main.js
var React = require("react");

var ReactDOM = require("react-dom");

ReactDOM.render(

  
Hello, world!
,

  document.getElementById("example")

  );

這還沒完。

$ npm install --save react react-dom babelify babel-preset-react

$ browserify -t [ babelify --presets [ react ] ] main.js -o bundle.js

其實(shí)中間缺了幾個(gè)步驟，比如說安裝 browserify，還有完成這些之后還要做什么，才能讓它在網(wǎng)頁上運(yùn)行，因?yàn)閮H僅這些并不能生成一個(gè)有用的網(wǎng)頁。

完成這些之后，會(huì)得到一個(gè)名為 bundle.js 的文件，里面就是新的 React Hello World 應(yīng)用，包含 19374 行代碼。接下來，只需要安裝 browserify、 babelify 和 react-dom，然后衡量未知的成千上萬條代碼。

基本上就是這樣……

現(xiàn)在用基本的 Javascript 來寫一個(gè) hello world 應(yīng)用。

這就是全部內(nèi)容。18行代碼。你可以把它們復(fù)制、粘貼到一個(gè)叫 index.html 的文件，雙擊加載到你的瀏覽器。好了。

如果此刻你對(duì)自己說：“但是，等一下，React 能做的可不止你剛才寫的那點(diǎn)兒小東西，你不能那么寫 Javascript！”這話（大部分）是正確的，你很快就會(huì)發(fā)現(xiàn)為什么所有東西都這么瘋狂了。

你要?jiǎng)?chuàng)建的 Javascript 網(wǎng)頁應(yīng)用基本上都會(huì)出現(xiàn)在鐘形曲線中間的某個(gè)位置。在中間位置，如果一開始你用了 React 全棧，那么你的應(yīng)用從一開始就極大地違背了設(shè)計(jì)標(biāo)準(zhǔn)。

這就是為什么所有東西都很瘋狂。你以為你必須使用的工具大部分都是為了解決現(xiàn)在未出現(xiàn)，或者永遠(yuǎn)都不會(huì)出現(xiàn)的問題。

Javascript 開發(fā)現(xiàn)狀讓人無措又迷惑，因?yàn)樗腥瞬]有意識(shí)到，在默認(rèn)狀態(tài)下，他們的應(yīng)用已經(jīng)違背了設(shè)計(jì)標(biāo)準(zhǔn)。

你該如何開始搭建 Javascript 應(yīng)用？你應(yīng)該用 React 或 Angular 這樣的工具嗎？要是不用該怎么辦？測(cè)試到底有沒有必要？還要用 Javascript 生成標(biāo)記嗎？在開始搭建默認(rèn)的龐大技術(shù)堆棧之前，這些都是你應(yīng)該回答的問題。開始開發(fā) Javascript 應(yīng)用時(shí)，關(guān)鍵在于在鐘形曲線上選取一個(gè)點(diǎn)，作為你的應(yīng)用最終復(fù)雜程度的上限。

坦白說，要實(shí)現(xiàn)這一點(diǎn)需要經(jīng)驗(yàn)。不過還是有很多 Javascript 應(yīng)用可以借鑒的出發(fā)點(diǎn)的：Jquery 加上客戶端模板，還有一個(gè)非常簡單的構(gòu)造工具，用來連接和減少生產(chǎn)文件（假設(shè)你的后臺(tái)框架還沒有這項(xiàng)功能）。

如果你了解了如何正確構(gòu)造 Javascript 應(yīng)用，你就會(huì)逐漸明白如何、何時(shí)以及為什么要使用框架、npm、require、webpack 或 es6，何時(shí)要寫測(cè)試，何時(shí)應(yīng)該在本地測(cè)試，何時(shí)應(yīng)該在瀏覽器測(cè)試，以及其他會(huì)出現(xiàn)的問題和麻煩。

本文轉(zhuǎn)自 OneAPM 官方博客
原文地址：http://www.planningforaliens.com/blog/2016/04/11/why-js-development-is-crazy/