PR0GRAMISTA
DevLog #12

W tym tygodniu trochę mniej niż zwykle, ale to dlatego, że byłem na Code Europe. Więcej Vue(coś). Będzie trochę radości i nienawiści.

Small things

Workdone doczekał się wielu mały poprawek np. autologowanie czy usunięcie niepotrzebnego odniesienia. W @278abe naprawiłem aktualizowanie się Packery i usunąłem hashe z linków od zmiany kolorów...

Vuex

Vuex to wzorzec i framework do zarządzania stanem w Vue.js. Służy jako scentralizowana baza dla reszty komponentów w naszej aplikacji a przy tym definiuje pewne zasady korzystania z nich. Więcej kontroli, lepszy dostęp dla devtoolsów i bardzo wygodne rozwiązanie. Dla mnie --- druga perełka w tym JSowym świecie.

Czy potrzebujesz Vuex w swojej aplikacji? Znalazłem ciekawą odpowiedź na to pytanie:

Flux libraries are like glasses: you’ll know when you need them.

Strukturyzacja danych w Firebase

Firebase jak już kiedyś wspomniałem sprawia problem przy strukturyzacji danych w bazie. Workdone nie opiera się na komunikacji z innymi, więc problem staje się o wiele mniejszy. Postawiłem na strukturę scentralizowaną na użytkowniku. Każdy unikatowy identyfikator klienta będzie zawierał swoje drzewko, swój przydział w bazie danych.

Screenshot z widoku bazy danych w konsoli.

Jak to się zda w końcowej aplikacji? Zobaczymy :)

VuexFire

Vuex jest super, ale jak do niego możemy podłączyć Firebase? Nie jest to takie proste, choć zdołałem to zrobić bez użycia jakiś frameworków. Później jednak znalazłem też VueFire i pomyślałem, że ktoś to zrobił znacznie lepiej ode mnie. Nie zrobił. Dokumentacja do tej biblioteki jest bardzo skromna. Instalacja jest dziwna i ma ten sam minus co moje rozwiązanie. Najgorsza jest jednak ilość boilercodu jaki VueFire wprowadza. Po co ręcznie zatwierdzać zmiany? Firebase po lubiłem właśnie za brak takich niby bezpieczniejszych rozwiązań.

Mniej kodu to zwykle mniej problemów a już najgorsze są frameworki, które udają, że są przydatne. Żegnaj VueFire.

Moje rozwiązanie

Najciekawsza część to funkcja z Dashboard.vue:

created: function () {
var dashboard = this
  if (dashboard.$store.getters.uuid != null) {
    dashboard.updateReferences()
  } else {
    this.$store.watch(
      function () {
        return dashboard.$store.getters.uuid
      },
      function (uuid) {
        dashboard.updateReferences()
      }
    )
  }
}

...

updateReferences: function () {
    this.$bindAsArray('habits', firebase.database().ref(this.$store.getters.uuid + '/habits/'))
    this.$bindAsArray('todos', firebase.database().ref(this.$store.getters.uuid + '/todos/'))
}

Potrzebuje UUID aby odnosić się do danych użytkownika zatem zanim powiąże Firebase'a to poczekam aż uuid będzie zaktualizowane, a to stanie się kiedy użytkownik się zaloguje. Całkiem proste, prawda? Zanim spróbujecie to wykorzystać to pamiętajcie aby zdefiniować wartości np.

data: function () {
  return {
    selectedTag: '',
    habits: [],
    todos: []
  }
},
Przekazywanie wartości

Teraz uświadomiłem sobie jak wiele jest sposobów na przekazywanie informacji w Vue. Możemy użyć Vuex, globalnej kolejki zdarzeń, przekazywania bezpośrednio do innego komponentu jak i zewnętrznych odniesień. Myślę, że w tym całym przenoszeniu kodu to właśnie nowy sposób na przesył danych okazał się dla mnie największym wyzwaniem. Brak globalnych wartości (prawie) powoduje duży zamęt.

EOF

To już prawie koniec konkursowego żywota Workdone. Na pewno tego projektu nie porzucę, bo jest po prostu zbyt ciekawy na ten moment. Cała ta próba zmierzenia się z JavaScriptem to w tej chwili wyzwanie. Po za tym chcę jeszcze zrobić swój pierwszy plugin do Chrome i jakąś apkę na Androida. Nie poddam się tak łatwo.

28 maja 2017
firebase dsp2017 workdone