Autosaving cùng Vuex

Một vài thông tin background

Vào thời đâu những năm 2000, nếu tôi đang sử dụng Microsoft Word và rồi tắt máy mà quên nhấn Ctrl+S, chắc chắn tôi đã không sống yên ổn. Mọi công sức ra đi và không cách nào có thể lấy lại nó. Trong các phiên bản mới của Word họ đã cho ra mắt công cụ autorecovery, nghĩa là nếu may mắn thì bạn sẽ lấy lại một phần nào đó. Điều này rất tuyệt nhưng MVP thực thụ chính là Google Docs, với indicator luôn tự động sao lưu, sẽ lưu ý bất cứ khi nào bạn đổi doc và tự động lưu nó lên cloud sau mỗi giây.

Autosave đang thực sự thay đổi cuộc chơi. Nếu app cho phép user nhập content, chúng sẽ không cần phải tìm kiếm nút “Save” nữa. Chúng chỉ làm sao để upload lên cloud nhanh nhất có thể ngay khi được nhập vào. May thay, với các webapp hiện đại thì không quá khó để ứng dụng nó.

Hôm nay tôi sẽ chỉ cho bạn cách viết một autosaver dùng Vue.js, Vuex và một cái plugin Vuex. Một điều tốt về method này đó là nó không yêu cầu app bạn phải gửi đi API request mỗi lần có thay đổi; thay vì thế Vuex plugin sẽ xem state của app và phản ứng khi cần, cách ly các công việc nội bộ của app từ tương tác của nó với API. Tôi đã ứng dụng nó vào project ưa thích của tôi, Edward, và nó chạy như một giấc mơ.

Các thành phần

Đây là một vài tool chúng ta sẽ sử dụng:

  • Vue.js là một framework đơn giản và quyền lực để viết web component. Nó tương đương với React về quy mô và mô hình, nhưng đầy đủ shortcut làm nó trở nên dễ sử dụng hơn.
  • Vuex là một tool quản lý state cho Vue. Nó giống với Redux. Nó là một cơ chế immutable state, nghĩa là nó quản lý một object lớn đầy data mà app bạn cần, và mỗi lần data thay đổi thì nó sẽ cho ra một object hoàn toàn mới.
  • Lodash là một JavaScript toolchain (giống như Underscore hoặc một phần cảu jQuery) rất nhiều thứ thú vị. Chúng ta chỉ cần một function từ nó. và chúng ta có thể qua được mà không cần nó, nếu chúng ta muốn.
  • Một web browser.

Một mẫu repo ở đây. Và đoán xem? Không cần đến npm install, không cần build step (bạn có thể mở index.html ngay trên browser), và mọi thứ chỉ dưới 100 dòng code (không tính comment). Ngoài ra, tất cả đều là ES5 thuần.

Có thể bạn muốn xem:

  15 chứng chỉ "vàng" đáng giá trong ngành lập trình
  Mười điều răn dành cho lập trình viên

Cách thực hiện

Đầu tiên bạn cần một file index.html basic. Nó chứa div để Vue đính vào, các tag <script> chó các thư viện chúng ta cần, một tag <script> cho file JavaScript, và một tag <style>  để làm mọi thứ trông nhẹ nhàng hơn.

<body>
  <div id="app"></div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/[email protected]/dist/vuex.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js"></script>
<script src="./index.js"></script>
<style>
  textarea {
    height: 100px;
    width: 300px;
  }
</style>

Bạn có thể thấy chúng ta đang thử trên Vue, Vuex, Lodash và file JavaScript riêng tên là index.js. Nó dùng cho file này.

Tạo file index.js. Chúng ta sẽ bắt đầu bằng bootstrap Vue app của chúng ta:

var app = new Vue({
  el: '#app',
  template: '<div></div>',
})

Bạn nên giữ đoạn code này ở cuối file index.js, vì nó sẽ liên hệ với mọi thứ chúng ta build từ đây.

Vue sẽ tìm được element match với el selector và kiểm soát nó. Hiện tại nó sẽ để một<div></div> trong đó. Chúng ta cần nó làm gì khác thú vị hơn lúc này.

Bây giờ hãy tạo một component để user nhập text vào:

