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

发送私信

最新评论

iefreer 2019-05-26 18:08:14

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


请先 登录 再评论.
相关文章
  • CentOS6 Apache2.2多站点HTTPS配置

    可以使用letsencrypt(certbot)免费证书服务。支持多系统、多站点和多目录,支持wildcard(通配符域名),90天生效,可用定时任务自动更新。需要注意一点的是apache2.4以下版本需要在默认的ssl配置中添加如下的指令:NameVirtualHost

  • 3D感知和建模关键硬件技术:双目、3D结构光和TOF

    无论VR、AR和3D打印,其核心技术包含3D成像和建模。而3D建模属于劳动密集型的工作,耗时耗力,凡这类工作都会是被新技术革命的地方,自动3D建模技术就是为了解决...

  • 2019年NodeJS框架Koa和Express选型比较

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

  • 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)。...

  • 常见面试题JavaScript闭包(ES5语法)

    JavaScript闭包(Closure)是常见的JS面试题,是否理解闭包是一个简单的区分JS初级和高级程序员的判例。几乎每个JS程序员都在使用闭包,有意或无意间。比如编写一个jQuery鼠标点击处理函数:$(function()

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

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

  • Three.js 对象局部坐标转换为世界坐标

    在Three.js中进行顶点几何计算时,一个需要注意的地方是,需要统一坐标系。比如你通过Three.js提供的API创建了一个球体网孔对象,那么默认情况下,各网孔顶点的...

  • Blender2.7 快捷键一览表

    通用操作
    停止当前操作:ESC
    快捷搜索:SPACE撤销:ctrl+z重做:ctrl+shift+z渲染:F12
    单选:鼠标右键(RMB)全选:A
    框选:B
    刷选:...

  • WebVR简介和常用资源链接

    什么是WebVR这是一个实验性的JavaScript API,提供了在用户网页浏览器中访问虚拟现实设备的统一接口。当前主流VR设备如Oculus Rift DK2、谷歌的CardBoard、三星...

  • WebGL入门教程5 - 详解纹理滤镜(Texture Filter)

    WebGL中使用纹理贴图来实现细腻的物体表面观感,其中一个重要的参数是纹理滤镜(Texture Filter)。
    这个参数用来处理当对象出现缩放时,纹理如何处理中间...

  • 如何使用WebGL实现空气高温热变形动画特效

    我们在炎炎夏日,或者在火堆旁,经常会观察到热源周围空气的不稳定波动现象。本文将讲解如何通过WebGL来实现这个特效。该效果可用于热变形、波浪、水面波光等场...

  • 浏览器控制台报JS脚本执行错误:Module is not defined

    现在JS分成了两个分支,一部分在服务器端发展如NodeJS,一部分是传统的浏览器运行环境。
    有些插件在编写JS代码时,是针对Node编写的,所以直接在浏览器中使...

  • 更多...