jQuery 1.4 Technikwürze 159

Hallo und herzlich willkommen zu einer neuen Folge Technikwürze. Wir schreiben die Ausgabe einhundertneunundfünfzig. Heute mit mir und zum ersten Mal im Studio Christian Haller.

Hallo.

Ja, und wir schauen heute das erste Mal auf jQuery 1.4.

Herzlich willkommen zu Technikwürze, eurem Design- und Webstandards-Podcast.

Christian, du bist der vierte Hannoveraner, der dieses Studio betritt und, darfst dich jetzt natürlich auch wie alle anderen erst mal vorstellen. Was machst du denn so den ganzen lieben langen Tag, wenn du nicht gerade vor dem Mikro sitzt?

Ja, hallo Marcel, schön, dass ich hier sein darf. Ich bin, Webentwickler und muss mich dann tw-- demzufolge den ganzen Tag auch mit JavaScript, HTML und CSS beschäftigen und, gelegentlich dann auch in meiner Freizeit. Und, ich habe vorher an der Hochschule Furtwangen Online-Medien studiert und Marcel und ich arbeiten jetzt zusammen.

Genau, wir haben gerade ein Projekt zusammen, da wird auch jQuery eingesetzt. jQuery ist auch wahrscheinlich sonst so das Framework, mit dem du durch die Gegend rennst.

Richtig. Ich habe mit den anderen Frameworks eigentlich noch keine große Erfahrung gesammelt, bin schon früh auf J-jQuery gestoßen und der Sache jetzt seit fast drei Jahren treu geblieben und, ja, deswegen war ich auch sehr aufgeregt, als jetzt jQuery 1.4 rauskam.

Ja, wir sind einer-- na ja, relativ früh dabei. jQuery ist ja jetzt, hat ja jetzt den vierten Geburtstag mit dem Release gefeiert.

Ja, ich glaube, damals, war das noch nicht mal die Version eins.

Ja, da sind wir jetzt auf jeden Fall ein bisschen weiter. Bevor wir uns gleich erst mal so das, das Äußere, die Größe und so weiter anschauen, vielleicht noch mal ein kleiner Hinweis: Wer mit jQuery bisher noch nicht viel Erfahrung hat und, da erst mal den Einstieg braucht, der höre bitte zuvor mal, eine Technikwürze-Folge, die ein paar Wochen zurückliegt, nämlich den, jQuery-Einstieg.

Der ist nämlich auf jeden Fall vonnöten, denn wir wollen heute wirklich nur erklären und erläutern, was in 1.4 sich verändert hat, was neu zur 1.3 ist. Das heißt, die Grundsyntax sollte man auf jeden Fall kennen und, schon mal die ersten Schritte in jQuery gemacht haben. So, dann lass uns doch mal schauen. JQuery ist insgesamt ein bisschen größer geworden. Da gab es den einen oder anderen Aufruhr: „Uh, hundertzwanzig Prozent." Wir sind jetzt dreiundzwanzig Kilobyte groß.

Ja genau, also eigentlich ja immer noch nicht richtig viel, aber-

Davor waren es achtzehn.

Davor waren es achtzehn und jetzt, na ja, kam dann doch noch ein bisschen was drauf. Angeblich, tausendsechshundert neue Zeilen Code. Und ja.

Allerdings muss man sagen, die dreiundzwanzig Kilobyte erreicht man auch nur, wenn man die minimierte Version nimmt. Es gibt noch eine unkomprimierte, Developer-Version, die hat hundertsechsundfünfzig Kilobyte. Und wenn man das Ganze als gzip ausliefert, dann kommt man auf die dreiundzwanzig Kilobyte. Davor, also in der, in der 1.3er war noch, die 1.3 war noch mit, YUI komprimiert. Jetzt sind sie umgestiegen.

Genau, es gibt auch von, Google so einen Compiler, der wurde auch erst vor Kurzem, glaube ich, vorgestellt.

Genau, in der Technikwürze einhundertvierundfünfzig haben wir auf, Google, den Google Closer, Closure Compiler unter anderem auch vorgestellt. Damit wird das Ganze jetzt komprimiert und, dadurch sollen dreizehn Prozent gespart worden sein.

Ja, sehr gut.

Im Vergleich zu, zu dem YUI, den wir ja auch, schon mal vorgestellt haben in der hundertzweiundfünfzigsten. Okay, gegebenenfalls setzt ihr alle schon, jQuery 1.4 ein, obwohl ihr es gar nicht wisst.

Große Überraschung. Also es kann natürlich sein, dass man sich mit der ganzen Thematik noch nicht beschäftigt hat und trotzdem läuft auf dem einen oder anderen, auf der einen oder anderen Webseite schon jQuery in 1.4. Das betrifft alle die, die, jQuery vielleicht nicht lokal eingebunden haben, sondern bei, von der Google API holen. Wenn man da, bei der Versionierung einfach nur eins einträgt, wird jetzt seit, fünf Tagen automatisch 1.4 geliefert.

Genau, das heißt, wenn irgendwas bei euch gerade nicht funktioniert und ihr habt keine Ahnung warum, könnte das daran liegen, dass ihr schon das neue jQuery habt und, das irgendwo Probleme gibt. Das Ganze über Google einzubinden, hat natürlich ein paar Vorteile. Zum einen wird es gecacht. Das heißt, jemand, der schon mal auf einer, Seite war, wo jQuery über, über Google eingebunden wurde, muss er das nicht unbedingt komplett wieder neu laden.

Und zum anderen ist auch, das ist noch mal ein kleiner Vorteil, der DNS von Google in der Regel ja schon aufgelöst, weil Google relativ weit verbreitet ist. Insofern, hat sich auch das dann schon erledigt. Daher geht das relativ schnell. Der Nachteil ist natürlich, dass man, das Ganze nicht unbedingt in der eigenen Hand hat, so wie wir, das jetzt halt auch merken. Denn, -

Ja, wobei man kann ja sagen, ich will nur die Version 1.3 und dann ist man nicht von der Code-Umstellung jetzt betroffen. Aber wer so mutig war und nur Version eins angegeben hat, der hat jetzt schon die 1.4.

Genau, der hat alle, alle Updates mitbekommen. Ich glaube, es gibt auch ein--, ich glaube, man kann auch einfach sagen, man möchte die letzte haben, also irgendwie so ein latest oder so was.

