⼏⼤主流的前端框架(UIJS)框架
如今的前端已经不再像以前⼀样就是简单的写写页⾯和调调样式⽽已,现在的前端越来越复杂,知识点越来越丰富。
要做WEB前端,就需要知道前端到底是什么,需要学习那些知识;前端⾄少要懂的三个部分:HTML,CSS,JavaScript(简称JS),那⾸先先明确这三个概念:
HTML负责结构,⽹页想要表达的内容由html书写。
CSS负责样式,⽹页的美与丑由它来控制
jquery在线免费学习技术JS负责交互,⽤户和⽹页产⽣的互动由它来控制。
web前端发展⾄今,演变出了⽆数的库和框架;说到库第⼀时间想到的是不是jquery?在⼩编刚接触库的时候也是从jQuery开始的;今天我们就来说说前端发展到现在都有哪些好⽤的库框架。
2016年开始应该是互联⽹飞速发展的⼏年,同时也是Web前端开发⾮常⽕爆的⼀年,Web 前端技术发展速度让⼈感觉⼏乎不是继承式的迭代,⽽是⼀次次的变⾰和创造。这⼀年中有很多热门的前端开发框架,下⾯源码时代web⼩编为⼤家总结2016年⾄今最受欢迎的⼏款前端框架。
在这互联⽹飞速发展的信息时代,技术的更新迭代也在加快。⽬前看来,⽕了⼗⼏年的Java技术现在仍然是棵常青树。回想两年前初来咋到,也是想好好当⼀名java程序员,五年计划都⾏想好了,最后还是阴差阳错搞了前端。前端⽬前来看还是⾮常⽕的,随着IT技术的百花齐放,新的前端框架不断推出,但⼤多都还在狂吼的阶段。其实⼀直以来对技术的理解是技术服务于业务和产品,产品⼜在不同程度的推进着技术的演进。Web、⽆线、物联⽹、VR、PC从不同⽅向推进着技术的融合与微创新。程序员在不同业务场景下的⾓⾊互换。⽽随着Node.js的出现语⾔的⾓⾊也在发⽣着转变,js扮演了越来越重要的⾓⾊。也就有了茶余饭后也把了解到的知识整理⼀下。
前端UI框架组件库:
说到前端框架我第⼀印象中想起React、Vue和Angular,不知道你是否与我⼀样想到这些,现在常⽤的有:Bootstrap、jQuery UI、BootMetro、AUI常⽤的还有很多、就不⼀⼀跟⼤家举例出来了,因为很多朋友认为在不同项⽬开发中⽤到的前端框架不⼀样,其实也有⼀款可以适⽤于多种项⽬开发的前端框架,只是没发现。
⽤前端框架开发项⽬的原因?
这个应该是最好解决的问题,⾸先就是减少造轮⼦的想法,能够快速的开发⼀款web应⽤对于公司来说都是⾮常愿意开到的,在时间和成本之间就能够节约很多的时间,这是其中⼀点,另外⼀点就是使
⽤前端框架的组件功能,只要组件功能强⼤,什么样的项⽬都能够开发(前提是:要熟悉前端框架的功能!),时间成本问题就能够轻松解决。
没有设计师也能做出精美页⾯效果的前端框架
虽然市场中有很多的前端框架,但部分UI框架是属于组件库,然⽽QUICK UI跟当下流⾏的三⼤底层框架React、Vue和Angular不
同,QUICK UI提供了⼀整套前端解决⽅案,包括前后端分离的开发框架、100多种功能强⼤的UI控件、⼏⼗套精美的⽪肤模板和近16万字的开发⽂档,满⾜你所以开发项⽬都不是问题。
前端框架库:
1.Node.Js
  简单的说 node.js 就是运⾏在服务端的 JavaScript。
  Node.js 是⼀个基于Chrome javascript 运⾏时建⽴的⼀个平台。
  Node.js是⼀个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎,V8引擎执⾏Javascript的速度⾮常快,性能⾮常好。
⽤途:
  1. RESTful API(⽬前⽐较流⾏的接⼝开发风格)
  这是NodeJS最理想的应⽤场景,可以处理数万条连接,本⾝没有太多的逻辑,只需要请求API,组织数据进⾏返回即可。它本质上只是从某个数据库中查⼀些值并将它们组成⼀个响应。由于响应是少量⽂本,⼊站请求也是少量的⽂本,因此流量不⾼,⼀台机器甚⾄也可以处理最繁忙的公司的API需求。
  2. 统⼀Web应⽤的UI层
  ⽬前MVC的架构,在某种意义上来说,Web开发有两个UI层,⼀个是在浏览器⾥⾯我们最终看到的,另⼀个在server端,负责⽣成和拼接页⾯。
