Mobiles Webdesign (ohne spezifische OS)

[benneq]

Ich selbst habe immernoch keinen schönen Weg gefunden, um eine Webapplikation (also keine stupide HTML Seite) einfach für mehrere Geräte umzusetzen... In den kommenden Wochen wird das GWT Framework gwt-platform in Version 1.0 rauskommen, mal schauen wie die das gelöst haben.

Was mich stört:
- CSS media querys: Es blendet nur aus und gestaltet um, aber wenn ich irgendwo AJAX benutze, wird es trotzdem ausgeführt
- Normale JS Lösung: Sehr viel if-else geschachtel. Klar könnte man damit die AJAX calls unterbinden, aber das könnte schnell zu sehr hässlichem Code führen

Und wenn die Designs für Smartphone und Desktop sich zu sehr unterscheiden sollten, hat man eh 2 mehr oder weniger komplette Webseiten zu programmieren.

-----

Ich habe schon vor geraumer Zeit von 'normalen' Webseiten Abstand genommen, da mir das Feeling einer AJAX/JS basierten Applikation wesentlich mehr zusagt. Schön geschmeidig und flott, animiert, etc... Daher bin ich inzwischen beim universellen Weg angekommen: Daten per REST-API und die Applikation selbst mit GWT. Allerdings sieht GWT by default auch aus wie eine Applikation (im Windows 95 Stil) Da muss man dann schon wieder sehr viel selbst Hand anlegen und Zeit in CSS investieren. Abgesehen davon, dass die Unterstützung von HTML5 mau ist - aber wenn man unbedingt will, kann man es natürlich verwenden.
Insgesamt finde ich GWT sehr sehr schön zur Entwicklung. Das 'Problem' ist halt wirklich nur die Unterstützung von Formfactors und HTML5. Abgesehen von diesen beiden Punkten ziehe ich GWT jedem(!) JS Framework vor, weil sich damit viel übersichtlicher und sauberer entwickeln lässt.

(btw: GWT 2.5.1 ist draußen! )

-----

Abgesehen davon: Ich würde mir auch nicht mehr die Mühe machen, mich in 3 (oder noch mehr) Frameworks einzuarbeiten, um irgendwelche Daten aus dem Netz darzustellen. D.h. ich würde eine native Applikation nur dann entwickeln, wenn es performancekritisch ist oder sich irgendwelche Features nicht in HTML/JS umsetzen lassen. Für alles andere ist es verschwendete Zeit.

 

[Elcrian]

Hallo zusammen,
wao, danke für die Antworten. Scheint ja doch ein aktuelles Thema zu sein.

Ich habe mich nun definitiv für die Entwicklung (bzw.: Das Einarbeiten, darum geht es erst einmal) in einem HTML5/CSS3/JS-Framework unter PhoneGap entschieden, da es einfach eklatant flexibler wirkt - ich plane nicht in die Spiele-Branche zu gehen und brauche daher eigentlich die native Geschwindigkeit nicht (auch wenn sich das zeigen wird).

Ich habe nur noch das Problem, dass ich mich für kein Buch entscheiden kann - ich bin so ein Mensch der auf Papier ließt und ein Buch stellt sich oft als inhaltlich wertvoller raus als Web-Tutorials (jedenfalls für einen Einstieg, das Ganze ist ja doch recht komplex).
Hat jemand daher Erfahrungen mit einem dieser beiden Vertreter?

Apps mit HTML5 und CSS3: für iPad, iPhone und Android (Galileo Computing)
HTML5-Programmierung von Kopf bis Fuß: Webanwendungen mit HTML5 und JavaScript (die Reihe kenne ich sogar, wirkt kindisch, didaktisch aber sehr wertvoll)

Zum Thema GWT: Ich kenne GWT, habe damit bis vor etwas mehr als einem Jahr auch noch aktiv gearbeitet - sehr interessantes System und durch die Java + HTML + CSS Kombo an sich schön mit zu Arbeiten (OOP!), aber: Technisch irgendwie auf einem Stand von anno tuck. Responsive war da gar kein Thema (afair nicht mal nicht-statische Größen), externe JS-Bibliotheken wie jQuery Mobile einbinden war de facto nur über irre Umwege möglich und die Performance war auch mehr in Richtung Win95 - leider!

 

[benneq]

Die Performance von GWT ist doch spitze?! Man kann/darf/soll es halt nicht für mini-Anwendungen benutzen. Wenn du damit nur ein "alert('hallo');" machst, dann ist GWT sau lahm - korrekt! Weil es noch Unmengen an Browserweichen, Widgets - und was man sonst noch brauchen könnte - mitliefert. (Ja, Google sagt, dass es nichts mitkompiliert, was nicht benötigt wird, aber das kann ich nicht bestätigen ) Aber sobald es an die 500kb (komprimierter JS Code) werden, merkt man deutlich die Vorteile.

