Laravel 前端选哪个好？Folio、Livewire 还是 Inertia？-原创手记-慕课网

快速 vs 灵活 vs 绝对

照片由 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 实现的页面来以特定方式解决问题，但不要自欺欺人。一定要慎重考虑，因为中途更换前端框架可能会很头疼，特别是难度突然增加时。