不讨论这种架构是好是坏,但是有另外⼀种实践,⾯向服务的架构,更好的做前后端的依赖分离。如果所有的关键业务逻辑都封装成REST 调⽤,就意味着在上层只需要考虑如何⽤这些REST接⼝构建具体的应⽤。那些后端程序员们根本不操⼼具体数据是如何从⼀个页⾯传递到另⼀个页⾯的,他们也不⽤管⽤户数据更新是通过Ajax异步获取的还是通过刷新页⾯。
  3. ⼤量Ajax请求的应⽤
例如个性化应⽤,每个⽤户看到的页⾯都不⼀样,缓存失效,需要在页⾯加载的时候发起Ajax请求,NodeJS能响应⼤量的并发请求。  总⽽⾔之,NodeJS适合运⽤在⾼并发、I/O密集、少量业务逻辑的场景。
2.angular.Js(⽐较厉害,github排名也⽐较⾼)
3.JQuery Mobile
      jquery Mobile 使⽤ HTML5 和 CSS3 通过尽可能少的脚本对页⾯进⾏布局。
⽤途:模块化动态加载。
5.Vue.js(⽬前市场上的主流)
6.backbone.js
7.React.js(gihub排名仅次于vue.js)
8.Amaze UI
Amaze UI是轻量级的前端应⽤框架,是国内⽐较流⾏的框架,⽐较适⽤于移动端响应式开发框架,可以按照项⽬要求⽣成专属的UI框架库进⾏使⽤,组件⾮常丰富,可以构建出漂亮的web页⾯。
三、可视化组件
1.Echarts
2.tableau(收费)
四、前端构建⼯具
1.gulp
      构建快速
      利⽤ Node.js 流的威⼒,你可以快速构建项⽬并减少频繁的 IO 操作。
      插件⾼质
      Gulp 严格的插件指南确保插件如你期望的那样简洁⾼质得⼯作。
      易于学习
      通过最少的 API,掌握 Gulp 毫不费⼒,构建⼯作尽在掌握:如同⼀系列流管道。
2、ES or webPackage
1.Bootstrap中⽂⽹
先分享下,如果有想⼀起学习web前端,HTML5及JavaScript的可以来⼀下我的前端733581373,好友都会在⾥⾯交流,分享⼀些学习的⽅法和需要注意的⼩细节,每天也会准时的讲⼀些前端的炫酷特效,及前端直播课程学习
Bootstrap,让你的页⾯更简洁、直观、强悍、移动设备优先的前端开发框架,让web开发更迅速、更简单。它还提供了更优雅的HTML和CSS 规范,它即是由动态CSS语⾔Less写成。有着丰富的⽹格布局系统以及丰富的可重⽤组件,还有强⼤的⽀持⼗⼏的JavaScript、jQuery插件以及组件定制等。
2. Layui
layer是⼀款⼝碑极佳的web弹层组件,是⼀款采⽤⾃⾝模块规范编写的前端 UI 框架,遵循原⽣ HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即⽤。layui ⾸个版本发布于2016年秋,她区别于那些基于 MVVM 底层的 UI 框架,从核⼼代码到 API 的每⼀处细节都经过精⼼雕
琢,⾮常适合界⾯的快速开发。
3.ElementUI
Element-Ul是饿了么前端团队推出的⼀款基于Vue.js 2.0 的桌⾯端UI框架,⼿机端有对应框架是Mint UI 。适合于Vue的UI框架;
4.Mint UI
Mint UI 是由饿了么前端团队推出的⼀个基于 Vue.js 的移动端组件库,Mint UI 包含丰富的 CSS 和 JS 组件,能够满⾜⽇常的移动端开发需要。通过它,可以快速构建出风格统⼀的页⾯,提升开发效率。
5.angular
AngularJS诞⽣于2009年,由Misko Hevery 等⼈创建,后为Google所收购。是⼀款优秀的前端JS框架,已经被⽤于Google的多款产品当中。AngularJS有着诸多特性,最为核⼼的是MVW(Model-View-Whatever)、模块化、⾃动化双向数据绑定、语义化标签、依赖注⼊等等。6.React
React 可以⾮常轻松地创建⽤户交互界⾯。为你应⽤的每⼀个状态设计简洁的视图,在数据改变时 React 也可以⾼效地更新渲染界⾯。React 起源于 Facebook 的内部项⽬,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定⾃⼰写⼀套,⽤来架设Instagram 的⽹站。做出来以后,发现这套东西很好⽤,就在2013年5⽉开源了。
7.vue.js
近⼏年最⽕的前端框架当属Vue.js了,Vue.js是⼀个构建数据驱动的 web 界⾯的渐进式框架。Vue.js 的⽬标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。很多使⽤过vue的程序员这样评价它,“vue.js兼具angular.js和react.js的优点,并剔除了它们的缺点”。授予了这么⾼的评价的vue.js,也是开源世界华⼈的骄傲,因为它的作者是位中国⼈--尤⾬溪
⼏款常⽤的⾼质量web前端框架
Web前端框架就是为了节约开发成本和时间,⼀般开发⼀个项⽬都会⽤到前端框架(除⾮⾃⼰有前端开发团队),根据我经验的⼏款web 前端框架做出了分析。都是个⼈意见,仁者见仁智者见智。
QUICK UI
QUICK UI是⼀套完整的企业级web前端开发解决⽅案,由基础框架、UI组件库、⽪肤包、⽰例⼯程和⽂档等组成。使⽤QUICKUI开发者可以极⼤地减少⼯作量,提⾼开发效率,快速构建功能强⼤、美观、兼容的web应⽤系统。
QUICK UI优势:
①功能最为强⼤
QUICKUI经历了7年的迭代更新,不断从客户的各种业务中对组件的需求进⾏归纳和抽离,从⽽打造新的组件和功能。现在最新的4.0版本框架包含了⼀百多种组件,⼀千多个应⽤场景⽰例。可以说在前端框架领域中,QUICKUI拥有功能最强⼤组件库。
②运⾏最为稳定
  很多其他的第三⽅UI控件在简单场合使⽤OK,到了复杂的场景中就会出现很多问题,这种现象很常见,因为在组件设计时⽆法预料到所有的应⽤场合。⽽QUICKUI在7年间经历了数千个项⽬实际检验,在各种复杂场景都应⽤过,并根据客户的反馈不断完善和调整。⽬前的第四代可以说是最稳定、最完美的版本。