GWT selbst kann ja auch nicht responsive sein. Es ist ein stupides JS Framework. Nicht mehr, nicht weniger. Das ist wie wenn du sagst "jQuery ist nicht responsive". Ist auch korrekt. In beiden Frameworks musst du dir selbst deinen ResizeHandler bauen, der auf die Größenänderung reagiert. Und das mit den "nicht-statischen" Größen ist natürlich auch Quatsch: Du kannst deine Größenangaben in allen von CSS unterstützten Einheiten machen (z.B. em oder %).
Und jQuery Mobile möchte(!) man ja auch gar nicht einbinden, weil das den kompletten jQuery-Stack mit sich bringt und man damit dann quasi die GWT Funktionalität doppelt vorliegen hat. Und DAS ist der Nachteil: Damit das ganze sauber und ordentlich UND performant läuft, müsste man jQuery Mobile unter Verwendung der GWT Klassen und Methoden nachbauen. Aber klar, das wäre auch mir zu viel Arbeit ...
Aber es gibt natürlich auch für GWT Mobile-Bibliotheken - auch mit PhoneGap Unterstützung - z.B.: https://code.google.com/p/gwtmobile/

P.S. Wer hätte Interesse an einem JavaScript-Zombie-Film? Ich nenne ihn Resident eval()

 

[Elcrian]

Hallo nochmal,
ich habe mich heute den ganzen Tag über versucht (und leider blieb es dabei) mich in Sencha Touch einzuarbeiten - irgendwie alles nicht so wirklich intuitiv und gerade im Hinblick auf die MVC-Geschichte für mich gruselig. Anders gesagt: Wie ich mich auch anstelle, ich kriege irgendwie keinen Durchblick.
Wenn es nur darum geht, einfach HTML anzuzeigen bzw. Standard-Funktionen wie die Tab-Panel zu benutzen, das ist simpel, genauso wie man so etwas wie das fetchen eines JSON-Strings (e.g. von Twitter) recht einfach nachvollziehen kann. Aber darüber hinaus...

Vielleicht kann mir daher jemand ein paar Fragen beantworten bzw. auf konkrete Stellen in den Docs verweisen?

1. Wie füge ich Daten für ein von mir definiertes Model via Button einer "Storage" hinzu?
2. Wie speichere ich diese Storage perisent lokal ab?
3. Wie kann ich Sie mit einem Server synchronisieren?

@benneque: GWT-mobile wird doch gar nicht mehr entwickelt.

 

[Madman1209]

Hi,

hast du dir den Quellcode in den Beispielen schon mal angeguckt? Da sind doch relativ viele Punkte schon erklärt oder? War zumindest bisher eigentlich immer so...

Aber: "Persistent lokal abspeichern"? Auf die Platte schreiben? Aus JavaScript? Geht nicht direkt, da JS nicht aus der Browser-Sandbox rauskommt, auf ein Dateisystem schon gar nicht!

Und: "mit einem Server Synchronisieren"? Was verstehst du darunter? Schick dem Server deine Daten und der speichert sie dann - wo genau ist das Problem?

VG,
Mad

 

[ice-breaker]

@Madman: man kann schon lange persistent Daten mit JavaScript abspeichern, dafür gibt es die HTML5 Storage APIs. Man kann sogar mit der filesystem API mitlerweile ein ganzes virtuelles Dateisystem haben.

 

[carom]

Genau, und zur not gibt es für Sencha Touch noch einen SQLite-Proxy für größere Datenmengen.

 

[Madman1209]

Hi,

ok dann habe ich mich vielleicht nicht klar ausgedrückt. Zum Ausdruck bringen wollte ich: Einfach direkt ohne weiteres lässt es sich von JavaScript alleine aus nicht auf das Dateisystem des Rechners zugreifen.

Dachte das wäre anhand der Formulierung klar:

Geht nicht direkt

VG,
Mad

 

[ZeRoWaR]

Hey,
Ich stehe in etwa vor einem selben Problem hinsichtlich der storage Möglichkeiten siehe: Website als lokale App / App

Das Problem ist aber vor allem die Dokumentation, HTML5 ist erst im kommen, viele Features sind noch nicht 100% Teil des Standards, zumal es auf die jeweiligen Browser ankommt.
Sicher gehst du aber, wenn du dich für eine Methode entscheidest die selbst mit dem IE10 kompatibel ist!
Was dieser schafft, geht auch bei Chrome, Firefox, Opera, Safari, ChromeMobile usw.

Für Sencha Touch könnte dir dies vielleicht weiterhelfen: SQLite Proxy for ST

Pass auf welche Methode du nimmst, vieles dass Dokumentiert vorzufinden ist wurde oft schon wieder verworfen, oder wird noch verworfen! Suche Zeitnahe Blog-/Forum-/Website-Einträge zum Thema.

