Oculus Rift: Ansätze für sorgenfreies virtuelles Eintauchen (Teil 1)

Das Erlebnis mit der ersten Entwicklerversion der VR (Virtual Reality) Brille Oculus Rift ist einmalig. Anzusiedeln irgendwo zwischen totaler Immersion und übelster Seekrankheit. Wer bereits an einem unserer internen Events die VR Brille ausprobieren konnte, kann sich sicher noch gut an seine ersten Schritte in dieser neuen virtuellen Welt erinnern.

Dieser zweiteilige Post soll die momentanen Herausforderungen und mögliche Vorgehensweisen an ein erfolgreiches VR Projekt aufzeigen. Dazu hat sich der Autor in einem VR Marathon mit über 30 Applikationen ein Wochenende lang etliche Stunden am Stück von der Realität verabschiedet und ausgelotet, was sich momentan nicht nur angenehm, sondern herausragend anfühlt – und ja, da gibt es so einiges!

 

Oculus Rift Testausrüstung

Oculus Rift Testausrüstung

(more…)

Tauchen Sie mit uns ein in die Welt der Wolke!

Cloud Computing ermöglicht Online Anwendungen flexibel und kosteneffizient in einer skalierbaren und fehlertoleranten Infrastruktur zu betreiben. Wir geben in unserem neuen Whitepaper einen Überblick über die wichtigsten Cloud Computing-Ansätze.

Markus Tressl, Senior Principal Consultant und Head of Content Technologies bei Namics hat den Autor Simon Loesing dazu befragt.

(more…)

Toolvergleich JMeter versus ProxySniffer

JmeterVsPS2

Es gibt  eine Vielzahl  von Tools im Internet, die sich ausführlich mit dem Thema Lasttests befassen. Es  gibt viele Tools die ganz einfach einen Server mit einer vorgebebenen Requestabfolge anfragen können, in der Regel  ein paar Logfiles aufbereiten und die … Weiterlesen

GWT Blog-Serie – Die Vorteile für Entwickler (4/4)

Zum Abschluss meiner Blog-Serie will ich nun noch die Vorteile für Entwickler von GWT Anwendungen aufzeigen. In den Vorherigen Blogposts habe ich bereits erklärt was GWT ist, wie GWT die Performance der Browser optimal ausnutzt und dass sich GWT auf dem mobilen Markt mit jQuery Mobile und Sencha Touch messen kann.

GWT aus Entwicklersicht

Aus Entwicklersicht geht GWT einen komplett anderen Ansatz als andere Web Developer Frameworks. Normalerweise programmiert man in einem Web Developer Framework clientseitigen Code in JavaScript und serverseitigen Code in einer anderen Sprache wie z.B. Java, C# oder PHP.

Bei GWT wird der client- und der serverseitige Code in Java programmiert. Ein GWT Entwickler brauch theoretisch keine HTML Kenntnisse um eine Top Anwendung zu entwickeln. Praktisch gibt es jedoch viele Vorteile wenn man über diese verfügt, spätestens wenn man eigene Widgets programmieren möchte.

Quelle: The Future of GWT Report, 2012, Vaadin

Quelle: The Future of GWT Report, 2012, Vaadin

Vorteile von GWT

Als Entwickler bieten sich durch die Nutzung von Java als Frontend-Sprache diverse Vorteile. Aus einer Umfrage von Vaadin, haben sich die Entwickler für folgende Vorteile ausgesprochen:

Quelle: The Future of GWT Report, 2012, Vaadin

Quelle: The Future of GWT Report, 2012, Vaadin

Debugging

Aus meiner Erfahrung mit JavaScript Frontend Projekten, weiss ich, dass es nicht immer simpel ist JavaScript Code zu debuggen. Vor allem wenn ein Fehler in einer externen Library auftritt, kann das Debuggen sehr aufwändig werden. Clientseitiger Code kann mit GWT direkt in der IDE gedebuggt werden, als wäre es eine normale Java Anwendung, was eine grosse Erleichterung mit sich bringt.

Refactoring

Es können alle Refactoring Funktionen der IDE genutzt werden.

Community

Hinter GWT steht eine grosse Community. Bei Fragen zu GWT findet man z.B. auf Stackoverflow zu fast allen eine Antwort.

Testing

