خلاصه
SVGOMG : ظاهری زیبا، مادی و پاسخگو برای SVGO.
چه چیزی را دوست داریم؟
SVGOMG که توسط Jake Archibald خودمان ساخته شده است، یک نمونه تقریبا کامل از یک ابزار کاملاً پاسخگو و توانا است که با فناوری های وب نوشته شده است. ظاهری زیبا از طراحی متریال دارد، ServiceWorker تضمین می‌کند که برنامه به سرعت بارگیری می‌شود و به‌صورت آفلاین در دسترس است، و انتقال‌ها در تلفن همراه هموار است.
بهبودهای احتمالی
تنها نکته واقعی که باید ارائه دهیم این است که UX اولیه به دلیل از دست دادن رابط کاربری اصلی گیج کننده است. غیر از این، کار به خوبی انجام شده است!
پرسش و پاسخ با جیک آرچیبالد
چرا وب؟
تنبلی. تنبلی کامل من متخصص در توسعه برنامه های بومی ویندوز نیستم، در برنامه های بومی OSX متخصص نیستم، همچنین در ایجاد برنامه های بومی برای iOS، Android، Windows Phone یا Linux متخصص نیستم. با این حال، می‌توانم وب انجام دهم، و این مجموعه مهارت به من اجازه می‌دهد زمانی چیزی بسازم که روی همه آن پلتفرم‌ها کار کند.
چه چیزی در طول توسعه واقعاً خوب کار کرد؟
من واقعا از عملکرد آن راضی هستم. من مطمئن می شوم که صفحه قبل از در دسترس بودن JS ارائه می شود. در واقع، ابتدا تنها با 5 هزار HTML با مقداری CSS و SVG درون خطی رندر می شود. اسکریپت های اصلی و CSS همگی در پس زمینه بارگذاری می شوند. این بدان معناست که به نظر می رسد سایت در 1.5 ثانیه حتی در 3G با یک کش خالی بارگیری می شود و بیشتر آن DNS و SSL است.
صفحه باز کردن واقعاً ساده است، بنابراین انجام آن در 5k چالشی نبود. واقعاً من را آزار می‌دهد که بسیاری از سایت‌ها برای اولین رندر خود در JS منتظر می‌مانند، برخی حتی از JS خود می‌خواهند قبل از رندر درخواست‌های بیشتری ارائه دهند. این زمان رندر 3G را به سمت 10 ثانیه سوق می دهد - به عنوان یک کاربر تلفن همراه می دانم که این کار را تحمل نمی کنم.
JS اصلی 15k است، اما شامل بخش‌هایی نمی‌شود که SVG را تجزیه و کوچک می‌کنند، که به عنوان یک فاز اضافی در پس‌زمینه بارگذاری می‌شود. این عالی است زیرا تعامل واقعاً به سرعت انجام می شود و کاربر متوجه بارگذاری اضافی نمی شود. اگر کاربر قبل از در دسترس بودن آن اسکریپت موفق به انتخاب یک SVG شود، به نظر می رسد بارگذاری آن اسکریپت بخشی از زمان پردازش باشد.
من همچنین از ServiceWorker استفاده کردم تا همه چیز به صورت آفلاین کار کند. کار آفلاین یک ویژگی بسیار جالب است، اما من بیشتر آن را برای عملکرد انجام می دهم. بازدیدهای بعدی از SVGOMG تقریباً بلافاصله، هر ارتباطی که کاربر داشته باشد، ارائه می‌شود. با توجه به تنوع در اتصال تلفن همراه، این واقعا ارزشمند است!
اگر می‌توانید یک API برای بهبود برنامه خود داشته باشید، آن چیست؟
من از Babel استفاده کردم تا بتوانم از موارد جاوا اسکریپت آینده استفاده کنم. خیلی خوب است که برخی از آن ها به صورت بومی در پلتفرم کار کنند. به طور خاص، async/wait، توابع پیکان، پیش‌فرض‌های آرگومان و تخریب ساختار.
من مجبور شدم از یک کتابخانه برای gzip کردن خروجی استفاده کنم تا اندازه gzipped آن را بفهمم. استفاده از کتابخانه برای این کار تا حدودی آزاردهنده است زیرا آن کد از قبل برای موارد HTTP در مرورگر وجود دارد، فقط API برای آن وجود ندارد. در حالت ایده‌آل باید نوعی جریان تبدیل باشد تا بتوانم اندازه خروجی را بدون داشتن کل چیز در حافظه بشمارم.