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