Ja, genau.

Dann, hat man entsprechend jetzt auch die 1.4. Okay. Zum Release der 1.4er ist auch noch so ein bisschen was, im, im Web, passiert bei jQuery. Es gibt nämlich zwei neue Seiten.

Zwei? Ach ja, genau. Ja. Es gibt, fangen wir mit der interessanteren an.

Da wertet er schon. Ich finde beide interessant.

Okay. Na, die eine ist mehr zum Gucken und die andere ist ein bisschen zum Nachschlagen, ne? Also es gibt die, Geburtstagswebseite für jQuery 14 oder 14 Tage jQuery heißt die. Da wird, wurde das Release gefeiert und ein Video online gestellt von der, ja, einer Art Pressekonferenz mit Fragen und Antworten. Des Entwicklerteams und, dort erscheint jetzt wahrscheinlich dann noch die nächsten... Welchen Tag haben wir denn heute?

Ich glaub, den vierten oder fünften haben wir heute.

Genau, also jetzt erscheint also noch, neun Tage-

Die nächsten neun Tage noch irgendwas.

Oder irgendwas zum jQuery, eins Punkt vier vom, Team. Und ja, da wird alles vorgestellt, was sich geändert hat, was jetzt toller ist, was schneller ist, viele, informative Grafiken. Wir haben da auch viel unsere Infos jetzt bezogen.

Genau, es gibt, am, am ersten Tag direkt wurde ein relativ, dicker Post veröffentlicht mit den ganzen Neuerungen und, ja, nicht eine komplett vollständige, aber doch eine relativ ausführliche Beschreibung der einzelnen Funktionen. Am, ich glaub, am zweiten Tag war es, da gab es eine, eine, ein, eine Frage- und Antwort-Session live, die man über Ustream verfolgen konnte. Die gibt es, inzwischen auch in einer relativ ordentlichen Version. Die kann man sich auch noch mal anschauen.

Da wurden auch noch mal einige Fragen beantwortet. Ja, das findet ihr unter jqueryfourteen.com und, ja, die nächsten neun Tage oder so gibt’s da jeden Tag noch irgendwie ein paar weitere Infos. Mal schauen. Die zweite Seite ist dann die, wie hast du sie betitelt? Zum Nachschlagen.

Ja. Also die, API von jQuery, die lag ja früher immer unter Docs sonst was.

docs.jquery.com und die jetzt unter api.jquery.com.

Genau, und die hat jetzt ein Redesign erfahren und auch ein bisschen, glaub ich, neu strukturiert. Und was, also, was ich am tollsten jetzt eigentlich finde, ist, dass unter allen, Methoden, Funktionen und es gibt überall noch User-Kommentare. Viele kennen das ja vielleicht von PHP schon, dass da, oftmals in den User-Kommentaren erst so richtig, die sind manchmal interessanter als die Dokumentation selbst,-... weil da halt Leute noch Sachen zu beitragen, die sie selbst rausgefunden haben.

Das ist bei jQuery jetzt erst im Aufbau. Also unter den Sachen, die ich mir angeguckt hab, da waren dann so drei bis vier Kommentare. Das wächst natürlich noch. Aber ich hab gesehen, man kann zum Beispiel auch mit seinem Facebook-Account da, Nachrichten hinterlassen. Das heißt, man muss sich nicht extra anmelden. Also bei PHP zum Beispiel bin ich nicht angemeldet.

Das heißt, ich würde da jetzt auch erst mal nicht schreiben, aber bei jQuery ist die Einstiegshürde relativ gering und so kann man mal gucken, wie dann, was so andere Entwickler für Fragen stellen oder für Hinweise noch zusätzlich geben.

Okay, kommen wir zur Kompatibilität. Ich meinte ja schon eben, wenn bei euch gerade was nicht funktioniert, kann das damit zu tun haben, dass ihr das über Google eingebunden habt und jetzt nicht mehr die eins drei, sondern die eins vierer, direkt bekommen habt.

Wobei die Entwickler ja sagen, dass das alles eigentlich relativ unproblematisch ist und ich glaub, beim, beim Switch auf eins drei war es auch so, dass es so gut wie gar keine großartigen Probleme gab, also gar keine Kompatibilitätsprobleme. Bei eins vier hat sich da nicht so viel dran geändert. Es gibt aber dennoch einige Geschichten, die nicht nur hinzugekommen sind, sondern wo irgendwas überarbeitet wurde und wo bestehende Funktionen jetzt ein bisschen anders ticken.

Dazu gibt es ’ne Liste mit Dingen. Ich hab die schon mal kurz überflogen. Ist nicht so viel wirklich Brutales bei, aber man sollte sie auf jeden Fall mal, sich angeschaut haben, wenn man, wenn man, besonders wenn man herausfinden will, warum irgendwas nach dem, Update nicht mehr funktioniert. Und ansonsten gibt’s auch noch ein lustiges Plugin.

Ja, es gibt ein Plugin, das die Abwärtskompatibilität herstellt. Das ist auch, von dem Entwicklerteam selbst geschrieben worden. Das, ja, macht eigentlich alles, also baut wieder alles so um, dass es genauso tickt wie die eins dreier Version.

Zum, also was wir uns jetzt angeguckt haben, ist, wenn man was clont, dann wurden, werden in eins vier werden jetzt, die, das Data, Dingens wird mit geclont und das ist bei, eins drei halt noch nicht der Fall und deswegen wird das, diese Funktion wieder reduziert. Aber grundsätzlich, sind alle, Funktionsausruf-aufrufe sind identisch. Die Signaturen haben sich nicht geändert. Also es hat sich von der Art und Weise, wie man mit jQuery arbeitet, erst mal glücklicherweise nichts getan.

Also die bekannten Sachen sind bekannt geblieben.

Ja genau, besonders, besonders die Geschichten, also die, die sich geändert haben, sind wirklich Dinge, da wird man, das wird man-- Das sind nicht Dinge, die man in den ersten zwei Tagen, die man irgendwie jQuery verbaut, einsetzt. Dementsprechend schätze ich auch, dass das relativ wenig Probleme gibt. Aber trotz alledem, die, die Liste ist da und wer halt, sicher gehen will, der bindet, am Anfang noch das Plugin ein.

