5、成熟的框架 - 软件技术系列文章

       对于笔者来说，对于框架的选型和应用还是挺感兴趣的。现在市面上已经有很多的软件框架了，而且还朝着更全面更快速的进行着发展。这里笔者主要从前端、后端、UI框架三方面进行描述，介绍当前比较流行的框架。这里没记录的请读者自行去百度。

 

　　一、          前端框架；

　　1.Vue

　　https://cn.vuejs.org

　　Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

　　2.React

　　https://react.docschina.org/

　　React 是一个用于构建用户界面的 JAVASCRIPT 库。React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

　　3.Angular

　　https://angular.io

　　AngularJS诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

　　4.QucikUI

　　http://www.uileader.com/product_quickui

　　QucikUI 4.0是一套完整的企业级web前端开发解决方案，由基础框架、UI组件库、皮肤包、示例工程和文档等组成。底层基于jquery构建。使用QucikUI 开发者可以极大地减少工作量，提高开发效率，快速构建功能强大、美观、兼容的web应用系统。

　　5.Layui

　　https://www.layui.com/

　　layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。layui 首个版本发布于2016年金秋，她区别于那些基于 MVVM 底层的 UI 框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，她更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。

　　6.Avalon

　　http://avalonjs.coding.me/

　　avalon2是一款基于虚拟DOM与属性劫持的 迷你、 易用、 高性能 的 前端MVVM框架， 拥有超优秀的兼容性, 支持移动开发, 后端渲染, WEB Component式组件开发, 无需编译, 开箱即用。

　　7.Dojo

　　https://dojo.io/

　　Dojo致力于实现最大的互操作性。Web组件提供了一种机制，可以在Dojo应用程序中利用非Dojo组件，并在非Dojo应用程序中轻松使用基于Dojo的小部件。Dojo为Web组件提供一流的支持。您今天做出的决定不应该将您锁定在未来的决策中。

　　8.Ember

　　https://emberjs.com/

　　Ember.js可能是最固执己见的主流框架，这也是其最大的优势。它有创建Ember.js应用程序的正确方法，通常只有一种方法来创建应用程序。Ember.js更类似于一个产品或平台，在那里你会到一个供应商的长期支持和维护。Ember.js提供了对其平台的全面版本管理，升级工具以及对API升级的强大指导和工具。成熟，是对Ember.js的一个很好的总结。

　　9.Aurelia

　　https://aurelia.io/

　　Aurelia是一个令人惊叹的框架，它在不牺牲功能的情况下采用简单而干净的代码。在本教程中，我们将通过构建“Todo”应用程序向您介绍Aurelia的简单性。您将看到应用程序代码的简洁程度，您将学习Aurelia的几个基本概念和功能。

 

　　二、          后端框架；

　　在选择要使用的后端框架时，有许多选项可用。虽然每个后端框架都有自己的优点和缺点，但在做出最终决定之前，还有一些其他因素需要考虑。在本指南中，我们将仔细研究经过尝试的框架，以确定哪个是最适合您的后端框架。

　　后端vs前端

　　如果您是Web开发世界的新手，后端和前端开发之间的区别可能不那么明显，但是，了解两者之间的区别很重要。以下是前端开发人员与后端开发人员的一些区别。

　　前端开发：前端开发人员在很大程度上负责用户所看到的内容（即网站页面），前端开发人员主要使用HTML，CSS和JavaScript。他们的主要关注点是创建出色的用户体验，并确保网站设计和布局或Web应用程序始终具有凝聚力。

　　后端开发：另一方面，后端开发人员正在研究幕后发生的事情，后端开发人员使用各种库，API，Web服务等。他们负责数据库系统的实现，确保各种Web服务之间的正确通信，生成后端功能等。

　　8个流行的后端框架列表

　　在这个后端框架列表中，我们不想坚持使用单一编程语言。相反，我们希望展示各种语言的后端框架。当然，下面的列表并未提供针对每种语言的后端框架建议，但它确实提供了一些很好的建议。

　　1.Laravel

　　Laravel

　　Laravel是一个基于PHP的后端框架，具有整洁优雅的语法，适应大型团队的能力以及现代工具包的功能。Laravel遵循MVC架构模式，旨在促进广泛的后端开发。Laravel还提供自己的数据库迁移系统，并拥有强大的生态系统。

