关于前端框架的一些观点

标签: IT技术 前段 框架 | 发表时间:2013-04-03 16:31 | 作者:刘志成
出处:http://blog.jobbole.com

来源: Hinc Liu

说起前端框架,我个人主张有框架不如无框架,这个观点要先从框架和库的区别说起。

我所理解的库,解决的是代码或是模块级别的复用或者对复杂度的封装问题;而框架,更多的是对模式级别的复用和对程序组织的规范,这里的模式是指比如 MVC,为了实现 M 和 V 的解耦,通过 IOC 或是 PubSub 等手段,把丑陋的耦合由经常变化的业务代码转移到不经常变化的框架内部消化。

对于前端来说,在 WebApp 概念兴起前,很少能看到所谓的框架,更多的是类似于 jQuery、YUI 的库,因为前端的一路下来的发展历程和开发方式的特殊性决定了很难有什么通用的模式能满足多样化前端的开发需要。如果一定要说,也就是近些年伴随着 SPA(Single-page application)概念兴起而出现的所谓前端 MVC 的一系列衍生模式,但是即便如此,光靠一个框架还是解决不了什么问题。

这里要重点说一下 SPA 这个随着 AJAX 技术火起来的概念,SPA 的好处有哪些相信不用多说,网上一搜一大堆,接近原生应用的表现、和 HTML5 技术发展方向向契合等等。SPA 的出现让前端变得越来越重,代码组织、逻辑解耦等后端常常面对的问题也开始在前端出现,人们也开始在前端引入 MVC 去应对这样一些问题,确实很有成效。但是前端变重所面临的问题就仅仅是 JavaScript 层面的 MVC 能解决的吗?

我们来看前端开发的特点,HTML + CSS + JavaScript 三种不同类型的语言相互配合实现需求;再来看页面加载的特点,先加载 HTML,再有策略的加载 CSS 和 JS,碰到对性能要求较高的场景还要考虑分模块按需加载,在大型 SPA 中还有可能要把页面拆成一个个组件,每个组件又包含模板、样式、脚本,页面拆分成组件的策略是什么,组件的按需加载策略又如何,这些显然不是 MVC 框架擅长解决的问题,这也是 AMD/CMD 等模块机制提供者和加载器流行起来的原因。

近两年开始流行大前端的概念,我的理解这里的大前端说的就是前端的工程化,前端开发的工程特点开始和后端开发越来越像,这也给我们提供了更多的思路,框架解决不了的问题,是不是能像后端一样靠工具解决,过程中的模式(指类似的、重复性的工作)是否可以借助于持续集成工具实现自动化。回到刚才说到的前端组件化问题,代码在开发环境应该对开发人员友好,开发人员可以分工编写不同的组件,每个组件的模板、样式、脚本代码可以分别写在独立的文件中,分目录组织;代码在发布环境应该对用户友好,组件的代码应该根据策略打包成一个或多个文件并进行压缩,便于按需加载和节省流量。而这些正应该是工具要做的。

说到这里,其实框架对于程序组织的规范性上面的作用已经不明显,为了更灵活的模块化,不如不去用框架,把自定义事件的能力封装成模块,PubSub 模式解耦形成约定,用约定和书面规范代替框架去约束程序的组织,让开发人员直面框架的本质,充分发挥人的能动性,相信这才是更利于人才成长的实践方式。

最后提一下前端基础架构方面的一些思考,不要放大框架的作用,随着前端的成熟,工程化的特点会越来越明显,框架、库、工具、过程规范、文档这些东西的发展缺一不可,只有系统的结合才能发挥出技术的最大效能,在这样的平台上去实践、去积累,人才能更全面的发展。

欢迎微博  @Hinc 讨论。

P.S. 上述观点有一定的适用场景,对于比如 HTML5 游戏之类的场景不太适用,请不要断章取义、生搬硬套。

相关文章

关于前端框架的一些观点,首发于 博客 - 伯乐在线

相关 [前端 框架] 推荐:

前端框架你究竟选什么

- - 博客 - 伯乐在线
在做web开发的时候难免遇到一个问题,那就是,选择什么样的框架. Apache基金会今天发布了Flex 4.8版本, 这是Adobe将Flex捐献给Apache基金会后发布的第一个版本. 需要注意的是,Flex目前还在孵化阶段,还不是Apache的正式项目,Flex 4.8也不是一个正式的Apache版本.

[转][转]前端开发框架对比