Dann werden halt alle, ja, gefährlichen Dinge quasi wieder auf die eins dreier geresettet. Aber trotz alledem könnt ihr aus den vollen Funktionen, schöpfen, die jetzt halt dazugekommen sind.

Genau, und die wollen wir ja jetzt alle vorstellen.

Genau. Lass uns aber vorher noch mal kurz über die Performance reden, denn besonders auf, auf jqueryfourteen.com gibt es ganz viele lustige, Diagramme, die zeigen, dass jQuery jetzt rennt wie sonst was. Ich denke, die muss man ein bisschen mit Vorsicht genießen, denn, ja, nur weil, nur weil da jetzt steht, dass irgendwelche Funktionen viermal so schnell oder nur noch ein, ein Viertel der Zeit benötigen, denke ich nicht, dass es, dass man das wirklich so merken wird, oder?

Ja, also ich weiß auch nicht, wie stark man sich davon beeindrucken lassen darf. Also grundsätzlich ist für mich jQuery eins Punkt vier ist neben einigen Funktionen, die wir jetzt später noch vorstellen, ist das, Wunderbarste, was jetzt mit rausgekommen ist, ist natürlich der Performance-Gewinn. Da sieht’s auf den Charts auch ganz gut aus. Da, wurden Funktionsaufrufe reduziert in, also, wenn man dem glauben kann, um einige tausend Auf-, zehntausend Aufrufe.

Und, ja, viele, Funktionen sind drei, vier, fünfmal so schnell. Nur, na ja, also man muss das, glaub ich, man muss das sich überlegen, was, wo der Flaschenhals bei meiner Webseite eigentlich ist. Deswegen haben wir gedacht Dass jetzt die ein oder andere Funktion eben deutlich schneller läuft. Wo, wo spüre ich das? Wo merke ich das? In welchem, Bereich ist das? S-sind das Millisekunden, ganze Sekunden oder, ist das eigentlich eher so eine Nanosekunde nur, über die wir hier sprechen?

Und grundsätzlich muss man vielleicht auch erst mal sagen: Wenn man ein Framework benutzt, ist man verglichen mit nativem JavaScript natürlich erst mal auf jeden Fall langsamer. Auch das durchaus, messbar. Und dann gibt es natürlich auch unterschiedliche Varianten, wie man jQuery schnell oder auch eben langsam programmieren kann.

Ja, natürlich. Also das Lustige ist ja, dass in der Q-and-A-Session, glaube ich, war das oder in dem, in dem zweiten Video, wo, wo halt auch noch mal diese, diese Frage aufkam, wie sie, wie sie irgendwie das geschafft haben. Und, da meinte er selbst, dass, dass sie einiges wohl ziemlich dreckig geschrieben haben. Na ja gut, was heißt ziemlich dreckig? Aber, a-auf jeden Fall haben sie gesehen, dass man da noch einige schneller machen kann.

Aber die, die Browser-Geschichte, die sollte man halt nicht vergessen. Weil wenn, irgendwie mein, mein Nutzer mit einem IE sechs oder sieben oder so was ankommt, dann ist das, hat er schon mal komplett andere Voraussetzungen als irgendwie meinetwegen ein Chrome-Nutzer, der mit der V8-Engine, doch einiges schneller unterwegs ist als halt so ein IE.

Da ist auch nichts zu retten. Wer mit einem Internet Explorer sechs oder sieben unterwegs ist, da ist jQuery eins drei und jQuery eins vier sind verglichen mit anderen Browsern beide langsam. Und da kann man auch einfach nichts machen. Das liegt einfach an der, ja, an der JavaScript-Engine, die da drin tickt.

Trotz alledem, inzwischen, machen wir ziemlich vieles im Web, was man uns, was man sich früher nicht unbedingt hätte vorstellen können, dass man nicht mehr irgendwie irgendein Office-Produkt aufmacht, sondern gegebenenfalls irgendwie wirklich einen, einen Web-Editor, der, mein, mein Briefchen schreibt, und, und vieles andere. Deswegen ist das schon ziemlich, ziemlich wichtig und, auf jeden Fall einer der, der besten Geschichten.

Um mal so ein paar Zahlen zu nennen: Sie haben diese Charts, über die komplette Seite gestreut, und auf denen kann man zum Beispiel ablesen, dass, dass, dass die CSS-Methode jetzt doppelt so schnell läuft. Die ganzen,, Class Handles, also Add Class, Remove Class und, jetzt auch Hash Class, sollen dreimal so schnell laufen. Auch,, das HTML zum Beispiel läuft jetzt deutlich schneller. Remove und Empty sollen viermal so schnell sein. Also es hört sich wirklich alles sehr gut an.

Wie sehr man das dann in der Praxis wirklich merkt, muss man dann, denke ich mal, wirklich in der Praxis sehen. Ja, hast du noch was zur Performance zu sagen?

Ja, es klang auf jeden Fall so, als wenn sie sich extrem viel Gedanken gemacht haben und auch viel neu geschrieben haben. Also nicht nur, Erweiterungen, sondern teilweise die Sachen komplett neu noch mal gemacht haben und dann einige Zeilen an Code gespart haben und auch eben die Sache ins-insgesamt performanter aufgezogen haben. Und, ja, auch dieses Jason Parsing, das jetzt nativ ablaufen soll, wenn das der Browser kann, sorgt bestimmt für, ordentlich Performance.

Und dann, werden, hat HTML-Fragmente werden gecacht, also Sachen, die wir schon mal erzeugt haben, werden intern irgendwo abgelegt, dass wir, ja, da können wir dann-- deswegen ist, glaube ich, auch die HTML-Funktion so schnell geworden, weil man teilweise einfach Sachen, wiederverwerten kann. Ja, und ob man das jetzt direkt spürt.

Wir werden es, wir werden es sehen. Mal schauen.

Aber wichtig ist halt, es ist auf jeden Fall nicht langsamer geworden.

Genau, kommen wir mal zu den, praktischen Dingen, zu den wirklich anwendbaren Dingen, die man auch wirklich spürt, nämlich die neuen Funktionen. Das Erste, was, was einem ins Auge fällt oder uns ins Auge gefallen ist, sind die neuen Easy Setter Functions. So sind sie jedenfalls, in dem Blogpost betitelt. Das bedeutet, dass jetzt sämtliche Setter-Methoden, also so was wie Attribute, CSS, HTML und Co., eigene Funktionen enthalten können innerhalb, dieser Setter-Funktion.

