2018之我的web開發
好的架構來自於演化，人亦之。
在公司做全棧工程師，一年的磨練，讓我在開發道路上也有了長足的進步。現在，組裡來了一些新員工，為了幫助他們更好的理解web開發，就寫了這篇文章，也全當自己一年的“演進”吧。
目的
- web開發，是組內的工作之一，希望同事們對web開發有一些共同的認識，也歡迎讀者拍磚（keypoint：前後端的分離）
web的演化之路
什麼是web開發？
Web開發，一種基於B/S架構（BROWSER/SERVER）的應用軟體開發技術，分為前端（使用者介面）和後端（業務邏輯和資料）。
簡單介紹一下技術：
- 前端：HTML（負責框架），CSS（負責樣式），JavaScript/">JavaScript（負責互動）【載體：瀏覽器。HTML、CSS渲染引擎，JS直譯器，還有一些別的，比如客戶端資料庫】
- 後端：PHP，JAVA，PYTHON等等。【載體：python直譯器，java編譯器，Apache】
- OSI模型：物理層，資料鏈路層【SDLC】，網路層【IP】，傳輸層【TCP、UDP】，會話層，表示層，應用層【HTTP】（理論共七層）
在整個網際網路的發展過程中，web的演化是非常漫長的，也伴隨著技術的迭代。而在我們小組，這個過程是簡單並且清晰的，我從一年眾多的工作中找到這樣一條web演化的路線，希望能夠幫助同事們更加理解團隊的技術架構。
v1.0
背景故事：
為了驗證某項業務的有效性，我們啟動了魔鏡專案，第一個階段是build一個能夠讓實習生標記tag的平臺。這就是小組WEB開發的開端，我們選擇python為基礎的技術棧，試用Flask，然後就做出了第一個頁面 。
程式碼工具：mp
Jinja2。Flask自帶的頁面渲染模組，它被最常使用的就是變數傳遞和控制結構。
# hello.py
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
user = {"Xing": "Ming", "Nian": "Ling"}
cool_here = "Thanks for reading!"
return render_template('index.html', user=user, cool_here=cool_here)
app.run()
# index.html
<h1>Hello World!</h1>
{% for key, value in user.items() %}
<h1>{{ key }}</h1>
<h2>{{ value }}</h2>
{% endfor %}
{{ cool_here }}
看程式碼，很容易就能發現Jinja2模版引擎的優勢，它可以讓你像寫python一樣寫HTML頁面，通過python直譯器轉化出整個HTML的DOM樹，從而實現web開發。
在這個階段，沒有什麼前後端的區分，大家都在寫後端程式碼，所有的控制都在服務端完成，瀏覽器只用渲染後端提供的頁面資料就可以了。
再補充一點關於資料傳遞（POST， GET）的程式碼。
<form id='user_form' name='user_form' method='post' action='{{ url_for('user.add_user') }}'>
<tr id='hidden-tr'>
<td><input type='text' name='username'>
<td><input pattern='[0, 1, 2, 4]' name='permission' value=1><!--資料校驗-->
<td><input type='submit' class='like' value='增加&更新'>
</tr>
</form>
<a href="{{ url_for(link_url, sid=sid) }}" name='card-link'>{{ link_name }}</a>
明顯特點：
- 小巧的Flask以一己之力從後到前的實現了當時業務的需求，魔鏡平臺有條不紊的被搭建起來;
- 技術棧簡單輕巧，團隊能夠在開發時有餘力做模型建立和業務探索。
典型問題：
- 業務變得複雜。在一個頁面內點選一個按鈕，發出一個request但不reload頁面，這套簡單的開發模式根本無法實現類似的需求；
- 程式碼難維護。隨著前端業務變得複雜，為了響應變動的前端業務，後端要付出的成本急劇增大，程式碼職責也變得不清晰起來；
- 互動體驗。改善使用者每次校驗資料需要把資料傳到伺服器端的窘境。
v2.0
背景故事：
為了響應複雜的業務需求，我們必須在頁面中使用ajax。JavaScript的加入，讓前後端變得分明，也讓程式碼職責重新變得清晰。頁面的區域性互動全部由ajax完成，部分資料校驗也由ajax完成，這時候是前後端分庭抗禮的階段。
程式碼工具：
Jquery，脫穎而出的JavaScript庫，依賴簡單的CDN就能完美使用，它被最常使用的是事件響應和ajax互動。
<script src="{{ url_for('static',filename='jquery-3.2.1.min.js') }}"></script>
<script>
$("#btn_input_form").on("click",function(){
console.info("show a form");
$("#div_input").show();
})
$.ajax({
url: postUrl,
data: formData,
processData: false,
contentType: "application/json",
type: 'POST',
success: function (data) {
// do something
}
})
</script>
明顯特點:
- 滿足了需求，頁面的功能逐漸飽滿；
- 前後分明，在某種程度上簡化了後端程式碼的複雜度，讓程式碼維護變得輕鬆。
典型問題：
- 有Jinja2模版的支援，jquery操作DOM起來得心應手，但是jquery以功能互動為主，前端程式碼很快變得十分龐大，檔案變得冗長，閱讀困難倍增，維護亦然；
- 業務不斷的迭代，對web頁面的需求也不斷拔高，jinja頁面和ajax的配合逐漸不能滿足日益增長的互動需求，新的技術擴充套件需求迫在眉睫；
- 後端業務的不斷擴充套件，前端相同的互動功能程式碼，抽象和複用都很難進行，這幾乎成為了制約前端進步的主要原因。
v3.0
背景故事：
為了響應複雜的業務需求，團隊進一步踐行SPA（single-page application），把大量的業務需求放在前端實現，進一步增加前端互動功能並且優化使用者體驗，推行了Vue框架。至此，組內的web開發已向前端傾斜。
程式碼工具：
Vue，構建使用者介面的漸進式框架，它的核心庫只關注頁面本身，易於上手，方便整合。
<div id="demoPage">
<h4> 請選擇：你更喜歡哪一個還原過程呢？</h4>
<form>
<textarea v-model="comment" v-if='showOrHide' v-bind:placeholder="warnMsg"></textarea>
<button type="button" @click="makeDecision()">我選好了！</button>
</form>
</div>
var app = new Vue({
el: "#demoPage",
data: {
showOrHide: true,
comment: '',
warnMsg: '請輸入理由！',
},
methods: {
makeDecision: function() {
let that = this;
if (that.chosenValue === null && that.comment === "") {
var msgArray = ["要輸入理由哦~", "請務必告知原因~"];
that.warnMsg = msgArray[Math.floor(Math.random() * msgArray.length)];
return
};
$.ajax({
// do something
})
},
},
})
看程式碼，很容易知道Vue不僅在script層做互動，它綁定了DOM，實現了資料的雙向繫結。各種語法和元件也易於使用，還有簡單方便的打包工具，也給一段元件化的示例。
<template> </template> <script> </script> <style scoped> </style>
明顯特點：
- 虛擬的DOM，雙向繫結的資料，元件化的檢視，簡單的語法，Vue極大的滿足了團隊的前端需求，幾乎對接了企業級的前端應用；
- 徹底分開的前後端架構，職責更清晰，開發更容易，維護更簡單；
- 部署相對獨立，產品體驗可以快速改進。
典型問題：
-
API不清楚。隨著前後端的分離，所有連結變成API，那API的穩定和清晰就至關重要了。前端靜態化、後端資料化、構架分離化，三大轉變演進緩慢，導致團隊配合失調。【前後端分離最困難、最關鍵的環節，API的制定和編寫。】
- 設計階段：架構負責人對專案整體進行分析，討論並確定API風格，制定API介面；
- 開發階段：前後端分離各自分工，後端提供資料API，並撰寫文件，前端獲取資料；
- 測試階段：（mock測試）前後端擬定測試時間，迅速調整介面。
- SPA並不能滿足所有需求，依舊存在大量多頁面應用，某些design仍然需要後端配合。
Future
團隊的web開發演化到了今天，幾乎發生了滄海桑田的變化。但是，演化並沒有走到盡頭...
變美的關鍵-CSS
我們選用了bootstrap作為樣式庫。
結語
由於小組是以全棧為目的進行組建的，在前後端的處理上有很多麻煩，很多工作在前後端都能完成，所以職責不明晰、程式碼不簡潔成為了web開發的主要問題。SPA讓後端資料化確實給了我們很大的幫助。
最後，非常感謝花時間閱讀文章的你們，非常歡迎大家指出我意識不到的BUG，如果有幫助到大家，也非常喜歡大家順手點個贊！