　　特征

　　简单快速的路由引擎

　　附带CLI

　　强大的模板系统（刀片）

　　文档功能

　　2.CakePHP

　　CakePHP

　　CakePHP是2005年发布的PHP框架之一，从那时起，它已经走过了漫长的道路，现在被称为现代PHP框架，允许开发人员快速构建。CakePHP使用干净的MVC约定，并且具有高度可扩展性，使其成为构建大型和小型应用程序的绝佳选择。

　　特征

　　允许快速构建

　　建立在安全的基础上

　　入门不需要复杂的配置

　　3.Django

　　Django

　　Django是一个高级Python框架，它包含了许多的功能模块，意味着开发人员想要的大多数内容都包含在内。因此，对第三方插件的需求较少，如果你计划构建一些小的东西，Django可能不是最好的选择。

　　特征

　　高度可定制

　　可扩展

　　广泛的社区和文档

　　4.Ruby on Rails

　　Ruby on Rails

　　Ruby on Rails是一个用Ruby编程语言编写的服务器端Web框架，Ruby鼓励使用设计模式，如MVC和DRY。

　　特征

　　提供大型插件库

　　Ruby提供了清晰的语法

　　庞大的社区

　　小项目易于开发和管理

　　5.Flask

　　Flask

　　Flask是一个基于Python的后端框架，与Django不同，它是轻量级的，更适合开发小型项目。Flask支持Jinja2模板，安全cookie，单元测试和RESTful请求调度等功能。它还提供了大量的文档，对于那些不需要Django附带的所有花俏功能的Python程序员来说，它是一个很好的解决方案。

　　特征

　　非常灵活

　　比Django更轻巧，适合小型项目

　　很棒的文档

　　提供快速构建原型的能力

　　6.Phoenix

　　Phoenix是一个后端框架，可与Erlang的虚拟机配合使用，并使用Elixir编写。鉴于Elixir是一种功能语言，它可能不像其他面向对象语言那样受欢迎，但它是为构建可扩展和可维护的应用程序而设计的，Phoenix将经过验证的技术与功能性编程的新思想结合使用。

　　特征

　　非常快

　　容错

　　内置数据库选项

　　精心设计

　　大量的文档和活跃的社区

　　7.Express

　　Express

　　Express是Node.js的一个快速，简约的框架。它提供了基本的Web应用程序功能，此外，借助各种HTTP实用程序方法和可用的中间件，可以轻松构建API。许多流行的服务器端和完整堆栈框架都使用Express，如Feathers，KeystoneJS，MEAN，Sails等。

　　很棒的API

　　设置简单，学习起来简单

　　大量插件可供使用

　　8.Spring Boot

　　Spring Boot

　　Spring Boot是一个基于Java的开发框架，由Spring创建，旨在易于使用，并提供一个生产级的基于Spring的应用程序。

　　特征

　　创建独立的Spring应用程序

　　高度可扩展

　　大量的文档

　　专为使用云方法的大型应用程序而构建

　　广泛的生态系统

　　选择后端框架时要考虑什么？

　　在选择后端框架之前，您应该考虑几个重要因素，以下是一些要记住的事项。

　　学习曲线：每个框架在命名，目录结构等方面都有不同之处。如果您已经熟悉特定的编程语言，那么您可能希望坚持使用该语言的框架。另一方面，如果您还不熟悉特定的语言，使用Python的Django框架是一个很好的起点，因为它非常简单。

　　文档/社区：如果您以前没有任何后端框架经验，那么选择具有大量文档和/或大型社区的框架可能是有利的。

　　库：一些框架在提供的库方面提供了更多的灵活性和选择，这允许开发人员实现或配置库以执行否则将是耗时或不可能的特定任务。

　　安全性：安全性是一个非常广泛的主题，根据您正在构建的应用程序，您可能需要某些安全功能，某些后端框架表现更好。

　　可扩展性：如果您正在为大众构建应用程序，您需要确保框架能够随时扩展。

　　结论

　　有多种后端框架可供选择，每种框架都有各自的优缺点。确定哪个后端框架是最好是相当主观的，因为它取决于你想要实现的目标，你必须克服学习曲线等等。尽管如此，希望这个后端框架列表能够为你提供一个方向。

 

