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.
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.
