使用 JS 進行快速原型製作的示例
使用 JS 進行快速原型設計 是一本實踐性書籍，向您介紹使用最新的尖端網絡和移動技術進行快速軟件原型設計，包括 NodeJS、MongoDB、BackboneJS、Twitter Bootstrap、LESS、jQuery、Parse.com、Heroku 等。
這是一個免費示例，第一章 - 簡介，使用 JS 進行快速原型設計 .您還可以從 LeanPub 獲取免費 PDF，並在 github.com/azat-co/rpjs 瀏覽代碼示例。購買完整版 以 PDF、Mobi/Kindle 和 ePub/iPad 格式訪問 leanpub.com/rapid-prototyping-with-js。
簡介
Rapid Prototyping with JS 是一本動手實踐的書，它向您介紹使用最新的尖端網絡和移動技術（包括 Node.js、MongoDB、Twitter Bootstrap、LESS、jQuery、Parse.com、Heroku 等）進行快速軟件原型設計。
本書的讀者對象
這本書是為高級初學者和中級 Web 和移動開發人員設計的：剛開始編程的人，以及其他語言專家，如 Ruby on Rails、PHP 和 Java，並想學習 JavaScript 和 Node.js。
從名稱中可以看出，使用 JS 進行快速原型設計是為了盡可能快地將您的想法以 Web 或移動應用程序的形式轉化為功能原型。這種思想遵循精益創業方法論；因此，這本書對初創公司的創始人來說會更有價值，但大公司的員工也可能會覺得它很有用，尤其是當他們打算在簡歷中添加新技能時。
先決條件
強烈建議將 Mac OS X 或 UNIX/Linux 系統用於本書的示例和一般的 Web 開發，儘管在基於 Windows 的系統上仍然可以破解。
一些雲服務即使是免費帳戶也需要用戶的信用卡/借記卡信息。
期待什麼
期待大量的編碼，而不是太多的理論。我們涵蓋的所有理論都與一些實際方面直接相關，對於更好地理解技術和處理它們的具體方法至關重要，例如 JSONP 和跨域調用。
除了編碼示例之外，本書還涵蓋了幾乎所有的設置和部署步驟。
您將從前端組件開始的留言板 Web/移動應用程序示例中學習。這些應用程序有幾個版本，但最終我們會將前端和後端放在一起並部署到生產環境。留言板應用程序包含基本 Web 應用程序所需的所有典型組件，並且會讓您有足夠的信心繼續自己開發、申請工作/升職或創辦一家初創公司！
這是本書的數字版本，因此大多數鏈接都像在任何其他網頁上一樣被隱藏，例如 jQuery 而不是 http://jquery.com。本書的內容有本地超鏈接，可以跳轉到任何部分。
本書中使用的所有示例源代碼都可以在本書以及公共 GitHub 存儲庫 github.com/azat-co/rpjs 中找到。您還可以將文件下載為 ZIP 存檔或使用 Git 提取它們。本書後面會詳細介紹如何安裝和使用 Git。源代碼文件、文件夾結構和部署文件應該在 PaaS 解決方案（即 Windows Azure 和 Heroku）上本地和/或遠程工作，只需稍作修改或無需修改。
符號
這是源代碼塊的樣子：
var object = {};
object.name = "Bob";
終端命令的外觀類似，但以美元符號開頭，$:
[旁注]
閱讀博客文章很好，但觀看視頻課程更好，因為它們更具吸引力。
許多開發人員抱怨 Node.js 上缺乏負擔得起的高質量視頻材料。觀看 YouTube 視頻會讓人分心，花 500 美元購買 Node 視頻課程很瘋狂！
去看看 Node University，它有關於 Node 的免費視頻課程：node.university。
[旁注結束]
$ git push origin heroku
$ cd /etc/
$ ls
內聯文件名、路徑/文件夾名稱、引號和特殊單詞/名稱斜體 while 命令名稱，例如 mongod , 和強調的詞，例如，Note , 是粗體 .
網絡基礎
概覽
Web 和移動應用程序開發的大局包括以下步驟：
- 用戶在瀏覽器（也稱為客戶端）中鍵入 URL 或點擊鏈接；
- 瀏覽器向服務器發出 HTTP 請求；
- 服務器處理請求，如果查詢字符串和/或請求正文中有任何參數，則將其考慮在內；
- 服務器更新/獲取/轉換數據庫中的數據；
- 服務器以包含 HTML、JSON 或其他格式數據的 HTTP 響應進行響應；
- 瀏覽器收到 HTTP 響應；
- 瀏覽器以 HTML 或任何其他格式（例如 JPEG、XML、JSON）向用戶呈現 HTTP 響應。
移動應用程序的行為方式與常規網站相同，只是可能有一個原生應用程序而不是瀏覽器。其他細微差別包括：由於運營商帶寬而導致的數據傳輸限制、更小的屏幕以及更有效地使用本地存儲。
移動開發有幾種方法，各有優缺點：
- 使用 Objective-C 和 Java 構建的原生 iOS、Android、Blackberry 應用；
- 原生應用在 Appcelerator 中使用 JavaScript 構建，然後編譯為原生 Objective-C 或 Java；
- 為小屏幕量身定制的移動網站，採用響應式設計、Twitter Bootstrap 或 Foundation 等 CSS 框架、常規 CSS 或不同模板；
- 由 HTML、CSS 和 JavaScript 組成的 HTML5 應用，通常使用 Sencha Touch、Trigger.io、JO 等框架構建，然後使用 PhoneGap 封裝到原生應用中。
超文本標記語言
超文本標記語言或 HTML 本身並不是一種編程語言。它是一組標記標籤，用於描述內容並以結構化和格式化的方式呈現。 HTML 標記由 標記名稱 組成 尖括號 (<>) 內。在大多數情況下，標籤圍繞內容，結束標籤具有 正斜杠 在標籤名稱之前。
在這個例子中，每一行都是一個 HTML 元素：
<h2>Overview of HTML</h2>
<div>HTML is a ...</div>
<link rel="stylesheet" type="text/css" href="style.css" />
HTML 文檔本身就是 html 的一個元素 標籤和所有其他元素都是該 html 的子元素 標籤：
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h2>Overview of HTML</h2>
<p>HTML is a ...</p>
</body>
</html>
HTML 有不同的風格和版本，例如，DHTML、XHTML 1.0、XHTML 1.1、XHTML 2、HTML 4、HTML 5。這篇文章很好地解釋了這些差異——誤解標記：XHTML 2/HTML 5 Comic Strip。
更多信息請訪問 Wikipedia 和 w3schools。
層疊樣式表
層疊樣式表或 CSS 是一種格式化和呈現內容的方式。一個 HTML 文檔可以有多個帶有 link 標籤的樣式表 如前面的示例或 style 標籤：
<style>
body {
padding-top: 60px; /* 60px to make some space */
}
</style>
每個 HTML 元素都可以有 id 和類 屬性：
<div id="main" class="large">Lorem ipsum dolor sit amet, Duis sit amet neque eu.</div>
在 CSS 中，我們通過元素的 id 訪問元素 , 類 ，標籤名稱，在某些邊緣情況下通過父子關係或元素屬性值：
p {
color:#999999;
}
div#main {
padding-bottom:2em;
padding-top:3em;
}
.large {
font-size:14pt;
}
body > div {
display:none;
}
input[name="email"] {
width:150px;
}
如需進一步閱讀的更多信息，請訪問 Wikipedia 和 w3schools。
CSS3 是對 CSS 的升級，其中包括新的處理方式，例如圓角、邊框和漸變，這在常規 CSS 中只有借助 PNG/GIF 圖像和其他技巧才能實現。
有關更多信息，請參閱 CSS3.info、w3school
和關於 Smashing 的 CSS3 與 CSS 比較文章。
JavaScript
JavaScript 於 1995 年在 Netscape 以 LiveScript 的形式出現。它與 Java 的關係就像倉鼠和火腿一樣 :)
它用於客戶端和服務器端開發以及桌面應用程序。
有一個腳本 在 HTML 文檔中使用 JavaScript 的標記：
<script type="text/javascript" language="javascript>
alert("Hello world!");
//simple alert dialog window
</script>
通常將 JavaScript 代碼與 HTML 分開是個好主意；在這個例子中，我們包括 app.js 文件：
<script src="js/app.js" type="text/javascript" language="javascript" />
以下是 JavaScript 對象/類的主要類型：
- 數組對象，例如，
var arr = ["apple", "orange", 'kiwi"]; - 布爾原始對象，例如，
var bool = true; - 日期對象，例如，
var d = new Date(); - 數學對象，例如，
var x = Math.floor(3.4890); - 數字原始對象，例如，
var num = 1; - 字符串原始對象，例如，
var str = "some string"; - RegExp 對象，例如
var pattern = /[A-Z]+/; - 全局屬性和函數，例如
NaN - 瀏覽器對象，例如
window.location = 'http://google.com'; - DOM 對象，例如
var table = document.createElement('table');
w3school 上提供了完整的 JavaScript 和 DOM 對象和類參考以及示例。
函數聲明的典型語法：
function Sum(a,b) {
var sum = a+b;
return sum;
}
console.log(Sum(1,2));
由於語言的函數式編程性質，JavaScript 中的函數是一等公民。因此函數可以用作其他變量/對象；例如，函數可以作為參數傳遞給其他函數：
var f = function (str1){
return function(str2){
return str1+' '+str2;
};
};
var a = f('hello');
var b = f('goodbye');
console.log((a('Catty'));
console.log((b('Doggy'));
與 C 和 Java 等語言中的強類型相反，JavaScript 具有鬆散/弱類型，這使得 JavaScript 成為更好的原型編程語言。
有關瀏覽器運行 JavaScript 的更多信息，請訪問 Wikipedia 和 w3schools。
敏捷方法
敏捷軟件開發方法的演變是由於傳統方法（如瀑布）在高度不可預測的情況下（即解決方案未知時）不夠好。敏捷方法論包括 Scrum/Sprint、測試驅動開發、持續部署、配對編程和其他許多實用技術，其中許多是從極限編程中藉來的。
Scrum
在管理方面，敏捷方法使用 Scrum 方法。更多關於 Scrum 的內容可以閱讀：
- 維基百科，
- Scrum 指南，
- Scrum.org.
Scrum 方法論是一系列短週期，每個週期稱為sprint .一個衝刺 通常持續一到兩週。 Sprint 以 sprint 計劃會議開始和結束，在那裡可以將新任務分配給團隊成員。新任務不能添加到正在進行的 sprint 中；它們只能在 sprint 會議上添加。
Scrum 方法的一個重要部分是每日 scrum 會議，故名。每個 scrum 是一個 5-15 分鐘的會議，通常在走廊進行。在 scrum 上 會議每個團隊成員回答三個問題：
- 從昨天開始你做了什麼？
- 你今天要做什麼？
- 您需要其他團隊成員的幫助嗎？
靈活性使敏捷成為對瀑布方法的改進，尤其是在高度不確定的情況下，即初創公司。
Scrum 方法的優勢：在難以提前計劃的情況下有效，並且在使用反饋循環作為主要決策機構的情況下也很有效。
測試驅動開發
測試驅動開發（TDD）由以下步驟組成：
- 使用真假斷言為新功能/任務或增強功能編寫失敗的自動化測試用例。
- 編寫代碼以成功通過測試用例。
- 根據需要重構代碼，並在保持測試用例通過的同時添加功能。
- 重複直到任務完成。
測試驅動開發的優勢：
- 錯誤/缺陷更少，
- 更高效的代碼庫，
- 讓程序員確信代碼可以正常工作並且不會破壞舊功能。
持續部署
持續部署或 CD 是一組技術，可快速向客戶交付新功能、錯誤修復和增強功能。 CD 包括自動化測試和自動化部署。通過使用持續部署，可以減少人工竊聽，並最小化反饋循環時間。基本上，開發人員越快從客戶那裡獲得反饋，產品就可以越早轉向，從而在競爭中獲得更多優勢。與 6 到 12 個月的發布週期相比，許多初創公司在一天內部署了多次，這對於企業和大公司來說仍然很典型。
最流行的 CD 解決方案之一是持續集成服務器 Jenkins。
持續部署方法的優點：減少反饋循環時間和人工開銷。
結對編程
結對編程是兩個開發人員在一台機器上一起工作的一種技術。其中一位開發者是司機，另一位是觀察者。司機編寫代碼，觀察者觀察、協助並提出建議。然後他們轉換角色。駕駛員具有專注於當前任務的更具戰術性的作用。相比之下，觀察者在監督“大局”以及改進代碼庫並使其更高效的方法方面更具戰略性。
結對編程的優點：
- 將屬性與更短、更高效的代碼庫配對，並減少錯誤和缺陷。
- 作為一個額外的好處，當程序員一起工作時，知識會隨著他們一起傳遞。但是，開發人員之間可能會發生衝突。
Node.js
Node.js 是一種事件驅動的異步 I/O 服務器端技術，用於構建可擴展且高效的 Web 服務器。 Node.js 由 Google 的 V8 JavaScript 引擎組成。
Node.js 的用途和使用類似於 Python 的 Twisted 和 Ruby 的 EventMachine。 Node 的 JavaScript 實現是繼嘗試使用 Ruby 和 C++ 編程語言之後的第三個實現。
Node.js 本身並不是像 Ruby on Rails 這樣的框架。它更類似於 PHP+Apache 對。以下是一些 Node.js 框架：Express、Meteor、Tower.js、Railsway JS、Geddy、Derby。
使用 NodeJS 的優點：
- 由於 JavaScript 作為 Web 和移動應用程序開發的事實標準，開發人員很有可能熟悉 JavaScript。
- 一種用於前端和後端開發的語言可加快編碼過程。開發人員的大腦不必在不同的語法之間切換。方法和類的學習速度更快。
- 使用 NodeJS，您可以快速製作原型並儘早進入市場進行客戶開發和客戶獲取。與其他使用不太靈活的技術（例如 PHP 和 MySQL）的公司相比，這是一個重要的競爭優勢。
- NodeJS 旨在通過利用 Web 套接字來支持實時應用程序。
有關更多信息，請訪問 Wikipedia、Nodejs.org 以及有關 ReadWrite 和 O'Reilly 的文章。
NoSQL 和 MongoDB
MongoDB，來自huMONGOus，是一個用於海量數據的高性能無關係數據庫。當傳統的關係型數據庫管理系統（RDBMS）無法應對海量數據的挑戰時，NoSQL 概念應運而生。
使用 MongoDB 的優勢：
- 由於分佈式特性而可擴展：多個服務器和數據中心可能有冗餘數據。
- 高性能：MongoDB 對於存儲和檢索數據非常有效，而不是元素之間的關係。
- 鍵值存儲是原型設計的理想選擇，因為它不需要知道架構，也不需要固定的數據模型。
雲計算
計算包括：
- 基礎設施即服務 (IaaS)，例如 Rackspace、亞馬遜網絡服務；
- 平台即服務 (PaaS)，例如 Heroku、Windows Azure；
- 軟件即服務 (SaaS)，例如 Google Apps、Salesforce.com。
雲應用平台提供：
- 可擴展性，例如，在幾分鐘內生成新實例；
- 易於部署，例如，要推送到 Heroku，您只需使用
$ git push; - 即用即付計劃：根據需求添加或刪除內存和磁盤空間；
- 通常不需要安裝和配置數據庫、應用服務器、包等；
- 安全和支持。
PaaS 是原型設計、構建最小可行產品 (MVP) 和一般早期初創公司的理想選擇。
以下是最受歡迎的 PaaS 解決方案列表：
- Heroku
- Windows Azure
- 節點柔術
- 節點器
HTTP 請求和響應
每個 HTTP 請求和響應都由以下組件組成：
- Header：編碼、正文長度、來源、內容類型等信息；
- 正文：內容，通常是傳遞給服務器或發送回客戶端的參數或數據；
另外，HTTP Request 包含：
- 方法：有幾種方法；最常見的是 GET、POST、PUT、DELETE。
- 網址：主機、端口、路徑；
- 查詢字符串，即 URL 中問號後的所有內容。
RESTful API
由於分佈式系統的需求，RESTful（REpresentational State Transfer）API 變得流行，其中每個事務都需要包含有關客戶端狀態的足夠信息。從某種意義上說，這個標準是無狀態的，因為沒有關於客戶端狀態的信息存儲在服務器上，因此每個請求都可以由不同的系統提供服務。
RESTful API 的顯著特點：
- 由於可以將不同的組件獨立部署到不同的服務器，因此具有更好的可擴展性支持；
- 由於更簡單的動詞和名詞結構而取代了簡單對象訪問協議 (SOAP)；
- 使用 HTTP 方法：GET、POST、DELETE、PUT、OPTIONS 等。
以下是用於消息收集的簡單創建、讀取、更新和刪除 (CRUD) REST API 示例：
| 方法 | 網址 | 意義 |
|---|---|---|
| GET | /messages.json | 以JSON格式返回消息列表 |
| PUT | /messages.json | 更新/替換所有消息並以 JSON 格式返回狀態/錯誤 |
| POST | /messages.json | 創建新消息並以 JSON 格式返回其 id |
| GET | /messages/{id}.json | 以JSON格式返回id為{id}的消息 |
| PUT | /messages/{id}.json | 用 id {id} 更新/替換消息，如果 {id} 消息不存在則創建它 |
| 刪除 | /messages/{id}.json | 刪除id為{id}的消息，返回JSON格式的狀態/錯誤 |
REST 不是協議；從某種意義上說，它是一種架構，它比作為一種協議的 SOAP 更靈活。因此，REST API URL 可能類似於 /messages/list.html 或 /messages/list.xml 如果我們想支持這些格式。
PUT 和 DELETE 是冪等方法，也就是說如果服務器收到兩個或多個類似的請求，最終的結果是一樣的。
GET 是無效的，POST 不是冪等的，可能會影響狀態並導致副作用。
在 Wikipedia 上進一步閱讀 REST API 和 A Brief Introduction to REST 文章。
