Websiteoptimierung mit dynaTrace AJAX Edition – Vortrag@Würzburg

Am kommenden Donnerstag, den 02.02.2012 findet ein weiterer öffentlicher Vortrag im Mayflower-Büro in Würzburg statt (Gneisenaustraße 10/11, 97074 Würzburg, Bushaltestelle Barbarastraße mit der Linie 28).

Beginn ist um 18:00 Uhr, Thema des Vortrags ist „Websiteoptimierung mit dynaTrace AJAX Edition„. Der Referent Thomas Steur arbeitet als Developer bei der Mayflower GmbH am Standort Würzburg.

Sie wollten schon immer mal wissen, was Ihre Webseite im Browser wirklich ausbremst und wo Optimierungsbedarf besteht? Dann geht es nicht nur Ihnen so, denn die Geschwindigkeit einer Webseite bekommt eine immer größere Bedeutung. Oft wird dabei viel Zeit investiert, um die Ausführung an Stellen zu beschleunigen, welche sich am Ende kaum lohnen. Dabei lässt sich gerade im Browser mit einfachen Mitteln oft sehr viel Zeit gewinnen.

Thomas Steur, Senior Developer bei der Mayflower GmbH am Standort Würzburg, zeigt Ihnen anhand eines Beispiels, wie Sie mit der kostenlosen Software „dynaTrace AJAX Edition“ Problemstellen innerhalb einer Webseite entdecken. Die Software unterstützt das Analysieren von Webseiten mit den Browsern Internet Explorer und Firefox.

Ausgewertet wird dabei das Rendering der Seite im Browser, die CPU-Auslastung, das Ausführen von JavaScript, sowie das Cachen und Verarbeiten von Ressourcen. Dabei wird sichtbar gemacht, wie der Browser die Webseite im Detail verarbeitet.

Die „Donnerstags-Vorträge“ werden sowohl in Würzburg als auch in München gehalten. Bei Interesse einfach das Blog beobachten, um auf dem Laufenden zu bleiben!

Wir freuen uns auf viele Teilnehmer!

Anfahrt Büro Würzburg

Introducing Gigger, a Realtime Javascript Monitoring Framework

Go to Live Demo >>>

 

Monitoring your web application is essential for professional maintenance and development. Especially if you have a high load on your website and you want to keep the current users on your site, you definitely should stay alert for problems
and be able to react fast in case of problems. Monitoring is also crucial for A/B tests, since you have to evaluate somehow which version
of your website performs better. Many big players also measure constantly how much revenue the website produces. For them it is important to monitor if a new
feature increases or decreases the revenue and take decisions based on that information.

Mayflower is currently developing a javascript framework which provides a smart tool for realtime monitoring and measuring. Read the full article for more information.

Weiterlesen

A comet over PHProjekt 6

