Zusammenfassung
SVGOMG: Ein schönes, Material-responsives Frontend für SVGO.
Was gefällt uns?
SVGOMG wurde von unserem eigenen Jake Archibald entwickelt und ist ein nahezu perfektes Beispiel für ein vollständig responsives und leistungsfähiges Tool, das mit Webtechnologien erstellt wurde. Sie hat ein ansprechendes Material Design-Aussehen, ServiceWorker sorgt dafür, dass die App schnell geladen wird und offline verfügbar ist, und die Übergänge auf Mobilgeräten sind flüssig.
Mögliche Verbesserungen
Der einzige wirkliche Kritikpunkt, den wir haben, ist, dass die anfängliche UX aufgrund der fehlenden Haupt-UI verwirrend ist. Ansonsten gute Arbeit!
Fragen an Jake Archibald
Warum das Web?
Faulheit. Faulheit pur. Ich bin kein Experte für die Entwicklung nativer Windows-Apps, OSX-Apps oder nativer Apps für iOS, Android, Windows Phone oder Linux. Ich kann jedoch Webentwicklung und mit diesen Kenntnissen kann ich einmal etwas entwickeln, das auf all diesen Plattformen funktioniert.
Was hat während der Entwicklung wirklich gut funktioniert?
Ich bin sehr zufrieden mit der Leistung. Ich achte darauf, dass die Seite gerendert wird, bevor JS verfügbar ist. Tatsächlich wird es zuerst mit nur 5 KB HTML mit einigen Inline-CSS- und SVG-Elementen gerendert. Die Hauptscripts und das CSS werden im Hintergrund geladen. Das bedeutet, dass die Website selbst bei 3G mit leerem Cache in 1,5 Sekunden geladen wird.Der Großteil davon entfällt auf DNS und SSL.
Der Startbildschirm ist sehr einfach, daher war es keine Herausforderung, ihn in 5K zu erstellen. Es stört mich wirklich, dass so viele Websites für das erste Rendern auf JS warten. Einige erfordern sogar, dass JS weitere Anfragen vor dem Rendern stellt. Das erhöht die 3G-Renderingzeit auf etwa 10 Sekunden. Als Nutzer eines Mobilgeräts würde ich das nicht akzeptieren.
Das Haupt-JS ist 15 KB groß, enthält aber nicht die Teile, die das SVG parsen und minimieren, das als zusätzliche Phase im Hintergrund geladen wird. Das ist toll, weil die Interaktivität sehr schnell angezeigt wird und der Nutzer das zusätzliche Laden nicht bemerkt. Wenn der Nutzer ein SVG auswählt, bevor dieses Script verfügbar ist, wird das Laden dieses Scripts offenbar als Teil der Verarbeitungszeit betrachtet.
Außerdem habe ich ServiceWorker verwendet, damit das Ganze auch offline funktioniert. Die Offlinefunktion ist eine ziemlich coole Funktion, aber ich verwende sie hauptsächlich aus Leistungsgründen. Bei nachfolgenden Besuchen von SVGOMG werden die Bilder fast sofort gerendert, unabhängig von der Verbindung des Nutzers. Angesichts der unterschiedlichen Mobilfunkverbindungen ist das wirklich wertvoll.
Welche API würden Sie verwenden, um Ihre App zu verbessern?
Ich habe Babel verwendet, damit ich zukünftige JavaScript-Funktionen nutzen kann. Es wäre toll, wenn einige davon nativ auf der Plattform funktionieren würden. Insbesondere async/await, Pfeilfunktionen, Standardargumente und Destrukturierung.
Ich musste eine Bibliothek verwenden, um die Ausgabe zu gzippen und die Größe zu ermitteln. Die Verwendung einer Bibliothek dafür ist etwas mühsam, da dieser Code bereits für HTTP-Aktivitäten im Browser vorhanden ist, es gibt nur keine API dafür. Idealerweise sollte es sich um eine Art Transformierungsstream handeln, damit ich die Größe der Ausgabe berechnen kann, ohne das gesamte Objekt im Arbeitsspeicher zu haben.