praegnanz.de büro für intervernetzte medien

Gerrit, 13.05.2011

Das Aside Magazin auf dem iPad …

… oder der vorläufige Beweis, dass man mit reiner HTML5-Technologie ein ebenso reichhaltiges multimediales Coffeetable-iPad-Magazin produzieren kann wie mit nativen Methoden, nur gefühlte 800 Prozent langsamer.

Schick ist sie ja in der Tat, die Nullnummer von Aside, einem Projekt von zwei Berliner Designern. Alle branchenüblichen Magazin-Technik-Spielereien sind vorhanden. Guckt man sich das Promovideo an, kann man das angepriesene Produkt fast nicht von einer aktuellen WIRED-Ausgabe unterscheiden. Der Knackpunkt: Das Magazin ist keine App aus dem App-Store, sondern eine reguläre (wenn auch hochgradig gepimpte und spezialisierte) Website, die mit HTML5-Technologien gebaut wurde. Genau der heilige Gral, den wir Webstandardistas seit Jahren predigen: Wozu Objective-C und proprietäre Appstore-Scheiße? Geht doch auch alles mit HTML5, CSS3 und JavaScript, Mann! Und läuft dann auch automatisch auf allen Browsern … Jaja, so sind wir.

Aside sieht richtig (richtig!) schick aus, aber es fühlt sich an wie Windows XP auf einem Pentium 60 mit 32 MB Arbeitsspeicher: Ruckelig ohne Ende, zumindest auf dem iPad 1. Auf dem iPad 2 geht es zwar merklich besser, erreicht aber niemals auch nur ansatzweise die Flüssigkeit von nativen Anwendungen wie beispielsweise der Frankfurter Rundschau. Doch daran muss man sich in der Realität messen lassen. Die Faszination am iPad entsteht unter anderem, weil der Nutzer keine Rücksicht auf die Technik nehmen muss. Doch bei Aside wird selbst meine Rücksicht auf eine harte Probe gestellt:

Damit wir uns nicht falsch verstehen: Jemand musste es probieren! Und ich hätte es liebend gerne auch selber probiert! Aber das Experiment ist in seiner jetzigen Form auf Messers Schneide. Drei Fragen spielen eine Rolle:

  1. Kann man es vertreten, dass das Magazin nur auf zukünftigen Geräten akzeptabel läuft?
  2. Kann man durch Code-Optimierungen an der jetzigen Form des Magazins noch merklich Performance rausholen?
  3. Ist das Magazin einfach nur über-designed und könnte mit schlichterem Layout wesentlich flüssiger funktionieren?

Und dahinter steckt die alles entscheidende Frage, die ich mich noch nicht zu beantworten getraue: Sollte man Aside als Beweis für die derzeitige Unmöglichkeit eines HTML5-basierten Magazines interpretieren oder als ersten handfesten Beweis der prinzipiellen Möglichkeit?

(Jedenfalls ahne ich gerade, warum die meisten nativen Magazine auf vorgerenderte Texte in Bitmap-Form zurückgreifen. Hier wird massiv Speicher zugunsten von Performance eingetauscht – eine Kosten-Nutzen-Rechnung ohne Rücksicht auf Semantik oder Code-Eleganz. Offenbar ist dynamisches Fontrendering eine anspruchsvolle Tätigkeit für den schmalbrüstigen ARM-Prozessor des iPads.)

update Dezember 2011: Dank der verbesserten JavaScript-Engine unter iOS5 und kleineren Optimierungen des Codes läuft Aside unter dem alten iPad 1 inzwischen etwas flüssiger!