Der Vorteil ist, dass man den Return der einzelnen, der, der enthaltenen Funktion direkt wieder weiter verarbeiten muss. Also ein Beispiel: Ich möchte, das ist auch in dem, in dem Blogpost, genannt. Ich möchte, das Title Tag beispielsweise erweitern, um das, was das Title Tag bereits enthält und, irgendwie meinetwegen noch irgendeinen, irgendeinen Präfix oder so was. Dann musste ich bisher mir das Title Tag nehmen, irgendwo mir ablegen, verändern und dann wieder setzen.

Das kann ich jetzt alles in, in der einzelnen, in der einzigen Setter-Funktion machen, wenn ich das richtig verstanden habe.

Ja, also wir haben uns das scharf angeguckt. Man spart sich jetzt den erneuten Aufruf des, Elements und kann halt als, Argument für diese Funktion eine wei-- eine, ja, in dem Fall anonyme Funktion mit übergeben. Das sah relativ elegant aus.

Ja, insofern, hier erst mal nicht unbedingt eine wirklich neue Funktion, sondern eher eine, ja, charmantere Schreibweise sozusagen. Eine wirklich neue Funktion, bringt, das, das Core-Element jQuery mit, das, ja, jetzt wirklich komplexe Dom-Elemente direkt erstellen kann. Magst du da ein bisschen was zu erzählen?

Ja, also, wenn man jQuery direkt aufruft, kann man in die runden Klammern halt sein Element, reinsetzen, das man gerne erzeugen möchte. Und da ist jetzt hinzugekommen, dass man das in dem Zuge gleich mit, Attributen ausrüsten kann. Das ist dann so ein etwas verschachteltes Objekt mit, ja, Attributen und deren Werte und somit kann man dann, ja, etwas auch wiederum eleganter mit weniger, weniger Funktionsaufrufen sich mal schnell ein Dom-Element, bauen.

Und ja, das ist, hängt so ein bisschen von den Einrückungen ab, ob man das, gut lesen kann oder nicht, aber im Beispiel war das dann doch nachvollziehbar, weil man, wenn man weiß, wie v-- wie viele Aufrufe man vorher machen muss, um das Element dann doch so zu haben, wie es eigentlich dann ins Dom rein soll. Das kann man jetzt quasi auf einer Linie unterbringen. Nur im Zuge der Lesbarkeit sollte man weiterhin, - Na ja, die Objekte so einrücken, dass man da noch durchsteigt später mal.

Genau, das Schöne ist halt, also an, an dem, Erstellen eines, eines DOM-Elements, direkt bei, bei der Ausführung ist halt, dass man Elemente, die man ansonsten nicht braucht, wenn man kein JavaScript aktiviert hat, also beispielsweise irgendwelche, Statusmeldungen, die ansonsten bei, für, für Nutzer ohne JavaScript bei 'nem Seiten-Reload ausgegeben werden, wirklich statisch.

Die holt man sich meinetwegen bei nach 'nem Ajax-Request holt man sie sich, dynamisch und möchte die einfach in der Box anzeigen. Aber diese Box benutzt man halt wirklich nur bei 'nem, bei 'nem,, ja bei 'nem JavaScript-, Aufruf. Dann kann man diese halt komplett in jQuery erstellen. Hat dementsprechend keinen überflüssigen Markup mehr für die Nutzer, die, kein JavaScript haben. Und man kann halt direkt in einem Aufruf dann daran auch meinetwegen den Klick-Event setzen.

Und, in dem Beispiel war es zum Beispiel ein CSS oder noch weitere Attribute oder sonst irgendwas. Und das ist halt alles ziemlich smart in einem, in einem, einer Ausführung. Das fand ich schon relativ nett. Das Nächste, was hinzugekommen ist, ist, dass, eq und get nun auch mit negativen Werten arbeiten können. Eq und get geben einem aus einer Auswahl, ein bestimmtes, ein bestimmtes Element zurück.

Also beispielsweise ich hab eine Liste mit X Einträgen, dann kann ich, mit, eq und, dem, weiß ich nicht, Wert zwei mir zum Beispiel den, die, das dritte Listenelement zurückgeben. Das Ganze kann ich jetzt auch mit negativen Werten machen. Das heißt, ich sage eben, ich möchte 'n Minus eins haben und bekomm dann, das letzte Element angegeben, ausgegeben. Das kann man sich auch noch mal in der Doku 'n bisschen, bisschen genauer angucken.

Das geht jetzt auf jeden Fall mit negativen Werten und zur einfacheren Schreibweise, um, sich nicht mit den, mit den einzelnen Werten auseinandersetzen zu müssen, sind jetzt noch zwei Aliase da hinzugekommen. Das ist einmal last und first. Und, get wird noch erweitert. Wollen wir vielleicht noch mal kurz den Unterschied zwischen eq und get, erklären? Hast du den noch im Kopf?

Ja, ich denke schon.

Dann mal los.

Also eq, wenn ich da 'ne Zahl eintrage, bekomme ich, kein, jQuery Objekt zurück. Sondern, das DOM-Element mit den wenigen Funktionen, die JavaScript nativ da drauf setzt. Und, wenn ich das mit, get mache, bekomme ich ebenfalls 'n Element zurück. Aber das hat, ist 'n jQuery Objekt. Das heißt, ich hab alle Funktionen, also CSS, addClass, toggleClass und so weiter, die wir von jQuery kennen, die sind dann an dem Objekt wieder dran.

Genau. Und bei get, wenn ich's noch richtig im Kopf hab, ist es so, dass mir get, je nachdem, was ich getten will, gegebenenfalls ein Array zurückliefert. Wenn, wenn das Sinn macht. Um da noch 'n bisschen das Ganze smarter handeln zu können, wurde get jetzt noch erweitert um 'ne, um 'ne Funktion, die nennt sich toArray. Damit kann ich sagen, dass ich auf jeden Fall ein Array zurückhaben, zurückbekommen möchte.

Das ist zum Beispiel dann sinnvoll, wenn ich, mir 'ne Liste gette und nicht weiß, wie viele Einträge die hat. Weil hätte die Liste dann nur einen Eintrag, würde ich Gefahr laufen, dass mir get kein Array zurückgibt, wie ich das eigentlich erwarte, sondern, einfach nur 'n Element. Und wenn ich danach, davon ausgehe, dass ich 'n Array habe und möchte das weiterverarbeiten, könnte ich gegen die Wand fahren. Deswegen gibt's jetzt toArray, das mir auf jeden Fall 'n Array zurückliefert.

