5 najczęstszych błędów popełnianych przez programistów HTML5: przewodnik dla początkujących

Minęło ponad 20 lat, odkąd Tim Berners-Lee i Robert Cailliau określili HTML, który stał się standardowym językiem znaczników używanym do budowania Internetu. Od tego czasu społeczność programistów HTML błagała o ulepszenia tego języka, ale ten krzyk był słyszany głównie przez twórców przeglądarek internetowych, którzy próbowali złagodzić problemy z HTML u swoich kolegów. Niestety doprowadziło to do jeszcze większych problemów, powodując wiele problemów ze zgodnością między przeglądarkami i powielanie prac programistycznych. W ciągu tych 20 lat HTML był aktualizowany 4 razy, podczas gdy większość przeglądarek otrzymywała dwucyfrowe liczby głównych aktualizacji oraz liczne małe poprawki.

HTML5 miał w końcu rozwiązać nasze problemy i stać się jednym standardem do rządzenia nimi wszystkimi (przeglądarkami) . Była to prawdopodobnie jedna z najbardziej oczekiwanych technologii od czasu powstania sieci WWW. Czy to się stało? Czy w końcu otrzymaliśmy jeden język znaczników, który będzie w pełni kompatybilny z różnymi przeglądarkami i będzie działał na wszystkich platformach stacjonarnych i mobilnych, zapewniając nam wszystkie te funkcje, o które prosiliśmy? Nie wiem! Zaledwie kilka dni temu (16 września 2014) otrzymaliśmy jeszcze jedno wezwanie do sprawdzenia przez W3C, więc specyfikacja HTML5 jest wciąż niekompletna.

Mamy nadzieję, że kiedy specyfikacja zostanie sfinalizowana pewnego dnia, przeglądarki nie będą już miały znaczącego przestarzałego kodu i będą łatwo i poprawnie zaimplementować wspaniałe funkcje, takie jak Web Workers , Wiele zsynchronizowanych elementów audio i wideo oraz inne komponenty HTML5, których potrzebowaliśmy do długi czas.

Mamy jednak tysiące firm, które oparły swoje biznesy na HTML5 i radzą sobie świetnie. Istnieje również wiele wspaniałych aplikacji i gier opartych na HTML5, z których korzystają miliony ludzi, więc sukces jest oczywiście możliwy, a HTML5 jest i będzie używany niezależnie od stanu jego specyfikacji.

Jednak przepis, o którym wspomniałem, może łatwo wybuchnąć nam w twarz, dlatego podkreśliłem niektóre z najbardziej podstawowych błędów HTML5, których można uniknąć. Większość z wymienionych poniżej błędów jest konsekwencją niekompletnej lub brakującej implementacji niektórych elementów HTML5 w różnych przeglądarkach i należy mieć nadzieję, że w niedalekiej przyszłości staną się one przestarzałe. Dopóki to się nie stanie, sugeruję przeczytanie listy i uwzględnienie jej podczas tworzenia następnej aplikacji HTML5, niezależnie od tego, czy jesteś początkującym HTML5, czy doświadczonym weterynarzem.

Powszechny błąd nr 1: Ufanie pamięci lokalnej

Pozwól im zjeść ciasto! Takie podejście od wieków było obciążeniem dla programistów. Ze względu na dość rozsądną obawę przed naruszeniami bezpieczeństwa i ochrony komputerów, w „ciemnych wiekach”, kiedy wielu obawiało się Internetu, aplikacje webowe mogły pozostawiać na komputerach bezzasadnie małe ilości danych. To prawda, że ​​istniały takie rzeczy, jak dane użytkownika, które przekazali nam „świetni mistrzowie przeglądarek z Microsoft(r)” lub rzeczy takie jak lokalne obiekty współdzielone we Flashu, ale to było dalekie od ideału.

