I created a short video that shows how easy it is to do some automated testing of a jQuery Mobile Web App. The tests can be easily created und run with Seleium IDE, which is a plugin for the Firefox browser.

Cheers
Rolf

Maybe you know the scenario. You start to create a project, it’s not a big thing, you write the code and everything’s fine. But by the time the project grows. Soon there are not only a few lines of JavaScript or jQuery code but hundreds or even some thousands lines.

Maintaing / improving such an App may become quite difficult. Problems can arise in the fields of version control, of testing and structuring the code itself.

What can be done?

Version Control System

There are a couple of tools that can help to manage big projects. One of the tools is a Revision Control System aka Version Control System (VCS). Maybe you already heard of GitHub?

“GitHub is a web-based hosting service for software development projects that use the Git revision control system.” Source: wikipedia

Let’s say you have a working version of your code. Now you want to add a new function. What would you do without a VCS? Maybe you simply would start to modify the files. Bad idea. Your old code will not work anymore and your new code not yet. It might become important to get back to the old and working version, but there’s no way to get there.

A little better approach would be to copy the directory structure of the whole project and save it somewhere else. Then it’s rather safe. Or perhaps, if you have to modify the file x.html you would create a copy of this file and save it as x-original.html. Whatever you might do, it sometimes will be nearly impossible to restore a version that lays back a few steps from your current version.

With a system like Git you can create a new ‘branch’ when you have to modify the code. A new branch works like a copy of the original code files. Let’s say your working version would be “version 1.1.0″. This version is stored in a branch called “1.1.0″. You could create a new branch and name it “version 1.1.1″. You can work within this new branch, modify files,  store (commit) the modified files within this branch. At any time you can change between the branches. So it’s possible to restore your Version 1.1.0, check a few things and then go back to Version 1.1.1 again. Changing to another branch restores the complete directory structore and files to the code version of this branch. And this all happens within the same project directory. That means that it is not necessary to go to different places when working in differnt branches.

In addition to this it is possible to save “temporary” versions. Each commit creates a kind of temporary version and it s possible to redo commits, so that you can restore each commit within a branch at any time.

There would be much more to say to this topic. You can find a detailed instruction how to use Git in this book.

Testing

Using a Version Control System is probably a good start, but it doesn’t solve all the problems that arise when the project gets ‘big’. A huge problem is testing. If there are only a couple of functions then manually testing is no problem at all. If there are some hundred functions then manually testing becomes nearly impossible. Is it necessary to test all the functions each time you modify the source code? Well, the modifications could cause side effects that you don’t see when you test only the new function. If you want to be sure that everything works fine you would have to test all functions.

There are tools that can help you to create automated tests. The context of this is called ‘Behaviour Driven Development’, ‘Unit Tests’ or ‘Automated Unit Testing’. One of this tools is Jasmine. It can run automated Tests for JavaScript. When creating new functions/methods you would at the same time create a test for this function and integrate it in the collection of tests for the whole project. Doing this you can run all the tests with one click and get an instant overview about problems that come up.

angularJS, the “superheroic JavaScript MVC Framework”, supports ‘unit tests’ and ‘end-to-end’ tests. The unit tests would test the functions, but they can’t interact with the user interface. If you want to check the user interface behaviour you would create an end-to-end test. Unit tests would be written in the Jasmine syntax and end-to-end-tests would be written in a Jasmin-similar syntax.

Code structure

When the project grows it becomes more important to structure the code in a good way. If you don’t do it you will get hard times. Adding code, modifing code, degugging code – all this will become a real pain. That’s why many projects and frameworks use the so called Model-View-Controller approach (MVC). MVC is a architectural or design pattern. It isolates code parts that deal with the model (data), the view (user interface, templates) and the controller (application logic). Working with the MVC-pattern helps to keep your code maintainable.

angularJS does not only help to create automated tests but also offers a context where MVC-design is possible. To be more concrete: where MVC-design is required. The way the framework works is based on MVC.

In one of the next postings I will go more in the details of creating automated tests, MVC and angularJS.

Regards
Rolf

Commodore64, Foto by Bill Bertram

Um 9 Uhr ging’s los mit der Keynote von David An.  Ein rasanter Überblick über die Entwicklungen und Buzz-Words der letzten zwanzig Jahre half, die aktuelle Situation um Smartphones und Tablets in einem etwas größeren Kontext betrachten zu können. Habe mich gefreut, dass ich nicht der einzige bin, der seine ersten Schritte in die Computerwelt mit einem C64 + Datasette wagte…

Da ich mich ja der Entwicklung von mobile Web Apps verschrieben habe, war ich vor allem an den Vorträgen zu diesem Thema interessiert. Dennoch möchte ich zumindest die Performance von Ivo Wessel zum Thema “App-Entwicklung in der Praxis” nicht unerwähnt lassen. Ivo hat ein wahres Feuerwerk an interessanten Hinweisen, Fakten und Denkanstößen rund um die Entwicklung von Apps abgebrannt. Dabei ging es kaum um technische, dafür aber ausführlich um psychologische und designerische Aspekte bei der App-Entwicklung. Ein interessantes Thema auch für die mehr technisch orientierten unter uns.

