Laravel 扩展包开发用哪种前端框架合适?在扩展包内如何发布前端组件?
起因
我去年在尝试着做一个偏研发工具方向的工作流编辑器。其实原本就像奔着 Laravel 扩展包的方向进行开发。但我对自己的前端能力不是很自信,所以想先按照网站的开发模式先来学习下不熟悉的前端框架。
于是目前的半成品长这个样子:
虽然简陋,但已经完成了基础的设计目标。
扩展包问题
我之前有一些扩展包开发经验,但都是基于简单的功能或API接口开发,我们的前端工程师并没有采用扩展包模式开发。现在是做我自己的程序了,最具挑战的就是前端技术。这里有些问题想问大家:
- 做这种带页面的扩展包,应该选用哪种前端框架?
livewire
?Insertia
? 还是直接用Vue
? - 如果选用了这些前端框架,如果以后使用该扩展包的程序采用不同的前端框架该如何兼容扩展包中的前端组件?
吐槽一下目前选用的技术栈
服务端采用的是 laravel 10 + sail
前端框架用的是 Livewire 3 + tailwind css 3 + vite 4 + mary-ui + gojs
服务端自不用说,这几个前端框架可以说都是头一次用,所以也在上面花费了大量的时间(感觉还没用明白)。
使用 Livewire
就意味着页面内容和前端资源在开发环境采用不同的端口进行输出,当我想引入 monaco-editor
做 JSON
和 YAML
格式编辑器的时候,出现引入其 webworker
产生的同源问题,我能想到的只有再加个反向代理按照路径将请求代理到不同的端口。
使用 Livewire
和 tailwind css
的另一个问题是缺少前端组件库,最终选择了 mary-ui
(扩展自 DaisyUI), 使用过程中发现组件还是太少。
gojs
的好处就是定制能力强,但仅提供了有限的 UI 组件用来构建画板和底纹,图型基本上都要靠自己去选并配置样式。我也没有 UI 方面的造诣,就造成了自己看着不好看但又说不出该怎么改的困境。
之后想做的尝试
- 进行插件化改造:将其改造成一个 laravel 的插件;
- 更换前端框架:现在还没想好是直接换
Vue + ElementPlus
还是Insertia
,如果是从 UI 组件上看,我更倾向于前者; - 进行 UI 优化:主要是图形方面的 UI 进行优化,但脑子里没有什么方向,大家如果有可参考的项目可以发一下,我借鉴一下。
考虑下做成 laravel 的功能性插件。这里有一些已经可以用的插件: marketplace.plugins-world.cn/marke... ,能参考着开发。也有完善的文档: pm.fresns.org/zh-Hans/ ,只要你会 laravel ,就能开发插件。前端静态资源也会自动发布到 public/assets/PluginName/ 下
噢,看错了问题。用 bootstrap 这种的简单。用 vue 之类的前后端分离方便吧。
我在尝试用 Laravel + Vue SPA 搭建 CMS 管理后台,后台单页面用默认的 Vite 配置就行,前台打算用传统的 Blade。遇到的问题:
我用过 Nova 作为后台管理,它是一个标准的 PHP/Laravel Package,可以单独安装和升级,它会把自己的前端资源直接安装到 public/vendor/nova,这应该是上游打包好了,直接放到代码里的。用 Nova 主要是用 PHP,所以不用重构前端资源,但是复杂的扩展,比如使用 Vue 来定义新字段,也是要创建一个独立的 PHP 包,也是比较繁琐的,会要求把前端打包的结果 commit 在源代码中。
如果是独立的 App 的话,即没有复用需求,不用考虑封装成包。
我没有开发过 Laravel 扩展包,但是我注意到 Laravel 官方有不少带 Web UI 扩展包,比如:
非常困难。如果前后端完全分离,基本不可能的
vue tailwind之类就涉及打包,ignition 其实也用的tailwind。如果不涉及定制主题色,和整个多个类到一个class的组件。tailwind 直接一个css,发布copy 到public下即可。 另外有一个ofa.js 可以实现前端组件化 且不需要打包。 之前也看到过一个yoyophp 前后端组件。
纠结前端问题的原因主要集中在两点:后端对
gojs
数据绑定的结构依赖太高 以及 前端相关代码工作量很大。我其实心里的目标是前端应该类似高德地图组件一样能够被引入到项目中,并通过暴露出
API
进行定制化,只不过高德用的是saas
模式的接口调用,而我只需要提供在Laravel
扩展包里的接口。我现在大概心里有个预期:把程序改成前后端分离的,主要还是
webworker
的同源限制在开发环境处理比较麻烦,其次是为了解耦合。前端分为两部分:一部分不与任何框架耦合,只依赖
gojs
通过对外提供API
方法和事件进行画布区域的编程,我姑且叫它“流程编排器”;另一部分则完成编辑器各项功能调用,这里会依赖Vue
\ElementPlus
\Laravel Echo
\monaco-editor
这几个项目,完成对编排器的调用及其后续功能的开发,这部分如果无法引入项目,也只能被重写,但至少能提供API
使用方面的参考。