③丰富精美的界⾯⽪肤
  跟其他web前端框架仅仅是⼀套组件库不同,QUICKUI是⼀整套前端解决⽅案,拥有丰富的外观界⾯解决⽅案。采⽤现今流⾏的扁平化设计理念,推出了包括登录、响应式web、⼯作桌⾯、地图类、门户风格、⼤屏展⽰风格等等⼏百套制作精美、⽤户体验优秀的界⾯。这些界⾯是以QUICKUI⽪肤包的形式发布,使⽤和更换都⾮常⽅便。
④事⽆巨细的开发⽂档
QUICKUI拥有16万字+的开发⽂档,框架和组件的每⼀个功能点都有详细的讲解和代码⽰例,⽤于开发过程中随时查阅。除了框架机制讲解和组件使⽤教程,⽂档还涉及web前端开发的很多知识。仔细阅读并结合框架使⽤的话,你很快就能成为web开发的⾼⼿。
⑤上⼿开发⾮常容易
QUICKUI采⽤组件化思想来构建组件,⼀个组件就是⼀两句html的标签,使⽤起来⾮常简单。将开发⼈员从繁琐的JS编码中解脱出来,很⼤程度减少前台编码的出错率;保留了HTML的布局⽅式,从⽽快速进⾏页⾯布局。对开发者前台技术要求也⾮常低,只需要了解html语法和⼀些简单的JS即可,从⽽把更多精⼒放在业务功能的实现上,极⼤地提⾼开发效率。
⑥浏览器兼容性⾮常好
QUICKUI4.0使⽤了很多HTML5,CSS3技术⽤于提⾼表现⼒和⽤户体验,这些新的特性在现代浏览器中会有很好的效果。但是,国内依然有⼤量的⽤户在使⽤IE7、IE8等旧时代的浏览器,为照顾这部分⽤户,框架采⽤了渐进式思想,确保低版本浏览器也能正常使⽤。所
以,QUICKUI兼容IE7以上所有主流浏览器。
flex
Apache基⾦会今天发布了Flex4.8版本,这是Adobe将Flex捐献给Apache基⾦会后发布的第⼀个版本。
  需要注意的是,Flex⽬前还在孵化阶段,还不是Apache的正式项⽬,Flex4.8也不是⼀个正式的Apache版本。
