Czym jest JSON? Kompletny przewodnik dla początkujących

Jeśli kiedykolwiek zbudowałeś stronę internetową, wywołałeś API lub zajrzałeś do pliku package.json, już spotkałeś się z JSON. Oznacza JavaScript Object Notation i jest w zasadzie uniwersalnym językiem, którym aplikacje komunikują się ze sobą. Nie daj się zmylić słowem „JavaScript" — JSON działa z niemal każdym językiem programowania.

Rozłóżmy to na czynniki pierwsze, z mnóstwem przykładów po drodze.

Krótka lekcja historii

JSON został stworzony przez Douglasa Crockforda na początku lat 2000. Chciał czegoś prostszego niż XML do przesyłania danych między przeglądarkami a serwerami. Pomysł szybko się przyjął — JSON został oficjalnie zestandaryzowany jako ECMA-404 w 2013 roku, a później jako RFC 8259 w 2017 roku.

Dziś ponad 90% API webowych używa JSON. Nigdzie się nie wybiera.

Jak wygląda JSON?

Oto prosty przykład — obiekt JSON reprezentujący osobę:

Całkiem czytelne, prawda? O to właśnie chodzi. Przyjrzyjmy się zasadom, dzięki którym to działa.

Zasady składni (są proste, obiecuję)

Typy danych: JSON daje Ci sześć klocków do zabawy: ciągi znaków (zawsze w podwójnych cudzysłowach), liczby, wartości logiczne (true/false), null, obiekty i tablice. To wszystko — żadnych dat, żadnych funkcji, żadnych specjalnych typów.

Obiekty: To Twoje pary klucz-wartość, zamknięte w nawiasach klamrowych {}. Klucze muszą być ciągami znaków w podwójnych cudzysłowach. Oto przykład zagnieżdżonego obiektu:

Tablice: Uporządkowane listy w nawiasach kwadratowych []. Mogą zawierać dowolną mieszankę typów:

Jedna pułapka: JSON nie pozwala na końcowe przecinki. Więc {"name": "Sam",} zepsuje Ci parser. To zaskakuje wielu ludzi przechodzących z JavaScriptu, gdzie końcowe przecinki są całkowicie w porządku.

Dlaczego programiści kochają JSON

Jest kilka powodów, dla których JSON wygrał wojnę formatów danych:

• Jest banalnie prosty. Porównaj {"name": "Jo"} z XML-owym Jo. Mniej pisania, mniej szumu.
• Każdy język go obsługuje. Python ma json.loads(), JavaScript ma JSON.parse(), Go ma encoding/json — łapiesz o co chodzi. Sprawdź dokumentację JSON na MDN dla strony JavaScriptowej.
• Jest lekki. Payloady JSON są zazwyczaj o 30-50% mniejsze od odpowiednika w XML. To ma znaczenie, gdy wysyłasz miliony odpowiedzi API dziennie.
• Naturalnie mapuje się na kod. Obiekt JSON wygląda niemal identycznie jak słownik Pythona, obiekt JavaScriptu czy hash Ruby'ego. Nie potrzeba warstwy tłumaczenia.

Gdzie znajdziesz JSON na wolności

• API webowe: Wywołaj niemal dowolne REST API, a dostaniesz JSON. Spróbuj sam — otwórz przeglądarkę i odwiedź https://api.github.com/users/octocat. To jest JSON.
• Pliki konfiguracyjne: package.json dla Node.js, tsconfig.json dla TypeScript, settings.json dla VS Code — JSON jest wszędzie w narzędziach deweloperskich.
• Bazy danych: MongoDB przechowuje dane w BSON (binarny JSON). PostgreSQL ma natywne typy kolumn JSON. Nawet MySQL dodał obsługę JSON.
• Wymiana danych: Mikroserwisy niemal zawsze komunikują się ze sobą w JSON przez HTTP.

JSON vs XML — Krótka wersja

XML wciąż ma swoje miejsce (więcej o tym w naszym artykule o XML), ale w większości prac nad stronami internetowymi JSON wygrywa pod względem czytelności, rozmiaru pliku i szybkości parsowania. Jedyny obszar, w którym XML błyszczy? Dane zorientowane na dokumenty z mieszaną zawartością, schematami i transformacjami.

Walidacja Twojego JSON