- - heiyeluren的blog(黑夜路人的开源世界)
来源: http://www.ibm.com/developerworks/cn/web/1404_wangfx_jsframeworks/. 本文选取了 Bootstrap、jQuery UI、jQuery Mobile、Sencha ExtJS、Sencha Touch、Sencha GXT、Dojo、Dojo Mobile、Mootools、Foundation、YUI、Kissy、QWrap 等 16 个国内外前端开发框架进行初步的横向比较,可以作为大家挑选前端开发框架的初步参考.

16个非常有用的前端CSS框架

- - Jackchen Design 1984
网页是设计风格渐渐走向几个特点. 一种是创意类而另一种就是框架类. 创意类的网页是让网页更趋向于艺术风格,而框架类的网页则是为了加快网页设计的开发速度以及各种标准化的统一管理. 好的团队都会用一种高效的框架来进行快速开发. 更牛的团队会相应的开发自己的框架,或者对一些开源框架进行二次定制修改来更大程度的发挥效用.

关于前端框架的一些观点

- - 博客 - 伯乐在线
说起前端框架,我个人主张有框架不如无框架,这个观点要先从框架和库的区别说起. 我所理解的库,解决的是代码或是模块级别的复用或者对复杂度的封装问题;而框架,更多的是对模式级别的复用和对程序组织的规范,这里的模式是指比如 MVC,为了实现 M 和 V 的解耦,通过 IOC 或是 PubSub 等手段,把丑陋的耦合由经常变化的业务代码转移到不经常变化的框架内部消化.

优秀的开源前端框架Bootstrap发布2.0.1版

- - InfoQ cn
Bootstrap是著名的社交网站、微博的先驱Twitter在2011年8月推出的开源WEB前端框架,集合CSS和HTML,使用了最新的浏览器技术,为快速WEB开发提供了一套前端工具包,包括布局、网格、表格、按钮、表单、导航、提示等等. 使用Bootstrap可以构建出非常优雅的前端界面,而且占用资源非常小.

模块化高扩展性的前端框架 KISSY

- - TaoBaoUED
模块化高扩展性的前端框架 KISSY. 注:本文为 2013 年 3 月程序员杂志同名文章的完整版. 伴随着淘宝的快速发展,诞生已三年多的 KISSY 也取得了巨大的成长. 目前应用于阿里集团的多个业务团队,特别是淘宝,天猫,一淘的绝大多数业务都采用了 KISSY, 满足了从前台的 web page 到后台的 web app 再到移动端应用(起步阶段)的广泛需求.

酷酷的前端MVC框架AngularJS(二)HelloWorld

- - ITeye博客
angularJS在github上面进行一个代码的托管. 地址:https://github.com/angular/angularjs.org  . 注意:需要兼容IE8的同学请下载1.3之前的版本,在1.3之后已经放弃了IE8,估计是为了以后大版本升级做铺垫吧. 各个版本的下地址在这里https://github.com/angular/angular.js/releases.

HTML5 跨屏前端框架 zui 1.0 正式版本发布!

- - 开源中国社区最新新闻
我们非常高兴的向大家介绍我们团队开发的zui框架. 我们团队在开发禅道、蝉知和然之系统时,也涉及到ui框架选型的问题. 我们先后经历了最初的表 格布局,到后来的yui框架,再到后来的bootstrap框架,再到最后我们综合这些ui布局方法和框架的各种优缺点,逐步形成了我们自己的zui框 架. 在此感谢我们团队的catouse同学.

腾讯移动前端框架 mt 2.0 发布

- - 开源中国社区最新新闻
MT是手机腾讯网前端团队开发维护的一个专注于移动端的js模块管理框架. mt介绍文档: http://mt.tencent.com/mt1index.html. 1.  本地存储异常,统计回调. 通过设施g_config的storeInc对象的statFunc,storeExFunc两个函数,可以设置统计和本地存储异常回调 , statFunc在请求每个js的时候触发,便于统计每个js的请求情况,storeExFunc在写本地存储异常回调, 将脚本内容写入本地存储出现异常的时候调用,用来提供给业务清理本地存储.

最受欢迎的前端UI框架推荐

- - 氪星人
前端UI框架越来越受到新人追捧,下边小编为大家列出目前最受欢迎、最优秀的前端框架以供大家选择. 目前开源社区最受欢迎的项目之一,可谓大名鼎鼎了,最新版本3.x兼容IE9+,用于开发响应式布局、移动设备优先的Web项目. 官网: http://getbootstrap.com/. UI框架的后起之秀,UI动画效果很棒,一个很有潜力的项目.