　　三、          UI框架；

　　Bootstrap

　　首先说 Bootstrap，估计你也猜到会先说或者一定会有这个( 呵呵了 )，这是说明它的强大之处，拥有框架一壁江山的势气。自己刚入道的时候本着代码任何一个字母都得自己敲出来挡我者废的决心，来让自己成长。结果受到周围各种基友的引诱开始了 Bootstrap 旅程。本人虽然是个设计+前端的万里有一的人才，但是老天只让我会用 PS 和各种设计工具却不给我跟设计妹子一样的审美，所以这也是我最初选择 Bootstrap 的原因之一，它让我做出来的东西好歹能在妹子面前装个逼，不过时间长了难免觉得 Bootstrap 美的让人烦躁， 但好在它的每个版本都会有很大的改变，不会让人觉得自己做的网站会跟很多网站撞脸。Bootstrap 的用法及其简单( 这也可能就是 Bootstrap 作者阅攻城士无数，了解他们痛的结果 )，以至于是个小前端都可以快速上手，几乎没什么学习成本。

　　官网：http://getbootstrap.com/

　　Github：https://github.com/twbs/bootstrap/

　　作者：Mark Otto 和Jacob Thornton Star：93,112

　　总结：Bootstrap 最大的优势就是它非常流行，流行就代表你有问题就有很多人帮你解决问题，就代表装逼它就是利器，还有就是界面比较和谐，容易上手，关注它的童鞋应该发现最新 V4 版也开始支持 FlexBox 布局，这是非常好的升级体验。 劣势是 class 命名不够语义化，并且各种缩写，以至于我离了文档就是个菜，最近开始整混合 APP，选框架的时候首选就是它，但之前搞 PC 一直没注意，后来搞混合右键属性看它的时候，瞬间一阵凉风袭来，Bootstrap 好小，小到我只好选择别的框架。

　　AUI

　　第三个是最近刚起来的AUI，虽然作者声称是专为APICloud开发者设计的一套UI框架，但实际它还是解决了很多移动前端开发的普遍问题，是主要面向混合开发的 CSS 框架。看起来作者比较猖狂，各种高级 CSS3 遍地使用，这让我也不得不去查查这些个 CSS3 的兼容性。不负众望果然选的都是兼容不错的属性，哈哈了一顿激动从前辈手上大胆认识了几个好东西，并且框架还提供了聊天界面、计数列表等组件，解决了很多复杂的让我骂娘的布局，现在可以直接拿走就用。

　　Github：https://github.com/liulangnan/aui

　　官网：http://www.auicss.com/

　　作者：流浪男 Star：92

　　总结：这个框架对我来说有个优点就是纯 CSS 框架，自己以前也就用过 Pure，自己有点 JS 能力，如果不是复杂的效果，找个纯 CSS 框架自己随便改改就可以，而现在 CSS3 也已经能够做到动画，效率、质量、高效全兼顾，所以还是选择了这种 CSS 框架。有一点觉得不满的是这框架的文档真的好那什么，说好的高大上呢。

　　Amaze UI

　　第二个介绍的是妹子UI，最初使用它是因为本尊遇到了一个爱纠结细节设计士，有一次她跟我的字体较上真了，结果一句顶万句的 BOOS 夸了她，我只好根据她的想法去解决，结果最后找到了Amaze UI 框架( 我不介意你叫我懒淫 )，按照官方的话说就是 "基于社区开源项目构建的一个跨屏前端框架，以移动优先，从小屏到大屏，最终实现所有屏幕适配，适应移动互联潮流" 。但其实我就是看中它能解决国内浏览器存在的跨屏适配和兼容性问题。

　　官网：http://amazeui.org/

　　Github：https://github.com/amazeui/amazeui

　　所属公司：云适配 Star：6710

　　总结：Amaze UI 总的来说就是加入更多符合中国市场特性的元素，框架对跨屏、适配都做了的比较好的处理并且准备一了一系列的常用的网页组件，为减少搞兼容、适配各种敲键盘的加班狗们的工作时间做了不小的贡献。，框架还对中文排版优化，兼容中国本土主流浏览器、轻量化，不仅适用于桌面端，还更更适合移动端、包含一些封装好的Widgets。不过自也就我感觉 Amaze UI 文档是否有点太那什么了，比如 “人们不会在乎jQuery的那点流量。”，说实的在这真没啥，不过我从来不会说出来( 哈哈 )，代码和设计上感觉没太多突出的点。

