前端SPA框架一些看法
说起前端框架,我个人主张有框架不如无框架,这个观点要先从框架和库的区别说起。
我所理解的库,解决的是代码或是模块级别的复用或者对复杂度的封装问题;而框架,更多的是对模式级别的复用和对程序组织的规范,这里的模式是指比如 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 模式解耦形成约定,用约定和书面规范代替框架去约束程序的组织,让开发人员直面框架的本质,充分发挥人的能动性,相信这才是更利于人才成长的实践方式。
最后提一下前端基础架构方面的一些思考,不要放大框架的作用,随着前端的成熟,工程化的特点会越来越明显,框架、库、工具、过程规范、文档这些东西的发展缺一不可,只有系统的结合才能发挥出技术的最大效能,在这样的平台上去实践、去积累,人才能更全面的发展。
前端SPA框架一些看法的更多相关文章
- Blazor WebAssembly 3.2.0 已在塔架就位 将发射新一代前端SPA框架
最美人间四月天,春光不负赶路人.在充满无限希望的明媚春天里,一路风雨兼程的.NET团队正奋力实现新的突破. 根据计划,新一代基于WebAssembly 技术研发的前端SPA框架Blazor 将于5月1 ...
- 前端MVVM框架设计及实现(二)
在前端MVVM框架设计及实现(一)中有一个博友提出一个看法: “html中使用mvvm徒增开发成本” 我想这位朋友要表达的意思应该是HTML定义了大量的语法标记,HTML中放入了太多的逻辑,从而增加了 ...
- js架构设计模式——前端MVVM框架设计及实现(二)
前端MVVM框架设计及实现(二) 在前端MVVM框架设计及实现(一)中有一个博友提出一个看法: “html中使用mvvm徒增开发成本” 我想这位朋友要表达的意思应该是HTML定义了大量的语法标记,HT ...
- web前端技术框架选型参考
一.出发点 随着Web技术的不断发展,前端架构框架.UI框架.构建工具.CSS预处理等层出不穷,各有千秋.太多的框架在形成初期,都曾在web领域 掀起过一场技术浪潮,可有些却仅仅是昙花一现,随着他们用 ...
- [Vue 牛刀小试]:第十六章 - 针对传统后端开发人员的前端项目框架搭建
一.前言 在之前学习 Vue 基础知识点的文章中,我们还是采用传统的方式,通过在 html 页面上引用 vue.js 这个文件,从而将 Vue 引入到我们的项目开发中.伴随着 Node.js 的出现, ...
- SPA框架 Angular、React、Vue
指尖前端重构(React)技术调研分析 摘要:重构前的技术文档调研与分析,包括技术选型为什么选择react,应用过程中的注意事项等. 一.为什么选择React React是当前前端应用最广泛的框架 ...
- 温故知新,.Net Core遇见Blazor(FluentUI),属于未来的SPA框架
什么是Blazor Blazor是一个使用.NET生成交互式客户端WebUI的框架: 使用C#代替JavaScript来创建信息丰富的交互式UI. 共享使用.NET编写的服务器端和客户端应用逻辑. 将 ...
- 前端MVVM框架设计及实现
最近抽出点时间想弄个dom模块化的模板引擎,不过现在这种都是MVVM自带的,索性就想自己造轮子写一个简单的MVVM框架了 借鉴的自然还是从正美的Avalon开始了,我2013年写过一个关于MVC MV ...
- 前端Js框架汇总
概述: 有些日子没有正襟危坐写博客了,互联网飞速发展的时代,技术更新迭代的速度也在加快.看着Java.Js.Swift在各领域心花路放,也是煞是羡慕.寻了寻.net的消息,也是振奋人心,.net co ...
随机推荐
- ContextLoaderListener作用详解(转)
ContextLoaderListener监听器的作用就是启动Web容器时,自动装配ApplicationContext的配置信息.因为它实现了ServletContextListener这个接口,在 ...
- Mysql登录异常的一个问题:
问题描述: 正常在启动mysql的时候是这样的: 1. win打开输入界面: 2. 输入cmd命令,鼠标右键选择“以管理员身份运行”: 3, 之后再在界面输入登录mysql的登录语句: mysq -u ...
- 对于WIFI版ipad(无GPS芯片)定位功能的释疑
把玩ipad(WIFI版ipad,无GPS芯片)很久时间了,曾今有很多人(包括我)也用过它的定位功能,发现它确实很准确,通常的误差在40米以内,所以很多人都怀疑这个版本的ipad是不是真的内置了GPS ...
- iOS7 兼容及部分细节
1:statusBar字体为白色 在plist里面设置View controller-based status bar appearance 为 NO:设置statusBarStyle 为 UISta ...
- 【redis】03list类型
list类型 redis的list类型是一个链表结构,他的主要功能是push.pop.获取一个范围的所有值等等一些操作, 咱们push什么意思,push是不是相当于咱们php里面的array_push ...
- 【redis】01Redis的介绍与安装部署
单元目标: 1.NoSQL介绍 2.Redis的介绍 3.Redis适用场合 4.Redis的安装与部署 5.Redis的数据类型 6.Redis的常用命令 7.Redis的高级应用 通过 ...
- hdu 3790 最短路径问题(最短路,Dijsktra)
题目 Dijsktra基础题,只是多了一个花费,稍稍变动处理就好 #define _CRT_SECURE_NO_WARNINGS #include<string.h> #include&l ...
- POJ3267The Cow Lexicon
http://poj.org/problem?id=3267 题意 : 给你一个message,是给定字符串,然后再给你字典,让你将message与字典中的单词进行匹配,输出要删掉多少字母. 思路 : ...
- poj 3270 Cow Sorting
思路:仔细读题,看到FARMER是两两交换牛的顺序进行排序的话,应该就往置换上靠拢,而这个题果然是置换的应用(有的解题报告上说是置换群,其实这只是单个置换,不用让它构成群).我们来将这些无序的牛抽象成 ...
- VisualSvn+TortoiseSVN的安装说明
一.VisualSvn安装及简单使用 下载VisualSvn:VisualSVN-Server-2.5.5.msi 系统:Win7系统 安装步骤: 1.下载VisualSVN-Server-2.5.5 ...