照片由 Mohammad Rahmani 拍摄，来自 Unsplash
在 Laravel 5 的旧时代，让框架与新兴的 JavaScript 前端配合使用非常繁琐，几乎是让人抓狂的经历。你所能做的最好的就是整合 HTML、CSS，也许还有一些 JavaScript 到你的页面里，就这样。
几年后，前端生态系统变得相当不错。不仅 Blade 模板引擎 成为了 Laravel 中所有展示内容的“支柱”，而且它本身也非常容易理解，而且我们有更多的选择，比过去几年多了不少。
只用 HTML 或者努力让单页面应用（SPA）与后端配合的日子早就成为过去式。
简洁 — 灵活性的代价不得不说，Laravel Folio在使用Blade模板引擎创建网页时是一个节省时间的好工具。它通过检查你的resources/views/pages文件，进行一些推测，因此无需在各个目录间跳转，创建额外的文件或声明额外的内容。
<?php
use App\Models\Post;
use Illuminate\Support\Facades\Auth;
use Illuminate\View\View;
use function Laravel\Folio\render;
render(function (View $view, Post $post) {
if (! Auth::user()->can('view', $post)) {
return response('无权限访问 (403)', 403);
}
return $view->with('photos', $post->author->photos);
}); ?>
<div>
{{ $post->content }}
</div>
<div>
这位作者也拍了 {{ count($photos) }} 张照片。
</div>Folio 的理念是这样的，让你可以在应用中完全使用Blade视图来创建网页。所有的逻辑都在视图顶部处理，并且将所有与视图相关的内容封装在一个文件里，就像在Vue 单文件组件中那样。
通过将所有内容限制在一个文件中，更容易理解，因为你不需要处理其他文件，比如控制器和路由等。问题是其简单性带来的限制：当所有代码都在一个文件里时，如果你需要一些 Laravel Folio 无法提供的功能，你就得用些编程上的技巧。
Livewire — 以牺牲简洁为代价的现代性Livewire 有点与众不同。它在 Blade 组件的基础上进行了扩展，为它们增添了一种新颖性：组件可以拥有独立的状态和逻辑。
<?php
namespace App\Livewire;
use Livewire\Component;
class Counter extends Component
{
public $count = 1;
public function increment()
{
$this->count++;
}
public function decrement()
{
$this->count--;
}
public function render()
{
return view('livewire.counter');
}
}Livewire 让你的前端仅“刷新”一个组件，而不是接收整个响应或进行完整的页面刷新。一个组件可以有多个由前端元素触发的后端动作，从简单的按钮到复杂的输入表单。Alpine JS 负责大部分连接工作，而你甚至可能没有注意到这些奇妙的功能。
因为每个组件都是作为一个类来声明的，每个组件有自己的视图、属性和动作，使用Livewire创建前端会让你更多地依赖这些组件，而不是完整的、声明式的网页。
因此，掌握“Livewire 组件”的生命周期需要一个学习曲线，特别是在进行更复杂的事情时，特别是当你需要多个动作、高级输入验证、全局状态，甚至修改底层 Alpine JS 的代码时。
惯性 — 用时间换取操控inertia 是一个时间节省工具，在将这样的 JavaScript 驱动的前端（比如单页应用程序 SPA）连接到返回 JSON 响应的 Laravel 后端时，大大节省时间。
<script setup>
import Layout from './Layout'
import { Link, Head } from '@inertiajs/vue3'
defineProps({ users: Array })
</script>
<template>
<Layout>
<Head title="用户列表" />
<div v-for="user in users" :key="user.id">
<Link :href="`/users/${user.id}`">
{{ user.name }}
</Link>
<div>{{ user.email }}</div>
</div>
</Layout>
</template>Inertia的强大之处在于它几乎自带所有管道，连接好并准备好使用：路由、授权、重定向、表单、状态以及其他功能。在Laravel方面，大多数工作是返回一个JSON响应，并利用Inertia的特性。
如果你有一些 Laravel 和 JavaScript 的经验，学习曲线就不会太高，但对于两边都是新手来说，学习曲线就会比较高。
关于前端框架，它官方兼容 Vue、React 和 Svelte——在市场覆盖方面已经非常广泛，但还有一些社区适配器支持一些不太知名的框架，例如CanJS、AdonisJS 和 Mithril。
那我该挑什么呢？没想到根据你的技术水平和时间安排，推荐一个前端框架其实不难。
- Folio 在速度方面显然是赢家，特别是在原型制作时。
- Livewire 非常适合即时响应，但是使用它会更复杂一些。
- Inertia 简化了后端，但你将拥有前端掌控。
如果有宽松的截止日期，仍然决定使用 Folio 加上一个用 Alpine JS 实现的页面来以特定方式解决问题，但不要自欺欺人。一定要慎重考虑，因为中途更换前端框架可能会很头疼，特别是难度突然增加时。
共同学习，写下你的评论
评论加载中...
作者其他优质文章
