构建网站我们该选择Laravel还是React
现在构建网站的可选项很多,就架构上来讲,有两种方式:一种是传统的服务端动态语言构建,使用PHP/JAVA/Python的开发框架,比如Laravel/Yii/Django/Spring,在服务端完成特定语言模板的解析并生成标签文本输出到客户端(即SSR:服务端渲染);另外一种使用前后端分离的方式,也就是通过后端(Healess CMS)纯粹提供数据,给到ReactJS或VueJS这样的前端开发框架来在客户端完成整个UI的渲染。那么两者究竟有什么区别,我们该如何取舍呢?
相同点:
都支持模板语言(你可以把PHP(blade,smarty...)或React(Vue)本身看成一种模板语言,支持循环、条件等常用指令);
都能支持组件化(react/vue通过npm或yarn来安装扩展模块,php通过composer来安装第三方扩展;而app内部,php可以通过include来包含另外的界面组件,react/vue可以通过import/require来包含。);
都能支持多布局(多个layout是大型网站应用的基本需求);
都能支持多语言;
都能很好的支持路由(router);
都能很好的支持各种数据检验(validator);
都能支持状态持久化(浏览器端Cookie、LocalStorage以及服务端session/token储存);
不同点:
由于样式和内容的分离,Laravel/Yii能方便的支持多个界面方案theme,而React可能比较麻烦,因为样式是在组件内部的;
由于样式和内容的分离,Laravel/Yii能更好的复用样式,最大程度的减少样式冗余,但缺少局部样式(scoped style)可能会导致样式冲突;
由于样式被分离,Laravel/Yii的扩展组件需要打包多个文件(html/js/css/assets)才能被复用;
Laravel/Yii本质上还是瘦客户端服务端架构,实现了MVC模式,而React/Vue本质上是胖客户端架构,结合服务端实现了MV(C)VM模式,其根本的技术特征是缓存服务端数据,使用VM来双向绑定View和Model。
Laravel/Yii这样的框架对于页面/样式/脚本缓存的支持要更好;
Laravel/Yii这样的框架对于SEO要更友好,不需要像React/Vue一样需要额外考虑做预渲染(prerendering)或服务端渲染(ssr)来支持SEO;
React/Vue需要额外的编译;
React/Vue这样的前端框架通过观察者模式实现了数据双向动态绑定机制,可以更自然的做到响应式交互体验;
React/Vue实现了虚拟文档(Virtual Dom),可以减少不必要的页面刷新,这对交互频繁的应用程序提升性能是很有帮助的;
React/Vue的单页应用一次性加载页面全部资源,后续只需要和后台交换数据即可,可以减少对网络带宽的依赖,但缺陷是第一次加载和渲染需要等待较长时间,这对于用户第一次访问的体验要比通常的网页要糟糕得多,所以如果只是新闻、博客、信息发布类的网站,不建议使用React或Vue来构建。
总体上来讲,如果要创建单页网站应用,不需要复杂的后台管理功能,不那么关注SEO,建议用React/Vue来做;
如果需要复杂的后台管理,且团队成员技能倾向于全栈方式,个人还是建议用成熟的CMS系统(如Joomla!, WordPress, Magento)或者基于Laravel, Yii这些框架所构建的CMS系统来开发会非常便捷和快速,性能也会很好,而且不需要额外学习一整套的前端框架。
如果团队成员技能倾向于前后端分离方式,那么可以折衷一下,利用Laravel/Yii开发Restful API来给前端的React/Vue应用提供数据。
但React/Vue应用仍然需要借助Webpack开发服务器或NodeJS服务器来支持预览、开发和调试。
- 相关文章
增强现实引擎ARToolKit工作原理简介
ARToolkit是一个基于CV(计算机视觉)和Marker(标识)的开源增强现实引擎。其具备如下功能特性:A. 鲁棒跟踪,包括基于标记的跟踪与基于特征的跟踪;
如何使用BabylonJS加载OBJ或STL模型
BabylonJS(也就是babylon.js,这是一个和three.js类似的WebGL开发框架),更多的用在游戏领域。
本文说明和演示如何使用babylon.js来加载一个标准3d模型文...CSS3特性查询(Feature Query: @supports)功能简介
这是2017年不能不了解和学习的一个CSS新特性,非常实用,考虑到现实世界浏览器的复杂性,该特性本应该先于其他新特性出来。我们已经知道使用媒体查询(Media Que...
ES6小知识:动态对象键(Dynamic Object Keys)语法简介
在ES5,对象的键(key)总是被解释为字符串。ES6允许我们使用计算的值作为对象的键,使用方括号:[myKey]const
函数式JavaScript编程基础概念:Curry和Partial Application
本文介绍JS函数式编程中的两个概念:柯里(Curry)和部分应用程序(Partial Application)。什么是应用程序(Application)将函数应用于其参数以产生返回值的过...
使用HTML5 Canvas实现的界面元素截屏功能
HTTP/2背景和新特性简介
Three.js入门教程1 - 基础知识和创建一个红色球体
[ TECHBROOD注:Three.js是一个主流的开源WebGL库,WebGL允许使用JavaScript直接操作GPU,在网页上实现3D效果。
Google的工程师Paul在网站aerotwist.com上...如何使用WebGL实现空气高温热变形动画特效
我们在炎炎夏日,或者在火堆旁,经常会观察到热源周围空气的不稳定波动现象。本文将讲解如何通过WebGL来实现这个特效。该效果可用于热变形、波浪、水面波光等场...
WebGL入门教程4 - 使用纹理贴图(Texture Map)
3D建模和纹理贴图的关系就好比人体和皮肤(或着装)的关系,3D建模用来处理空间属性,而贴图适合用来处理细腻的表面属性。如果不使用贴图,而想在表面达到足够的...
如何使用CSS3实现一个3D商品标签
使用3D缎带形状的标签是常见的一个设计模式,用在商品折扣、文章标题或网站推荐信息上,来突出显示重点内容,吸引用户视觉焦点。实现的方法有2种,一种是使用背...
div 、section 、article的区别和使用场景
div 、section 、article的区别和使用场景
主要区别,以及适用场合如下:
1、div在html早期版本就支持了,section和article是html5提出的两个雨衣话标...在PHP网页程序中执行Sass/Compass命令
我们需要在wow云开发平台支持sass/compass等预编译样式语言,为此我们首先尝试了scssphp扩展,但是在支持最新语法上,经常会出现异常。所以我们采用了代理的方式...
更多...