Automatisches Testen von clientseitigem Code ist immer schwierig in Web Anwendungen. Dank der strikten Trennung zwischen Logik und Layout kann auch der clientseitige Code mit allen bekannten Tools aus der Java Welt getestet werden. So können Tools wie JUnit, Test NG, JMock oder andere Mocking-Libraries eingesetzt werden.

Stateless Server

Dank der Stateless Servers lässt sich GWT sehr gut skalieren.

Back-Button Support

GWT verfügt über einem eingebauten Browser-Back-Button Support trotz der ausgiebigen Nutzung von AJAX-Requests. Als Entwickler muss man sich nicht selber darum kümmern.

Schnelles Entwickeln

Wenn man das Konzept von GWT verstanden hat, ist man extrem schnell im Entwickeln mit GWT.

Google App Engine Integration

GWT bietet volle Integration in Google App Engine. Als Entwickler kann man so schnell eine funktionierende App zusammenstellen und veröffentlichen ohne sich grosse Gedanken über den Backend-Server zu machen.

Nachteile von GWT

In der Umfrage von Vaadin wurde auch gefragt, wo die Nachteile von GWT liegen. Hier bin ich nicht mit allen Punkten gleicher Meinung.

Quelle: The Future of GWT Report, 2012, Vaadin

Quelle: The Future of GWT Report, 2012, Vaadin

Widgets

Es stimmt zwar, dass nicht genügend gute Widgets vorhanden sind. Aber ich empfinde das nicht als Nachteil. Denn eigene Widgets sind schnell programmiert. Wer eine coole Web Anwendung programmieren will, der muss so oder so die Widgets anpassen, damit sie seinen Ansprüchen entsprechen. Es gibt ausserdem viele Libraries wie z.B. Smart-GWT, welche besser Widgets anbieten.

Dev-Mode Refresh Time

Dies ist tatsächlich so, dass es etwas lange dauert, bis man seinen Code testen kann. Aber GWT hat den Super Dev Mode eingeführt, womit sich client code ohne neues Kompilieren schnell testen lässt. Für mich persönlich reichte der normale Dev Mode bis anhin. Den Super Dev Mode habe ich noch nicht ausprobiert.

Getting started with GWT is difficult

Weil der Ansatz wie man Webanwendungen entwickelt von GWT ganz anders ist als bei anderen Web Development Frameworks, braucht es einer ernsthaften Einarbeitung, bis man alle Konzepte verstanden hat. So können in clientseitigem Code zum Beispiel nicht alle Features von Java verwendet werden (z.B. kein Reflection).

Viele Wege führen nach Rom

Es werden immer wieder neue Konzepte eingeführt, welche dann ältere ablösen. Das bringt Vor- und Nachteile. So gibt es z.B. verschiedene Ansätze für die Kommunikation zwischen Server und Client oder verschiedene Möglichkeiten wie man Events behandelten kann. Bei der Entwicklung von GWT Anwendungen sollten sich die Entwickler am Anfang auf eine Technik einigen, wenn die entsprechenden Problemstellungen zur Anwendung kommen.

Persönliche Erfahrung mit GWT

Ich startet im Zuge meiner Bachelor Arbeit an der ZHAW in Winterthur mit dem Programmieren in GWT (2012).

Die Aufgabe bestand darin, ein Framework zu entwickeln, womit sich mobile Apps im Baukastenformat erstellen lassen. Der Benutzer der Anwendung sollte die Möglichkeit haben, verschiedene Module auszuwählen und diese dann als App zu publizieren. Der ganze Inhalt sollte im Web verwaltet werden können, wie in einem CMS. Die Entwickler sollten ausserdem die Möglichkeit haben, dass Framework individuell mit neuen Bausteinen zu erweitern, ohne den Core zu bearbeiten. Ein weiteres Key-Feature sollte die Skalierbarkeit sein. Es sollte möglich sein, das App-CMS auf einem Server zu betreiben und damit tausende Apps zu verwalten.

Architektur

Ich habe mich dann für GWT mit MVP-Architektur  für das Frontend und Google App Engine für das Backend entschieden. Alles wird in Java programmiert. Für die Persistenz wurde JDO verwendet.

Somit konnte ich das Framework losgelöst von den App-Bausteinen programmieren. Jeder Baustein konnte dann im Anschluss wiederum für sich entwickelt werden.

MVP-Archtiektur

Die MVP-Architektur ähnelt sehr der MVC-Architektur. MVP heisst Model-View-Presenter.

