Kto normalny wyłącza JavaScript?!
07 listopada 2007
Tytułowe pytanie towarzyszy mojej karierze frontend developera od zawsze. Gdy tylko mogę, walczę z mitem prowokującym ten okrzyk zdziwienia programistów server-side i koderów JS. Postanowiłem w końcu napisać dlaczego nie wolno opierać naszego najnowszego serwisu Web2.0 o JavaScript, jak należy myśleć podczas jego projektowania i jakie są nieliczne wyjątki – zgadliście – potwierdzające regułę.
Separacja warstw
Na początek jednak wspomnę o rzeczy oczywistej. Inaczej bowiem nie można nazwać tworzenia strony z separowaniem warstwy prezentacji od zawartości. Mowa o CSS składowanym w zewnętrznych plikach, będących wdziankiem dla znaczników HTML, stanowiących o treści.
Istnieje jeszcze jedna warstwa stron internetowych – zachowanie opisywane przez JavaScript. Skrypty należy umieszczać w zewnętrznych plikach z tego samego powodu – aby być w stanie zmienić dowolną część oddziałującą na wiele stron.
Wszyscy znają starą maksymę walidacji formularzy – waliduj w przeglądarce, ale zawsze sprawdzaj też na serwerze. Ponieważ JavaScriptowi nie można ufać. Jestem wprost zadziwiony, że ta prawda zostaje zapomniana, gdy tylko pokazać parę efektownych animacji DHTML.
Dlaczego nie opierać się na JavaScript?
Ponieważ może go nie być. Twoje następne pytania / twierdzenia są proste do przewidzenia:
- Nikt normalny nie wyłącza JavaScript.
- Ile procent ludzi wyłącza JS? Dwa?
- Nasz serwis posiada inny target.
- To nie nasza sprawa
Prawda jest często dla backendowców bolesna – to jest nasza sprawa i to prawie zawsze. Każdy z użytkowników naszego serwisu może mieć wyłączony JavaScript. Oto dlaczego:
-
Strona nie załadowała się do końca.
JavaScript uruchamiany jest dopiero po załadowaniu się szkieletu dokumentu (co i tak jest lepsze niż starodawne metody) – do tego czasu wszystkie puste linki i formularze-kukiełki będą po użyciu przeładowywać użytkownikowi stronę.
Nie można tego załatwić przez wstawienie
javascript:void(0)dohref="", nie przez przesłonięcie całości loaderem – JavaScript ma być oddzielony od warstwy zawartości i prezentacji. Dla dobra zarówno gościa jak i programisty. -
Nie sprawdziłeś wszystkich kombinacji.
Nikt nie jest w stanie napisać bezbłędnego kodu, na pewno nie podczas pierwszego cyklu oprogramowania. Nawet jeśli wydaje Ci się, że pod IE i Firefoksem działa dobrze, nie jesteś w stanie powiedzieć czy na Operze na konsoli Wii, skrypt uruchamia się tak samo.
Nie wiesz czy po paru godzinach spędzonych przy serwisie wystąpi błąd, na wyłapanie którego nie było budżetu. Ten błąd spowoduje wykonanie domyślne przeładowanie strony podczas wykonywania skryptu na pustym linku albo podczas przetwarzania martwego formularza. A użytkownik właśnie stracił swoje dane albo cierpliwość.
Oddziel stronę od aplikacji
Następne przełomowe twierdzenie tyczy się przeznaczenia naszego serwisu. Bo nawet gdy uda nam się przekonać zespół, że JavaScript może być niedostępny – zaczyna się smutek i zgrzytanie zębów.
Powszechne jest bowiem przekonanie, że każda część serwisu powinna działać bez JavaScriptu. Musi działać tylko jedna – umożliwiająca korzystanie ze strony, niekoniecznie aplikacji. Najlepiej pokazać różnicę na przykładzie.
Wyobraźmy sobie proces rejestracji i wgrywanie avatara.
Podstawową funkcją jest możliwość wgrania zdjęcia i korzystania z niego do identyfikacji w serwisie. Wystarczy zwykły formularz z polem wyboru pliku.
Zaawansowaną funkcją jest aplikacja JavaScript pozwalająca na wycięcie części zdjęcia po wgraniu i zapisanie tejże jako avatar. Wszystko dzieje się bez przeładowania, aż do zapisu – akcja standardowego formularza zostaje nadpisana w JavaScript – który wysyła przez Ajax zdjęcie na serwer, pokazuje je użytkownikowi, udostępnia interfejs do wycięcia fragmentu i dodaje przycisk "Zapisz", przenoszący dalej.
Twój serwis powinien być tak napisany, aby można było wgrać zdjęcie bez JavaScriptu – fakt dopasowania avatara nie jest kluczowy w procesie rejestracji.
Dobrze, ale jak?
Projektując aplikację myśl o Ajaksie, niekoniecznie od razu go implementując. Zapewnij sobie mechanizmy, które zwracają całą stronę albo tylko jej kawałek. Przedyskutuj funkcjonalność z koderami JavaScript, określ która jej część jest absolutnie niezbędna do przeglądania witryny i zachowania ciągłości pozytywnego doświadczenia użytkownika, a która jest dodatkiem, dobudówką przekształcającą fragmenty Twojego serwisu w aplikacje.
Przykłady funkcji działających bez JS:
- Możliwość rejestracji w serwisie
- Obejrzenie kolejnej strony prywatnych wiadomości.
- Przejście do innej części strony.
- Dodanie komentarza.
- Zagłosowanie na klip, artykuł, komentarz.
- Edytowanie wpisu na blogu.
- Skorzystanie z wyszukiwarki.
- Wgranie zdjęć do składnicy online.
I ich starsi bracia, dopisani w JavaScript:
- Automatyczne sprawdzenie dostępności loginu.
- Doładowanie kolejnej porcji wiadomości.
- Przełączanie wizualnych tabów.
- Wysłanie go przez Ajax, bez przeładowania strony i możliwość wysłania kolejnego.
- Automatyczna akcja, bez przeładowania.
- Edytowanie w miejscu – zamiana akapitów tekstu na formularze.
- LiveSearch.
- Skorzystanie z zaawansowanego uploadera pokazującego postęp procesu.
Projektując kod JavaScript dużego serwisu, zaopatrz się w framework, który pozwoli Ci swobodnie poruszać się po dokumencie, kopiować, dodawać i usuwać jego części – aktualnie każdy posiada funkcje trawersowania DOM, ja polecam oczywiście ten napisany wokoło faktu manipulacji DOM, jQuery.
Nie myśl o tym jak część interfejsu będzie działać pisząc dla niej HTML, nie wyobrażaj sobie tego co się wydarzy po kliknięciu z włączonym JavaScript. Zawsze przygotowuj się na wypadek jego braku.
Wyjątki
Napisałem już wyżej jak wygląda proces na przykładzie wgrywania avatara. Logiczne jest, że nie da się w sposób wygodny dla użytkownika oprogramować aplikację edytującą zdjęcie – przeładowywanie strony setki razy aby zmniejszyć szerokość fotki jest bez sensu.
Tak samo podszedłem do problemu projektując interfejsy wczesnej bety Respectance.com – wiadome było, że edytor pozwalający łączyć zdjęcia, dodawać efekty przejścia i zapisywać je w postaci klipu musiał wymagać JS – ale była to pełnoprawna aplikacja i tylko część serwisu.
Identycznie działa konfiguracja przycisków wstawiających HTML w panelu administracyjnymi Joggera. Skoro całość opiera się na fakcie posiadania JavaScript (a wysyłanie formularza za każdym wciśnięciem taga jest o wiele gorsze niż ich brak), tak więc edycja przycisków spokojnie mogła zostać zrobiona bez martwienia się o jego brak. Lecz jest to jedyna „JS-only” opcja całego Joggera.
Nie możemy bowiem opierać się na JavaScripcie - jest to technologia czekająca nadal na ustandaryzowanie, przyspieszenie i nowy zestaw funkcjonalności.
Przypomnę więc:
Budujmy serwisy w staroświecki sposób, ze zwykłymi linkami kierującymi do akcji serwera i przeładowywaniem formularzy.
Nadpisujmy te domyślne akcje przez aplikacje JavaScript, zwiększając użyteczność i wydajność interfejsów.