So far PHProjekt 6 (P6, see http://phprojekt.com) is already enhanced with nice AJAX workflows and snappy user-experience. Nevertheless, we discussed a way to provide synchronous communication and direct information within the application.

Everybody knows GoogleMail with its easy to use frontend. Maybe you use it for your daily work. In GoogleMail, there is no need to refresh the page to receive a new mail, Google informs you automatically whenever a new mail is available. But how is this possible? The answer to this question is really simple: The server triggers a signal informing that a new mail is available. This technology is called Comet and describes a way how the server communicates with the client [see http://en.wikipedia.org/wiki/Comet_(programming) ].

Is there a way to use Comet for P6? As P6 works with a lot of users, it is important for me as a user to be informed when somebody has changed something in my projects or has added an urgent todo. The list where a notification could be triggered is long, but at the moment, only email notifications are sent immediately. So, what we need in P6 are real-time notifications. With real-time notifications, for example, every time somebody changes something in my project, I receive a message in form of a highlighted info box. This looks like a typical use case for using Comet. And yes, Comet would be great for realizing this kind of real-time notification! But since the users love the handy system requirements (Apache Server and MySQL) and the ease of installation, something different is needed than a real Comet architecture, because all the Comet magic is based on a so called application server, e.g. Jetty, Persevere. Therefore, I decide to implement another (Comet-) technology, called Long Polling. You can find the name AJAX Polling for this technology, too.

The technology behind Long Polling is to open a connection from the client to the server and not to close this connection immediately. Ok, that´s fine, but how to open a connection and „hold“ it? Opening a connection to the server is easy, a simple AJAX will do the trick. P6 uses the Dojo Toolkit for all its AJAX, so in this case I used the Dojo.xhrPost.

 

Since the HTTP protocoll is connection-based, at the server-side, a process is also needed that holds the connection and does not return . So, what I do to hold this connection open is to set a simple timeout during the execution of the server-side script, in my case I use sleep(). This is the basic idea of long polling, but the gimmick of this approach is to return earlier if something happens on the server-side. In other words, I open a connection to the server and check whether there are any changes, if not, the connection stays open for the maximum polling time. If yes, the response will be returned to the client immediately.

This diagram shows the basic workflow, and the lines below show the possible solution in PHP:

 

For P6 this means that I always save the following: the person who triggers an event, the event itself (e.g. somebody adds a new note), the item, the project, the creation time, the time until this message is valid, and the persons who should receive a frontend message from the database. The long polling loop checks whether there is anything new. If yes, it returns the data. If not, the polling loop starts again. Every event is saved in the database for a maximum of two minutes, except events in the future. Itis real-time – so itis possible to miss a message ;-)

One word about the Dojo Toolkit. The AJAX API of Dojo provides several functions to communicate with the server. The easiest way is to use dojo.xhrGet or dojo.xhrPost. I decided to use the Post version. Although the function has a property setTimeout, which allows you to set the time to wait for a response from the server, this is not needed, because of the sleep loops at the server side.

Now, let’s look at the downsides of the long polling approach. Yes, I partly agree with everybody who says that the permanent polling to the server causes massive traffic and server load, especially with an increasing number of users. But in the special case of P6 this is OK, because the number of users is manageable and in most cases, P6 runs in a local network. In addition, the frontend messages are configurable, You can set the polling loop and the number of requests to the database.

Considering all the facts and keeping in mind that P6 is designed to be a lightweight open source groupware, I am positive to say that the Long Polling technology is the right choice for P6.

Mobile Apps Cross-Platform – Webmontag

Am Montag, 10.08.2009, webmontagte es mal wieder in Frankfurt. Wie immer war die Veranstaltung perfekt organisiert (danke Darren, danke Thorsten!) und die Brotfabrik als Location vermittelt ein tolles Ambiente – aus diesem Grund sponsert Mayflower gerne den Webmontag Frankfurt.

 

Freunde der Mayflower Familie waren dabei auf der Durchreise und hielten einen Vortrag zum Thema Mobile Apps Cross Platform – wie sollte es anders sein, uxebus Wolfram Kriesing war der Vortragende. Das Thema ist unheimlich spannend… die Applikationsentwicklung für iPhone, Blackberry & Co. ist teilweise PITA, da verschiedene Programmiersprachen (Objective-C, Java, Symbian C, …) beherrscht werden müssen. Was liegt also näher, als auf das Bewährte XHTML, CSS, JavaScript in einem Package zurückzugreifen? Möglich machen es (Open Source) Entwicklungen wie PhoneGap, die dabei einen Container auf den unterschiedlichen mobilen Plattformen schaffen, in dem XHTML/JS/CSS ablaufen kann. Es bleibt abzuwarten, wie sich der Mobile Widget Bereich entwickeln wird. Die Slides von Wolfram:

Meistgenutze Applikation im Intranet != Kantine

Es sollte eigentlich nicht überraschen, dass wohl am häufigsten im Intranet auf den Speiseplan (wenn vorhanden) geklickt wird – vornehmlich zwischen 10:30 – 11h.

Bei einem Kundenbesuch vor 2 Wochen sah ich mit Begeisterung, dass die Ajax basierte Mitarbeitersuche sehr intensiv vom Frontdesk benutzt wurde. Bei jedem Anruf, der vom Frontdesk angenommen wurde, konnte durch eine schnelle Suche nach Mitarbeiter- oder Abteilungsnamen der Anrufer entsprechend durchgestellt werden.

Die Integration der Suche in das Basislayout der Seite hat im Rahmen der Entwicklung sehr wenig Zeit in Anspruch genommen.

An diesem Beispiel kann man sehr schön sehen, dass es manchmal doch die kleinen Dinge sind, die einen sehr hohen Nutzen für ein Unternehmen bringen können: in puncto Zeitersparnis bei der Arbeitserledigung und Zufriedenheit beim Anrufer, der schnell seinen eigentlichen Geschäftspartner im Unternehmen findet.

Schön, dass es eine Applikation gibt, die noch vor dem leiblichen Wohl steht :-)

Minimizing your JavaScript Code

As
my last projects were mostly web 2.0 online applications I had to do
a lot of javascript programming. Using JS-Frameworks like JQuery or
Dojo the size of all necessary javascript files had added up to more
than one megabyte. Even today with highspeed internet connections one
megabyte needs several seconds to be transferred, so I had to find a
way to reduce the size of the code. For all my previous projects I
used
Dean
Edwards Packer
. This amazing packer was able
to reduce it to appr. a fourth of the original size. Getting this
nice result I was wondering if the tool delivered with Dojo – the
Dojo
Shrinksafe
– or other minification tools
like
JSMin
and the
YUI
Compressor
could do this as well. After some
tests, however, I realized that they couldn’t.