Ein Baustein besteht aus Client- und Serverklassen. Auf Serverseite bestehen hauptsächlich Model-Klassen. Die Clientklassen werden unterteilt in View-,Presenter- und Eventklassen sowie Proxy-Interfaces für die Servermodels.

MVP Klassendiagramm

MVP Klassendiagramm, Quelle: http://www.gwtproject.org/articles/mvp-architecture.html

AppController

Als Einstiegspunkt des Bausteins steht auf Clientseite der AppController. Dieser ist für die Logik verantwortlich, welche nicht in einem Presenter behandelt werden kann. So lädt dieser zum Beispiel die notwendigen Presenter-Klassen, welche dann für den Rest verantwortlich sind.

Model

Ein Model stellt eine Businessentität dar. Mit Hilfe von JDO-Annotationen werden diese Klassen auf dem Server persistiert. Der Client greift auf ein Proxy-Objekt zu und kann so direkt mit dem Server kommunizieren.

View

Eine View enthält alle UI Komponenten für diesen Baustein. In einer View werden alle Elemente angeordnet und mittels CSS designt. Ein View weiss nicht, welcher Inhalt in die Felder kommt, sondern nur, dass z.B. drei Labels und ein Bild dargestellt werden müssen.

Presenter

Im Presenter wird die ganze Logik abgebildet. Der Presenter lädt die Daten vom Server und bestimmt welche Daten durch die View dargestellt werden. Ausserdem ist er für das EventHandling der UI Komponenten und das History Management verantwortlich.

Um die Kommunikation zwischen View und Presenter zu gewährleisten, werden im Presenter Display-Interfaces definiert, welche von der View implementiert werden.

Struktur
MVP Struktur

MVP Struktur, Quelle: http://www.gwtproject.org/articles/mvp-architecture.html

Entwickeln mit GWT

Wer jetzt auf den Geschmack gekommen ist und mit GWT entwickeln möchte, der Informiert sich am besten unter gwtproject.org. Dort gibt es einige gute Tutorials. Pflicht für jeden Einsteiger ist das MVP Tutorial:

http://www.gwtproject.org/articles/mvp-architecture.html

http://www.gwtproject.org/articles/mvp-architecture-2.html

Wer diese zwei Artikel intensiv durchexerziert wird sehr schnell Spass am Entwickeln mit GWT finden und schnell die Vorteile erkennen gegenüber anderer Frontend Frameworks.

The gap between PhoneGap and Apache Cordova

Im Zuge von Mobile Apps wird oft von WebApps, native Apps und hybriden Apps gesprochen. Dabei fallen auch immer öfters die Stichworte PhoneGap oder Apache Cordova. In diesem Blogpost will ich die Begriffe PhoneGap und Apache Cordova erklären.

phonegap-cordova-logo

 

Was ist der Unterschied zwischen PhoneGap und Apache Cordova?

(more…)

GWT Blog-Serie – GWT im Vergleich zu jQuery Mobile und Sencha Touch (3/4)

mgwt

Quelle: https://code.google.com/p/mgwt/

Wer gegenwärtig ein mobile App entwickelt, der sollte sich vor der Konzeption entscheiden, ob er die App nativ oder als Web-App implementieren will. Die Entscheidung hängt oft davon ab auf welchen Plattformen die App zugänglich sein soll.

Soll die App nur auf einer Plattform verfügbar sein, dann ist die beste Lösung fast immer, die App nativ zu Entwickeln. Soll sie auf mehreren Plattformen erscheinen, dann wird der Kostenfaktor meist zum treibenden Argument gegen eine plattformspezifische Entwicklung, auch wenn die Performance von Animationen und Benutzerinteraktionen nicht das Niveau von nativen Apps erreichen.

Kommen die Entscheidungsträger zu diesem Punkt, fällt die Entscheidung oft auf eine Web-App mit jQuery Mobile. Doch es gibt noch andere Frameworks auf dem Markt, welche mobile Optimierung anbieten. So zum Beispiel Sencha Touch oder MGWT.

Als Mobile-Entwickler bei Namics und während des Studiums habe ich meine Erfahrungen mit all den erwähnten Technologien gesammelt. Ich arbeitete an nativen Apps für iOS und Android sowie plattformunabhängigen Apps mit Sencha Touch, jQuery Mobile und GWT.