Auch wenn, ich nur einen Eintrag habe, bekomme ich halt entsprechend 'n Array mit nur einem Eintrag. Ja, so viel zu den Core Features. Beim Ajax hat sich auch 'n bisschen was getan. Zum einen 'ne Geschichte, die ich ziemlich, ich glaub, da, kann man besonders wenn man mit Mediendaten umgeht, ziemlich viel machen. Und zwar gibt's jetzt 'nen ETag Support und der ETag gibt ja an, wann, ein, ein File, ein Dokument, was auch immer, das letzte Mal verändert wurde.

Und, die Ajax-Funktion von jQuery kann jetzt überprüfen. Also zuvor hat sie den ETag einfach total ignoriert und einfach immer nur das stumpf zurückgegeben. Jetzt kann ich darauf überprüfen, ob das Ganze, ver-verändert wurde, nämlich über isModified und, kann dann den eigentlichen Request, was besonders, wenn ich jetzt irgendwie, keine Ahnung, ein, mir fällt grad nichts, ein hochauflösendes Webcam-Bild, was sich irgendwie alle X Sekunden oder so was verändert.

Wenn ich mir das holen will, dann, kann ich jetzt über, isModified halt gucken, ob es sich überhaupt verändert hat und nur im Fall einer, einer Änderung dann auch wirklich holen. Find ich ziemlich praktisch. Die zweite Änderung ist, dass, die Ajax-Funktion von jQuery jetzt, den Content Type beachtet und, gegebenenfalls ich den Con, den Data Type bei jQuery direkt, bei, bei Ajax direkt weglassen kann.

Wenn ich nämlich zum Beispiel ein JSON bekomme, erkennt er das jetzt automatisch und, ja, das muss ich nicht mehr, nicht mehr angeben. Ist aber, das sind jetzt nur zwei Dinge, die sich bei, bei Ajax erweitert haben. Da gibt's noch einiges mehr, aber das sind auf jeden Fall zwei, die ich sehr hilfreich finde. Kommen wir zu den Attributen. Du darfst mal weitermachen.

Okay, bei den Attributen hat sich, also was wir uns rausgeschrieben haben, was wir am interessantesten fanden, ist, dass die, Funktion toggleClass, mit der man je nachdem, also wenn die CSS-Klasse vorhanden ist, wird sie entfernt, wenn sie, nicht vorhanden ist, wird sie hinzugefügt. Das ist toggleClass. Das kann jetzt auch mehrere Selektoren in, Hand haben. Das heißt, ich kann statt, also meistens nutzt man so bei toggleClass so was wie, open und wenn es open ist-

Active.

Open, active, ja. Wenn etwas geöffnet ist, wird es entfernt. Wenn es noch nicht da ist, wird es geöffnet. Also wird das, die Klasse Open hinzugefügt und da kann man jetzt einfach, mehrere, Selektoren Selektoren ranschreiben.

Wobei ich muss sagen, also zum einen finde ich es ein bisschen gefährlich. Also Toggle ist generell ein bisschen gefährlich. Wenn man irgendwie mehrere Auslöser hat, dann kann es sein, dass man eigentlich erwarten würde, dass es in dem Zustand jetzt zu ist und man es dann aufmachen will. Es ist aber genau andersrum.

Aber man, man sollte schauen, dass man sich da nicht verheddert und besonders jetzt mit mehreren Selektoren, also sprich, dass ich mehrere Klassen gleichzeitig hinzufüge oder entferne, glaube ich, kann man sich da ziemlich viel, ziemlich schnell verrennen. Aber ja, macht ja einfach nur Sinn.

Ja, also wir hatten uns gefragt, wann man eigentlich öfters also mehrere Klassen togglet, so in der Praxis.

Vor allem mit der, mit der gleichen, mit der gleichen Aktion halt, ne.

Ja, und das, ja, ist natürlich nett, dass man das jetzt machen kann.

Aber man kann es machen. Also wenn man mal einen Use Case dafür hat, ist man jetzt, auf jeden Fall dafür gerüstet. Kommen wir zu dem nächsten, zum nächsten Part, der, im Gegensatz zu den Attributen deutlich mehr, Neuerung und vor allem ziemlich, ja, wie, wie drücke ich das aus? Ziemlich, hat ein bisschen für Aufruhr gesorgt. Nämlich zu den Events.

Ja, Events waren ja schon bei jQuery eins Punkt drei das große Highlight. Und jetzt auch in eins vier ist eine ganze Menge dazugekommen. Wer sich erinnern kann, in eins drei gab es ganz neu Live und Live und Die. Live und Die. Live.

Live. Live, glaube ich. Live. Ja.

Und, die sind natürlich, ja, das war für Leute, die sich mit Event Delegation und so noch nicht so beschäftigt haben, natürlich super, weil um das noch mal zusammenzufassen: Ich kann, Events, Elemente, die auch nachträglich noch in das DOM eingefügt worden sind, brauch, die haben schon diese, Events wie zum Beispiel On Click dann mit drauf.

Das ist, wenn man-- An den Punkt ist wahrscheinlich jeder mal geraten, wenn er nachträglich zum Beispiel Listen Events, Listen Elemente hinzugefügt hat, dass denen dann das Event fehlte, das vielleicht auf den anderen Listenpunkten ist. Und das hat sich, da jetzt im Zuge zu eins drei schon geändert.

Genau, da, da ist ja Live glaube ich erst hinzugekommen. Das ist jetzt mit eins drei, oder?

Ja. Und, da gab es aber noch nicht alle Events, die, da unterstützt worden sind. Also es gab Klick und weiß gar nicht so die, die wichtigen, aber die, Mouse Over gab es glaube ich nicht.

Genau, Mouse Over zum Beispiel gab es nicht. Jetzt ist es so, dass, sämtliche,, Events, die sich grundsätzlich beinden lassen, mit Ausnahme von, der, der, der, der erste fällt mir-

Blur, ne?

Also genau auf jeden Fall, Blur, nicht. Dafür gibt es aber jetzt ein neues. Dazu kommen wir gleich. Focus glaube ich auch nicht. Und, Ready.