Apache称,该版本标志着Flex新时代的开始,Flex的未来将由社区来驱动,⽽不是由⼀个公司驱动。开发者可以通过贡献代码,来帮助改进Flex,如修复bug、增加功能等。
  从Macromedia卖给Adobe,然后⼜捐给apache,不知道搞什么名堂。不过还好没有经过⼤幅重构,否则就真的是悲哀了!
extjs
ExtJS是⼀种主要⽤于创建前端⽤户界⾯,是⼀个基本与后台技术⽆关的前端ajax框架。
  功能丰富,⽆⼈能出其右。
  ⽆论是界⾯之美,还是功能之强,ext的表格控件都⾼居榜⾸。
  华丽的界⾯,灵活的功能,还有开发⼯具都是配套的,但有个最⼤的问题,⽤就得花钱!
easyui
easyui帮助你构建你的web应⽤更加容易。
  它是⼀个基于jquery的插件,开发出来的⼀套轻量级的ui框架,⾮常⼩巧⽽且功能丰富。
  但是她有⼀个最⼤的问题就是代码只能到以前的开源的版本,到了1.2以后的版本源代码都是经过混淆的,如果遇到问题修改起来会⾮常⿇烦!不过⼀个⽐较⼤的优势是开源免费,并且界⾯做的还说的过去!
jQueryUI
jQueryUI是⼀套jQuery的页⾯UI插件,包含很多种常⽤的页⾯空间,例如Tabs(如本站⾸页右上⾓部分)、拉帘效果(本站⾸页左上⾓)、对话框、拖放效果、⽇期选择、颜⾊选择、数据排序、窗体⼤⼩调整等等⾮常多的内容。  功能⾮常全⾯,界⾯也挺漂亮的,可以整体使⽤,也可以分开使⽤其中的⼏个模块,免费开源!
MiniUI
  ⼜⼀个基于jquery的框架,开发的界⾯功能都很丰富。
jQueryMiniUI–快速开发WebUI。
  它能缩短开发时间,减少代码量,使开发者更专注于业务和服务端,轻松实现界⾯开发,带来绝佳的⽤户体验。
  使⽤MiniUI,开发者可以快速创建Ajax⽆刷新、B/S快速录⼊数据、CRUD、Master-Detail、菜单⼯具栏、弹出⾯板、布局导航、数据验证、分页表格、树、树形表格等典型WEB应⽤系统界⾯。
  界⾯做的挺不错,功能也挺丰富,但是有两个⽐较⼤的问题,⼀个是收费,⼀个是没有源码,说⽩了,不开源!基于这个开发如果想对功能做扩展就需要他们的团队进⾏升级!
DWZ
DWZ富客户端框架(jQueryRIAframework),是中国⼈⾃⼰开发的基于jQuery实现的AjaxRIA开源框架.
  设计⽬标是简单实⽤,快速开发,降低ajax开发成本。
  欢迎⼤家提出建议,我们将在下⼀版本中进⼀步调整和完善功能.共同推进国内整体ajax开发⽔平。
  毕竟是国产的,⽀持⼀下,⽽且源码完全公开,可以选择⼀下!不过性能怎么样不敢确定!
YUI
Yahoo!UILibrary (YUI)是⼀个开放源代码的JavaScript函数库,为了能建⽴⼀个⾼互动的⽹页,它采⽤了AJAX,DHTML和DOM等程式码技术。它也包含了许多CSS资源。使⽤授权为 BSD许可证,基本上没怎么研究过!YUICompressor倒是挺出名的,这套UI库不知道应⽤的情况怎么样!
Sencha
Sencha是由ExtJS、jQTouch以及Raphael三个项⽬合并⽽成的⼀个新项⽬。
  ⼤公司的框架,并且是⼏样库的强强联合,值得推荐!
OperaMasks-UI
OperaMasks-UI是OperaMasks团队2011下半年打造的⼀款轻量级前端JS组件库,旨在提供⼀款学习曲线低、定制性灵活、样式统⼀,且多浏览器⽀持、覆盖企业业务场景的前端JavaScriptUI组件库。⽬前,该团队已将这⼀产品以LGPL开源协议开放给社区。
  ⽂档丰富,功能齐全,⽽且很容易使⽤和开发!⽽且是国产的哟!
  以上排序是整理时的排序,⼀起整理分析⼀下,下次⽤的时候就不⽤到处了,我想同样的问题应该也存在在很多程序员⾝上,任何⼀款UI框架,只要能够容易⼊⼿就⾏。

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。