Richtig spannend wurde es dann ab 14:30 Uhr, als der Vortrag zum Thema “Browser als App-Platform” anstand. Tobias Bosch führte das Auditorium durch die verschiedenen App-Kategorien: Native Apps, Web Apps und Hybrid Apps. Anhand eines Beispiels zeigte er auf, was man mit einer Web App so alles anstellen kann. Die Web-App stellte das (in diesem Fall minimalistische) UI zur Verfügung. Da die App dazu dienen sollte Barcodes einzulesen, war ein Zugriff auf die Kamera des Endgeräts zwingend. So wurde die Web App mittels PhoneGap in eine Hybrid App umgebaut. Doch der eigentlich Trick kam erst jetzt. Über eine Plugin-Konstruktion lies Bosch die Hybrid-App auf die Services einer anderen, bereits installierten App (zxing) zugreifen, die in der Lage war, Barcodes einzulesen. Das Ergebnis dieses Prozesses wurde in die Hybrid App übernommen, bearbeitet und dargestellt. Arbeitsteilung sozusagen. Eine interessante Konstruktion.

Dann wurde erläutert, wie die Architektur einer Web App sich im Laufe der Zeit von der Multi Page Web App, über die AJAX Web App zur Singe Page Web App entwickelt hat. Während die erstere noch fast vollständig auf dem Backend basierte, beinhaltet letztere die komplette Applikationslogik und braucht das Backend nur noch, um ein paar Daten auszutauschen. Weiße Screens beim Wechsel auf neue Seiten gehören bei dieser Architektur der Vergangenheit an.

Als nächstes wurden die beiden großen JavaScript-Frameworks Sencha Touch und jQuery Mobile dargestellt, die u.a. Lösungen für Interface-Herausforderungen anbieten, die im Kontext von Web Apps  auftreten. Zu nennen wären da z.B. die Scrollbar-Problematik (Scrollbars gibt’s bei mobile Webkit-Browsern nicht), fixierte Toolbars (schwierig umzusetzen) und eine Gesten-Erkennung (Kombination aus unterschiedlichen Events).

Richtig spannend wurde es für mich im letzten Teil des Vortrags, als Tobias Bosch AngularJS vorstellte. AngularJS, das “superheroic JavaScript MVC Framework”, bietet neben MVC auch Data Binding und Dependancy Injection. Das Framework kann mit Hilfe eines von Bosch geschriebenen Adapters mit jQuery Mobile gekoppelt werden.

Den Abschluss des Vortrags bildete ein Ausflug in die Welt der Testautomatisierung. Erwähnung fanden in diesem Kontext Jasmin, ein “behavior-driven development framework” zum Testen von JavaScript Code, und der js-test-driver von Google. Ein paar Erläuterungen zu letzterem finden sich hier.

Auch die abschließende Keynote von Heiko Behrends befasste sich mit dem Thema “Plattformübergreifende Entwicklung”.   Behrends thematisierte ‘server side web’ und ‘client side web’, ging am Beispiel von Sencha und JQM auf den ‘deklarativen’ und ‘programmatischen’ Ansatz ein, zeigte Möglichkeiten zum Debuggen auf (u.a. Winre) und differenzierte hinsichtlich der Art der App zwischen ‘web’, ‘hybrid’, ‘interpreted’ und ‘generated’. Fazit: Web Apps  und native Apps haben beide ihre Berechtigung. Für Web Apps sprechen vor allem ökonomische Gründe, für native Apps die bessere Performance und User-Experience.

Alles in allem: Die mobile developer conference war eine eine interessante Konferenz, es gab viel Input mit durchaus interessanten, neuen Aspekten. Die Vortragenden waren kompetent und up to date.

Meine Anregung an die Veranstalter: fragt die TeilnehmerInnen doch nächstes Mal im Vorfeld der Konferenz, ob Interesse daran besteht, mit anderen TeilnehmerInnen in Kontakt zu kommen. Dann könnte eine Liste mit Kontaktdaten und Tätigkeitsbereichen erstellt und an die Konferenzteilnehmer vorab geschickt werden. Dies würde z.B. ermöglichen, dass man sich untereinander gezielt verabreden und die Pause mit interessanten Gesprächen verbringen könnte.

Happy Coding
Rolf

Basics & erste Seite

Das Video hat eine Länge von knapp 25 Minuten.
Die Auflösung beträgt 1280 x 720 Pixel.
In der Voransicht (unten) ist der Text etwas gestaucht, da das Video dort in einer verkleinerten Version angezeigt wird.
Der Quelltext der erstellten Seite steht als Textdatei zum Download zur Verfügung.

Inhalt:

