构建网站我们该选择Laravel还是React

techbrood 发表于 2019-05-22 16:27:56

标签: lavarel, blade, yii2, react, vue

- +

现在构建网站的可选项很多,就架构上来讲,有两种方式:一种是传统的服务端动态语言构建,使用PHP/JAVA/Python的开发框架,比如Laravel/Yii/Django/Spring,在服务端完成特定语言模板的解析并生成标签文本输出到客户端(即SSR:服务端渲染);另外一种使用前后端分离的方式,也就是通过后端(Healess CMS)纯粹提供数据,给到ReactJS或VueJS这样的前端开发框架来在客户端完成整个UI的渲染。那么两者究竟有什么区别,我们该如何取舍呢?


相同点:

  1. 都支持模板语言(你可以把PHP(blade,smarty...)或React(Vue)本身看成一种模板语言,支持循环、条件等常用指令);

  2. 都能支持组件化(react/vue通过npm或yarn来安装扩展模块,php通过composer来安装第三方扩展;而app内部,php可以通过include来包含另外的界面组件,react/vue可以通过import/require来包含。);

  3. 都能支持多布局(多个layout是大型网站应用的基本需求);

  4. 都能支持多语言;

  5. 都能很好的支持路由(router);

  6. 都能很好的支持各种数据检验(validator);

  7. 都能支持状态持久化(浏览器端Cookie、LocalStorage以及服务端session/token储存);


不同点:

  1. 由于样式和内容的分离,Laravel/Yii能方便的支持多个界面方案theme,而React可能比较麻烦,因为样式是在组件内部的;

  2. 由于样式和内容的分离,Laravel/Yii能更好的复用样式,最大程度的减少样式冗余,但缺少局部样式(scoped style)可能会导致样式冲突;

  3. 由于样式被分离,Laravel/Yii的扩展组件需要打包多个文件(html/js/css/assets)才能被复用;

  4. Laravel/Yii本质上还是瘦客户端服务端架构,实现了MVC模式,而React/Vue本质上是胖客户端架构,结合服务端实现了MV(C)VM模式,其根本的技术特征是缓存服务端数据,使用VM来双向绑定View和Model。

  5. Laravel/Yii这样的框架对于页面/样式/脚本缓存的支持要更好;

  6. Laravel/Yii这样的框架对于SEO要更友好,不需要像React/Vue一样需要额外考虑做预渲染(prerendering)或服务端渲染(ssr)来支持SEO;

  7. React/Vue需要额外的编译;

  8. React/Vue这样的前端框架通过观察者模式实现了数据双向动态绑定机制,可以更自然的做到响应式交互体验;

  9. React/Vue实现了虚拟文档(Virtual Dom),可以减少不必要的页面刷新,这对交互频繁的应用程序提升性能是很有帮助的;

  10. React/Vue的单页应用一次性加载页面全部资源,后续只需要和后台交换数据即可,可以减少对网络带宽的依赖,但缺陷是第一次加载和渲染需要等待较长时间,这对于用户第一次访问的体验要比通常的网页要糟糕得多,所以如果只是新闻、博客、信息发布类的网站,不建议使用React或Vue来构建。


总体上来讲,如果要创建单页网站应用,不需要复杂的后台管理功能,不那么关注SEO,建议用React/Vue来做;

如果需要复杂的后台管理,且团队成员技能倾向于全栈方式,个人还是建议用成熟的CMS系统(如Joomla!, WordPress, Magento)或者基于Laravel, Yii这些框架所构建的CMS系统来开发会非常便捷和快速,性能也会很好,而且不需要额外学习一整套的前端框架。

如果团队成员技能倾向于前后端分离方式,那么可以折衷一下,利用Laravel/Yii开发Restful API来给前端的React/Vue应用提供数据。

但React/Vue应用仍然需要借助Webpack开发服务器或NodeJS服务器来支持预览、开发和调试。



possitive(16) views7283 comments1

发送私信

最新评论

iefreer 2019-05-26 18:08:14

https://stackoverflow.com/questions/667781/what-is-the-difference-between-mvc-and-mvvm


请先 登录 再评论.
相关文章
  • 踏得网精选2016年度10大最佳HTML5动画

    踏得网精选2016年度最酷最新的HTML5动画集,评选标准为:创意新颖度+实现技术难度+趣味程度。使用一些在线H5生成工具的作品,因其主要使用图片和CSS3套路动画,...

  • CSS3特性查询(Feature Query: @supports)功能简介

    这是2017年不能不了解和学习的一个CSS新特性,非常实用,考虑到现实世界浏览器的复杂性,该特性本应该先于其他新特性出来。我们已经知道使用媒体查询(Media Que...

  • CSS3弹性布局弹性流(flex-flow)属性详解和实例

    弹性布局是CSS3引入的强大的布局方式,用来替代以前Web开发人员使用的一些复杂而易错hacks方法(如使用float进行类似流式布局)。其中flex-flow是flex-direction...

  • 三维向量的简单运算和实用意义

    在WebGL的实际应用中我们广泛使用向量的几何运算来计算角度、距离,判断点线、点面之间的关系,比如物体之间的碰撞检测。本文简要介绍三维计算机图形学中常用的...

  • 深度贴图(depth map)概念简介和生成流程

    Depth map 深度图是一张2D图片,每个像素都记录了从视点(viewpoint)到遮挡物表面(遮挡物就是阴影生成物体)的距离,这些像素对应的顶点对于观察者而言是“可...

  • 粒子运动模拟 - Verlet积分算法简介

    Verlet算法是经典力学(牛顿力学)中的一种最为普遍的积分方法,被广泛运用在分子运动模拟(Molecular Dynamics Simulation),行星运动以及织物变形模拟等领域...

  • 纹理基础知识和过滤模式详解

    1、 为什么在纹理采样时需要texture filter(纹理过滤)。
    我们的纹理是要贴到三维图形表面的,而三维图形上的pixel中心和纹理上的texel中心并不一至(pixe...

  • WebGL入门教程6 - 光照效果和Phong光照模型

    正是因为有了光,世界才能被我们看见,在3D的世界里,光照给物体带来真实的视觉感受。当光照射在某一表面上时,它可能被吸收、反射或投射。其中入射到表面上的一...

  • 使用requestAnimationFrame和Canvas给按钮添加绕边动画

    要给按钮添加酷炫的绕边动画,可以使用Canvas来实现。基本的思路是创建一个和按钮大小相同的Canvas元素,内置在按钮元素中。然后在Canvas上实现边线环绕的动画。...

  • div 、section 、article的区别和使用场景

    div 、section 、article的区别和使用场景
    主要区别,以及适用场合如下:
    1、div在html早期版本就支持了,section和article是html5提出的两个雨衣话标...

  • 更多...