Vue.component('text-entry', {
  template: '<textarea v-model="content" @keyup="registerChange"></textarea>',
  data: function () {
    return {
      content: '' // This is the initial value of the textarea
    }
  },
  methods: {
    registerChange: function () {
      // We'll do something whenever the textarea changes
    }
  }
})

Nó sẽ hiện textarea và update value của content bất cứ khi nào user gõ vào. Add nó vào app của chúng ta bằng cách update Vue constructor:

var app = new Vue({
  el: '#app',
  template: '<div> <text-entry></text-entry> </div>',
})

Bây giờ ta cần thấy textarea trong app. Sau đó, sẽ tạo ra một Vuex store:

var store = new Vuex.Store({
  state: {
    content: ''
  },
  mutations: {
    'UPDATE_CONTENT': function (state, newContent) {
      state.content = newContent
    }
  }
})

Đây là store Vuex khá basic. Nó có một phần data và một mutation. Khi bạn trung thành với mutation, nó sẽ save bất kì thứ gì chsng ta đi qua như một giá trị mới của content.

Chúng ta cần store này ở 3 chỗ:

  • Một cái trong app declaration thì Vue biết cách dùng.
  • Một cái trong app declaration của component text-entry, nên nó sẽ đặt giá trị của textarea dựa trên tình trạng của Vuex.
  • Một cái trong method registerChange của component text-entry, để gắn với mutation mọi chỗ user thay đổi text trong textarea.

Khi chúng ta đã thực hiện cả ba, file index.js sẽ như thế này:

var store = new Vuex.Store({
  state: {
    content: ''
  },
  mutations: {
    'UPDATE_CONTENT': function (state, newContent) {
      state.content = newContent
    }
  }
})

Vue.component('text-entry', {
  template: '<textarea v-model="content" @keyup="registerChange"></textarea>',
  data: function () {
    return {
      content: this.$store.state.content
    }
  },
  methods: {
    registerChange: function () {
      this.$store.commit('UPDATE_CONTENT', this.content)
    }
  }
})

var app = new Vue({
  el: '#app',
  template: '<div> <text-entry></text-entry> </div>',
  store: store
})

Để giải thích feature autosaving, chúng ta cần một nơi để store data để vẫn cố định sau khi refresh page. Tôi không dính dáng đến những vấn đề liên quan đến tạo web server cho mục đich này. Thay vì thế hãy dùng LocalStorage:

var storageKey = 'content'
var api = {
  load: function () {
    var json = window.localStorage.getItem(storageKey) || JSON.stringify('')
    return JSON.parse(json)
  },
  save: _.debounce(function (content, callback) {
    window.localStorage.setItem(storageKey, JSON.stringify(content))
    callback()
  }, 1000, { maxWait: 3000 })
}

Fake API của chúng ta có hai method, save và load. load dùng để đưa state khỏi LocalStorage, và nếu nó không ở đó, trả về một string rỗng. Còn save đưa giá trị cho LocalStorage key, và yêu cầu callback. Chúng ta sử dụng method debounce của Lodash để đảm bảo rằng save không bao giờ bị call hơn 1 lần mỗi giây. Quan trọng là vì nếu chúng ta không debounce method này, nó sẽ bị call mỗi lần user gõ một key. Điều này không quá tệ với LocalStorage, nhưng nếu bạn đang thực hiện các request XHR, một user nhập 70 từ trên một phút có thể submit nhiều request trên giây, có thể làm chậm mọi thứ và cả bạn nữa. Tôi đã sử dụng parameter maxWait, để đảm bảo nếu user gõ liên tục, content sẽ được autosave mỗi 3 giây.

Bây giờ, chúng ta có thể tạo một Vuex plugin để autosave content trong textarea. Một Vuex plugin là một function chấp nhận Vuex store như một argument. Nó có thể subscribe vào store để được thông báo mỗi khi state thay đổi.

var autosaverPlugin = function (store) {
  store.commit('UPDATE_CONTENT', api.load())

  store.subscribe(function (mutation, state) {
    if (mutation.type === 'UPDATE_CONTENT') {
      api.save(mutation.payload, function () {
        // This callback doesn't need to do anything yet
      })
      return
    }
  })
}

