之前也考慮過這個問題,確實有些簡單的需求,犯不著用 MVVM,但習慣了現代化的開發模式又不想用回老方法,所以自己研究了一套方案,力求兼顧兩者。
其實方法都是現成的,只不過自己拿來組合了一下,沒別了不起的。
前端到最後無非就是:模板、樣式、行為。
模板方面我們選擇了 Pug,之前叫 Jade,和 EJS 是一個思路,重點解決 HTML 複用和模組化的問題。
樣式方面我們選擇了 SCSS,同樣也是複用和模組化。但我們沒有用 Bootstrap,因為引入的大部分內容其實沒有用到,浪費了,寧可自己寫。
行為當然就是 JS,小專案就不上 TS 了,投入產出比太低,但是寫慣了 ES6+ 是真的不想寫 ES5,所以藉助工具做了編譯,開發階段還是用 ES6+,配合 jQuery 一把梭。
現代化開發模式的一個重頭戲就是工程化的解決方案,包括編譯、檢查、打包、自動重新整理等一系列內容,大大解放了開發者的生產力。
團隊早先有一套基於 Gulp 的方案,當時還沒用上 React 這些,只是處理一下 ES6 和 SCSS,簡單改一改就拿來用了。但 Gulp 4.0 遲遲不更新,讓我們擔心這個專案是不是要黃,還是想著能遷移到 Webpack 上來,因此後來又折騰了一套 Webpack 的配置。
node_modules、ESLint、Stylelint、HotReload、……這些就不說了,標配了。
當然還有一種思路,依然是用 React / Vue 開發,然後做預渲染,webpack 有相關的 plugin,結果也還不錯,可以一試。
之前也考慮過這個問題,確實有些簡單的需求,犯不著用 MVVM,但習慣了現代化的開發模式又不想用回老方法,所以自己研究了一套方案,力求兼顧兩者。
其實方法都是現成的,只不過自己拿來組合了一下,沒別了不起的。
前端到最後無非就是:模板、樣式、行為。
模板方面我們選擇了 Pug,之前叫 Jade,和 EJS 是一個思路,重點解決 HTML 複用和模組化的問題。
樣式方面我們選擇了 SCSS,同樣也是複用和模組化。但我們沒有用 Bootstrap,因為引入的大部分內容其實沒有用到,浪費了,寧可自己寫。
行為當然就是 JS,小專案就不上 TS 了,投入產出比太低,但是寫慣了 ES6+ 是真的不想寫 ES5,所以藉助工具做了編譯,開發階段還是用 ES6+,配合 jQuery 一把梭。
現代化開發模式的一個重頭戲就是工程化的解決方案,包括編譯、檢查、打包、自動重新整理等一系列內容,大大解放了開發者的生產力。
團隊早先有一套基於 Gulp 的方案,當時還沒用上 React 這些,只是處理一下 ES6 和 SCSS,簡單改一改就拿來用了。但 Gulp 4.0 遲遲不更新,讓我們擔心這個專案是不是要黃,還是想著能遷移到 Webpack 上來,因此後來又折騰了一套 Webpack 的配置。
node_modules、ESLint、Stylelint、HotReload、……這些就不說了,標配了。
當然還有一種思路,依然是用 React / Vue 開發,然後做預渲染,webpack 有相關的 plugin,結果也還不錯,可以一試。