Największy kawałek kodu…
Dziś w webankiecie miał premierę nowy moduł pozwalający na zmianę wyglądu ankiety samodzielnie przez użytkownika. Projektując ten moduł doszedłem do wniosku, że aby dać prawdziwą moc w ręce ludu będę zmuszony stworzyć szereg małych edytorów pozwalających na zmianę parametrów poszczególnych atrybutów CSS. Dopiero te edytory mogą utworzyć coś co będzie można nazwać edytorem szablonów. Aby pokazać co mam na myśli mówiąc o edytorach oto rysunek z instrukcji prezentujący edytor dla obramowań:
Zadanie było o tyle ambitne, że zwykle rozwiązania szumnie nazywane edytorami szablonów sprowadzają się do możliwości zmiany kolorów tła (mam na myśli oczywiście rozwiązania w aplikacjach webowych). Planowane przeze mnie rozszerzenie interakcji użytkownika ze stroną wymagało dosyć rozważnego podejmowania decyzji dot. sposobu implementacji.
Na pierwszy ogień poszedł RJS, wkrótce jednak okazało się, że w tym przypadku jego zalety stają sie przekleństwem. Konieczność ‘konsultowania’ z serwerem każdej akcji wykonanej w UI przez użytkownika wiązała się z przesadnie wielką liczbą gadek klient-serwer, a w efekcie cały edytor sprawiał wrażenie niemrawego. Przy okazji sprawdziłem w praktyce, że przy bardziej skomplikowanych konstruktach RJS ma poważną wadę - wymaga ciągłego przełączania kontekstu mentalnego pomiędzy Ruby a JavaScript. Wydaje się, że helpery dostarczane przez railsy eliminują tą konieczność - praktyka pokazuje, że jednak nie. Gdy do tego dołożymy potrzebę sporej elastyczności na etapie projektowania interakcji (nie wszystko da się zasymulować na kartce papieru - czasem trzeba też poklikać) - RJS wypada niestety słabo.
Na czym stanęło? Na banalnie prostym podziale - niech każdy robi to na czym się zna najlepiej. Przeglądarka rysuje html do którego dopinane są JavaScriptowe kontrolery - razem tworząc żywe i reagujące na zmiany kontrolki. Poszczególnymi edytorami zarządza jeden główny kontroler, którego zasadniczym zadaniem jest wymiana danych z serwerem. Przez dane rozumiem tu już tylko gotowe informacje o parametrach szablonu, któresą przesyłane na serwer jako JSON. Serwer zajmuje się więc tylko zamianą otrzymanego JSONa na CSS (za pomocą zwykłego szablonu ERb). Takie naturalne rozdzielenie zakresu obowiązków spowodowało znaczne uproszczenie w pracy nad modułem - nie było potrzebne choćby ciągłe przełączanie kontekstów mentalnych :) Po przygotowaniu części serverside i otestowaniu generacji CSSa spokojnie mogłem przesiąść się na pracę tylko z częścią klienta.
A końcowy efekt? To największy spójny (w sensie poświęcony temu samemu zadaniu) fragment kodu w JavaScript jaki napisałem :) źródła mają w sumie ok. 120kB.
Jak mój wypasiony edytor szablonów działa w praktyce? Zapraszam do wersji demo webankiety.
[javascript rails webankieta]
