Laravel 扩展包开发用哪种前端框架合适?在扩展包内如何发布前端组件?

起因

我去年在尝试着做一个偏研发工具方向的工作流编辑器。其实原本就像奔着 Laravel 扩展包的方向进行开发。但我对自己的前端能力不是很自信,所以想先按照网站的开发模式先来学习下不熟悉的前端框架。

于是目前的半成品长这个样子:

Laravel 扩展包开发用哪种前端框架合适?

Laravel 扩展包开发用哪种前端框架合适?

虽然简陋,但已经完成了基础的设计目标。

扩展包问题

我之前有一些扩展包开发经验,但都是基于简单的功能或API接口开发,我们的前端工程师并没有采用扩展包模式开发。现在是做我自己的程序了,最具挑战的就是前端技术。这里有些问题想问大家:

  1. 做这种带页面的扩展包,应该选用哪种前端框架?livewireInsertia ? 还是直接用 Vue ?
  2. 如果选用了这些前端框架,如果以后使用该扩展包的程序采用不同的前端框架该如何兼容扩展包中的前端组件?

吐槽一下目前选用的技术栈

服务端采用的是 laravel 10 + sail
前端框架用的是 Livewire 3 + tailwind css 3 + vite 4 + mary-ui + gojs

服务端自不用说,这几个前端框架可以说都是头一次用,所以也在上面花费了大量的时间(感觉还没用明白)。

使用 Livewire 就意味着页面内容和前端资源在开发环境采用不同的端口进行输出,当我想引入 monaco-editorJSONYAML 格式编辑器的时候,出现引入其 webworker 产生的同源问题,我能想到的只有再加个反向代理按照路径将请求代理到不同的端口。

使用 Livewiretailwind css 的另一个问题是缺少前端组件库,最终选择了 mary-ui (扩展自 DaisyUI), 使用过程中发现组件还是太少。

gojs 的好处就是定制能力强,但仅提供了有限的 UI 组件用来构建画板和底纹,图型基本上都要靠自己去选并配置样式。我也没有 UI 方面的造诣,就造成了自己看着不好看但又说不出该怎么改的困境。

之后想做的尝试

  1. 进行插件化改造:将其改造成一个 laravel 的插件;
  2. 更换前端框架:现在还没想好是直接换 Vue + ElementPlus 还是 Insertia ,如果是从 UI 组件上看,我更倾向于前者;
  3. 进行 UI 优化:主要是图形方面的 UI 进行优化,但脑子里没有什么方向,大家如果有可参考的项目可以发一下,我借鉴一下。
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《G01 Go 实战入门》
从零开始带你一步步开发一个 Go 博客项目,让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。
讨论数量: 10
mouyong

考虑下做成 laravel 的功能性插件。这里有一些已经可以用的插件: marketplace.plugins-world.cn/marke... ,能参考着开发。也有完善的文档: pm.fresns.org/zh-Hans/ ,只要你会 laravel ,就能开发插件。前端静态资源也会自动发布到 public/assets/PluginName/ 下

3个月前 评论
mouyong

噢,看错了问题。用 bootstrap 这种的简单。用 vue 之类的前后端分离方便吧。

3个月前 评论
sanders (楼主) 3个月前
mouyong (作者) 3个月前

我在尝试用 Laravel + Vue SPA 搭建 CMS 管理后台,后台单页面用默认的 Vite 配置就行,前台打算用传统的 Blade。遇到的问题:

  • 如果前台不考虑打包没事儿,如何也要打包就会容易起冲突,使用 2 个 Vite 配置有难度。不过暂时不担心,先集中精力在后台。
  • 后期复用,直接复制整个 Laravel 项目可行,但是估计不够优雅,也没法儿统一升级

我用过 Nova 作为后台管理,它是一个标准的 PHP/Laravel Package,可以单独安装和升级,它会把自己的前端资源直接安装到 public/vendor/nova,这应该是上游打包好了,直接放到代码里的。用 Nova 主要是用 PHP,所以不用重构前端资源,但是复杂的扩展,比如使用 Vue 来定义新字段,也是要创建一个独立的 PHP 包,也是比较繁琐的,会要求把前端打包的结果 commit 在源代码中。

如果是独立的 App 的话,即没有复用需求,不用考虑封装成包。

我没有开发过 Laravel 扩展包,但是我注意到 Laravel 官方有不少带 Web UI 扩展包,比如:

Package Tech Stack
Laravel Telescope Vue SPA (Vue 2 + Bootstrap)
Laravel Pulse Livewire (Tailwind)
Laravel Nova Vue Inertia (Vue 3 + Tailwind)
Laravel Horizon Vue SPA (Vue 2 + Bootstrap)
3个月前 评论
sanders (楼主) 3个月前
JaguarJack

非常困难。如果前后端完全分离,基本不可能的

3个月前 评论
yangweijie

vue tailwind之类就涉及打包,ignition 其实也用的tailwind。如果不涉及定制主题色,和整个多个类到一个class的组件。tailwind 直接一个css,发布copy 到public下即可。 另外有一个ofa.js 可以实现前端组件化 且不需要打包。 之前也看到过一个yoyophp 前后端组件。

3个月前 评论
sanders

纠结前端问题的原因主要集中在两点:后端对 gojs 数据绑定的结构依赖太高 以及 前端相关代码工作量很大。

我其实心里的目标是前端应该类似高德地图组件一样能够被引入到项目中,并通过暴露出 API 进行定制化,只不过高德用的是 saas 模式的接口调用,而我只需要提供在 Laravel 扩展包里的接口。

3个月前 评论
sanders

我现在大概心里有个预期:把程序改成前后端分离的,主要还是 webworker 的同源限制在开发环境处理比较麻烦,其次是为了解耦合。

前端分为两部分:一部分不与任何框架耦合,只依赖 gojs 通过对外提供 API 方法和事件进行画布区域的编程,我姑且叫它“流程编排器”;另一部分则完成编辑器各项功能调用,这里会依赖 Vue \ ElementPlus \ Laravel Echo \ monaco-editor 这几个项目,完成对编排器的调用及其后续功能的开发,这部分如果无法引入项目,也只能被重写,但至少能提供 API 使用方面的参考。

3个月前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!