Press "Enter" to skip to content

Laravel 前端脚手架选择指南

开发企业应用(大规模应用),我们需要,也喜欢使用框架、工具库甚至是现成的脚手架(scaffolding)。因为「框架」给我们提供高效舒适的开发环境,「脚手架」则甚至提供即用的半成品,二者结合可以让我们迅速 进入 业务开发。

开发web应用 ,laravel 是 流行后端框架的一支,laravel官方除了是 高效的后端框架外,也提供很多 脚手架,这些脚手架不限于后端,也有全栈的,看这里(https://laravel.com/docs/9.x/starter-kits)。

  • 后端脚手架:fortify, sanctum
  • 前端(全栈)脚手架:ui, breeze, jetstream

此外,laravel 发展 推进了 前端技术的创新,还出现两种新技术:livewrie , inertia。

这样,在兼顾新技术拓展,和后向兼容,「laravel 前端脚手架」多样发展,让新手感觉眼花撩乱, 不知如何选择。

脚手架

脚手架有不同的属性:

  1. 前端,后端,还是全栈的
  2. 有哪些半成品,例如 基本UA(注册认证鉴权),2FA等
  3. 用什么技术实现的,这个一般针对前端栈多;例如 使用 tailwind 或 是 bootstrap(sass);HTML 使用 blade 或是 vue等

1 Laravel Jetstream

Laravel Jetstream 是当下(laravel9 2022)最“尖端”的官方全栈脚手架。此脚手架使用了最新技术,并且功能较多,不是适用所有开发场景,使用前必须了解清楚。

和 Jetstream 类似的,同是官方全栈脚手架还有 laravel ui 和 laravel breeze。breeze可以理解为 Jetstream的简化版,ui 则是最早的官方脚手架,可理解为上一代官方脚手架,现在被认为落后,官方不再维护。不过 ui依然有市场的。

Jetstream 的全栈半成品

作为使用者,我们最关心「脚手架」的当然是它的半成品提供了什么功能(模块)。

所有脚手架都会实现一项功能,就是用户身份认证(UA,user authentication)和用户会话管理。它们就像一座建筑的门禁,和水电系统,不可或缺。Jetstream 使用了最新技术实现了最全面的UA 功能,主要包括:

  1. 基本UA:注册,登录和访问鉴权,分web 和 API两类;
  2. 高级UA:密码重置(找回密码),双重认证(2FA),email验证,和操作密码确认;
  3. 和一些高级用户功能:会话管理,用户账户管理和 团队管理

Jetstream 的前端技术

我们讨论的是laravel 脚手架,所以后端基础技术栈 只能是php laravel ,但前端不是。

我们选择了一个 脚手架,它的「半成品的基础技术」也会一并引入,供我们使用。例如如果脚手架用react实现,我们不可能再改用vue写业务模块。laravel 脚手架 前端技术可用的太多(它也是本指南的写作目的),ui, breeze, jetstream 都可以使用不同的前端技术。

前端开发任务主要是 开发「UI组件」,再用它组成「页面」和「会话」。UI组件开发包括三个部分:1)UI结构的组建,2)样式开发和 3)交互功能的实现,技术表现上可看成 HTML,CSS 和JS。这些任务在技术(工具)上发展出现了太多的方案了,包括一代,二代和三代技术,和后三代技术。

  • 一代: web2.0 ,标志是 jquery 实现 AJAX
  • 二代:以backbone为代表的 无VDOM的 JS框架技术
  • 三代:以React Vue为代表的 VDOM JS框架技术
  • 后三代:就是Jetstream使用的前端技术,包括 livewrie , 和inertia两种变种技术

所谓后三代是指在第三代的基础之上反思得到的,主要原因是,第三代技术对入门者不是特别友好,学习曲线较徒,还有VDOM和客户端渲染不适用于所有需求。

Web 应用的特性」有两个极端,就是多页(MPA)和单页(SPA)。当一支应用偏向「单页」时,它的交互性变强(Reactivity),用一代,因无模块,代码凌乱难以维护;用二代则出现刷新重渲染的性能问题;另外,React Vue等三代技术也不是万能的,如果项目偏中性「混合型应用」,使用三代显得像用牛刀杀鸡。