Im vorherigen Blogpost ging ich auf die Performance-Optimierung von GWT ein. In diesem Teil meiner Blog-Serie will ich diese drei Frameworks vergleichen und vertieft auf die Performance von MGWT eingehen.

(more…)

GWT Blog-Serie – 88.84 Prozent würden Google Web Toolkit wieder einsetzen… (1/4)

Die Firma Vaadin lancierte 2012 eine Umfrage in der GWT Community zum Thema “Zukunft von GWT”. Aus den Antworten von über 1300 Teilnehmern entstand ein 32-seitiger Bericht darüber, wer GWT benutzt, in welchem Umfeld GWT eingesetzt wird, wo die Stärken und Schwächen von GWT liegen und wo der Weg von GWT hinführt.

Back_to_the_Future_gwt

Im ersten Teil meiner Serie gehe ich auf Details dieses Reports ein und beschreibe kurz und knapp was GWT ist.

(more…)

Smashing Conference 2013

Die diesjährige Smashing Conference stand ganz unter dem Motto «Personal Experiences». Das Thema war also offener als es gar nicht hätte sein können & die Speakerliste – quasi das Who is Who der Webszene – liess Grosses erhoffen.

Location: Historisches Kaufhaus

Hier mein Versuch, die Konferenz in drei Kernaussagen zusammenzufassen:

  1. Deciding in the Browser
  2. Progressive Enhancement, Progressive Enhancement, Progressive Enhancement
  3. Have fun!

Deciding in the browser

Die Zusammenarbeit zwischen Design & Frontend steht seit Responsive Web Design vor ganz neuen Herausforderungen.

Tools wie Photoshop, InDesign & Co. stehen in der Kritik dem Multi-Device-Web zu wenig Rechnung zu tragen. Dennoch sind sie DAS Tool für Designer, sich kreativ ausdrücken zu können. Das Designen im Browser wiederum benötigt Frontend-KnowHow & bietet zu wenig Platz für Kreativität. Dazwischen gibt es eine ganze Palette von Tools, die den neuen Umständen gerecht werden wollen, oftmals jedoch bloss Zwischenerzeugnisse für die Tonne produzieren.

Die Zeit ist also mehr als reif sich über den sinnvollen Einsatz/Mix von Kreativtools & Frontend Gedanken zu machen. Dan Mall & Jason Santa Maria haben dies getan & teilten ihre Erfahrungen mit uns. Die beiden leidenschaftlichen Webdesigner sind sich einig:

As an industry, we sell websites like paintings. Instead, we should be selling beautiful and easy access to content, agnostic of device, screen size, or context – Dan Mall

Ihr Vorschlag um dies zu erreichen ist so einfach, dass er sich in zwei umgemünzte Zitate packen lässt.

Zitat #1

Current design approach

New design approach

Die Design-Diskussion mit dem Kunden soll also nicht auf Basis von fertig gestalteten, pixelgenauen Designs geführt werden.

Denn was ist mit verschiedenen Screen-Grössen? Vernachlässigbar? Wohl kaum! Ein detail- und pixelgenaues Design verleitet aber dazu, die Design-Diskussion auch auf Level von Detail- und Pixelgenauigkeit zu führen. Dabei wird das Wesentliche – wie fühlt sich die Seite unabhängig von Device & Screen-Grösse an – oftmals ausgeblendet.

Dan Mall schlägt vor, statt dessen als Diskussionsgrundlage Styletiles – oder Visual Inventories o.ä. – zu verwenden.

«The Examiner» Styletiles

«The Examiner» – Projektübersicht

I don’t think we’re in a post-PSD era, but I do think we’re moving towards a post-“full-comp” era – Dan Mall

Anschliessend soll der Prozess in den Browser verlagert werden. Denn nur im Browser kann das Verhalten, die Verhältnisse der Elemente zueinander – unter Berücksichtigung von verschiedenen Screen-Grössen – sinnvoll dargestellt werden. Mit diesem Schritt werden zudem gleichzeitig auch andere Risikofaktoren ausgeschaltet & die Machbarkeit implizit sichergestellt.

Das für mich wichtigste Zitat der ganzen Konferenz folgte postwendend.

Zitat #2

… und wirken lassen …

Der Design-Entscheid soll also in den Browser verlagert werden. Damit hätte man auch gleichzeitig eine wunderschöne Definition of done. Nämlich:

It’s done when it’s done

Progressive Enhancement