Die PDF's/Bücher bieten nicht ansatzweise einen Mehrwert, oder Hilfe für jemanden der schon Erfahrung mit HTML/CSS/Javascript besitzt, für jemanden der eine Programmiersprache erlernt hat sind diese Bücher nur Heitzmaterial, zumal das einzige das eben wichtig wäre, weil es relativ gut dokumentiert ist, sind die Storage Möglichkeiten, welche aber zu veraltet sind und nicht größere Datenmengen anpeilen, oder nur Video/Audio Dateien im Webplayer Format.
Alles andere ist besser/übersichtlicher auf 1000en Seiten im Netz dokumentiert.

Für die Basics reicht: http://www.html5rocks.com/en/
Für mehr: http://www.codeproject.com

Einfache Storage Erklärungen:
http://www.html5rocks.com/en/tutorials/offline/storage/
http://www.html5rocks.com/en/tutorials/file/filesystem/ <-- siehe Kommentare...

Gutes Anwendungsbeispiel für Local Storage und Anreize an mehr -> IndexedDB(veraltet) http://blogs.msdn.com/b/davrous/arc...t-2-offline-api-drag-n-drop-amp-file-api.aspx

Ansonsten bleib bei den Frameworks von Sensa Touch/Jquerymobile und dir wird sehr viel erspart, da deine Webapp wirklich überall zum Einsatz kommen kann und überall gleich aussieht/funktioniert.

Wer neue Erkenntnisse (Stand: Ende 2012/2013) hat bitte PN/Posten Whatever.

Edit: ansehenswert: http://jaydata.org/ entnommen aus der Liste: http://stackoverflow.com/questions/6786307/which-javascript-orm-to-use
Hier mal ein online/offline Beispiel in dem Daten synchronisiert werden: How to create a synchronized Online/Offline data application with EntityFramework, JavaScript and JayData

 

[ice-breaker]

Wer neue Erkenntnisse (Stand: Ende 2012/2013) hat bitte PN/Posten Whatever.

Html5rocks ist so das aktuellste Werk über die HTML5 APIs, da wird es nur selten irgendwelche neueren Blog Posts geben.

Edit: ansehenswert: http://jaydata.org/ entnommen aus der Liste: http://stackoverflow.com/questions/6786307/which-javascript-orm-to-use
Hier mal ein online/offline Beispiel in dem Daten synchronisiert werden: How to create a synchronized Online/Offline data application with EntityFramework, JavaScript and JayData

Wer sich bei der Synchronisation natürlich auf ein ORM versteift, ist schon angesch*****. Man ist eben auf Gedeih und Verderb an das ORM-Framework ausgeliefert. Es gibt aber noch dutzende andere Frameworks die Synchronisation anbieten: Backbone.js, Ember.js, Angular.js, Knockout.js und und und.
Aber das sind eben eigene Frameworks, die dann nimmer mit Sencha zusammenarbeiten.


Wer in dem Bereich etwas basteln will, muss sich eben erst einmal gründlich über alles informieren und dann zwischen den Optionen abwägen. Es finden sich für alles aktuelle Informationen im Netz. Eventuell wird man eben auch selbst mal etwas basteln müssen, es ist ja nicht so, dass die vorhandenen Frameworks immer für den eigenen Einsatzweck passen.

 

[Elcrian]

Hallo,
danke nochmal für die Antworten. Ja, ich meinte den neuen Local Storage von HTML5 in Form von Sencha/JS.

Ich hatte die Tage nicht wirklich Zeit und Nerven dafür, habe aber noch mal ein wenig gebastelt. Zum Thema "Local storage" fand ich dies, fand ich sehr hilfreich.

Trotzdem: Ein Fan vom System "Sencha" bin ich immer noch nicht. Erinnert mich an Android 2.x auf 4.x (hier ist es Sencha 1.x auf 2.x) - erfindet sich wohl andauernd neu und ist ohne Lizenz nicht wirklich freundlich (kein Code Assistant / IDE, nicht viel Support) - okay, kann man einem kommerziellen Produkt nicht vorwerfen, aber es fällt eben auf und ist nicht gerade angenehm (erinnert mich daran wie man mit mal Delphi auf einer Steinzeit-IDE vorgesetzt hat: "Mach mal!" ). Sogar in den Beispielen (habe mir da nur ein paar mal grob angeguckt) werden mindestens 4 verschiedene Ansätze genutzt.
Ein Beispiel für absolut fehlende Docs ist e.g. die convert()-function bei den models - man kann nebst Name und Datentyp auch noch eine convert()-Funktion angeben welche beim Erstellen aufgerufen wird. Doof nur, dass die in den Docs einfach mal fehlt. Genauso dämlich wie die Reduktion der Model-Datentypen von gefühlt 20 auf gewaltige 5 von 1.x auf 2.x...

Ich habe nächste Woche Urlaub und gucke dann mal, dass ich etwas mehr zum Thema JS lese und denke, dass sich da viele noch etwas dämliche Fragen wohl lösen werden (habe mir mal "JavaScript - The Definite Guide" gegönnt, Papier frisst ja bekanntlich kein Brot und 1,075 Seiten sind auch wert).