Khi plugin được load lần đầu, ngay lập tức sẽ load application state từ LocalStorage và theo nó như một mutation. Sau đó chúng ta subscribe vào Vuex store. Mỗi lần mutation commit, chúng ta sẽ đươc báo. Chúng ta có thể check loại mutation để đảm bảo content được update, sau đó gửi đi payload vào fake API để lưu trên LocalStorage.

Bây giờ hãy add plugin này vào Vuex declaration:

var store = new Vuex.Store({
  state: {
    content: ''
  },
  mutations: {
    'UPDATE_CONTENT': function (state, newContent) {
      state.content = newContent
    }
  },
  plugins: [autosaverPlugin]
})

Nếu bạn nhập vào textarea, đợi một chút và refresh page, bạn sẽ thấy một vài thay đổi nhỏ. Và vue component không phải quan tâm về nó; Vuex plugin đã làm hết những việc nặng nề.

Bước cuối

Chúng ta có thể dùng một cách để báo cho user biết những gì họ làm đã được lưu. Nó sẽ đảm bảo lại cho user và giúp bạn nắm được là app vẫn hoạt động bình thường. Hãy add một vài text hiển thị “Saving…” hoặc “Saved”.

Đầu tiên, add một vài state vào Vuex store:

var store = new Vuex.Store({
  state: {
    content: '',
    saveStatus: 'Saved'
  },
  mutations: {
    'SET_SAVE_STATUS': function (state, newSaveStatus) {
      state.saveStatus = newSaveStatus
    },
    'UPDATE_CONTENT': function (state, newContent) {
      state.content = newContent
    }
  },
  plugins: [autosaverPlugin]
})

saveStatus sẽ chứa một string thông báo cho user phần của họ đã được lưu chưa. Và SET_SAVE_STATUS sẽ update nó.

Bây giờ chúng ta sẽ tạo một component để hiển thị nó:

Vue.component('saving-indicator', {
  template: '<div>{{ saveStatus }}</div>',
  computed: {
    saveStatus: function () {
      return this.$store.state.saveStatus
    }
  }
})

Và cho hiện nó ở trên textarea bằng cách chỉnh app template:

var app = new Vue({
  el: '#app',
  template: '<div> <saving-indicator></saving-indicator> <text-entry></text-entry> </div>',
  store: store
})

Hãy update autosaver plugin để commit các mutation với saveStatus:

var autosaverPlugin = function (store) {
  store.commit('UPDATE_CONTENT', api.load())

  store.subscribe(function (mutation, state) {
    if (mutation.type === 'UPDATE_CONTENT') {
      store.commit('SET_SAVE_STATUS', 'Saving...')
      api.save(mutation.payload, function () {
        store.commit('SET_SAVE_STATUS', 'Saved')
      })
      return
    }
  })
}

Và cuối cùng, file index.js trông giống như mẫu trong repo. Xem thử tại đây: https://github.com/isaaclyman/vuex-autosaver/blob/master/index.js

Hãy thử xem! Khi bạn nhập vào textarea, message báo “Saving…” và một khi hoàn thành, nó sẽ báo “Saved”. Giống như trong Google Docs. Một công cụ web development đỉnh cao tại đây.

Homework

Đây là một vài thứ bạn có thể add vào project để không phải dính vào rắc rối:

  • Saving indicator có thể báo”Error” nếu có lỗi trong api.save method.
  • Fake API có thể dùng timeout để giả mạo một XHR request chậm.
  • Fake API cũng có thể return một Promise thay vì chấp nhận callback.
  • Có thể có hai textareas, và mỗi cái có thể autosave bằng càng ít code duplication càng tốt. Gợi ý: Hãy autosave object thay vì cái string.
  • Nếu api.save không nhận callback, nó sẽ hiện error.
  • Mọi thứ có thể trông chuyên nghiệp hơn nhiều. Nó có thể là phiên bản Craigslist của Google Docs.

Tham khảo các vị trí tuyển dụng VueJS lương cao cho bạn tại Topdev.

  Xử lí sự kiện trong VueJS
  Xây dựng ứng dụng chat realtime bằng Laravel + Vuejs + Socket + Redis