• Arbeits- und Testumgebung
  • Welcher Editor?
  • Lokaler Webserver erforderlich?
• Testen und Debuggen
  • in Desktop Browsern
  • in Emulatoren
  • auf Hardware
• Seitenaufbau
  • HTML Doctype
  • Einbindung der Bibliotheken
  • Struktur einer jQuery Mobile Seite

Das Video kann zum Preis von $4,95 bei MindBites.com angesehen oder downgeloaded werden.

Viele Grüße,
Rolf Dohrmann

Cheers
Rolf

http://jquerymobile.com/blog/2011/09/08/jquery-mobile-beta-3-released/

Die Beta 3 ist feature-complete. Das bedeutet, dass sich bis zur endgültigen Version 1 nichts Wesentliches mehr ändern wird. Insofern ist jetzt ein guter Zeitpunkt gekommen, um sich mit jQuery Mobile vertieft auseinanderzusetzen.

Ich plane in Kooperation mit der Technischen Fachschule Heinze in Hamburg einen Einführungskurs / eine Schulung für jQuery Mobile, die voraussichtlich im Oktober 2011 stattfinden wird. Über weitere Details werde ich hier im Blog berichten.

Wer Interesse an der Schulung hat, kann sich gerne bereits jetzt bei mir melden. Ich werde dann, wenn die Einzelheiten geklärt sind, eine Mail an alle Interessenten rumschicken.

Außerdem plane ich, eine Reihe von allgemeinen und speziellen Lern-Videos / Tutorials zu erstellen, die ich gegen einen geringfügigen Betrag zur Verfügung stellen würde.

Die allgemeinen Videos werden die jQuery Mobile Basics vermitteln, die speziellen Videos sollen Lösungen für konkrete Fragestellungen oder Problem aufzeigen, mit denen man so in Kontakt kommt, wenn man mit jQuery Mobile arbeitet. Natürlich frage ich mich, ob denn überhaupt ein Bedarf für solche Videos besteht. Insofern freue ich mich über diesbezügliches Feedback.

Happy coding
Rolf

I wondered how I could create a simple audio interface with jQuery Mobile and PhoneGap. So I gave it a try. The result: no problem at all. The PhoneGap functions work as they should and jQuery Mobile comes with all the widgets that are needed: Buttons and a slider in combination with an input field. Check my video to see how the App could look like:

Cheers, Rolf

here comes a new video tutorial. It’s for beginners and shows how to download the jQuery Mobile and the jQuery library and how to put them in the right place.

Cheers,
Rolf

ich hatte ein paar (hoffentlich) kreative Stündchen und habe ein Video über das Debuggen von PhoneGap Apps mit Winre gebaut. Das Ganze in schlechtem Englisch Mein Motto: Mut zur Peinlichkeit!

Aber mal seriously: Wer schon mal eine App mit Javascript alert() debuggt hat, kennt die Probleme. Winre macht das Leben etwas leichter. Thanks a lot! Hier ist die Homepage des Projekts:

http://phonegap.github.com/weinre/

Wer also Lust auf ein wenig ‘Fernsehen’ hat:

Cheers,
Rolf

Google says:

“Before you begin, you should make sure that Keytool is available to the SDK build tools. In most cases, you can tell the SDK build tools how to find Keytool by setting your JAVA_HOME environment variable to references a suitable JDK. Alternatively, you can add the JDK version of Keytool to your PATH variable.”

So what if you don’t know how to set your JAVA_HOME variable or how to add something to the PATH variable? Here are some (hopefully) helpful hints around this topic. The following happens in a termin window.

Not needed, but sometimes useful: Find out which Java-Version is installed:

java -version

Something like this should be the result:

java version "1.6.0_22"
Java(TM) SE Runtime Environment
 (build 1.6.0_22-b04-307-10M3261)
Java HotSpot(TM) 64-Bit Server VM
(build 17.1-b03-307, mixed mode)

Where on the harddisk is Java installed? It might be here:

System/Library/Frameworks/JavaVM.framework/Versions/1.6.0/

This path points to a symbolic link ’1.6.0′. And this link refers to

System/Library/Java/JavaVirtualMachines/1.6.0.jdk

Where lives keytool?

/System/Library/Java/JavaVirtualMachines/1.6.0.jdk/
Contents/Home/bin/keytool

Show the content of your PATH variable:

echo $PATH

Add keytool to the PATH variable. There are a couple of ways to do it. I did it this way:

• Open the file .profile, which lives in /Users/your_account_name with a text editor
• You’ll find something like
  export PATH=/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin…
• Add the keytool path to this line:
  :/System/Library/Java/JavaVirtualMachines/1.6.0.jdk/Contents/Home/bin/keytool
• Save the file
• Open a new terminal window
• echo $PATH should now contain the path to keytool
• Enter ‘keytool’ in the terminal window
• You should get a description of the keytool syntax as a result

Happy coding,
Rolf Dohrmann
Mobile Web Developer