Beiträge tagged mit javascript

Alle Beiträge

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.


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ß.

Textmate in Rente geschickt

Nach jahrelangem Einsatz von Textmate - dem Coding Editor für OS X - habe ich mich überwunden und des gute Stück in Rente geschickt. 

Als würdigen Nachfolger habe ich mir phpstorm von JetBrains zugelegt und ich muß sagen - es hat sich gelohnt. Jeder der ernsthafte Javascript und Webentwicklung auf dem Mac betreibt, sollte sich den Editor einmal anschauen. Eine Trial Version gibt es kostenlos. Damit kann man die Software 30 Tage lang testen und selber urteilen, ob es sich ein Umstieg lohnt.   

Der Editor läuft unter OS X, Windows und Linux und ist in Java geschrieben. Optisch nicht gerade ein Schmuckstück - aber unter der Haube steckt wirklich Power, die einem die Webentwicklung einfacher macht. 

Mein Tipp: Unbedingt mal anschauen.

Feed abonieren


Blog Tags


Tag Cloud


Blog Hosting

tumblr logo