요약
SVGOMG: SVGO를 위한 멋진 머티리얼 반응형 프런트엔드입니다.
어떤 점이 마음에 드시나요?
자체 제이크 아치볼드가 빌드한 SVGOMG는 웹 기술로 작성된 완벽한 반응형 및 기능을 갖춘 도구의 예시입니다. 멋진 Material Design 디자인을 갖추고 있으며 ServiceWorker가 앱을 빠르게 로드하여 오프라인에서 사용할 수 있도록 하며 모바일에서 전환이 원활하게 이루어지도록 합니다.
가능한 개선사항
정말 중요한 점은 기본 UI가 누락되어 초기 UX가 혼란스럽다는 것입니다. 그 외에는 잘하셨어요!
제이크 아치볼드와의 Q &A
왜 웹일까요?
게으름. 완전 게으름이네요. Windows 네이티브 앱 개발 전문가도 아니고, OSX 네이티브 앱 전문가도 아니고, iOS, Android, Windows Phone 또는 Linux용 네이티브 앱 제작 전문가도 아닙니다. 하지만 웹을 만들 수도 있고, 하나의 기술 세트를 통해 모든 플랫폼에서 효과가 있는 무언가를 한 번만 빌드할 수 있습니다.
개발 중에 가장 잘한 것은 무엇이었나요?
성능에 매우 만족합니다. 자바스크립트가 제공되기 전에 페이지가 렌더링되도록 합니다. 실제로 처음에 일부 인라인 CSS 및 SVG를 사용하여 5K의 HTML로만 렌더링됩니다. 기본 스크립트와 CSS는 모두 백그라운드에서 로드됩니다. 즉, 사이트가 빈 캐시가 있는 3G에서도 1.5초 이내에 로드되는 것으로 보이며, 대부분은 DNS 및 SSL입니다.
시작 화면은 매우 간단해서 5K로는 어렵지 않았습니다. 많은 사이트가 첫 번째 렌더링을 위해 JS를 대기하고 일부 사이트는 렌더링 전에 JS에 추가 요청을 해야 한다는 점이 정말 성가십니다. 이로 인해 3G 렌더링 시간이 10초로 밀려납니다. 모바일 사용자로서는 참지 못할 겁니다.
기본 JS는 15k이지만, 백그라운드에 추가 단계로 로드되는 SVG를 파싱하고 축소하는 부분은 포함되지 않습니다. 상호작용이 매우 빠르게 이루어지고 사용자가 추가 로드의 영향을 알아차리지 못하기 때문에 유용합니다. 스크립트가 사용 가능해지기 전에 사용자가 SVG를 선택하게 되면 스크립트 로드가 처리 시간의 일부인 것처럼 보입니다.
또한 ServiceWorker를 사용하여 모든 것이 오프라인으로 작동하도록 만들었습니다. 오프라인 작업은 꽤 유용한 기능이지만 저는 주로 성능을 위해서 하고 있습니다. 이후에 SVGOMG에 방문하면 사용자의 연결 상태에 관계없이 거의 즉시 렌더링됩니다. 모바일 연결의 변화를 감안할 때 이는 매우 가치 있는 일입니다.
앱을 개선할 수 있는 API가 있다면 어떤 API를 원하시나요?
나중에 JavaScript를 활용할 수 있도록 Babel을 사용했어요. 이러한 기능 중 일부가 플랫폼에서 기본적으로 작동하면 좋을 것입니다. 구체적으로는 async/await, 화살표 함수, 인수 기본값, 디스트럭처링입니다.
gzip으로 압축된 크기를 알아내기 위해 라이브러리를 사용하여 출력을 gzip으로 압축해야 했습니다. 이를 위해 라이브러리를 사용하는 것은 코드가 이미 HTTP 관련 브라우저에 있고 API가 없기 때문에 성가십니다. 메모리에 전체가 없어도 출력 크기를 계산할 수 있도록 일종의 변환 스트림이어야 합니다.