Schnelleres Laden von Javascript-Bibliotheken

Content Delivery Networks (CDN), wie Google Libraries API oder Microsofts Ajax Content Delivery Network ermöglichen es, bekannte Javascript-Bibliotheken mit ihrer Infrastruktur auszuliefern. Das hat den Vorteil, dass die Skripte von dort schnell geladen werden - was den Ladezeiten der eigenen Seite sehr zugute kommt.

Einfach ein Aufruf wie

 <script src=&ldquohttp://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.js&rdquo type=&ldquotext/javascript&rdquo></script>

in die eigene Seite und schon hat man das allseits beliebte jQuery-Framework mit an Bord, ohne es lokal zur Verfügung stellen zu müssen.

Wer etwas mehr Kontrolle über das Laden von externen Quellen haben will, kann mit dem bereits erwähnten yepnope.js das Verhalten und die Fallbacks steuern.

Unbekanntere Javascript-Bibliotheken sucht man bei diesen großen CDNs jedoch vergebens und schaut im wahrsten Sinne in die Wolke. 

Zum Glück hat das Netz hier bereits Abhilfe geschaffen. Bei cdnjs wird man auch bei kleineren Bibliotheken fündig und die bereits erwähnten Kandidaten yepnope.js und modernizr.js sind natürlich mit an Bord. 

cdnjs verwendet zur Auslieferung die Amazon CloudFront, zusammen mit Amazon S3 für DNS.  So werden die Javascript-Bibliotheken mit Sicherheit schneller ausgeliefert, als vom eigenen Webserver.

Modernisierung einfach gemacht

Modernizr ist ein weiteres kleines Javascript, dass einem dabei hilft auch ältere Browser etwas zu entstauben und neuen Glanz in die Bude zu bringen.

Dabei rüstet es aber im Gegensatz zu html5.js oder ie-9.js keine fehlende HTML5- bzw. CSS3-Unterstützung nach, sondern spielt seine Stärke durch sehr gute Erkennung der Browserfähigkeiten aus.

Auf der Homepage  von modernizr wird dies sehr schön dargestellt. Ein Besuch dieser Seite ist es schon deshalb einmal Wert, um zu sehen was der eigene Lieblingsbrowser so alles drauf hat. 

Einmal erkannt welcher Browser gerade vorbeischaut, fügt modernizr Klassen an die jeweiligen HTML-Elemente und bietet dadurch weitere Hooks und Kontrollmöglichkeiten.

Ein Beispiel von der modernizr-Website zeigt wie man sich das vorstellen darf:

.multiplebgs div p {
  /* properties for browsers that
     support multiple backgrounds */
}
.no-multiplebgs div p {
  /* optional fallback properties
     for browsers that don't */
}

 Modernizr arbeitet dabei geschickt mit yepnope zusammen  und unterstützt auch eine Menge bereits vorgefertigter polyfills. Passende Fallback-Skripte dazu gibt es bei github zum download.

yepnope.js der schlauere Resource Loader

&ldquoA conditional loader for your polyfills&rdquo bezeichnet yepnope ihren cleveren Resource-Loader.  Dabei handelt es sich um einen asynchronen Loader, der flink arbeitet und dabei hilft, nur die Skripte zu laden, die auch tatsächlich auf dem jeweiligen Browser benötigt werden und gegebenenfalls Fallbacks (polyfills) für den Browser nachzuladen.

Als sehr praktisch erweist sich das, wenn man z.B HTML5 und CSS3 Seiten für die neusten Browser entwickelt, dabei aber die &ldquoaltgedienten&rdquo Browser wie Internet Explorer oder Firefox 3 nicht ins offene Messer laufen lassen will.

Yepnope fungiert dabei als Javascript Loader, der die Polyfills erst bei Bedarf nachlädt und dabei selbst als intelligente Weiche arbeitet.  Yepnope.js ist mit nur 1,6 KB (GZip,minified) erstaunlich schlank.

Ein Test Objekt hat bei yepnpope.js immer folgenden Aufbau:

yepnope([{
  test : /* boolean(ish) - Something truthy that you want to test             */,
  yep  : /* array (of strings) | string - The things to load if test is true  */,
  nope : /* array (of strings) | string - The things to load if test is false */,
  both : /* array (of strings) | string - Load everytime (sugar)              */,
  load : /* array (of strings) | string - Load everytime (sugar)              */,
  callback : /* function ( testResult, key ) | object { key : fn }            */,
  complete : /* function                                                      */
}, ... ])

So kann yepnope.js z.B. Resource Fallbacks laden und nebenher abhängige Skripte laden. Hier ein Beispiel aus der yepnope.js Dokumentation:

yepnope([{
  load: 'http:/­/ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js',
  complete: function () {
    if (!window.jQuery) {
      yepnope('local/jquery.min.js')
    }
  }
}, {
  load: 'jquery.plugin.js',
  complete: function () {
    jQuery(function () {
      jQuery('div').plugin()
    })
  }
}])


Alles in allem ein wirklich schlauer Loader, der einem das Entwicklerherz höher schlagen lässt.


XML-RPC Client für OS X

 Screen XML-RPC Client

Todd Ditchendorf hat einen XML-RPC Client für OS X entwickelt. Dabei handelt es sich um ein Entwickler Tool für den Mac, welches einem den Aufruf und das Debuggen von XML-RPC Web Services komfortabler macht.

XML-RPC ist vielleicht nicht mehr ganz taufrisch und im Zuge vom schlankeren und einfacher handzuhabenden Datenaustausch per JSON und Web Services auch nicht mehr unbedingt empfehlenswert.

Dennoch ist es ein wirklich nützliches Tool, wenn man öfters mal mit XML Web Services zu tun hat und sich mit der Optik der sonstigen in Java geschriebenen Mitstreiter nicht wirklich anfreunden kann.

Nähere Infos zu dem Tool gibt es hier.

Downloaden kann man das kleine Helferlein z.B. bei MacUpdate

Javascript Framework für Minimalisten

Es soll ja Leute geben denen jQuery mobile oder Sencha Touch für die mobile App Entwicklung einfach zu groß sind. 

Wer es also lieber eine Nummer kleiner mag, sollte einmal einen Blick auf zepto.js werfen. Das Javascript Framework für Minimalisten glänzt durch jQuery kompatible Syntax und ist mit unter 5k weitaus kleiner als die oben genannten &ldquogroßen&rdquo Brüder. 

Zepto.js beschränkt sich dabei auf die wesentlichen Funktionen und unterstützt zur Zeit ausschliesslich WebKit Browser. iPhone, iPad, Android und Palm WebOS sind damit also bestens abgedeckt. Komprimiert ist zepto.js gerade mal ein halbes Kilobyte groß.

Feed abonieren


Blog Tags


Tag Cloud


Blog Hosting

tumblr logo