Dlatego rozsądne jest, że jedną z pierwszych podstawowych funkcji HTML5 przyjętych przez programistów było Web Storage. Należy jednak pamiętać, że przechowywanie w sieci Web nie jest bezpieczne. Jest to lepsze niż używanie plików cookie, ponieważ nie będą one przesyłane przewodowo, ale nie są szyfrowane. Zdecydowanie nigdy nie należy tam przechowywać tokenów bezpieczeństwa. Twoja polityka bezpieczeństwa nigdy nie powinna opierać się na danych przechowywanych w Web Storage, ponieważ złośliwy użytkownik może w dowolnym momencie łatwo zmodyfikować swoje wartości localStorage i sessionStorage .

Aby uzyskać więcej informacji na temat Web Storage i tego, jak z niego korzystać, sugeruję przeczytanie tego posta.

Powszechny błąd nr 2: Oczekiwanie zgodności między przeglądarkami

HTML5 to znacznie więcej niż prosty język znaczników. Jest wystarczająco dojrzały, aby łączyć zachowanie z układem, dlatego powinieneś rozważyć HTML5 jako rozszerzony HTML z zaawansowanym JavaScriptem na wierzchu. Jeśli spojrzysz na wszystkie problemy, które mieliśmy wcześniej tylko po to, aby statyczne połączenie HTML + CSS wyglądało identycznie we wszystkich przeglądarkach, można uczciwie założyć, że większa złożoność będzie oznaczać więcej wysiłku w zapewnieniu zgodności między przeglądarkami.

Interpretacja HTML5 w różnych przeglądarkach nie jest identyczna, tak jak w przypadku JavaScript. Wszyscy główni gracze w wojnach przeglądarkowych pomogli w specyfikacji HTML5, więc można śmiało założyć, że różnice między przeglądarkami powinny z czasem się zmniejszać. Ale nawet teraz niektóre przeglądarki zdecydowały się całkowicie zignorować niektóre elementy HTML5, co bardzo utrudnia śledzenie linii bazowej i wspólnego zestawu funkcji. Jeśli dodamy do równania więcej urządzeń i platform podłączonych do Internetu, sytuacja stanie się jeszcze bardziej skomplikowana, powodując problemy z HTML5.

Na przykład Animacje internetowe to świetna funkcja, która jest obsługiwana tylko przez Chrome i Opera, podczas gdy funkcja Web Notification, która umożliwia ostrzeganie użytkownika poza kontekstem strony internetowej o zdarzeniu, takim jak dostarczenie wiadomości e-mail, jest całkowicie ignorowana przez Internet Explorer.

Aby dowiedzieć się więcej o funkcjach HTML5 i obsłudze przez różne przeglądarki, zapoznaj się z przewodnikiem HTML5 na www.caniuse.com.

Tak więc faktem jest, że chociaż HTML5 jest nowy i dobrze określony, powinniśmy spodziewać się wielu problemów ze zgodnością między przeglądarkami i zaplanować je z wyprzedzeniem. Jest zbyt wiele luk, które przeglądarki muszą wypełnić, i można śmiało oczekiwać, że nie są w stanie dobrze pokonać wszystkich różnic między platformami.

Powszechny błąd nr 3: Zakładanie wysokiej wydajności

Niezależnie od tego, że HTML5 wciąż ewoluuje, jest to bardzo potężna technologia, która ma wiele zalet w stosunku do alternatywnych platform używanych przed jej istnieniem. Ale z wielką mocą wiąże się wielka odpowiedzialność , szczególnie dla początkujących HTML5. HTML5 został przyjęty przez wszystkie główne przeglądarki na platformach stacjonarnych i mobilnych. Mając to na uwadze, wiele zespołów programistycznych wybiera HTML5 jako preferowaną platformę, mając nadzieję, że ich aplikacje będą działać jednakowo we wszystkich przeglądarkach. Jednak zakładanie rozsądnej wydajności zarówno na platformach stacjonarnych, jak i mobilnych tylko dlatego, że tak mówi specyfikacja HTML5, nie jest rozsądne. Wiele firm (khm! Facebook khm!) postawiło na HTML5 dla swojej platformy mobilnej i cierpi z powodu tego, że HTML5 nie działa zgodnie z planem.