后三代的技术核心是,不使用 REST API 写 reactive 组件。而作为变种,livewrie , 和 inertia 区别可以这样理解:

  • livewrie 将 laravel blade 升级为 开发 某种混合型SPA的技术, laravel blade原目标是MPA
  • inertia 则反过来,将 vue 或 react 降级 为 开发 某种小型SPA的技术

所以二者选择还是比较直观,熟悉三代(react or vue)用inertia,不熟悉的就学用livewire。

前端,最后特别强调一下CSS技术。livewrie , 和inertia 开发 HTML(UI结构组建),和 JS(Reactivity) 使用不同技术,但对「样式任务」 可以使用同一种技术,那就是 Tailwind 。Tailwind 也是一种最新 样式开发革新技术。

Jetstream 的后端技术

Jetstream 的后端技术就是PHP 和 laravel,但它的功能半成品 是来自 laravel 两个官方 后端脚手架:fortify 和 sanctum 。Jetstream 只是在它们在基础之上 ,使用后三代前端技术 实现了前端部分。

Jetstream 的安装和使用

安装看文档。使用上,Jetstream 作为一种 封装好 laravel package,主要看「定制接口」。

由于 Jetstream 的大部分功能由 fortify 和 sanctum两个包提供的,主要的定制是定制它们(看下面);其次,就是定制 public 出来 前端 view。

2 Laravel Fortify

Jetstream 是一种新项目或未来推荐的方案,但是不人人想要的。有时候我们想直接用React 或 Vue,但是我们又不想完全自己实现UA的后端逻辑,此情你就可以绕过Jetstream,直接在 Fortify 上进行定制。Fortify是一种特殊的官方包——laravel package

laravel package 常见定制接口

laravel package 是一种特殊的 composer 包,它是 laravel特定的,功能是 增加 基于laravel 开发的应用的功能,它不会像一般的 composer 包,只有 php 类,所以 安装和使用上都有独特之处。例如,一般的 compser 包安装了,通过创建类实例,或者调用类静态方法 进行“功能定制”; laravel package 安装可能需要publish 源文件,定制 要编辑这些 源文件。

laravel package 并不限定 封装什么功能(内容),只限定两个条件,第一,它是laravel的 ,依赖laravel;第二,它是 web 功能。所以,laravel package 定制接口可以是各种各样的,但 laravel官方这些包 常见以下的一些定制接口:

  • 1 config 打开/关闭功能
  • 2 action 使用功能
  • 3 service 全局服务
  • 4 views 前端页面
  • 5 migration 数据迁移

Fortify 定制使用

Fortify 只有后端逻辑,无前端UI。所以使用上主要为其开发(并安装)相应的“view”,例如为“登录”功能 安装一个 login view。安装并publish后,Fortify 定制流程大略如下

  • 0 在laravel 注册全局 服务 config/app.php
  • 1 配置 功能开关 config/fortify.php
  • 2 安装view boot method of your App\Providers\FortifyServiceProvider class
  • 3 (可选)定制自己的认证逻辑 boot method of your App\Providers\FortifyServiceProvider class
  • 4 (可选)定制自己的认证流程 boot method of your App\Providers\FortifyServiceProvider class

3 laravel/ui

虽然 laravel/ui 已经被官方“遗弃”,但对于某些项目需求情景,可能还是一个选择的方案。例如,当你特别中意 boostrap这个框架,或都你有一些旧项目,或要开发一个很简单项目,此情laravel/ui 不失为好选择。

laravel/ui 的前端 是Bootstrap CSS,并且只有最基础UA的功能,包括 login, register, and forgot/confirm/reset password views,对于初学者 或某些人 显得特别的友好。

如果你又想用bootstrap ,又希望用上 Jetstream 全面的功能,社区有开源模板,看这里(https://github.com/nascent-africa/jetstrap.)

4 自由定制

掌握了 laravel 的全栈架构后,完成可以自己定制想要的前端技术栈。例如,我想 laravel/ui的简单,fortify的丰富,和tailwind的现代,这完全是可以自己定制的。看这里(https://samuelstancl.me/the-complete-guide-to-laravel-front-end-scaffolding)

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *