構建Bootstrap

構建Bootstrap

----最近在看新鮮出爐Bootstrap4,翻到了之前的一篇老文章，講述了Tweter工程師構建Bootrap的初衷和過程。
如下翻譯自Bootstrap 創始人Mark Otto的博客 Building Twitter Bootstrap講訴了Bootstrap的建立歷程。

原文地址:http://alistapart.com/article/building-t...

---

一年半之前，一小部分Twitter的工程師準備着手開發一個用於團隊內部管理和分析工具，在圍繞這個工具早期開展的一些會議上，咱們決定帶着一個更高的目標去建立這樣一個可以爲Twitter任何一個員工使用的工具，甚至Twitter覺得的人們。所以，咱們打算創建一個系統可以幫助像咱們這樣的人在這個基礎上建立新的項目，因此Bootstrap就這樣構建出來了。

我和Jacob Thornton建立的Bootstrap前端工具被用來幫助設計師和開發者快速高效地搭建網上應用，咱們的目標是建立一個精緻的、文檔規範的、由HTML、CSS、JavaScript構建的具有靈活組件庫，人們可以利用這個庫來構建本身的應用，或者在這個庫的基礎上進行創新。至今，Bootstrap已經擴展到了幾十個組件，並且成爲了Github上最受歡迎的項目，超過了13,000 的關注者以及2000個分支。

這裏我將透露Bootstrap建立的緣由、它是如何被建立的、以及它是如何演變爲一個設計系統的。

---

捕捉到機會

Twitter公司內部早期的一些工具設計得不夠精緻和人性化，以致於沒法快速地進行開發而且重複使用，幾個團隊的成員都認識到了這個問題，並且認爲這是一個對如今和將來項目的發展極佳的解決時機，認識到這一點，咱們經過早期的設計和合做造成了了一個大體的計劃。
站在一個更高的角度來看，咱們的計劃大體是這樣的：

1. 這個工具（Bootstrap）的一部分開發者與產品經理以及潛在的用戶一塊兒工做，來肯定關鍵的功能和特徵。

1. 我經過與開發者一塊兒工做來肯定需求，而後在瀏覽器中實現它，建立可視化語言和尋求互動。在實現第一步以後，咱們仔細討論了每個組件和衡量了其餘選項及實現方法，再開展下一步工做。

2. 以後，咱們開始朝着最初建立的這樣一個新的內部工具來設計和編碼，這段時間裏，咱們快速地執行、測試、迭代每一個新特徵。

3. 最後，做爲後續的工做，我把這個內部工具集中相同的組件抽出來，把他們添加到共享代碼庫中（Bootstrap），提煉而且提供文檔，供其餘項目使用。

這樣的方式意味着溝通是構建Bootstrap的關鍵，大部分設計工做發生在編碼，

最終咱們把這個經驗總結成：設計師與開發者配對。與開發者的持續溝通啓發了Bootstrap，而且推進了Bootstrap一年後的持續發展。從構思理念到簡易雛形的編碼以及跨學科的合做，這些使得Bootstrap在TWitter公司內部成功地被使用。這個過程促進了Bootstrap的每個特徵的開發，隨着時間的推移，效果顯著。

這種方式構建Bootstrap意味着溝通是關鍵，大部分設計發生在編碼中，當完成Bootstrap的可交付版本的時候，儘量地交換你們的意見變得很是有意義。這使得鼓勵開發簡潔的組件深刻到一個優秀開發者內心，可是視覺上的精良和指望是一個專業設計者的水準。

---

一個例子

讓咱們看一看Bootstrap的一個例子：下拉菜單。爲了更好得收納當前的信息而且爲其餘工具騰出空間，我須要使用到下拉菜單。許多人都會在他們的應用中用到下拉菜單，每個人都有不一樣的實現、交互和視覺設計。那麼咱們將會如何使用它呢？有了上面的提綱以後，下面這些特徵將會體如今Bootstrap中：

1. 咱們意識到咱們使用了太多了導航連接以及固定頂欄的動做，可伸縮的、多層次的下拉菜單看起來是一個解決方案。