Znowu jednak istnieje kilka świetnych firm, które w dużym stopniu polegają na HTML5. Wystarczy spojrzeć na liczne studia zajmujące się tworzeniem gier online, które robią niesamowite rzeczy, jednocześnie wykorzystując HTML5 i przeglądarki do granic możliwości. Oczywiście, o ile jesteś świadomy problemów z wydajnością i pracujesz nad nimi, możesz być w świetnym miejscu, tworząc niesamowite aplikacje.

Częsty błąd nr 4: Ograniczona dostępność

Sieć stała się bardzo ważną częścią naszego życia. Udostępnianie aplikacji osobom, które polegają na technologiach wspomagających, jest ważnym tematem, który często jest pomijany w tworzeniu oprogramowania. HTML5 próbuje rozwiązać ten problem, wdrażając niektóre zaawansowane funkcje ułatwień dostępu. Wielu programistów zaakceptowało to jako wystarczające i tak naprawdę nie poświęciło czasu na wdrażanie dodatkowych opcji ułatwień dostępu w swoich aplikacjach. Niestety, na tym etapie HTML5 ma problemy, które uniemożliwiają udostępnienie Twoich aplikacji wszystkim i powinieneś spodziewać się dodatkowego czasu, jeśli chcesz objąć szerszy zakres użytkowników.

Możesz sprawdzić to miejsce, aby uzyskać więcej informacji na temat ułatwień dostępu w HTML5 oraz aktualny stan najpopularniejszych funkcji ułatwień dostępu.

Częsty błąd nr 5: nieużywanie ulepszeń HTML5

HTML5 znacznie rozszerzył standardowy zestaw tagów HTML/XHTML. Oprócz nowych tagów otrzymaliśmy sporo nowych reguł i zachowań. Zbyt wielu programistów wybrało tylko kilka ulepszeń i pominęło niektóre z bardzo fajnych nowych funkcji HTML5.

Jedną z najfajniejszych rzeczy w HTML5 jest walidacja po stronie klienta. Ta funkcja była prawdopodobnie jednym z najwcześniejszych elementów HTML5, które przechwyciły przeglądarki internetowe. Niestety, można znaleźć więcej niż kilku programistów, którzy domyślnie dodają atrybut novalidate do swoich formularzy. Powody, dla których to robimy, są rozsądne i jestem całkiem pewien, że odbędziemy debatę na ten temat. Ze względu na wsteczną kompatybilność wiele aplikacji zaimplementowało niestandardowe walidatory JavaScript, a poza tym posiadanie gotowej walidacji wykonywanej przez przeglądarki jest niewygodne. Jednak nie jest trudno zapewnić, że dwie metody walidacji nie będą się ze sobą kolidować, a standaryzacja walidacji użytkowników zapewni wspólne doświadczenie, jednocześnie pomagając rozwiązać problemy z dostępnością, o których wspomniałem wcześniej.

Kolejna świetna funkcja jest związana ze sposobem obsługi danych wejściowych użytkownika w HTML5. Zanim pojawił się HTML5, musieliśmy przechowywać wszystkie nasze pola formularza zawarte w tagu <form></form> . Nowe atrybuty formularza sprawiają, że robienie czegoś takiego jest całkowicie uzasadnione:

 <form action="demo_form.asp"> First name: <input type="text" name="fname"><br> <input type="submit" value="Submit"> </form> Last name: <input type="text" name="lname" form="form1">

Nawet jeśli lname nie ma w formularzu, zostanie on wysłany razem z fname .

Więcej informacji na temat nowych atrybutów i ulepszeń formularzy można znaleźć w Mozilla Developer Network.

Zakończyć

Rozumiem, że twórcy stron internetowych są dodatkowymi stratami w wojnach przeglądarek, ponieważ wiele z powyższych błędów jest bezpośrednią konsekwencją problematycznej implementacji HTML5 w różnych przeglądarkach. Jednak nadal ważne jest, abyśmy unikali typowych problemów z HTML5 i poświęcili trochę czasu na zrozumienie nowych funkcji HTML5. Gdy już wszystko będzie pod kontrolą, nasze aplikacje będą wykorzystywać nowe, wspaniałe ulepszenia i przeniosą Internet na wyższy poziom.