Und Ready.

Das sind die drei, die, die, die Ausnahme bilden. Aber ansonsten alles, was sich sonst so beinden lässt an Events, lässt sich jetzt auch, zu einem Live Event machen. Kommen wir noch mal kurz zu, zu Blur und Focus. Für Focus gibt es jetzt ein neues, das nennt sich Focus In. Ist glaube ich komplett neu hinzugekommen. Gab es vorher gar nicht. Macht so ziemlich genau das gleiche wie Focus. Nur lässt sich bubblen also dementsprechend auch als Live Event, verwenden.

Das Gleiche, ist bei Blur und dem jetzt neuen Focus Out. Die kann man also dafür verwenden. Ja, dann kommen wir mal zum Live Event selbst. Vielleicht erklärst du noch mal, wenn du dir das zutraust, die, die Grundproblematik, des, des, des Live Events und des, des Bubblings.

Ja, also wir stehen immer wieder vor dem Problem, dass wir in das DOM nachträglich dem Element hinzufügen und dass denen dann die Events fehlen, weil die Initialisierung der, Events vielleicht schon vorher ablief. Jetzt fragt man sich so, jetzt klicke ich immer auf mein Listen Element, das ich vorhin ansprach und da passiert nichts mehr. Wie kann ich das nachreichen? Man könnte dann einfach noch mal so 'n, so 'n Klick drauflegen, ne.

Das wäre, hätte man, ja, das ist auf jeden Fall, führt auf jeden Fall zum Ziel. Die, Alternative in eins drei war jetzt, dass man das Event mit Live, initialisiert, sodass auch, dass auch, nachträglich hinzugefügte, Elemente schon mit diesem Element dann, mit dem Event ausgestattet sind. Das Problem, das da so ein bisschen bei ist, dass die alle in das, in Body eigentlich reingehängt werden. Also dieser Event Listener liegt auf Body.

Das heißt, jedes Mal, wenn ich auf meinem Body klicke, wird kurz dieser Listener ausgeführt, der natürlich dann nicht, nicht, nichts macht, weil ich gar nicht, weil ich nur auf Body bin.

Das heißt, im schlimmsten Fall habe ich 'ne, 'ne Seite, die, mehr eine Webapplikation als eine Webseite ist, dementsprechend ziemlich dynamisch die Inhalte immer wieder, neu herholt. Und, ich dachte, ich arbeite da ganz smart und habe einfach alles als, als, Live Click Event gesetzt. Das ging dann alles auf den Body und auf dem Body waren dann gegebenenfalls X, Listener.

Ja, und da ist relativ viel drauf dann. Genau.

Und das wird dann jedes Mal ausgeführt, wenn ich irgendwo auf der, auf dem Body, also ja quasi in der Regel fast überall einen Klick mache. Und das kann natürlich dafür, dazu führen, dass das Ganze ziemlich schnell ziemlich um-, performant wird. Und da gibt es jetzt auch eine Neuerung.

Genau, und vor allem da ist die Performance wohl wirklich signifikant. Also wenn man, also das spürt man wohl, weil die Browser dann einfach viel mehr zu tun haben, weil da so viele Events draufgeschraubt worden sind. Die eben Alternative war zu dem Zeitpunkt halt immer, dass man diese Event Delegation benutzt. Das heißt, wir, nehmen uns das umwrappende, Element und legen dort den Listener auf und eben nicht so wie das es live macht an Body.

Also um bei unserem Beispiel zu bleiben, würde man dann das Event an die umliegende URL meinetwegen hängen? Und dann jedes Mal, ja, erklär du dann mal weiter.

Ja, und dann wird, wird das Event selbst schon ausgelöst, wenn man auf die Liste klickt. Aber wir klicken natürlich nicht auf die UL, sondern auf die LI, die sich darin befindet. Und dann guckt man, ob das Target, vielleicht, dann das LI ist und wenn nicht, dann, also wenn ich außerhalb der-- Also wenn ich auf die Liste klicke, aber in, nicht in ein LI, dann passiert halt nichts.

Genau und dadurch, dadurch kann ich halt umgehen, dass, LIs, die beispielsweise, also sämtliche Elemente, aber in unserem Beispiel ein LI, was, was, erst nachträglich dynamisch erzeugt wurde, dass das trotzdem das Event mit auslöst.

Genau, es löst auch dieses Event.

So ein kleiner Workaround sozusagen.

So, und dann haben wir jetzt gesehen, dass, jQuery eins Punkt vier dem, Live auch einen Kontext mitgeben kann. Da kann man dann auch sagen, wir möchten, dass eben nur vielleicht, also wir geben dann zum Beispiel dieses UL mit rein als Kontext und dann wird es nicht mehr auf der Listener, nicht mehr an den Body gelegt, sondern nur an die UL.

Das hat sich wohl aber rele, relativ spät erst, ist das noch in eins vier mit aufgenommen worden, weil in den Alpha Pre-Release, jQuery-Version war das wohl noch nicht ganz der Fall oder hat noch nicht ganz geklappt. Da ist es, war nicht ganz einfach, da zurechtzugoooglen, was da jetzt, wo, wozu es gekommen ist. Aber wenn ich das richtig gesehen habe, kann dem Live jetzt ein Kontext mit übergeben werden, was, auf jeden Fall die Applikation, ja, schneller macht.

Erst recht, wenn man mit vielen Events arbeiten muss.

Also abschließend können wir sagen, dass man sich bei, bei, bei Live Events grundsätzlich ziemlich gut überlegen sollte, wie man das einsetzt und, ob, weil die Performance darunter unter Umständen, wenn man's zu viel an falschen Stellen einsetzt, ziemlich leiden kann. Okay, dann kommen wir zu 'nem, Part, der vielleicht nicht ganz so, nicht ganz so verwirrend ist wie die, wie das neue Live Event. Kommen wir, zum, zum, Traversing, das heißt zum, Umherlaufen im, im DOM sozusagen.

Da sind, auch neue Elemente, neue Funktionen hinzugekommen. Da haben wir uns mal drei rausgesucht. Das Erste ist die until-Funktion. Mit der kann ich jetzt sagen, ich möchte Elemente bis zu einem angegebenen Punkt haben. Also um mal wieder bei unserer Liste zu bleiben, die sich ja offensichtlich ganz gut als Beispiel, eignet, könnte ich da zum Beispiel sagen, ich möchte jetzt, alle Listenelemente haben bis zu dem Listenelement, das das Wort Stopp enthält. Dann würde er entsprechend da aufhören.

