Tóm tắt
SVGOMG: Giao diện người dùng đẹp, chất liệu, thích ứng cho SVGO.
Điều chúng tôi thích?
Được xây dựng bởi Jake Archibald của chúng tôi, SVGOMG là một ví dụ gần như hoàn hảo về một công cụ hoàn toàn thích ứng và có khả năng viết bằng các công nghệ web. Ứng dụng này có giao diện Material Design đẹp mắt, ServiceWorker đảm bảo ứng dụng tải nhanh và có thể dùng khi không có mạng, đồng thời các hiệu ứng chuyển đổi diễn ra mượt mà trên thiết bị di động.
Những điểm có thể cải thiện
Điểm trừ duy nhất mà chúng tôi có thể đưa ra 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 đáp với Jake Archibald
Tại sao nên chọn web?
Lười biếng. Tổng sự lười biếng. Tôi không phải là chuyên gia phát triển ứng dụng gốc cho Windows, cũng không phải là chuyên gia về ứng dụng gốc cho OSX, cũng không phải là 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à bộ kỹ năng đó cho phép tôi tạo một sản phẩm một lần hoạt động trên tất cả các nền tảng đó.
Điều gì đã thực sự hiệu quả trong quá trình phát triển?
Tôi rất hài lòng với hiệu suất của ứng dụng này. Tôi đảm bảo trang hiển thị trước khi JS có sẵn. Trên thực tế, lần hiển thị đầu tiên chỉ có 5k HTML với một số CSS và SVG nội tuyến. Tất cả tập lệnh chính và CSS đều được tải ở chế độ nền. Điều này có nghĩa là trang web sẽ tải trong 1,5 giây ngay cả khi ở chế độ 3G với bộ nhớ đệm trống, và hầu hết là DNS và SSL.
Màn hình mở đầu rất đơn giản, vì vậy việc làm điều đó ở độ phân giải 5K không phải là một thử thách. Tôi thực sự lo ngại khi có quá nhiều trang web chờ JS để hiển thị lần đầu tiên, một số trang web thậm chí còn yêu cầu JS thực hiện các yêu cầu khác trước khi hiển thị. Điều này đẩy thời gian kết xuất 3G lên gần 10 giây – với tư cách là người dùng thiết bị di động, tôi biết rằng mình sẽ không chịu đựng được điều đó.
JS chính có kích thước 15k, nhưng không bao gồm các phần phân tích cú pháp và rút gọn SVG, được tải dưới dạng một giai đoạn bổ sung ở chế độ nền. Điều này rất tuyệt vì tính tương tác sẽ xuất hiện rất nhanh và người dùng sẽ không nhận thấy quá trình tải thêm. Nếu người dùng chọn một SVG 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 để toàn bộ ứng dụng hoạt động khi không có mạng. 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 việc này để cải thiện hiệu suất. Các lượt truy cập tiếp theo vào SVGOMG sẽ hiển thị gần như tức thì, bất kể người dùng có kết nối nào. Do sự khác biệt về khả năng kết nối trên thiết bị di động, điều này thực sự có giá trị!
Nếu bạn có thể sử dụng bất kỳ API nào để cải thiện ứng dụng của mình, thì đó sẽ là API nào?
Tôi đã sử dụng Babel để có thể tận dụng các tính năng JavaScript trong tương lai. Thật tuyệt vời nếu một số tính năng đó hoạt động nguyên gốc trong nền tảng. Cụ thể là tính năng không đồng bộ/chờ, hàm mũi tên, đối số mặc định và giải cấu trúc.
Tôi phải sử dụng một thư viện để nén đầu ra bằng gzip để tìm hiểu kích thước nén của đầu ra đó. Việc sử dụng thư viện cho việc này khá phiền phức vì mã đó đã có trong trình duyệt cho các nội dung HTTP, chỉ là không có API cho mã đó. Lý tưởng nhất là một loại luồng biến đổi để tôi có thể tính kích thước đầu ra mà không cần lưu toàn bộ vào bộ nhớ.