2. 咱們經過合做來確認爲何須要這麼多的連接和動做，以及爲何咱們須要支持多層次。

3. 通過幾回的討論，咱們下定決心從新排列頂欄，移除了一些連接，實現了不支持多層次的下拉菜單。那個時候，這樣作意味着須要額外的編碼，而且實現起來很複雜，咱們想要避免這些。

4. 接下來，咱們爲下拉菜單的：hover寫了基本的Html和Css代碼，咱們在代碼庫上優化了視覺上的一些細節，而且抽象出來、編寫了文檔，加入到Bootstrap中。

5. 在最後一步抽象至Bootstrap時，咱們在動做的觸發上選擇了點擊而不是懸停，咱們發現這有利於避免用戶產生困惑和無心識的點擊，提供一個更好的體驗。

大多數的組件和周圍的細節都是經過設計師和開發者配對來設計構建的，經過合做，咱們爲每個新的特徵或者設計組件的思路逐漸成熟，通過特徵討論和回顧、實現、最後的抽象化和文檔化。這使得內部工具的開發至關地流暢，避免了特徵的變更和代碼的膨脹，並且幫助咱們弄明白了不只僅是如何在Bootstrap中去使用一個組件，而是爲何要使用它。

天然而然衍生出了新的特徵而且融合到現有特徵裏，有些功能特徵咱們已經須要修改或者移除，咱們遵循一樣的步驟：構思、審查、實現、文檔化。繼續這個例子，咱們收到了大量的圍繞下拉菜單，而且從新考慮支持多層次菜單。只從網頁應用越
像桌面應用——一樣使用多層次下拉菜單，這讓咱們以爲支持多層次變得頗有意義。咱們收回了早期的決定，但這個過程讓我咱們保持坦率的、目的明確的、而且對咱們客戶和他們的需求負責。

平行開發

幾乎咱們全部的特徵都是經過這個流程開發的，致使咱們所作的決定已經超出了僅僅只是構建這樣一個工具的範圍。咱們與那些沒有接觸到咱們的工做流程或者沒有深入理解的人必須進行有效地溝通。

咱們在忙於建立一個產品路線圖和決定一個項目的目標的時候，咱們會積極考慮其餘人如何使用相同的組件。對組件的抽象化和文檔化串聯起了咱們構建Bootstrap的整個流程。整體來說，咱們節省了時間和精力，更清楚地討論了添加（刪除）一些特徵，而且使咱們在將來可以應對更大的項目。

在最初的幾個星期的開發以後，咱們開始考慮把這個動態文檔作成工具包指南風格。咱們經過Bootstarp工做中的溝通來達成咱們的目標，這也使得Bootstrap快速地成長而且每一個人都能使用它。

指南風格的Bootstrap

建立指南型風格的Boostrap的想法很天然地在咱們的設計和開發過程當中冒了出來。Bootstrap幫助咱們用實例文檔化容器，並且他們自己支撐整個文檔，定義了真正的組件和模板。這也成了設計師的參照點，而且爲每個活的組件建立了文檔。
構建指南型風格的Bootstrap在早期就改變了Bootstrap的發展方向，它讓咱們想去實現項目以外的東西。咱們不想把本身限制在設計開發單個項目，咱們有更大的目標，咱們沒有把本身定位成只是想從這個工具中收益，咱們的目標不只僅是在Twitter使用，而是可以被任何的設計者和開發者使用。任何人都能克隆和下載源代碼，

知足全部技能水平的開發者

靈活的文檔促使咱們不只僅是分享整個框架，而是爲全部想使用Bootstrap的人提供一個書面和交互式的文檔。容許任何人克隆和下載源代碼，使用Inspector或者在瀏覽器中查看源碼。隨着工做的推動，「幫助牛b的人幹牛b的事」成爲了指導咱們工做的準則。這顯然與咱們想幫助那些沒有理解過程和產品而進行設計開發的人作決定的目標相吻合，不管是在哪一個技術層級或者工做流程的人，人們打開這個文檔，就可以使用Bootstrap快速構建本身喜歡的東西。--(未完待續)