とても迷っているのでどうしようかという気持ち。
案件によってLaravelを使う、view関連のjavascriptでロジックを書くときにどういう構成をしようか、bladeとどうかき分けしようか考えている。
resources配下の構成
構成としてLaravelにおけるビルド前のもろもろはここに入る。
Frontendの構成が分離されつつ、Laravel-mixによってビルドシステムが提供される。designについてはデザイナーチームの作るejs/sassなどが入っている。
.
├── README.md
├── assets
│ ├── js
│ └── sass
└── design
design
こっちは別チームで開発が進む、UIのが決まったらまずデザインチームがここでgulp/ejs/sassを使って開発していく、LaravelではそこからビルドされたCSSなど必要なものだけ利用する。
ここでのgulpのタスクにその処理も追加した。
また git submodule で管理してるので、どこまでのdesignの更新をLaravel側に反映したかを管理できるようにしている。
sass
sassは/design配下にあるので利用しないんですがディレクトリのみ残しています。
ここにsassファイルを移す議論もあったんですが、デザインチームがgulpをつかっててLaravelはLaravel-mix(webpack)になるので両方保守するのが嫌で使ってないです。
js
jsは今回typescriptで書くんですが、名義上jsとしてます。
構成は以下のようになっています。SPAで作ることが多かったので、その構成をひきづって考えました。
.
├── js
│ ├── apimock
│ │ └── db.json
│ ├── components
│ │ ├── partials
│ │ │ └── Navbar.vue
│ │ └── views
│ │ ├── Dashboard.vue
│ │ └── Schedule.vue
│ ├── config
│ ├── constants
│ ├── mixins
│ ├── modules
│ ├── pages
│ │ ├── dashboard.ts
│ │ └── schedule.ts
│ └── typings
apimockに関してはswaggerに順次移行予定ですが、待ちきれないのでいったんjsonserverでフロント開発用のmockを用意しています。
基本的にpages配下に1画面ごとに必要なjsファイルをビルドするための設定を入れて、
1画面1JS1CSS
を意識して構成をしています。
これによってPHP側の構成はこんな感じがいいかなと思っています。
.
├── dashboard
│ └── index.blade.php
├── layout
│ ├── footer.blade.php
│ ├── head.blade.php
│ ├── header.blade.php
│ └── template.blade.php
基本的に画面ごとにbladeで基本的な構成を作り、画面内で動的になったりjsで必要なコンポーネントはVueで管理して表示をするような仕組みを想定しています。
せっかくのVueなのでSPAで全てAPIでvue-router駆使して最高のSPAにしたかったんですが、bladeも使いたいので、routingや基本的なviewの描画はLaravelに載せつつ、コンポーネントの管理をVueで載せることにしました。