Tóm tắt
SVGOMG: Một giao diện người dùng đẹp, chất liệu, thích ứng dành cho SVGO.
Điều gì chúng tôi thích?
Do Jake Archibald của riêng chúng tôi tạo ra, SVGOMG là một ví dụ gần như hoàn hảo về một công cụ có khả năng thích ứng và đáp ứng đầy đủ được viết bằng các công nghệ web. Dịch vụ này có giao diện Material Design đẹp mắt, ServiceWorker đảm bảo ứng dụng tải nhanh và có thể sử dụng khi không có mạng, cũng như quá trình chuyển đổi diễn ra suôn sẻ trên thiết bị di động.
Những cải tiến có thể áp dụng
Điểm mấu chốt duy nhất chúng tôi cần cung cấp là trải nghiệm người dùng ban đầu gây nhầm lẫn do thiếu giao diện người dùng chính. Ngoài ra, bạn đã làm rất tốt!
Hỏi và đáp với Jake Archibald
Tại sao lại là web?
Sự lười biếng. Vô cùng lười biếng. Tôi không phải chuyên gia về việc phát triển ứng dụng gốc trên Windows, tôi không phải chuyên gia về ứng dụng gốc OSX và cũng không phải chuyên gia về việc tạo ứng dụng gốc cho iOS, Android, Windows Phone hoặc Linux. Tuy nhiên, tôi có thể làm việc trên web và một bộ kỹ năng đó cho phép tôi xây dựng một cái gì đó một lần đã hoạt động trên tất cả các nền tảng đó.
Điều gì hoạt động thực sự tốt trong quá trình phát triển?
Tôi rất hài lòng với hiệu quả mà công cụ này mang lại. Tôi đảm bảo trang hiển thị trước khi có JS. Trên thực tế, lần đầu tiên nó chỉ hiển thị với 5k HTML với một số CSS và SVG cùng dòng. Tất cả các tập lệnh và CSS chính đều được tải trong nền. Điều này có nghĩa là trang web có vẻ sẽ tải trong 1, 5 giây ngay cả trên 3G với bộ nhớ đệm trống và hầu hết trong số đó là DNS và SSL.
Màn hình mở thực sự đơn giản, vì vậy việc thực hiện việc đó trong 5k không phải là một thách thức. Tôi thực sự thấy bận tâm khi có rất nhiều trang web chờ JS trong lần hiển thị đầu tiên, thậm chí một số trang web còn yêu cầu JS phải thực hiện thêm yêu cầu trước khi hiển thị. Điều này đẩy thời gian kết xuất 3G lên 10 giây – với tư cách là người dùng thiết bị di động, tôi biết là tôi sẽ không chịu khó chịu.
JS chính là 15k, nhưng không bao gồm các phần phân tích cú pháp và thu nhỏ SVG (được tải dưới dạng một giai đoạn bổ sung trong nền). Thật tuyệt vời vì khả năng tương tác diễn ra thực sự nhanh chóng và người dùng không nhận thấy quá tải. Nếu người dùng có thể chọn một SVG (Đồ hoạ vectơ có thể mở rộng) trước khi có tập lệnh đó, thì việc tải tập lệnh đó có vẻ như là một phần của thời gian xử lý.
Tôi cũng sử dụng ServiceWorker để mọi thứ hoạt động ở chế độ ngoại tuyến. Làm việc ngoại tuyến là một tính năng khá thú vị, nhưng tôi chủ yếu làm vì hiệu suất. Các lần truy cập SVGOMG tiếp theo sẽ hiển thị gần như ngay lập tức, bất kể người dùng có kết nối nào. Dựa trên sự thay đổi về khả năng kết nối di động, điều này thực sự rất có giá trị!
Nếu bạn có thể có bất kỳ API nào để cải thiện ứng dụng của mình, đó sẽ là API gì?
Tôi đã sử dụng Kiosk để có thể sử dụng nội dung JavaScript trong tương lai. Thật tuyệt vời khi một số thành phần đó hoạt động nguyên gốc trong nền tảng. Cụ thể là các hàm không đồng bộ/chờ, các hàm mũi tên, các giá trị mặc định của đối số và huỷ cấu trúc.
Tôi đã phải sử dụng thư viện để nén đầu ra để tìm kích thước nén của tệp. Việc sử dụng thư viện cho việc này sẽ khá khó chịu vì mã đó đã có trong trình duyệt cho nội dung HTTP, chỉ không có API cho nó. Lý tưởng nhất là có một loại luồng biến đổi nào đó để tôi có thể đếm kích thước của đầu ra mà không cần có toàn bộ nội dung trong bộ nhớ.