　　Frozen UI

　　有段时间看到 QQ 瞬间高大上了，后来四处打听，原来 QQ 客服端也用了 混合开发，其中QQ会员前端用的是 Frozen UI，并且这套框架开源，欣喜若狂耐不住心里的寂寞直接上手试了一遍，初体验感觉基础样式效果简单色调清爽，有个比较活跃的社区所以组件什么的也比较丰富。

　　Github：https://github.com/frozenui/frozenui

　　官网：http://frozenui.github.io/

　　作者： QQVIP FD Team Star：1,067

　　总结：如果拿 Frozen UI 配合一些如 APICloud 用来做混合 APP 感觉就太酷了，或者原生的火鸡们拿去嵌套在应用中做前端开发，这个框架对 android 2.3 +、ios 4.0 + 做了兼容，或者拿来做 Web App 也是极好的选择，劣势的话从 UI 层面就可以看到了，谁让它是出生在QQ会员前端的呢。

　　Frozen UI

　　第三个是Frozen UI，有段时间看到 QQ 瞬间高大上了，后来四处打听，原来 QQ 客服端也用了 HTML 混合开发，其中QQ会员前端就是用的 Frozen UI，并且这套框架开源，欣喜若狂耐不住心里的寂寞直接上手三下五除二试了一遍就开始试用，初体验的就是基础样式效果简单色调清爽，有个比较活跃的社区所以组件什么的也比较丰富。

　　Github：https://github.com/frozenui/frozenui

　　官网：http://frozenui.github.io/

　　作者： QQVIP FD Team Star：1,067

　　总结：如果拿 Frozen UI 配合一些如 APICloud 用来做混合 APP 感觉就太酷了，或者原生的火鸡们拿去嵌套在应用中做前端开发，并且这个框架对 android 2.3 +、ios 4.0 + 做了兼容，或者拿来做 Web app 也是极好的选择，不过要是放在微信里比这更合适的 WeUI 框架更是首选了，劣势的话从 UI 层面就可以看到了，谁让它是出生在QQ会员前端的呢。

　　WeUIi

　　第四个是WeUI和同 FrozenUI都属于 差不多的 WeUi了，也是一个比较专一的框架，WeUI应该说比FrozenUI前者更专一，话说连个官网都不搞，所有答疑都在 gitHub Issues 解决了，这个框架极其简单，体积当然就不用说了，模块也就 7 个左右，不过体量虽然小做的却不错，口碑看 star 就够了，框架从 16/1/23 发版至今 github star 超过 7K,不过也不排除用户没地方发泄所以都跑到 git 上来，哈哈。

　　Github：https://github.com/weui/weui

　　DEMO：http://weui.github.io/weui/

　　Star：7,129

　　总结：看完微信设计团队设计的这套 DEMO，二话不说如果要做微信公众，这个二话不说必然是首选了。框架不好的地方简而言之就是框架本身应该就没考虑过让用户用到非微信的场景之下。

　　SUI

　　“SUI 是一套基于bootstrap开发的前端组件库，同时它她也是一套设计规范。通过SUI，可以非常方便的设计和实现精美的页面”。 果然还是直接引用官方给的枯燥无味广告要节省自己的脑细胞( 囧… )，当然了就像广告说的，如果你之前用过 Bootstrap， 那么可以轻松转向 SUI，这可能就是淘宝给前端屌丝们的福利了。。 

　　Github：https://github.com/sdc-alibaba/sui

　　官网：http://sui.taobao.org/sui/docs/index.html

　　Star：120

　　AUI

　　第六个是最近刚起来的最近刚起来的 AUI，虽然作者声称是专为APICloud开发者设计的一套UI框架，但实际它还是解决了很多移动前端开发的普遍问题，是它主要面向混合开发的 CSS 框架。，所以看起来作者比较猖狂，各种高级 CSS3 遍地使用，这也使得我不得不去查查这些个 CSS3 的兼容性。不负众望果然选的都是兼容不错的属性，哈哈了一顿激动从前辈手上大胆认识了几个好东西，并且框架还提供了聊天界面、计数列表等组件，解决了很多复杂的让我骂娘的布局，现在可以直接拿走就用。

