web开发技术栈(框架)总结

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

天呐,好多……

小编虽说出身工业软件,但心里一直藏着一个UI梦。近两年,小编业余时间从零开始摸索web开发,把web开发常用的技术和框架大概都摸了摸看了看,趁着五一假期有点时间,做个总结。

本文提到的前端,是指通俗语义下web开发的前端,主要内容是视图层的开发,包括UI布局、用户交互及后端数据请求展示。

本文提到的后端,是指web开发的后端,内容包括模块路由和数据库存取。注意,这里的后端不是指大数据开发领域的Hadoop、Storm那些。

前端

JavaScript(后文统称为js)、css、HTML是前端开发的语言基础,如果想能将前端框架用好还是需要将水平提高到大概能用的程度。html负责网页的内容和基本结构,css负责UI样式,js负责将用户请求传送到后端并将后端数据在html页面中展示。

前端的框架分两类,UI样式库和js库。有些UI样式为了实现动态效果,会使用js库如jQuery。

前端开发的编程工作JS为主,还有近几年出的TypeScript(JS的超集)。

奇怪的是,最近各官网下载的开发包里都不带jQuery库,如有专业人士路过请稍作指点。

UI样式库

前端框架中有很大一部分是UI样式库。这些样式库的关注点是视图。对于纠结(患有强迫症)的开发者,不建议使用UI样式框架,真的是哪哪都看着不爽,到最后还不如自己css造轮子来的爽快。自己css造,不一定好看,但可以满足强迫症。

Bootstrap

小编认为Bootstrap是一个非常好的入门选择,教程示例非常丰富,颜值也还过得去。
栅格布局自带响应式,常用的颜色都有类可以直接调用。
Bootstrap中文网:http://www.bootcss.com/

用法示例:

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <a class="navbar-brand" href="#">导航</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官网:https://www.layui.com

Amaze-UI

俗称妹子UI,也是一款样式框架。
妹子官网:http://amazeui.org/

Font Awesome

图标字体库和CSS框架,毕竟只有图标字体和CSS,所以一般配合其他的样式框架使用。
Font Awesome官网:http://fontawesome.dashgame.com/

js库

js库是实现功能的主要手段。常规的js库中都会包含DOM(或虚拟DOM)操作、ajax异步get和post请求封装实现、页面渲染刷新等。

相比原生js,使用库优点在于方便,缺点在于js库文件通常动辄数百kb,在带宽紧张的环境会拖慢页面的加载速度。

小编现在喜欢用vue.min.js,轻快又方便。为啥不用vue-cli方式呢?讲真,对于php流个人业余全菜开发者来说,npm run dev带来的不方便比方便更多些。

这年头,不用npm都不好意思说自己是前端框架,不信请看vue、React、AngularJS,全都是这套玩法。

jQuery

对于传统开发者来说,js为主的前端框架与其说是框架像是库。对C/C++开发者来说,就像是

#include <stdio.h>
……

jQuery最具特色的操作是 $("yixzm") 等价于 document.getElementById("yixzm"),以及ajax,就像这样:

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

DOM操作真的很方便。

jQuery官网:http://jquery.com/

vue

只需要用一下下,就会很爽的库。
职业玩家都使用npm的方式,业余玩家嘛用用link引入也就可以了。vue对开发者最大的便利是不用频繁的DOM操作,数据只需要赋值给定义的对象元素即可同步刷新页面内容。

据jsp玩家讲,和jsp差不多?据php玩家讲,和 <?php 差不多?

但小编感觉方便程度上还是差很多的,毕竟请求到的数据可以直接进页面,写在js里怎么看都更好些。

vue-cli模式开发,可以让js代码工程化。或许,这时候的前端工程师需要调整鄙视链层级。(C >> C++ >> java >> php >> js?)

小编说,js主要负责请求交互和动态刷新,但有人不讲规矩。比如vue中的vue-element,不仅能处理交互,还能生成UI的组件模块。

vue-cli模式开发,有个叫做模板的东西,文件后缀格式如filename.vue,这玩意将每一个独立的HTML模块连同CSS和JS代码一起封装在一个文件里,用的时候直接引入,相当方便。

用法示例代码:

<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官网:https://cn.vuejs.org/

React

这玩意和vue的类似之处是也能工程化的管理js开发项目。既能引入的方式使用,也能npm方式构建项目。

用法示例代码:

<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>;

