סיכום
SVGOMG: ממשק רספונסיבי ויפהפה ל-SVGO.
מה אהבנו?
SVGOMG הוא דוגמה כמעט מושלמת לכלי עם יכולת תגובה מלאה שנכתב על ידי טכנולוגיות אינטרנט, שפותח על ידי ג'ייק ארצ'יבלד. השירות כולל מראה יפהפה של Material Design, כך ששירות ServiceWorker מבטיח שהאפליקציה תיטען במהירות וזמינה במצב אופליין, ושהמעברים יהיו חלקים בנייד.
שיפורים אפשריים
הדבר היחיד שחשוב לנו להציע הוא שחוויית המשתמש הראשונית מבלבלת כי חסר ממשק המשתמש הראשי. חוץ מזה, כל הכבוד!
שאלות ותשובות עם ג'ייק ארצ'יבלד
למה כדאי לפרסם באינטרנט?
עצלות. עצלות מוחלטת. אני לא מומחה בפיתוח אפליקציות מקוריות של Windows, אני לא מומחה באפליקציות מקוריות של OSX, ואני גם לא מומחה ביצירת אפליקציות מקוריות ל-iOS, ל-Android, ל-Windows Phone או ל-Linux. אבל אני יכול לעשות את זה באינטרנט, ובעזרת המיומנויות האלה אני יכול לפתח משהו פעם אחת שעבד בכל הפלטפורמות האלה.
מה עבד הכי טוב במהלך הפיתוח?
אני ממש מרוצה מהביצועים שלו. אני מוודאים שהדף מעובד לפני ש-JS זמין. למעשה, הוא עובר עיבוד ראשון עם 5k בלבד של HTML עם כמה CSS ו-SVG מוטבעים. הסקריפטים הראשיים וה-CSS כולם נטענים ברקע. המשמעות היא שהאתר נטען בשנייה 1.5 גם ב-3G עם מטמון ריק, ורובם הם DNS ו-SSL.
מסך הפתיחה פשוט מאוד, כך שבאיכות 5K לא היה מאתגר לעשות זאת. זה מאוד מעצבן, שהרבה אתרים ממתינים ל-JS לעיבוד הראשון, וחלקם אפילו דורשים שה-JS שלהם ישלח בקשות נוספות לפני העיבוד. זה דוחף את זמן העיבוד ב-3G למשך עשר שניות - כמשתמש בנייד, אני יודע שלא הייתי מוותר על זה.
גודל ה-JS הראשי הוא 15k, אבל הוא לא כולל את החלקים שמנתחים ומקטינים את ה-SVG, שנטענים כשלב נוסף ברקע. זה נהדר כי האינטראקטיביות מגיעה מהר מאוד, והמשתמשים לא מבחינים בעומס הנוסף. אם המשתמש מצליח לבחור קובץ SVG לפני שהסקריפט זמין, נראה שהטעינה של אותו סקריפט היא חלק מזמן העיבוד.
השתמשתי גם ב-ServiceWorker כדי לגרום לכלי כולו לעבוד במצב אופליין. עבודה בלי חיבור לאינטרנט היא תכונה די מגניבה, אבל אני עושה אותה בעיקר כדי לשפר את הביצועים. הביקורים הבאים ב-SVGOMG מעובדים כמעט באופן מיידי, ללא קשר לחיבור שיש למשתמש. לאור השינויים בקישוריות של מכשירים ניידים, הנתונים האלה תורמים מאוד.
אם הייתה לך אפשרות לשפר את האפליקציה שלך, איזה ממשק היית רוצה לשפר?
השתמשתי ב-Babel כדי שאוכל להשתמש בדברים של JavaScript בעתיד. זה יהיה נהדר אם חלק מהם יפעלו באופן מקומי בפלטפורמה. באופן ספציפי, אסינכרוני/המתנה, פונקציות חץ, ברירות מחדל של ארגומנטים והשמדת.
הייתי צריך להשתמש בספרייה כדי לבצע gzip לפלט של הפלט כדי לדעת מה הגודל שלו ב-gzip. השימוש בספרייה לשם כך הוא די מעצבן, כי הקוד הזה כבר קיים בדפדפן עבור דברים HTTP, פשוט אין לו API. באופן אידיאלי, הוא צריך להיות מעין זרם טרנספורמציה, כדי שאוכל לספור את גודל הפלט בלי לשמור את כל התוכן בזיכרון.