构建网站我们该选择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) views7288 comments1

发送私信

最新评论

iefreer 2019-05-26 18:08:14

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


请先 登录 再评论.
相关文章
  • 2019年NodeJS框架Koa和Express选型比较

    Koa和Express都是NodeJS的主流应用开发框架。
    Express是一个完整的nodejs应用框架。Koa是由Express团队开发的,但是它有不同的关注点。Koa致力于核心中间件...

  • OpenGL/WebGL顶点坐标变换过程简介

    世界坐标是按照笛卡尔坐标系定义出来的绝对坐标系,下面的各种坐标系都建立在世界坐标的基础上。对象坐标系对象被应用于任何...

  • HTML5 And Canvas 2D Specs Are Now Feature Complete, First HTML 5.1 Working Draft Published

    We’ve been writing about HTML5 for quite a while, but, until today, the actual HTML5 specs and standards were still moving targets. Now, however, the...

  • CSS3原生变量(Native Variables)新特性简介

    对Web开发者来说,一个盼望已久的特性是CSS终于支持原生变量了!
    变量是程序语言中用来解决代码重复和进行表达式计算的关键概念(想想数学方程式中的x)。...

  • React JSX语法简介

    JSX是一种类似XML的标签语法,用来简化代码,我们可以不使用JSX,但了解并使用也没什么坏处:)在React中,JSX是一个使用 React.createElement() API的快捷方式...

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

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

  • 深入理解JS和CSS3动画性能问题和技术选择

    本文对比了JS及其框架和CSS3的动画性能,并深入剖析了其内在原因。技术结论大致如下:1. jQuery出于设计原因,在动画性能上表现最差2. CSS3由于把动画逻辑推给了...

  • 学习使用CSS制作进度条

    进度条是基础的界面控件,可用于多种场合,比如任务完成进度,手机充电状态等。本文介绍一个简单实用的进度条制作方法。预期效果如下图所示:直观上,我们可以把该进度条控件分为2个部分,外部的边界用来表示固定的目标范围,里面的条形部分用来表示当前进度。外部目标范围元素的CSS代码编写如下:.pb-scope

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

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

  • Three.js入门教程6 - 创建全景图和纹理

    全景图非常酷。使用Three.js做一个属于自己的全景图并不是那么困难。要做一个全景图,你需要一个软件用来做一张全景图片。我使用了iPhone上的Microsoft Photosyn...

  • Three.js入门教程5 - 10个必须知道的编程技巧

    作者为Google的Paul,关于如何写出好的WebGL代码的文章。和很多开发者一样,我通过实践学习,但同时我也向其他更有经验的开发者们学习。在过去的几个月中,我在c...

  • 如何使用WebGL创建一个逼真的下雨动画

    之前写过文章来分别讲解如何使用CSS3和Canvas2D实现过雨滴和下雨动画。通过背景处理看起来也有视觉上的3D效果,但并非真正的3D场景,如果要加入用户交互,进行36...

  • 更多...