构建网站我们该选择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服务器来支持预览、开发和调试。


- 相关文章
OpenGL/WebGL顶点坐标变换过程简介
世界坐标是按照笛卡尔坐标系定义出来的绝对坐标系,下面的各种坐标系都建立在世界坐标的基础上。对象坐标系对象被应用于任何...
增强现实引擎ARToolKit工作原理简介
ARToolkit是一个基于CV(计算机视觉)和Marker(标识)的开源增强现实引擎。其具备如下功能特性:A. 鲁棒跟踪,包括基于标记的跟踪与基于特征的跟踪;
常用光照类型基本概念工作原理及其计算公式
在三维场景中,原理上物体的渲染效果取决于光照与物体表面的相互作用,对于渲染程序而言,可以通过把一些数学公式应用于像素着色来实现,从而模拟出真实生活中的...
A-Frame WebVR(网页虚拟现实)快速开发入门教程
WebVR和WebGL应用程序接口使得我们已经可以在浏览器上创建虚拟现实(VR)体验,但从工程化的角度而言,开发社区还需要更多方便强大的开发库来简化编程,Mozilla的
CSS3特性查询(Feature Query: @supports)功能简介
这是2017年不能不了解和学习的一个CSS新特性,非常实用,考虑到现实世界浏览器的复杂性,该特性本应该先于其他新特性出来。我们已经知道使用媒体查询(Media Que...
CSS3弹性布局内容对齐(justify-content)属性使用详解
内容对齐(justify-content)属性应用在弹性容器上,把弹性项沿着弹性容器的主轴线(main axis)对齐。该操作发生在弹性长度以及自动边距被确定后。 它用来在存...
深入理解JS和CSS3动画性能问题和技术选择
本文对比了JS及其框架和CSS3的动画性能,并深入剖析了其内在原因。技术结论大致如下:1. jQuery出于设计原因,在动画性能上表现最差2. CSS3由于把动画逻辑推给了...
使用HTML5 FileReader和Canvas压缩用户上传的图片
手机用户拍的照片通常会有2M以上,这对服务器带宽产生较大压力。因此在某些应用下(对图片要求不那么高)我们可以在客户端来压缩图片,然后再提交给服务器。总体...
HTML5、Hybrid APP、Native APP对比和技术选型
HTML5和Native APP都很容易理解。为了获得HTML5的移植性和移动本地应用的高性能,搞出来一些混合APP的解决方案。比如Apache的Cordova(也就是以前的PhoneGap),...
计算WebGL中的uniforms变量使用数
在使用Three.js为人体模型加载皮肤材料时,启用了skinning:true的参数。有时候会导致GL编译错误,提示“too many uniforms”。下面的文章有助于理解错误原因和检...
WebGL入门教程5 - 详解纹理滤镜(Texture Filter)
WebGL中使用纹理贴图来实现细腻的物体表面观感,其中一个重要的参数是纹理滤镜(Texture Filter)。
这个参数用来处理当对象出现缩放时,纹理如何处理中间...D3.js读取外部json数据
D3.js是一个很好的数据可视化工具,支持从web服务读取json数据,或者从外部文件如.json, .csv文件中直接读取。由于部分服务比如flickrs上的图文数据服务需要VPN...
Three.js 3D打印数据模型文件(.STL)加载
3D打印是当下和未来10年产品技术主流方向之一,影响深远。对于电子商务类的3D打印网站,一个主要功能是把商品以3D的方式呈现出来,也就是3D数据可视化技术。HTML...
使用requestAnimationFrame和Canvas给按钮添加绕边动画
要给按钮添加酷炫的绕边动画,可以使用Canvas来实现。基本的思路是创建一个和按钮大小相同的Canvas元素,内置在按钮元素中。然后在Canvas上实现边线环绕的动画。...
更多...