【Laravel入門】Laravel如何實現MVVM架構的應用? Vue or LiveWire

【Laravel入門】Laravel如何實現MVVM架構的應用? Vue or LiveWire

我原先的規劃是在過年的時候學習線上課程的經營,沒想到除夕前一天拿到Kuro大出的Vue.js新書,就被 MVVM 架構給吸進去了,每天痛苦並快樂著度過(原因等會說明),時間一下跑到了年初四,正想著Vue.js雖然強大,但與我目前的開發架構跨度也很大,要補足的前端知識很多,風險較高時,我又想到了之前分享過的Livewire,就又被Livewire吸進去了,不覺間時間就到了現在

我終於把 Livewire 也納入我的開發&教學架構,作為 Vue.js 的短期替代方案

或許有些人不理解甚麼是MVVM? Vue.js以及Livewire又有甚麼不同?

別急,這篇文章就是要和你聊聊這些知識點!

關於MVVM

MVVM的視圖模型是一個值轉換器,這意味著視圖模型負責從模型中暴露資料物件,以便輕鬆管理和呈現物件。在這方面,視圖模型比視圖做得更多,並且處理大部分視圖的顯示邏輯。視圖模型可以實現中介者模式,組織對視圖所支援的用例集的後端邏輯的存取

我知道可能很多人看不懂,包括我,哈哈。我試著來說明一下,你一定聽過MVC,裏頭包含了Model . View 和Controller。而MVVM的前兩個字母意思相同,後面的VM指的是View Model ,你可以理解為它是負責把View和Model綁定在一起的引擎。在這個架構底下呢,Model和View成了具有心電感應的雙胞胎,當使用者輸入了某個文字輸入項之後,Model物件的屬性就跟著產生變化,中間不需要Controller介入

那麼近來把MVVM架構實作的精采,標榜簡單易學,且鋒頭畢露的就是Vue.js。理論上來說熟悉Laravel開發的我們要接著入手Vue.js應該是分分鐘的是事情,畢竟Laravel預設支持的前端框架就是Vue呀。但事實並非如此,我在環境建置上吃了不少的苦頭,最後是用輕前端的方式(直接導入外部script,免除自行編譯的工作)才能開始使用的。為什麼會這樣呢? 我覺得是有兩個問題導致

第一點,前端的開發知識和後端的開發知識有很大的差異,後端我們熟的是PHP,前端你必須熟的則是JS,尤其是ES 6,另外關於node manager也是常在開發後端的我們所較少碰到的,這是個很大的雷,會卡的後端新手痛苦萬分

第二點,Vue.js也剛經歷一個新的改版,從Vue 2 升級到 Vue 3。你正在開發的Laravel 8.x專案預設支持的正是 Vue 2 。不過根據我看Kuro大的書,他建議如果你是Vue新手,可以直接學習 Vue 3 ,這導致你得要自己搞定Laravel支持的Vue版本升級的動作。當然網路上也找的到教學,但我沒有找到一個能帶給我幸運的,或許你可以?

第二點的問題只是暫時的,我相信今年下半年的 Laravel 9 將會直接支持 Vue 3,就不需要自己去費心升級了。至於第一點,如果你所在的開發團隊夠完整,有前端工程師和你配合,有人能幫你,問題就不大。但假如你和我一樣,目前處於一人全端開發的話,就有點痛苦了

還好,我們有 Livewire !

你可以把 Livewire 理解成PHP版本的MVVM技術,你所熟悉的Blade寫法還是這麼寫,只需要學一下怎麼創建 Livewire 組件,就能夠在專案裏頭實現MVVM。甚至 Livewire 的官方教學影片就直接把 Livewire 和 Vue.js 作對比,顯見 Livewire 的出現就是取自於 Vue.js 的概念。那樣的話, Livewire 和 Vue.js 該如何選擇呢?

當你在網路上搜尋,肯定可以找到一堆的比較,總地說就是各有優勢,就看你的需求是甚麼? 聽起來像廢話,我就多說幾句好了

Livewire 的語法就是 HTML 加 PHP ,所以如果你會寫 Laravel ,學習 Livewire 將不會有任何門檻。另外,Livewire 本來就誕生於 Laravel 生態圈,因此技術上會比Vue更貼合於 Laravel。建置上也很簡單,就只要安裝一個套件,在視圖上導入素材,就可以開始把玩 Livewire 了。但也說說他相對於Vue.js的弱勢。它目前還沒有自己的生態圈,因此功能上還比不過 Vue.js 那麼多元

結論時間

寫了這麼多,該來到結論時間了。我覺得 Livewire 是後端工程師專屬的MVVM方案,有了它建立SPA應用一點也不困難,別再說我們只會寫CRUD了,寫炫酷前端我們也會唷!等到Laravel9面世,再來玩Vue 3也不遲


分享這篇文章:

關聯文章:

訂閱電子報,索取 Laravel 學習手冊

價值超過 3000 元,包含常用 Laravel 語法與指令!

Laravel 百萬年薪特訓營

從最基礎的 PHP 語法開始,包含所有你該知道的網頁基礎知識,連同 Laravel 從零開始一直到實戰,最後還將告訴你如何找好工作,讓你及早擁有百萬年薪