原文 web開發(fā)技術(shù)棧（框架）總結(jié)

Bootstrap-Layui-Amazeui-jQuery-vue-react-AngularJS-ci-Thinkphp-Yii-Laravel-Node-Django-springMVC-apache-nginx-mysql-redis……

天吶，好多……

小編雖說出身工業(yè)軟件，但心里一直藏著一個UI夢。近兩年，小編業(yè)余時間從零開始摸索web開發(fā)，把web開發(fā)常用的技術(shù)和框架大概都摸了摸看了看，趁著五一假期有點(diǎn)時間，做個總結(jié)。

本文提到的前端，是指通俗語義下web開發(fā)的前端，主要內(nèi)容是視圖層的開發(fā)，包括UI布局、用戶交互及后端數(shù)據(jù)請求展示。

本文提到的后端，是指web開發(fā)的后端，內(nèi)容包括模塊路由和數(shù)據(jù)庫存取。注意，這里的后端不是指大數(shù)據(jù)開發(fā)領(lǐng)域的Hadoop、Storm那些。

前端

JavaScript(后文統(tǒng)稱為js)、css、HTML是前端開發(fā)的語言基礎(chǔ)，如果想能將前端框架用好還是需要將水平提高到大概能用的程度。html負(fù)責(zé)網(wǎng)頁的內(nèi)容和基本結(jié)構(gòu)，css負(fù)責(zé)UI樣式，js負(fù)責(zé)將用戶請求傳送到后端并將后端數(shù)據(jù)在html頁面中展示。

前端的框架分兩類，UI樣式庫和js庫。有些UI樣式為了實(shí)現(xiàn)動態(tài)效果，會使用js庫如jQuery。

前端開發(fā)的編程工作JS為主，還有近幾年出的TypeScript（JS的超集）。

奇怪的是，最近各官網(wǎng)下載的開發(fā)包里都不帶jQuery庫，如有專業(yè)人士路過請稍作指點(diǎn)。

UI樣式庫

前端框架中有很大一部分是UI樣式庫。這些樣式庫的關(guān)注點(diǎn)是視圖。對于糾結(jié)（患有強(qiáng)迫癥）的開發(fā)者，不建議使用UI樣式框架，真的是哪哪都看著不爽，到最后還不如自己css造輪子來的爽快。自己css造，不一定好看，但可以滿足強(qiáng)迫癥。

Bootstrap

小編認(rèn)為Bootstrap是一個非常好的入門選擇，教程示例非常豐富，顏值也還過得去。
柵格布局自帶響應(yīng)式，常用的顏色都有類可以直接調(diào)用。
Bootstrap中文網(wǎng)：http://www.bootcss.com/

用法示例：

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <a class="navbar-brand" href="#">導(dǎo)航</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">鏈接</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">鏈接</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">鏈接</a>
      </li> 
    </ul>
  </div>  
</nav>

示例代碼可以看出，引入類的方式來定義控件樣式，使用方便而且語義清晰。

Layui

和Bootstrap差不多的東西，個人感覺色系看起來稍顯寡淡。
Layui官網(wǎng)：https://www.layui.com

Amaze-UI

俗稱妹子UI，也是一款樣式框架。
妹子官網(wǎng)：http://amazeui.org/

Font Awesome

圖標(biāo)字體庫和CSS框架，畢竟只有圖標(biāo)字體和CSS，所以一般配合其他的樣式框架使用。
Font Awesome官網(wǎng)：http://fontawesome.dashgame.com/

js庫

js庫是實(shí)現(xiàn)功能的主要手段。常規(guī)的js庫中都會包含DOM（或虛擬DOM）操作、ajax異步get和post請求封裝實(shí)現(xiàn)、頁面渲染刷新等。

相比原生js，使用庫優(yōu)點(diǎn)在于方便，缺點(diǎn)在于js庫文件通常動輒數(shù)百kb，在帶寬緊張的環(huán)境會拖慢頁面的加載速度。

小編現(xiàn)在喜歡用vue.min.js，輕快又方便。為啥不用vue-cli方式呢？講真，對于php流個人業(yè)余全菜開發(fā)者來說，npm run dev帶來的不方便比方便更多些。

這年頭，不用npm都不好意思說自己是前端框架，不信請看vue、React、AngularJS，全都是這套玩法。

jQuery

對于傳統(tǒng)開發(fā)者來說，js為主的前端框架與其說是框架像是庫。對C/C++開發(fā)者來說，就像是

#include <stdio.h>
……

jQuery最具特色的操作是 $(“yixzm”) 等價于 document.getElementById(“yixzm”)，以及ajax，就像這樣：

$.ajax({ url: "/api", context: document.body, success: function(){
    console.log("test");
}});

DOM操作真的很方便。

jQuery官網(wǎng)：http://jquery.com/

vue

只需要用一下下，就會很爽的庫。
職業(yè)玩家都使用npm的方式，業(yè)余玩家嘛用用link引入也就可以了。vue對開發(fā)者最大的便利是不用頻繁的DOM操作，數(shù)據(jù)只需要賦值給定義的對象元素即可同步刷新頁面內(nèi)容。

據(jù)jsp玩家講，和jsp差不多？據(jù)php玩家講，和 <?php 差不多？

但小編感覺方便程度上還是差很多的，畢竟請求到的數(shù)據(jù)可以直接進(jìn)頁面，寫在js里怎么看都更好些。

vue-cli模式開發(fā)，可以讓js代碼工程化。或許，這時候的前端工程師需要調(diào)整鄙視鏈層級。（C >> C++ >> java >> php >> js？）

小編說，js主要負(fù)責(zé)請求交互和動態(tài)刷新，但有人不講規(guī)矩。比如vue中的vue-element，不僅能處理交互，還能生成UI的組件模塊。

vue-cli模式開發(fā)，有個叫做模板的東西，文件后綴格式如filename.vue，這玩意將每一個獨(dú)立的HTML模塊連同CSS和JS代碼一起封裝在一個文件里，用的時候直接引入，相當(dāng)方便。

用法示例代碼：

<div id="app">
  <ul>
    <template v-for="key in objs">
      <li>{{ obj.txt }}</li>
      <li v-html="obj.html">--------------</li>
    </template>
  </ul>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    objs: [
      { txt: 'yixzm', html: '<h1>yixzm</h1>' },
      { txt: 'dream', html: '<h2>dream</h2>' },
      { txt: 'stone', html: '<h3>stone</h3>' },
    ]
  }
})
</script>

怎么樣？夠方便吧~

v-for 這玩意，小編第一次看到時被驚呆了，還能這么寫頁面？用起來好舒服~

vue官網(wǎng)：https://cn.vuejs.org/

React

這玩意和vue的類似之處是也能工程化的管理js開發(fā)項目。既能引入的方式使用，也能npm方式構(gòu)建項目。

用法示例代碼：

<div id="example"></div>

<script type="text/babel">
function UserGreeting(props) {
  return <h1>歡迎回來!</h1>;
}

function GuestGreeting(props) {
  return <h1>請先注冊。</h1>;
}

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

ReactDOM.render(
  // Try changing to isLoggedIn={true}:
  <Greeting isLoggedIn={false} />,
  document.getElementById('example')
);
</script>

通過示例代碼中的這兩句：

document.getElementById('example')

return <h1>請先注冊。</h1>;

可以發(fā)現(xiàn)，React的開發(fā)渲染風(fēng)格和原生JS相似度很高，和vue區(qū)別很大。

React官網(wǎng)：https://reactjs.org/

AngularJS

AngularJS和vue代碼相似度很高。

<div ng-app="">
  <p>名字 : <input type="text" ng-model="name"></p>
  <h1>Hello {{name}}</h1>
</div>

和vue相比，幾乎就是換了各變量名…… 當(dāng)然，hello world 只是表象，更多區(qū)別還需要深入使用才能感受到。

AngularJS官網(wǎng)：https://angularjs.org/
AngularJS中文網(wǎng)：http://www.angularjs.net.cn/

后端

除了專注視圖活躍在用戶面前的前端框架，還有一些默默在后臺奉獻(xiàn)的后端框架。web后端框架做的事一般來說，是提供http請求服務(wù)接口，實(shí)現(xiàn)請求路由、數(shù)據(jù)存取、模塊后臺功能實(shí)現(xiàn)等。

新時代的前端框架如vue和React，本身自帶路由功能，大家將其叫做前端路由。前端路由一般使用在開發(fā)SPA（單頁應(yīng)用）的場景，路由時會異步加載數(shù)據(jù)渲染至頁面但不會重新加載整個頁面。而后端路由會重新向服務(wù)端提交請求。

后端框架一句話總結(jié)：存取數(shù)據(jù)分模塊，各種語言都能用。

