עיצוב, אימות וכיווץ JSON

עיצוב, אימות וכיווץ של JSON ישירות בדפדפן

JSON, ראשי תיבות של JavaScript Object Notation, הוא שפת התקשורת המשותפת של הרשת המודרנית. כמעט כל API מסוג REST שאתם קוראים לו מחזיר אותו, רוב קובצי התצורה נשענים עליו, וחלק גדול מהנתונים הזורמים בין שירותים לממשקי משתמש מסודרים בפורמט JSON. הוא פופולרי מסיבה טובה: הפורמט פשוט, בלתי תלוי בשפת תכנות, ומתאים באופן טבעי לאובייקטים, מערכים, מחרוזות ומספרים שמתכנתים כבר חושבים במונחיהם. אבל לאותה קומפקטיות יש חיסרון. ברגע שהשרת מחזיר לכם תגובה בשורה אחת עמוסה במאות מפתחות מקוננים, המבנה שהפך את JSON לאטרקטיבי נעלם בתוך חומת תווים.

מעצב ה-JSON של speedor.net נועד להחזיר את המבנה הזה. הדביקו את הנתונים שלכם, והכלי מעצב, מאמת ומכווץ JSON באופן מיידי, כולו בתוך לשונית הדפדפן שלכם. שום דבר לא מועלה לשרת, וזה משנה מאוד כאשר המידע שאתם בודקים הוא תגובת API המכילה טוקנים, רשומות לקוחות או מזהים פנימיים.

למה הזחה הופכת JSON לקריא שוב

עיצוב, המכונה גם ייפוי או pretty-printing, לוקח JSON קומפקטי או מכווץ ומוסיף לו ירידות שורה והזחה עקבית. המידע זהה; רק הרווחים משתנים. ובכל זאת אותם רווחים הם מה שמאפשר לעין שלכם לעקוב אחר עומק הקינון, לזהות היכן אובייקט אחד מסתיים והבא מתחיל, ולהבחין בין מערך של שלושה פריטים למערך של שלוש מאות. כשאתם מנפים באג באינטגרציה בשתיים בלילה, ההבדל בין עץ קריא למחרוזת רצופה הוא ההבדל בין למצוא את הבאג ובין לפספס אותו.

מעצב טוב גם שומר על סדר המפתחות ועל הערכים המדויקים ללא שינוי, כך שמה שאתם קוראים הוא באמת מה שה-API שלח. אתם לא מסתכלים על קירוב שעוצב מחדש; אתם מסתכלים על אותם בתים בדיוק, רק מסודרים כך שבן אנוש יוכל לפענח אותם באותה קלות שבה מכונה עושה זאת.

אימות והשגיאות שמכשילות את כולם

ייפוי הוא רק חצי מהעבודה. לפני שאפשר בכלל לעצב JSON, הוא חייב להיות תקין, והכללים המחמירים של הפורמט תופסים הרבה יותר טעויות ממה שאנשים מצפים. כלי אימות מפענח את הקלט שלכם ומראה לכם בדיוק היכן הוא נשבר, בדרך כלל תוך הצבעה על שורה ומיקום כדי שלא תצטרכו לחפש באפלה. הטעויות הבודדות הבאות אחראיות לרוב המכריע של JSON פגום:

• פסיקים עודפים. JSON אוסר פסיק אחרי האיבר האחרון של אובייקט או מערך. JavaScript סובלני לכך, וזו בדיוק הסיבה שמפתחים מדביקים אותו מתוך הרגל.
• גרשיים בודדים. מחרוזות ומפתחות חייבים להשתמש בגרשיים כפולים. העתקת אובייקט ליטרלי ישירות מקוד המקור משאירה לעיתים קרובות גרשיים בודדים מאחור, והמפענח דוחה אותם.
• מפתחות ללא גרשיים. כל מפתח חייב להיות מחרוזת מוקפת גרשיים. מפתחות חשופים, מהסוג שעובד בסדר גמור באובייקט JavaScript, אינם JSON תקין.
• סוגריים חסרים או לא תואמים. { או [ שלא נסגר, או סוגר תועה, מוציא מאיזון את כל המסמך. המעצב מדגיש היכן האיזון נשבר.
• הערות וערכי undefined. ל-JSON אין הערות ואין undefined; מותרים רק null, בוליאנים, מספרים, מחרוזות, מערכים ואובייקטים.

הריצו מטען חשוד דרך כלי האימות תחילה, והבעיות האלה יעלו על פני השטח תוך שניות במקום אחרי שרשרת מבלבלת של פריסות כושלות.

כיווץ לצמצום נפח הנתונים

הפעולה ההפוכה מועילה באותה מידה. כיווץ מסיר כל בית של רווח אופציונלי, ומקפל את ה-JSON שלכם בחזרה לצורה הצפופה ביותר בשורה אחת. זה בדיוק מה שאתם רוצים כשהנתונים בדרכם לרשת או לתוך ערך תצורה, כי מטענים קטנים יותר משמעם פחות רוחב פס והעברות מהירות יותר. תהליך עבודה נפוץ הוא לייפות תגובה בזמן שאתם בוחנים אותה, לתקן מה שלא בסדר, ואז לכווץ את התוצאה לפני שמעלים אותה לגרסה או מדביקים אותה למשתנה סביבה. כלי אחד מטפל בשני קצות המעגל הזה.

עיבוד מקומי שומר על פרטיות הנתונים הרגישים

מכיוון שכל שלב רץ ב-JavaScript בתוך הדפדפן שלכם עצמו, ה-JSON שאתם מדביקים לעולם לא עוזב את המחשב שלכם. זו לא סתם הצהרה שיווקית, אלא ערובה מעשית. אתם יכולים להדביק תגובת API גולמית מלאה בטוקני גישה, ייצוא של נתוני משתמשים, או תצורת שירות פנימית, בלי לדאוג ששרת צד שלישי מתעד אותה. סוגרים את הלשונית והנתונים נעלמים. לכל מי שעובד תחת כללי טיפול בנתונים, עיבוד מקומי בלבד מסיר קטגוריה שלמה של סיכון.

ברגע שה-JSON שלכם נקי, ייתכן שתרצו להתקדם הלאה. גלו את שאר כלי המפתחים שלנו, המירו מבנה באמצעות JSON ל-YAML, או פענחו ערך מוטמע באמצעות Base64. כל כלי פועל לפי אותו עיקרון: מהיר, חינמי, ומעובד כולו בתוך הדפדפן שלכם.

שאלות נפוצות