Laravel 前端脚手架选择指南

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

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

后端脚手架：fortify, sanctum
前端（全栈）脚手架：ui, breeze, jetstream

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

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

脚手架

脚手架有不同的属性：

前端，后端，还是全栈的
有哪些半成品，例如基本UA（注册认证鉴权），2FA等
用什么技术实现的，这个一般针对前端栈多；例如使用 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 功能，主要包括：

基本UA：注册，登录和访问鉴权，分web 和 API两类；
高级UA：密码重置（找回密码），双重认证（2FA），email验证，和操作密码确认；
和一些高级用户功能：会话管理，用户账户管理和团队管理

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）