Php有ci、tp、Yii和laveral，java有springMVC，Python有Django，JS有node，可謂百家爭鳴、百花齊放。

這時候，C/C++出身的小編秉著不靠天不靠地輪子自己造的精神，對各框架普遍采取讀源碼試用而不用的態(tài)度。了解、學(xué)習(xí)，但寫寫東西還是喜歡自己擼。強(qiáng)擼和借鑒（抄襲）有益理解別人的閃光點(diǎn)。

php框架

ci和tp上手極快，Yii和Laravel稍微有點(diǎn)學(xué)習(xí)成本。

ci

ci即優(yōu)雅的CodeIgniter，很mini的一款框架，相對容易入門。

CI中文網(wǎng)：https://codeigniter.org.cn/

thinkphp

傳說中的培訓(xùn)班神器，據(jù)說上手極快？

官網(wǎng)：http://www.thinkphp.cn/

Yii

沒啥好說的，看起來和ci、tp貌似差不多…… 好久沒翻Yii源碼，記得貌似是傳統(tǒng)的<?php code ?>的方式寫模板？沒啥特別的映象。

Yii中文網(wǎng)：https://www.yiichina.com/

Laravel

本菜感覺上手好麻煩，夾雜的東西太多。（正在使用laravel的大神請嘗試?yán)斫庑【幹靥岬降摹安恕弊?#xff09;
Composer安裝模塊效率很高，據(jù)說是沖鋒槍？學(xué)習(xí)成本還是蠻高的。

Laravel中文網(wǎng)：https://www.golaravel.com/

Python框架

Django

Python版的Laravel……

Django小編寫自動化、爬蟲的時候也會用到，但拿來寫web總感覺不習(xí)慣…… 誰讓Php是世界上最好的語言呢~

Django官網(wǎng)：https://www.djangoproject.com/

Java框架

Spring MVC，額，沒寫過Java，小編如果說這是Java的web開發(fā)框架，不知是否有專家會留言批評呢？

HTTP服務(wù)

以上后端框架關(guān)注應(yīng)用和數(shù)據(jù)，對HTTP服務(wù)監(jiān)聽關(guān)注的并不多。服務(wù)監(jiān)聽工作一般由Apache或者Nginx來承擔(dān)，負(fù)責(zé)請求響應(yīng)、并發(fā)和數(shù)據(jù)返回。關(guān)于HTTP服務(wù)，小編除了Apache用的比較多，Nginx搭過幾個系統(tǒng)外，了解的并不多。所以，小編暫且總結(jié)接觸過的這三個。

對于apache和nginx的比較，網(wǎng)上有很多帖子有講而且很詳細(xì)。比如這篇：Apache和Nginx的區(qū)別 就講的很好

后端流的JS

node-js，額，只用node寫過一個socket server，沒啥可總結(jié)的。node寫在這里是否合適也有待學(xué)習(xí)。
nodejs中文網(wǎng)：http://nodejs.cn/

apache

老牌的HTTP服務(wù)提供者。在小編寫C++的時代，傳說中的LAMP、WAMP猶如迷霧中的燈塔一般，在知識的海洋里引領(lǐng)著小編。

apache動態(tài)請求響應(yīng)效率高，httpd.conf配置也極其方便。

apache官網(wǎng)：http://www.apache.org/

nginx

據(jù)說更擅長靜態(tài)文件響應(yīng)？需要配置反向代理才能正常使用Php、Python等語言開發(fā)的工程，小編個人感覺有些麻煩，不怎么喜歡用。

nginx官網(wǎng)：http://nginx.org/

數(shù)據(jù)庫

存數(shù)據(jù)，mysql很方便。redis在內(nèi)存里，數(shù)據(jù)請求時加載超級快！

mysql VS redis？

關(guān)系型和非關(guān)系型，索引方便和響應(yīng)快速……
一起用吧，就像硬盤和內(nèi)存。

不過，現(xiàn)在mysql一般用MariaDB來替代。
mariadb官網(wǎng)：https://mariadb.org/
mysql官網(wǎng)：https://www.mysql.com/
redis中文網(wǎng)：http://www.redis.cn/

開發(fā)環(huán)境及工具

vscode

這玩意寫前端代碼還不錯，良心工具。

vscode官網(wǎng)：https://code.visualstudio.com/

……

還有很多，小編這次先總結(jié)這些。

#寫在最后

web開發(fā)內(nèi)容很多，也很有趣。

小編將求索以圖成長。