　　Github：https://github.com/liulangnan/aui

　　官网：http://www.auicss.com/

　　作者：流浪男 Star：92

　　总结：这个框架对我来说有个优点就是纯 CSS 框架，自己以前也就用过 Pure，自己有点 js 能力，如果不是复杂的效果自己找个纯 CSS 框架自己随便改改就能达到效果，而现在 CSS3 也已经能够做到各种动画，效率、质量、高效各种一顿考虑所以还是选择了这种 CSS 框架。而一直觉得不满的是这框架的文档真的好那什么，说好的高大上呢。

　　MUI

　　曾经一直使用 Android 系统的我，后来见到 IOS，果断移情别恋了，不知道为什么苹果每次调整系统我都特别喜欢，后来一段时间因为缺设计我专门模仿 IOS 系统做 UI，但始终不能够做到很好，无意间就发现了 MUI 这个框架，这个框架给我的吸引之处就是它的 UI 是以 IOS 为主体设计的，当然它也补充了android特有UI样式。并且MUI官方声称用来开发深入以后发现拿它做 APP 还能够提高用户使用流畅度，然后便试着更深入的了解和使用一段时间。

　　官网：http://dev.dcloud.net.cn/mui/

　　Github：https://github.com/dcloudio/mui

　　Star：2,450

　　总结：就像之前说的这个框架是以两大系统为参照来封装UI组件，框架自身还有一个较为活跃的社区，不太好的地方这也是我特别关注的一点，关于开发应用的流畅度，我当然知道这是 H5 目前的劣势，但是看到官网给的描述，还是抱着期待的心理试试看能否提升，然而它其实还是需要是借助 Webview来提升，而不是框架本身。

　　Semantic UI

　　倒数第三个是 Semantic UI，接触这个框架还是因为 Bootstrap，Semantic UI 刚上线 github 就受到大量开发者的关注，以至于很多人拿它俩对比各种挑刺各种夸，是好是坏不能单凭别人三句四句就抬起手指开始赞，用了以后感觉 UI 上跟 Bootstrap 没太多的区别，不过代码命名规范上却相差甚大，本人认为 Semantic UI 是不是就想做的不一样，它的命名全是采用复合的方式，类名特别的离散，用的时候你得很小心自己扩展或者新增的 class 命名与它的类名冲突。

　　官网：http://www.semantic-ui.cn/

　　Github：https://github.com/semantic-org/semantic-ui/

 　　Foundation

　　Foundation 算是框架界的元老啦，都说框架去的早，而这个框架一直到现在依然这么的热门，如果你比较介意 Bootstrap 开发撞脸的尴尬事情，那么你可以考虑使用 Foundation 。即使你使用预定义的 UI 元素, 也不会与其他网站太像，就像官方说的给开发者更灵活的框架体验。

　　官网：http://foundation.zurb.com/

　　Github：https://github.com/zurb/foundation-sites

　　Star：22,736

　　UiKit

　　UIkit是YOOtheme团队开发的，在许多WordPress主题中都有应用(也就是如果你是个 WordPress 爱好者，那么这个框架应该比较适合深究)，并且框架能够通过GUI编辑器和手动编辑，所以它提供了一个灵活、强大的自定义机制。框架借助LESS、jQuery、normalize.css及FontAwesome开源项目的独有特点，整合成了这么一款轻量级、模块化的前端框架。

　　官网：http://www.getuikit.com/
　　Github：https://github.com/uikit/uikit
　　作者：YOOtheme Star：6,372

　　Pure

　　终于最后一个了，我和你一样好开森 (～￣▽￣)～)，这个框架是我在做管理系统时接触的，选择使用也是因为框架小巧，并且是纯 CSS，没有太多的牵扯，好用来与其他框架快速结合使用。

　　官网：http://purecss.io/

　　Github：https://github.com/yahoo/pure/

 

　　介绍完毕，估计你应该看出来了，我使用框架真的也就是遇到了需求，才选择了某个框架，所以框架之间并没有什么好与特好之分，只能说你的需求是什么，这个框架合适不合适你去用，各种框架用起来也都大致差不多，会用一个其他的上手也就都变得简单容易上手，我觉得能写框架的人都是室外高仁。