Das Konzept von Progressive Enhancement ist so alt, dass man als Frontend Engineer schon fast nicht mehr darüber nachdenkt. Nichtsdestotrotz – oder eben vielleicht gerade deshalb – ist das Thema momentan wieder in aller Munde. Auslöser dafür war Nicolas Zakas Präsentation Enough with the JavaScript Already.

Durch die Verlagerung von Business- und Renderlogik in den Client, steht das bewährte Konzept von Progressive Enhancement erneut auf dem Prüfstand – Client Side Rendering, Model Driven Views etc. vertragen sich nur bedingt mit dem progressiven Gedanken.

Gleich mehrere Speakers – Andy Hume, Ethan Marcotte, Jake Archibald & Jeremy Keith – riefen uns das Konzept – und dessen Bedeutung im neuen Kontext – zurück ins Gedächtnis.

Dabei wurde oftmals der von BBC geprägte Begriff «Cutting the mustard verwendet. «The mustard» ist im Falle von BBC der «Support von HTML5».

  if('querySelector' in document
     && 'localStorage' in window
     && 'addEventListener' in window) {
        // bootstrap the javascript application
  }

Erfüllt ein Browser die Mustard-Kriterien so erhält er die Schöne-Neue-Welt-Version, falls nicht erhält er eine funktionale Core-Version. Die Mustard-Kriterien entscheiden schlussendlich mit über den Grad des «Enhancements».

Its a myth that progressive enhancement means making lowest common denominator designs. Its just about starting there – Jeremy Keith

Eine schöne funktionale Core-Version – die mit sage & schreibe 1 Request auskommt – zeigte Andy Hume am Beispiel der Mobile-Seite von The Guardian. Dieses Extrembeispiel zeigt, dass vor allem im mobilen Kontext – in dem Netzunterbrüche & fehlgeschlagene Requests keine Seltenheit sind – Progressive Enhancement die «gefühlte Verfügbarkeit» einer Seite drastisch verbessern kann.

Have fun!

Web & Spass gehören zusammen. Sei dies bei der Arbeit & natürlich auch überall sonst – auch an der Smashing Conference.

Highlights waren der als Mystery Speaker getarnte Handorgelspieler Klaus Schmidt

… die spontan aus Speakern zusammengewürfelte «Smashing Conference Lonely Hearts Club Band»

… oder das von WordPress grossartig eingehaltene Versprechen

Free Beer All Night Long

Alles in allem war die Smashing Conference bereichernd, bestätigend, trotz Ausnahmen grösstenteils kurzweilig & unterhaltsam, gespickt mit allerlei Würsten vom Markt & inspirierend.

… hoffentlich nächstes Jahr wieder

Weiterführende Links

Progressive Enhancement
That Emil – Progressive Enhancement: Still Not Dead.
Jake Archibald – Progressive enhancement is still important
BBC – Cutting the mustard

Decide in the Browser
Dan Mall – Responsive Design is Hard/Easy! Be Afraid/Don’t Worry!
Brad Frost – The Post-PSD Era … in response … Dan Mall – The Post-PSD Era: A problem of expectations

Eine Woche mit iOS 7 – The good and the bad

Apple sagt Adieu zum skeumorphen Design und punktet in Zukunft mit flachem Design, wie man es schon von Windows 8 und Android 4 kennt. Diverse neue Features öffnen dem Entwickler neue Pforten.

Mit iOS 7 wird erstmals ein komplettes Redesign der gesamten grafischen Benutzeroberfläche vorgenommen. Das skeumorphe Design, welches von Steve Jobs geprägt wurde, wird durch ein flaches Design ersetzt. Im erstem Moment fragt man sich – Warum? Apple hat sich mit cool gestylten Apps und passenden Metaphern ganz klar von den Mitstreitern Microsoft und Google abgehoben. Die iBook-App, welche wie ein Bücherregal aussieht, eine Kompass-App, die wie ein echter Kompass aussieht oder eine Notiz App, welche wie ein Notizblock aussieht. Lange Zeit ist Apple auf der Erfolgswelle geritten, doch jetzt setzen Sie auf ein komplett neues Design und riskieren etwas. Mir gefällts :-)

Vergleich Kontakte-App iOS 6 und iOS 7

Vergleich Kontakte-App iOS 6 und iOS 7

Sehr Lohnenswert für einen schnellen Überblick (more…)

Page 1 of 1812345...10...Last »