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,如果有幫助到大家,也非常喜歡大家順手點個贊!