DevLog #11
Koniec matur --- wielki przypływ mocy i tak jak ostatnio zapowiadałem, przeniosłem projekt do Firebase.
Przyspieszmy!
10 dni do końca. Czas na przyspieszenie, ale aby to zrobić potrzebny będzie nam Firebase. Czas kompletnie przebudować projekt!
Moduły
Skoro i tak pozbywam się backendu to zdecydowałem użyć tak bardzo krytykowanego przeze mnie nowego podejścia do JavaScriptu --- miliony npm, configów, linkowanie JSa, etc. Dlaczego? Mimo, że nie lubię tych modułów (i słusznie) to muszę przyznać, że Vue.js sporo traci bez nich, a po drugie, chce spróbować przełamać się i poznać ekosystem JS.
Trochę żałuje tej decyzji, bo moduły dalej są do kitu. Większość bibliotek wymaga jakiejś globalnej zmiennej, ale modułowość wyklucza takie. Próbowałem zrobić to w myśli modułów, ale nie po kilku godzinach poddałem się.
Nie chciałbym aby odebrano mnie jako zawsze sceptycznie nastawionego do JSa, ale spójrzmy:
window.$grid = $('.grid').packery({
itemSelector: '.grid-item',
gutter: 0,
columnWidth: 300
})
/*eslint-disable */
$('.dropdown-button').dropdown({
hover: true
})
window.$grid.prepend(element).packery('prepended', element)
var draggie = new Draggabilly(element)
window.$grid.packery('bindDraggabillyEvents', draggie)
/*eslint-enable */
To wyłączenie ESLinta nie jest dla zabawy. Materialize chce przykleić się do jQuery, podobnie packery, ale jeśli spróbować importować jQuery jako moduł to nic tutaj nie wyjdzie. Można powiedzieć, że te frameworki wymagają globalnego jQuery. Kompletny brak konsekwencji.
Integracja Firebase
VueFire nie jest najlepszy, szczególnie jeśli używamy modułów. Problemem jest wymóg posiadania odnośnika do obiektu Firebase gdy chcemy zaktualizować jakiś element listy. Znowu widoczna jest tutaj sprzeczność między podejściem modułowym a globalnymi zmiennymi lub brak odpowiedniej dokumentacji pokazującej jakieś lepsze magiczne wyjście niż strzelanie eventami. Po za tym jednym dziwactwem VueFire to bardzo oszczędny wrapper, w końcu ma on 90 commitów.
Router
Vue.js ma najlepszy router jaki widziałem. Taki prosty i skuteczny, cudo!
export default new Router({
routes: [
{
path: '/',
name: 'Landing',
component: Landing
},
{
path: '/work',
name: 'Work',
component: Work,
children: [
{
path: '/',
component: Dashboard
}
]
}
]
})
Dodam jeszcze, że linkowanie i wyświetlanie komponentów jest w formie jednego elementu W HTMLu. To chyba jedyny element do jakiego nie mam żadnych zastrzeżeń.
EOF
Jestem zadowolony z tego co udało się osiągnąć. Teraz o wiele łatwiej jest tworzyć ten projekt. Live-reload (taki naprawdę live) bardzo przyśpiesza tempo pisania. Co prawda backend zniknął, ale Firebase też wymaga konfiguracji, choć o wiele mniejszej. JavaScript boli, ale może to tak jak z CSSem --- da się do tego przywyknąć.
We wtorek jestem na Code Europe, będzie relacja.
