我們為什麼以及是如何從Angular.js遷移到Vue.js?
一些背景介紹
SQL的商業智慧(BI)平臺,使用Rails、Sidekiq、PostgreSQL和AngularJS編寫。我們的Rails應用程式始於2013年底,作為一個簡單的應用程式其中使用了jQuery和AngularJS。我們使用AngularJS主要特性/功能如下:
·
+模板引擎)
·
· Angular第三方元件(uib-modal,ui-select,…)
JavaScript。
我們在 Angular 中遇到的問題
AngularJS 的時候遇到了這樣一些問題:
·
AngularJs的特性,我們不得不花大量的時間來呈現一張巨大的資料表。
· Angular 的文件不太好:
AngularJS,就越覺得它的文件實在難以理解。
·
AngularJS不好使用最重要的一個原因。
考慮不同的框架
Angular 2
Angular 2。對於我們來說,Angular 2 甚至比 Angular 1 還讓人難以理解。它帶來了太多新的變化(TypeScript),新的模板語法等,但我們覺得這並沒有真正解決我們的核心問題。除此之外,從 V1 到 V2 的遷移之路在那時就一直讓我們覺得困惑。
ReactJS
ReactJS。儘管我們非常喜歡它的哲學和生態原理系統,但有一件事情讓我們吃驚:
3-4個月內支援新功能。
AngularJS 的使用基於 HTML 的模板系統,而 ReactJS 是用的 JSX。我們不能找到辦法在遷移的過程中讓兩種技術很好的並存。
JSX 比基於 HTML 的模板更加冗長。
EmberJS
EmberJS 不是一個 JS 庫,而是一個 Web 應用框架,我們必須用基於 EmberJS 重寫所有東西。
我們為什麼選擇了 VueJS:逐步遷移
VueJS,但對於我們來說,最重要的決定性因素是:
VueJS,而又不會破壞發展路徑的遷移路徑
Angular 實現的,哪些是 VueJS 實現的。
Vue 採用了與 ReactJS 相似的技術,基於元件,屬性下行事件上行等。它與 AngularJS 在模板引擎方面有著驚人的相似。
AngularJS 和 ReactJS 的優美結合
AngularJS 模板,而我們的主要問題是 Angular 元件帶來的複雜邏輯。
ng- 改為 v-,簡直太美妙了!
Vue 結構的方式(單向資料流,基於元件),它迫使我們反思和重構程式碼,而不是繼續寫爛程式碼,這簡化了我們的程式碼邏輯。
VueJS 的文件寫得非常好,結構也非常清晰
VueJS 的另一個主要原因。我第一次使用 Vue 的時候,花了 30 分鐘來閱讀它的文件,立即覺得必須要試試這個東西。
我們是怎麼進行逐步遷移的:
Rails 應用環境有關,如果你沒有使用 Rails,可能會有些不同):
1. 把 AngularJS 控制器邏輯轉換到 VueJS
VueJS 時儘可能少做改動。因此,我們從標準的 AngularJS 和模板檔案開始修改,將 VueJS 引入其中:
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
// user_edit_controller.js.es6` import Vue from `vue` app.controller(`UserEditCtrl`, [`$scope`, `$http`, `Ajax`, `Util`, `Modals`, function ($scope, $http, Ajax, Util, Modals) { let vapp = new Vue({ el: `#v-wrapper`, components: { … }, data: { } }); } ]); |
JavaScript
1 2 3 4 5 6 7 8 9 |
<!– `users/edit.html.erb` –> <div ng-controller=”UserEditCtrl”> <div id=”v-wrapper”> <!– vuejs logic goes here… –> <input v-model=”username” placeholder=”Username” /> … </div> </div> |
Vue 的邏輯,卻不需要改變任何相關應用的前端結構。這極大程度的幫助我們降低在遷移過程中發生錯誤的風險,我們可以花 1-2 個小時迅速地將一小部分 AngularJS 實現的東西轉換為 VueJS 實現,然後測試並部署,不用擔心它會導致迴歸缺陷
2. 把 AngularJS 服務轉換為 ES6 模組
AngularJS 中大量使用的 $http 服務的替代品。我們直接使用了 axios
$http,但我們圍繞它進行了抽象封裝,以使修改變得非常簡單。
AngularJS:
JavaScript
1 2 3 4 5 6 7 8 |
// users.js app.service(`Users`, [`$http`, `Ajax`, function ($http, Ajax) { this.create = function(user) { // … } } ]); |
ES6 類語法代替就好:
JavaScript
1 2 3 4 5 6 |
// users.js.es6 export default class Users { static create(user) { // … } } |
Angular 程式碼在使用這些服務,我們會複製這些服務並使用 ES6 類語法來實現,同時保持原有的 Angular 版本,直到不再有 Angular 程式碼使用它們為止。這會在短時間內讓程式碼出現重複,但我們只需要小心一點,在程式碼中多寫些註釋來關聯兩個版本。
3. 使用 VueJS 元件代替 AngularJS 控制器
AngularJS 控制器可以完全遷移到 VueJS,這和上面的第 2 步相似,我們使用 ES6 語法來代替 app.controller() 定義。不過這次,我們使用 Vue 的單檔案元件:
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<template> <div> <!– vuejs logic goes here… –> <input v-model=”username” placeholder=”Username” /> … </div> </template> <script> import Users from `users.js.es6` export default { data: { }, methods: { }, mounted() { // initializing } }; </script> |
user_edit.vue
4. 為 Rails 控制器/檢視新增安裝入口
Rails 頁面載入的時候會渲染檢視。在上面的 Vue 單檔案元件中,我們將 Raisl 檢視,users/edit.html.erb 檔案,改為:
JavaScript
1 2 3 |
<div class=”v-user-edit”> <user-edit></user-edit> </div> |
Vue 元件:
JavaScript
1 2 3 4 5 6 7 8 |
import UserEdit from `user_edit.vue` let vueConfig = { el: `.v-user-edit`, components: { UserEdit } }; new Vue(vueConfig); |
總結
2017 年九月末完成了框架的遷移,經歷了大約 4 個月時間的非侵入性(我們在遷移過程中會繼續新增其它新特性)工作。實際上我們並沒有把遷移作為最緊急的任務,
Angular 程式碼,我們會先把它轉換成 Vue 實現,然後再進行變更
·
VueX 和 Vue Store;它們大大提高了程式設計效率
·
·
UI 效能
Vue 就是最好的,它只是在我們特定的情況下工作良好:Angular 固有的設計本質導致使用 Angular 實現應用很重,而 Vue 為我們很好地填補了這一空白,這一切都是自然而然地逐步遷移實現的。
543627393
相關文章
- 為何我們前端從Vue 2遷移到Svelte?前端Vue
- 從本地MySQL遷移到雲資料庫,為什麼是Amazon Aurora?MySql資料庫
- 為什麼把 dig 遷移到 wire
- 領導力是什麼以及我們如何獲得它?
- GC是什麼?為什麼我們要去使用它GC
- 什麼是Web workers?為什麼我們需要他Web
- 【譯】什麼是JavaScript generator 以及如何使用它們JavaScript
- 為什麼我們從Yarn切換到pnpmYarnNPM
- [譯] 從 Cron 到 Airflow 的遷移中我們學到了什麼AI
- Netflix是如何從java8遷移到Java11? - carlJava
- 我如何將部落格遷移到 Kubernetes(上)
- 我如何將部落格遷移到 Kubernetes(下)
- 為什麼我們從RabbitMQ切換到apache kafka?MQApacheKafka
- 為什麼我們從Webpack切換到Vite - ReplitWebVite
- Service Mesh是什麼,為我們解決了什麼問題?
- 什麼是 BPMN ?為什麼我們要用 BPMN 和工作流 ?
- 如何從 AWS CodeCommit 遷移到極狐GitLab?MITGitlab
- 為什麼我們需要 VuexVue
- 我們為什麼要用RedisRedis
- 我們為什麼而工作
- 我們為什麼需要CDP?
- 英國《衛報》是如何不停機從MongoDB遷移到Postgres?MongoDB
- Damus 是什麼以及我怎麼看
- 我們的口號是什麼?
- 因果迷境:為什麼我們會問“為什麼”?
- 我們為什麼需要async/await ?AI
- 到底為什麼我們需要 Clickhouse?
- 我們為什麼需要雲原生?
- 從 Nginx 遷移到 Envoy ProxyNginx
- 從 golang flag 遷移到 cmdrGolang
- Python 集合是什麼,為什麼應該使用以及如何使用?Python
- 從爬⾏到奔跑 - 我們為什麼需要單元測試?
- Java動態代理與靜態代理以及它能為我們做什麼Java
- 什麼是量子霸權?我們如何才能實現它?
- 《後來的我們》,為什麼我們會錯過彼此?
- Dcat Admin 教程 - 如何從 Laravel admin 遷移到 dcat admin?Laravel
- 如何從阿里雲ECS遷移到AWS EC2?阿里
- 如何平穩地從nacos遷移到r-nacos?