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

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

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

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

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

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

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

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

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

行為驅(qū)動開發(fā)還是常規(guī)的單元測試？應(yīng)該選用哪種斷言框架？如果能從命令行運(yùn)行測試當(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)頁。

完成這些之后，會得到一個(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 的文件，雙擊加載到你的瀏覽器。好了。

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

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

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

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

你該如何開始搭建 Javascript 應(yīng)用？你應(yīng)該用 React 或 Angular 這樣的工具嗎？要是不用該怎么辦？測試到底有沒有必要？還要用 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è)你的后臺框架還沒有這項(xiàng)功能）。

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

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