Searching
the web for more information about the best way I found a cool tool /
website that shows the transfer sizes of well known javascript
libraries after minification / packing. It is also possible to let
the tool calculate the results for your own piece of code:
http://compressorrater.thruhere.net/

In
addition, the tool also calculates the size of a transfer with
http-compression (gzip). Before I found this website I did not see
the size after minification / packing and compression in combination.
Perhaps I should have done this before…

Analyzing
the results of CompressorRater it seems that Dean Edwards Packer
might really be the best choice – even with zip compression. Very
interesting is the fact that the results of packing and minification
is nearly the same after zip compression.

Yet
the size of javascript files and their transfer speed is only one
aspect which affects the loading delay of websites. The other aspect
is the time the browser needs to interpret those scripts. As packed
files have to be interpreted twice – first to eliminate the eval
and second to interpret the generated code – their loading delay is
higher than those of minified files.

After
taking a closer look at the loading time of those minimized
javascript files it turned out that the Packer is not always
the best choice: In case of bigger javascript files, the Packer
needs up to several seconds to d’eval the code. This doesn’t matter
so much in web applications where javascript is only loaded and
interpreted once at the beginning but it will slow down a typical
website even more because javascript has to be interpreted at each
site request, even if it is in the browser’s cache. Using a minified
script avoids this.

Summarizing
I suggest to use Packer only if it is not possible to realize an
http-compression.

Johann-Peter Hartmann spricht auf heise Security Konferenz

Johann-Peter Hartmann, technischer Leiter der Mayflower GmbH, spricht im Rahmen der Sicherheitskonferenzen des heise-Verlages.
Im Rahmen immer komplexerer Webanwendungen werden auch die Möglichkeiten für Angriffe immer zahlreicher. Mit neuen Technologien, wie beispielsweise AJAX, und der neuen Mitmachkultur im Web2.0 entstehen Sicherheitsprobleme für Anbieter und Nutzer, die sich aktuell erst erahnen lassen.

Johann-Peter Hartmann wird in seinem Vortrag die Themen XSS und Sicherheit bei Verwendung von AJAX-Applikationen intensiv erläutern und Lösungswege aufzeigen. Des Weiteren wird das Thema User-Generated-Content aus Security-Sicht erörtert. Freuen Sie sich auf interessante Vorträge in:

24. April 2007, Düsseldorf, Hilton Hotel
03. Mai 2007, Frankfurt, Radisson SAS Hotel
09. Mai 2007, Hamburg, Dorint Sofitel
15. Mai 2007, München, Dorint Novotel

Melden Sie sich hier an

We did talk about Web-2.0 Security

On Tuesday our CIO, Johann-Peter Hartmann, gave a Web-seminar about security issues in the Web 2.0 era. We had about 140 participants and some very good questions in the following Q&A Session. We would like to thank you for the response and also we´d like to thank Jürgen from MySQL, our webinar-host.

We uploaded our slides as promised. To download them, click here.

If you missed the Web-Seminar you get a chance to see the recording of it here.
But be aware: It´s in german!!!

For english readers/speakers: Johann held an english security talk some time ago. Find it here

We already heard that some participants found some quite severe security issues right after listening to Johann´s talk. Therefore we strongly recommend to all of you to have a look at it.

Weiterlesen

Web-2.0 Security

Hi Folks,

This is an announcement for a webinar in German. Therefore only written in German. If you are interested in the security topic be sure to see the english webinar, which is stored here.


Web-2.0-Anwendungen absichern

Die verbesserte Einsatztauglichkeit der Web-2.0-Anwendungen wird auf
Kosten von neuen Sicherheitsproblemen erworben. Sowohl die mächtige
Logik im JavaScript als auch der permanente Login auf vielen Sites
bergen Risiken, die anders und gezielt beantwortet werden müssen.
Dieses Webseminar gibt einen Überblick, bewertet die Probleme und
stellt Lösungswege vor.

Wenn Sie Web 2.0- und AJAX-Anwendungen entwickeln, ist dieser Vortrag genau das Richtige für Sie! Hier erfahren Sie:

  • Welche neuen Sicherheitsrisiken es für Webanwendungen gibt
  • Welche Bedeutung XSS hat
  • Ursprünge und Typen von JavaScript-Malware
  • Wege zur Absicherung Ihrer LAMP-Anwendungen für Web 2.0

Weiterlesen