可以发现,React的开发渲染风格和原生JS相似度很高,和vue区别很大。

React官网:https://reactjs.org/

AngularJS

AngularJS和vue代码相似度很高。

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

和vue相比,几乎就是换了各变量名…… 当然,hello world 只是表象,更多区别还需要深入使用才能感受到。

AngularJS官网:https://angularjs.org/
AngularJS中文网:http://www.angularjs.net.cn/

后端

除了专注视图活跃在用户面前的前端框架,还有一些默默在后台奉献的后端框架。web后端框架做的事一般来说,是提供http请求服务接口,实现请求路由、数据存取、模块后台功能实现等。

新时代的前端框架如vue和React,本身自带路由功能,大家将其叫做前端路由。前端路由一般使用在开发SPA(单页应用)的场景,路由时会异步加载数据渲染至页面但不会重新加载整个页面。而后端路由会重新向服务端提交请求。

后端框架一句话总结:存取数据分模块,各种语言都能用。

Php有ci、tp、Yii和laveral,java有springMVC,Python有Django,JS有node,可谓百家争鸣、百花齐放。

这时候,C/C++出身的小编秉着不靠天不靠地轮子自己造的精神,对各框架普遍采取读源码试用而不用的态度。了解、学习,但写写东西还是喜欢自己撸。强撸和借鉴(抄袭)有益理解别人的闪光点。

php框架

ci和tp上手极快,Yii和Laravel稍微有点学习成本。

ci

ci即优雅的CodeIgniter,很mini的一款框架,相对容易入门。

CI中文网:https://codeigniter.org.cn/

thinkphp

传说中的培训班神器,据说上手极快?

官网:http://www.thinkphp.cn/

Yii

没啥好说的,看起来和ci、tp貌似差不多…… 好久没翻Yii源码,记得貌似是传统的<?php code ?>的方式写模板?没啥特别的映象。

Yii中文网:https://www.yiichina.com/

Laravel

本菜感觉上手好麻烦,夹杂的东西太多。(正在使用laravel的大神请尝试理解小编着重提到的“菜”字)
Composer安装模块效率很高,据说是冲锋枪?学习成本还是蛮高的。

Laravel中文网:https://www.golaravel.com/

Python框架

Django

Python版的Laravel……

Django小编写自动化、爬虫的时候也会用到,但拿来写web总感觉不习惯…… 谁让Php是世界上最好的语言呢~

Django官网:https://www.djangoproject.com/

Java框架

Spring MVC,额,没写过Java,小编如果说这是Java的web开发框架,不知是否有专家会留言批评呢?

HTTP服务

以上后端框架关注应用和数据,对HTTP服务监听关注的并不多。服务监听工作一般由Apache或者Nginx来承担,负责请求响应、并发和数据返回。关于HTTP服务,小编除了Apache用的比较多,Nginx搭过几个系统外,了解的并不多。所以,小编暂且总结接触过的这三个。

对于apache和nginx的比较,网上有很多帖子有讲而且很详细。比如这篇:Apache和Nginx的区别 就讲的很好

后端流的JS

node-js,额,只用node写过一个socket server,没啥可总结的。node写在这里是否合适也有待学习。
nodejs中文网:http://nodejs.cn/

apache

老牌的HTTP服务提供者。在小编写C++的时代,传说中的LAMP、WAMP犹如迷雾中的灯塔一般,在知识的海洋里引领着小编。

apache动态请求响应效率高,httpd.conf配置也极其方便。

apache官网:http://www.apache.org/

nginx

据说更擅长静态文件响应?需要配置反向代理才能正常使用Php、Python等语言开发的工程,小编个人感觉有些麻烦,不怎么喜欢用。

nginx官网:http://nginx.org/

数据库

存数据,mysql很方便。redis在内存里,数据请求时加载超级快!

mysql VS redis?

关系型和非关系型,索引方便和响应快速……
一起用吧,就像硬盘和内存。

不过,现在mysql一般用MariaDB来替代。
mariadb官网:https://mariadb.org/
mysql官网:https://www.mysql.com/
redis中文网:http://www.redis.cn/

开发环境及工具

vscode

这玩意写前端代码还不错,良心工具。

vscode官网:https://code.visualstudio.com/

……

还有很多,小编这次先总结这些。

写在最后

web开发内容很多,也很有趣。

小编将求索以图成长。

版权声明

弈心博客


本文首发site_name,转载请附上博文链接!