Das Ganze gibt es auch noch, umgekehrt, brief until, um, das, alle vorstehenden Elemente zu holen. Und, es gibt auch noch parents until. Das holt sich sämtliche Elternelemente bis zum angegebenen Stopp sozusagen. Das ist eine Geschichte, die hat mir oft gefehlt.

Ja, das ist das Coolste, weil man sich dann dieses ganze Parent, Parent, Parent sparen kann. Und, ja, man läuft einfach so wie bei Find, würde ich sagen, ist es ja eigentlich.

Ja, so ähnlich, ja.

Nur man läuft halt in die andere Richtung und das ist super.

Genau, also der, der, der Vorteil ist einfach, dass wenn ich zum Beispiel mal wieder nicht weiß, wer jetzt mein Event ausgelöst hat, weil ich einen relativ allgemeinen, Selektor meinetwegen verwende, kann ich damit einfach, hochlaufen, bis ich das Parent gefunden habe, was ich will. Oder nicht.

Da könnten wir auch closest nehmen.

Ja, stimmt.

Wobei nee, das geht ja auch runter, abwärts. Nee, ist super. Auf jeden Fall.

Ist super. Auf jeden Fall. Okay, das Nächste ist, ist es komplett neu? Bin mir gar nicht sicher. Dass, die Funktion has überprüft, ob, ein Element einen bestimmten Teil enthält. Da stehe ich jetzt gerade so ein bisschen aufm Schlauch, ehrlich gesagt, inwiefern das komplett neu ist. Vielleicht recherchieren wir das noch mal und hängen das ans Ende.

Ja, können wir machen.

Okay, closest hat sich auch ein bisschen verändert. Ähnlich wie das Live Event kann ich nämlich jetzt auch closest 'nen Kontext mitgeben, was das Ganze auch wieder performanter macht. Ich glaube, das ist auch schon alles, was man dazu sagen kann. Einer meiner, meiner Lieblingsparts auf jeden Fall, das Umherlaufen im DOM. Da hat sich viel getan, vor allem, um das Ganze performanter zu machen.

Okay, während du hoffentlich mal nebenbei grad recherchierst, machen wir mal weiter mit der, Manipulation. Einige von euch kennen vielleicht die Funktion wrap, um, einem bestimmten Part, etwas, ja, 'nen, 'nen Element zu, tja, wie sagt man, umzustülpen. Also wenn ich beispielsweise irgendwas habe, wo jetzt noch ein, 'n Diff drum soll, dann, nehme ich da 'n wrap für. Jetzt gibt's auch, das gab's schon ein bisschen länger, jetzt gibt's auch das, das unwrap.

Das heißt, ich kann, wenn ich beispielsweise einen Diff-Container mit ganz vielen Absätzen und Zeugs drin habe, kann ich den Diff-Container entfernen. Die in dem Container enthaltenen Kinder, also die besagten Absätze und so weiter, bleiben aber in dem, Dokument vorhanden. Das heißt, er entfernt wirklich nur den umschließenden Container. Ziemlich, ziemlich sinnvoll. Davon gibt's noch 'ne weitere Version, mehr oder weniger. Die nennt sich detach.

Die entfernt, ein Element, behält allerdings dafür die zugehörigen Events. Also wenn ich jetzt, weiß ich nicht, irgendeinem Container einen Klick-Event oder so was zugewiesen habe und ich möchte diesen Container entfernen aus meinem DOM, weil ich den grad nicht brauche, dann behält er im Hinterkopf trotzdem das dazugehörige Klick-Event. Und wenn ich dieses, Element dann wieder einfüge, kann ich das weiter verwenden.

Ist also ziemlich, ziemlich sinnvoll für das temporäre Entfernen von 'nem Element. Hast du noch was zu has gefunden?

Ja, gab's auch schon in eins drei.

Okay. Hm. Aber irgendwas konnte es neu.

Wir hatten uns einfach umschrieben, ja.

Irgend, irgend, irgendweswegen haben wir das uns rausgeholt. Na ja, gut. Okay..

Sind wir schon bei Effekten jetzt?

Dann sind wir jetzt schon bei den Effekten und bei einer lustigen Spielerei.

Ja, ich find die super.

Ich auch.

Weil, man kann jetzt einfach mit Delay sagen, dass die ganze Sache mal kurz pausieren muss. In anderen Programmiersprachen gibt's das schon immer. Und, ja, was gibt es, was mit diesem Timeout und so immer alles etwas, etwas irgendwie umständlich. Und, jetzt wurde die JQuery bietet jetzt Delay und dann kann ich einfach sagen, Delay in Millisekunden, wie lange dass die Pause sein soll und danach geht's weiter. Das ist, sehr komfortabel.

Da gab es, glaube ich, auch Plugins für, die das vorher realisiert haben. Aber so was ist super, wenn man eben Animationen ablaufen lässt, die, an einer Stelle kurz innehalten sollen und dann geht's weiter. Das kann man so zurzeit ja mit eins drei nicht ganz, nicht in einem, in einer Zeile realisieren und, das ist jetzt sehr schön geworden.

Genau, also in der Praxis sieht das so aus, dass ich einfach an meinen, Selector, meinetwegen ich hole mir irgendwie den Body und mache dann einen, weiß ich nicht, macht jetzt nicht so viel Sinn, aber einen Fadeout oder so was dran. Man möchte, dass der für eine Sekunde verschwindet oder beziehungsweise dann eine Sekunde innehält, dann sage ich einfach Fadeout. Danach kommt dann, setze ich dann einfach ein Delay von tausend Millisekunden und danach wieder ein Fade-in.

Und ja, dadurch kann ich das steuern. Finde ich daher sehr, sehr sinnvoll. Hat ziemlich lange gefehlt. D-d-d-d-zur Animation ist auch noch eine Kleinigkeit hinzugekommen. Man kann nämlich jetzt, einzelnen Eigenschaften einer Animation, eigene Effekte zuweisen. Also ich kann-- bisher konnte ich nur einer kompletten, einer kompletten Animation sagen, mit welchem, Effekt das Ganze, ausgeführt werden soll.