21 Kommentare

  1. steve am 14. Mai 2011 #

    Ist es nicht eine ausgeklügelte Strategie Apples, dass man den schnellen Rendermodus nur dem Browser selbst vorbehält, damit man einen »Wir stehen total auf offene Standards«-Strohmann für PR-Zwecke hat; aber die Entwickler zwingt die proprietären Werkzeuge zu benutzen, sobald man mehr als eine Spielerei machen will?

    Von daher doch eigentlich nicht überraschend.

  2. Martin am 14. Mai 2011 #

    Mh, Eigenentwicklung oder abhängig von den freien Scripten anderer? Lassen sich ja nur schwer in die Karten schauen.

    3. So flüssig wie native Apps. Das Problem ist die Komplexität.

  3. Oliver Schwarz am 14. Mai 2011 #

    Guter Artikel. Bin derselben Meinung. Wenn man die Anwendungen nicht zu komplex werden läßt, kann man m.E. schon sehr gut mit HTML5-Frameworks arbeiten. Ein Beispiel aus der Praxis: die 360ties-App (einfach mal im App-Store nach »360ties« suchen) ist z.B. auf Basis von Sencha Touch und eigenen Scripten erstellt worden. Hier haben wir grossformatige 360-Grad-Ansichten integriert, die von der Performance her sehr flott laufen – auch als reine Web-App.

  4. simonnickel am 14. Mai 2011 #

    Also ich seh das als Machbarkeitsstudie und bin begeistert, dass das schon so gut funktioniert! Das bisschen Geruckel wird sich mit der Zeit schon legen. Damit Apple da ein wenig optimiert muss einfach ein wenig Druck gemacht werden, dieses ganze Konzept WebApp muss irgendwo funktionieren damit Apple nachziehen muss. Das funktioniert aber nicht, wenn das Projekt nur auf das iPad beschränkt ist. Da müssen mehr Plattformen her!

    Google könnte da eine wichtige Rolle spielen, mit Chrome OS und dem WebApp Store, aber ich denke die wollen auch eher ein etwas geschlosseneres System.

  5. Alex am 14. Mai 2011 #

    Schoener Artikel. Gab es seit iOS nicht ein Problem mit Webapps auf dem Homescreen? (Glaub da wurde nicht die schnellere Javascript Enige benutzt) Kannst du mal direkt in Safari versuchen?

  6. erlehmann am 14. Mai 2011 #

    Gute Sache. Aber was nutzt mir als Nutzer (und Webentwickler) das ganze schöne HTML, CSS und Javascript, wenn ich mir das mit dem Desktop-Browser nicht anschauen kann?

  7. Gerrit am 14. Mai 2011 #

    @steve & @simonnickel: Ich würde Apple da nicht zuviel Boshaftigkeit unterstellen. Es gibt sicherlich technische Gründe, warum eine interpretierte Scriptsprache mit sehr vielen Abstraktionsebenen zwischen Code und Ergebnis nicht so gut performt wie eine kompilierte native Programmierung…

    @Alex & @erlehmann: Ja, das wundert mich auch, dass man das ausschließlich auf dem Homescreen als WebApp angucken kann. Die Möglichkeit des Testens im Browser wäre nett und aufschlussreich (bez. schnellere JS-Engine, obwohl sich das Thema sicher mit einem Update erledigen wird, denke ich)

  8. simonnickel am 14. Mai 2011 #

    Ich wollte Apple damit gar keine Bösheit unterstellen, aber es ist ja offensichtlich, dass das Konzept WebApp ihrem Geschäftsmodell nicht ganz zuträglich ist. Würde das anders aussehen würden wir bestimmt monatlich neue Javascript Benchmarks für den iPad Safari sehen (so wie für andere Browser auch). Da kann Apple bestimmt noch Performance herausholen.

  9. Ti am 14. Mai 2011 #

    Wirklich schick.

    Ich denke, ein Hauptproblem, mit dem auch diese App zu kämpfen hat, liegt darin, dass man nicht fix positionieren kann und so zu simulierten js-Scroll gezwungen wird, was extrem imperformant zu seien scheint. Vermutlich deswegen ist es ja auch nicht mehr in jQuery mobile drin, stattdessen werden die fixen Elemente nur angezeigt, wenn gerade nicht gescrollt wird. jQtouch hingegen benutzt es. Oder gibt es noch mehr Unterschiede von diesem Magazin zu flüssig scrollenden ›normalen‹ websites…?

    Ich hoffe, dem wird bald begegnet, indem fixe Positionierung doch zugelassen wird(vllt mit iOS5?). Auch wenn das iPad 2 nun schnell genug ist, ist simuliertes Scrollen ja trotzdem nicht schön.

    Ich plane auch, mich an einem Magazin zu versuchen, aber ich denke, ich werde auf baker/laker und/oder jquery mobile setzen und simuliertes Scrollen vermeiden und hoffen, dass es dann ausreicht.

    Auf andere Performance-Optimierungen kann man ja auch durchaus mit html5 eingehen, etwa mehr vorgerenderte Elemente, bis auf den Fließtext. Vielleicht gibt es ja noch eine andere clevere Art der Navigation, die nicht fixe Elemente und seitwärts-scrollen voraussetzt?

  10. Willi am 14. Mai 2011 #

    @steve: Das ist Quatsch. Bis iOS4.2 war Mobile Safari ein sehr schneller Browser, egal ob direkt in der App oder über einen Link auf dem Homescreen. In iOS4.3 hat Apple dann die Javascript-Engine extrem beschleunigt, damit Mobile Safari noch schneller läuft. Dazu wird der Javascript-Code während der Laufzeit kompiliert und benötigt spezielle Zugriffe auf den Arbeitsspeicher, was aber eigentlich nicht in das Sicherheitskonzept von iOS passt. Deshalb ist diese schnellere Javascript-Engine nur in Mobile Safari aktiviert (weil es halt eine Apple-App ist), nicht aber in der UiWebView-Komponente für andere Apps. Web-Apps, die auf dem Homescreen gespeichert werden, sind keine einfachen Links zu Mobile Safari, sondern Mini-Apps, die auch UiWebView zur Darstellung verwenden und deshalb ebenfalls auf die schnellere Javascript-Engine verzichten müssen.

    Apple hat also Web-Apps nicht ausgebremst, sondern Mobile Safari beschleunigt. Web-Apps laufen mit der gleichen Geschwindigkeit, die es vor iOS4.3 gab. Daran wird sich nur etwas ändern, falls Apple in iOS5 das Sicherheitssystem anpasst. Es ist absurd, gerade dem Unternehmen vorzuwerfen gegen Web-Standards zu sein, das eine der treibenden Kräfte hinter der Unterstützung von modernen Webstandards wie HTML5 und CSS3 ist. Wollte Apple wirklich Web-Apps zugunsten des App Stores verkrüppeln, dann hätte es wie Microsoft iOS mit einem völlig veralteten Browser ausgestattet und nicht mit einem der modernsten auf dem Markt.

    @Gerrit: Ich habe mir gerade dein Video angesehen. Verstehe ich richtig, dass die Web-App die Daten jedes Mal neu aus dem Web lädt und keine lokalen Daten anlegt? Wenn ja, warum? Dafür würde sich das HTML5 Local Storage doch ideal anbieten!

  11. Anselm h. am 14. Mai 2011 #

    Ich muss sagen, ich verstehe es noch nicht ganz, warum das Magazin derart langsam ist.
    Ich habe bereits einige HTML5 Seiten für iOS gebaut, darunter auch für iPad Magazine einige Erweiterungen. Diese nutzen ebenfalls die langsame JavaScript Engine. Dennoch geht es bei normalen Inhalten relativ flott und flüssig.
    Ich habe mir noch keinen Code angesehen, aber ich glaube, dass durch z.b. Einsatz von sencha Touch o.ä. Diese Probleme entstehen könnten. JavaScript Methoden sind, da nicht hardwarebeschleunigt, schnell ein problemfaktor.
    Bis es dafür Abhilfe gibt, wird es bestimmt noch länger als iOS 5 dauern, denn bisher schaut es mit der dafür benötigten webkit2 Engine noch nicht sonderlich gut aus.

  12. Sleepy am 15. Mai 2011 #

    Ja es ist langsam, aber so schlimm find ichs gar nicht. Wenn man wirklich das Magazin liest und nicht nur durchflippt, dann stört die Geschwindigkeit gar nicht so.

  13. steve am 15. Mai 2011 #

    @Willi: »Es ist absurd, gerade dem Unternehmen vorzuwerfen gegen Web-Standards zu sein, das eine der treibenden Kräfte hinter der Unterstützung von modernen Webstandards wie HTML5 und CSS3 ist.«

    Äh … video-Tag? Nur mal als Beispiel, dass Apple sich gerne als Retter des Abendlandes aufspielt, wenn es damit anderen (Adobe) schaden kann, aber recht schnell zickig wird, wenn nicht jeder ihre proprietäre Nischenlösung mittragen will.

  14. fwolf am 15. Mai 2011 #

    Offtopic: Ich find das Getränk durchaus sehr schick – lass dir nichts anderes einreden, Gerrit :D

    cu, w0lf.

  15. Ruben am 16. Mai 2011 #

    Also auf dem iPad 2 sind mir keine Geschwindigkeitsprobleme aufgefallen; läuft alles rund.

    Als Problem sehe ich eher, dass es bei einer Web-App schwieriger und unkomfortabler ist, für ein Magazin zu bezahlen. Als Content-Provider habe ich die Wahl, ob ich zu Apple gehe und mich um nichts kümmern muss und direkt das Geld bekomme, oder ob ich ein Abrechnungsmodell und einen Schutz vor Nicht-Bezahlern selbst stricken muss.
    Was im Web ist, ist ja erstmal jedem offen, egal ob er Abonnent ist oder nicht.

  16. Martin am 18. Mai 2011 #

    Wollte mal ausloten ab wann es zu ruckeln anfängt: Nach 240 Bilder (800×500px) + 340.000 Zeichen Text gleichmässig auf 40 Seiten verteilt habe ich es aufgegeben… Also Bilder und Textrendering ist wohl kein nennenswerter Faktor. (Mit freien Scripten und Ipad1)

  17. Andreas am 2. Juni 2011 #

    Zu Deinem 1. Punkt: Man muss sogar mal anfangen bei solchen Dingen nur noch moderne Geräte zu unterstützen. Die alten Gurken zu unterstützen schadet dem Fortschritt und kostet zuviel (Entwickler-)Zeit.
    Nun so merken die Menschen, dass Sie einfach nur den Browser aktualisieren müssen (kostenlos) und schon leuchtet die schöne Multimediawelt.

    Nur die neusten Geräte zu unterstützen ist natürlich schwieriger. Bei den Pads reden wir ja von einen neuen Kategorie ;)

    Viele Grüße Andreas

  18. Gerrit am 2. Juni 2011 #

    @Andreas: Vor allem reden wir beim iPad von einem Gerät, das erst vor einem Jahr auf den Markt gekommen ist, nicht von einem IE6-verseuchten Aldi-PC von 2003!

  19. Jürgen H. am 25. Januar 2012 #

    Leider hab ich den Artikel etwas spät gefunden. Solche Sachen erinnern mich an mein eigenes Studium und machen schon allein deswegen Laune…

  20. Philipp am 17. Oktober 2012 #

    Absolut Beeindruckend. Auf iOS6 und iPad 2 wirklich sehr brauchbar.
    Wenn nun noch das »nachscrollen« funktionieren würde, hätte ich kaum einen Unterschied zwischen App und WebApp bemerkt.

    Well done!

  21. Ben am 2. November 2012 #

    Ich denke dass die HTML5 Apps einfach noch einmal zwei drei Jahre Zeit brauchen, bis die Prozessoren und noch wichtiger die mobile Internetanbindungen so schnell geworden sind, dass auch eine Zeitung ruckelfrei auf dem Tablet gelesen werden kann. Bis dahin bleibt für mich die native App die ungeschlagene Nummer eins!

Kommentar schreiben

Nutzt Textile zum Strukturieren eures Textes.
SEO-Beiträge werden gelöscht, auch bei thematisch passendem Spam.