Nawet drobny błąd — brakujący przecinek, dodatkowy cudzysłów czy zbłąkany końcowy przecinek — spowoduje całkowite niepowodzenie parsowania JSON. Nie ma „częściowego parsowania" w JSON; albo działa, albo nie. Dlatego narzędzia takie jak nasz JSON Formatter i JSON Validator są tak przydatne. Wklej swój JSON, a natychmiast zobaczysz, czy coś jest nie tak.

Częste błędy w JSON (i jak je naprawić)

Po latach pracy z JSON, oto błędy, które widzę u programistów raz za razem:

1. Pojedyncze cudzysłowy zamiast podwójnych. To jest poprawny JavaScript, ale NIE jest poprawny JSON:

2. Końcowe przecinki. JavaScript je dopuszcza, JSON nie:

3. Komentarze. JSON nie ma składni komentarzy. Jeśli potrzebujesz komentarzy w plikach konfiguracyjnych, rozważ użycie JSONC (JSON with Comments, obsługiwany przez VS Code) lub przejdź na YAML.

4. Klucze bez cudzysłowów. W JavaScripcie możesz napisać {name: "Sarah"}, ale w JSON każdy klucz musi być ciągiem znaków w cudzysłowach: {"name": "Sarah"}.

5. Używanie undefined. JavaScriptowe undefined nie istnieje w JSON. Użyj zamiast tego null.

Praca z JSON w różnych językach

Jedną z największych zalet JSON jest uniwersalne wsparcie języków programowania. Oto jak wygląda parsowanie i serializacja w popularnych językach:

Zauważ, jak podobne są te API? parse/loads do odczytu, stringify/dumps do zapisu. Większość języków podąża za tym samym wzorcem.

Wskazówki dotyczące wydajności JSON

Gdy masz do czynienia z dużymi payloadami JSON, wydajność zaczyna mieć znaczenie. Oto kilka praktycznych wskazówek:

• Minifikuj dla produkcji. Usunięcie białych znaków z JSON może zmniejszyć rozmiar pliku o 10-30%. Nasz JSON Minifier robi to jednym kliknięciem.
• Używaj parserów strumieniowych dla dużych plików. Jeśli Twój plik JSON ma setki megabajtów, nie ładuj go całego do pamięci. Biblioteki takie jak JSONStream (Node.js) czy ijson (Python) parsują inkrementalnie.
• Unikaj głęboko zagnieżdżonych struktur. Każdy poziom zagnieżdżenia zwiększa narzut parsowania. Jeśli zagnieżdżasz więcej niż 4-5 poziomów w głąb, rozważ spłaszczenie modelu danych.
• Rozważ binarne alternatywy dla skrajnych przypadków. Dla systemów o bardzo wysokiej przepustowości formaty takie jak MessagePack, BSON czy Protocol Buffers mogą oferować 2-5x mniejsze payloady i szybsze parsowanie. Ale tracisz czytelność dla człowieka, więc to kompromis.

JSON w projektowaniu API w praktyce

Przyjrzyjmy się, jak prawdziwe API strukturyzują swoje odpowiedzi JSON. Oto popularny wzorzec dla paginowanych odpowiedzi API:

A oto popularny wzorzec odpowiedzi błędu:

Te wzorce są tak powszechne, że znajdziesz je w niemal każdym dobrze zaprojektowanym REST API. Przestrzeganie takich konwencji sprawia, że Twoje API jest łatwiejsze do zrozumienia dla innych programistów.

Szybka ściągawka JSON

Oto ściągawka ze wszystkim, co możesz umieścić w dokumencie JSON:

Wypróbuj sam

Gotowy, żeby wykorzystać tę wiedzę w praktyce? Oto narzędzia, które warto dodać do zakładek:

• JSON Formatter — Wklej bałaganiarski JSON i uzyskaj pięknie sformatowany wynik z prawidłowym wcięciem.
• JSON Validator — Szybko sprawdź, czy Twój JSON jest poprawny składniowo i uzyskaj jasne komunikaty o błędach, gdy nie jest.
• JSON Minifier — Usuń białe znaki z JSON dla payloadów produkcyjnych.

JSON może wydawać się prosty na pierwszy rzut oka, ale opanowanie jego dziwactw i najlepszych praktyk zaoszczędzi Ci niezliczonych godzin debugowania. A teraz idź i zbuduj coś wspaniałego!