Jetzt kann ich beispielsweise meiner Höhe und meiner Breite oder so was oder was auch immer man, so animieren möchte, ja eigene Eigenschaften zuweisen. Auch ziemlich sinnvoll.

Ja, wobei Farben geht meines Wissens immer noch nicht.

Geht immer noch nicht?

Nee, da gibt es ja jQuery UI für und so ein Color Plugin und so Sachen, aber Farben, also von, von Rot auf Grün so zu animieren, das geht wohl noch nicht.

Jedenfalls ohne UI nicht. Na ja, es gibt ja auch noch eine eins Punkt fünf irgendwann mal. So, dann haben wir die lange, lange Liste der Neuerungen auch so langsam mal durch, würde ich sagen. Fazit?

Also Fazit ist, für jQuery eins Punkt vier haben sie sich ein, ein Jahr Zeit gelassen. Durchaus auch, auch okay, weil mit eins drei hat man jetzt nicht unbedingt den Bedarf, dass man ständig auf eine neue Version wartet, weil die eins drei oder eins drei zwei ist stabil, war auch schnell und, konnt, man konnte damit gut arbeiten. Jetzt kommt eins vier nach einjähriger, Pause raus und es hält das, was verspricht, würde ich sagen. Es ist, ja, schneller geworden.

Der Code, ist jetzt durchaus an manchen Stellen auf jeden Fall lesbarer. Also sind, haben sich ein paar schöne Sachen einfallen lassen und ich denke, die Aufregung im Web ist auch zu Recht, dass das jetzt so gefeiert wird. Und, ja, es spricht eigentlich auch, glaube ich, wenn ich das richtig gesehen habe, nichts gegen einen raschen Wechsel.

Also du würdest auch, jetzt für ältere Projekte gegebenenfalls aufgrund der Performance upgraden?

Nee, das würde ich irgendwie nicht. Nee. Das habe ich auch seither nicht gemacht. Also-- Diese-- nee, das mache ich-- das wäre mir dann zu viel Arbeit, wenn ich dann gucken muss, falls dann doch nicht was gehen sollte. Die bleiben, alte Projekte in dem Fall bleiben dann zu. Aber, also ich denke, mein nächstes, jQuery-Projekt hat dann mindestens zwei, vier.

Okay, ja, also mit mehr Aufwand meine ich natürlich auch nicht das Einbinden. Das ist ja jetzt nicht der große Aufwand, sondern vor allem halt das Testen für jedes Projekt, ob alles noch so wirklich funktioniert.

Man kann natürlich sich auch darauf verlassen, dass das, dass die Konflikte, die es zur eins dreier gibt, die in der Liste haben wir entsprechend in den Shownotes auch noch mal verlinkt, dass die stimmen, aber ich würde trotz alledem, glaube ich, mein Projekt noch mal komplett durchgehen und, alle möglichen Funktionen, die ich so mit jQuery realisiert habe, dann noch mal überprüfen wollen. Insofern ist es schon ein bisschen Aufwand.

Vielleicht ein paar, minified Plugins eingebunden, wo du jetzt nicht mehr genau weißt, wie die funktionieren. Und da muss man halt gucken, ob, also entweder weiß, geht man dann zurück in die große Library von, jQuery und guckt, ob das Plugin vielleicht auch jetzt eins vier, recommend ist. Aber wenn ich dann, na ja, also je nachdem, ich würde das auch von den Plugins ein bisschen abhängig machen.

Wenn ich die meisten Sachen selbst geschrieben habe, dann sehe ich aber, ob das, zu Problemen kommen könnte.

Ja. Abschließend, zu den einzelnen Funktionen und Elementen und Zeugs. Grundsätzlich kann man api.jquery.com doch ziemlich empfehlen. Ist gut geworden, ist schön geworden. Vor allem die Kommentarfunktion, glaube ich, wird noch mal das eine oder andere, an, an Zusatzinformationen ans Licht bringen. Jqueryfourteen.com ist, denke ich, auch weiterhin zu empfehlen. Bin gespannt, was die Tage noch so bringen.

Die Q&A-Session, die man entsprechend auch noch mal, die damalige Live-Session, die man jetzt nachträglich noch mal sehen kann, kann man auch empfehlen. Da sind so auch noch mal ein paar Fragen aufgekommen, die beantwortet wurden.

Ja, und man sieht auch mal, wie die Jungs eigentlich aussehen, die für das Wunderwerk, zuständig sind.

Das auch.

Also ich finde so was auch mal ganz wichtig.

Ja, und inzwischen ist auch schon wieder ein neues Video draußen. Ich weiß gar nicht mehr, wie das heißt.

Internals oder so.

Genau, zeigt irgendwie noch mal oder er, da erzählt der gute Mann noch mal irgendwie so ein paar, ja, ein paar versteckte Geschichten.

Ja, was sich getan hat, was sie neu geschrieben haben, ja.

Genau, genau, genau. Ein paar Hintergründe. Ja, dann würde ich sagen, viel Spaß beim Ausprobieren. Ich hab, ich hoffe, dass es, dass wir vom, vom Niveau so einigermaßen das getroffen haben, was, ihr euch vorgestellt habt. Unverständlich ist einfach in der Doku dann noch mal genauer nachlesen. Es ist jetzt vielleicht ein bisschen viel Stoff gewesen, aber für die, die in jQuery zu Hause sind, hat es hoffentlich einen ganz guten Überblick gegeben. Und ja, Christian, dir vielen Dank fürs Dasein.

Wie war das erste Mal?

Ach, das war gut.

Das war gut. Kommst noch mal wieder, ja.

Ja, aber ich weiß noch nicht, welches Thema wir dann nehmen könnten.

Ja, schauen wir mal. Da finden wir bestimmt was. Vielleicht jQuery eins fünf.

Ja, habe ich auch gesagt.

Alles klar. In diesem Sinne wünsche ich eine schöne Woche, die ihr jetzt anfängt und, ja, bis zur nächsten Woche dann mit dem Thema Embedding. Bis dann. Tschüss.

Tschüss.

Mehr Qualität im Webdesign durch Webstandards. Tipps und Tricks zur Umsetzung findet ihr bei den Webkrauts auf Webkrauts.de. Für ein besseres Web. Weitere Informationen und die Links zur Sendung auf technikwürze.de.