WordPress 3.5: Willkommen Backbone.js und Underscore.js; Adios Prototype und script.aculo.us

Während des gestrigen Entwickler Chats waren die JavaScript Bibliotheken in WordPress großes Thema.

Zum einem wurde jQuery 1.8, welches mittlerweile 3 Wochen auf dem Markt ist, für den Core abgesegnet. Zudem wurde auch jQuery UI auf die stabile Version 1.8.23 aktualisiert.

Backbone.js und Underscore.js

Backbone.js ist ein Model-View-Controller (MVC) Framework für JavaScript. Die Bibliotheken bieten eine solide Basis für objektorientierte Programmierung und simulieren etliche Hilfsfunktionen und eine erweiterbare Klassenhierarchie.
Dieser Vorteil ermöglicht das organisieren der Daten und die saubere Trennung zwischen Daten und Logik.
Mit der integrierten Template-Engine kann das HTML-Markup und die Logik sauber voneinander getrennt werden.

With Backbone, you represent your data as Models, which can be created, validated, destroyed, and saved to the server. Whenever a UI action causes an attribute of a model to change, the model triggers a “change” event; all the Views that display the model’s state can be notified of the change, so that they are able to respond accordingly, re-rendering themselves with the new information. In a finished Backbone app, you don’t have to write the glue code that looks into the DOM to find an element with a specific id, and update the HTML manually — when the model changes, the views simply update themselves.

Backbone.js: Introduction

Underscore.js verspricht hingegen die Unterstützung von funktionalen Programmierkonstrukten für den Umgang mit Arrays, Collections und Objekten, wie zum Beispiel each, map, find, filter oder toArray.

Underscore is a utility-belt library for JavaScript that provides a lot of the functional programming support that you would expect in Prototype.js (or Ruby), but without extending any of the built-in JavaScript objects. It’s the tie to go along with jQuery’s tux, and Backbone.js’s suspenders.

Underscore provides 60-odd functions that support both the usual functional suspects as well as more specialized helpers. It delegates to built-in functions, if present, so modern browsers will use the native implementations.

Underscore.js: Introduction

Was will WordPress mit Backbone.js und Underscore.js?

Beide Projekte sind eine optimale Grundlage für sogenannte Single-Page Webanwendungen.
Eine solche Anwendungen findet man auch jetzt schon im WordPress Core.

WordPress Theme Customizer

Es ist der Theme Customizer (Live-Vorschau des Themes), der mit WordPress 3.4 eingeführt wurde.

In WordPress 3.5 wird es weitere Projekte geben, die auf diese Art umgesetzt werden sollen.
Dazu zählt der neue Media-Workflow samt den Dialogfenster, sowie die Umsetzung von Aktionen und Filtern für JavaScript, quasi add_action() bzw. add_filter() für JavaScript.

Den Grafiken folgen Prototype und script.aculo.us

Wie schon berichtet, hat WordPress sich von ungenutzten Grafiken befreit. Jetzt hat es auch die beiden JavaScript Bibliotheken/Frameworks Prototype und script.aculo.us getroffen. Kein großer Verlust, denn sie wurden schon länger nicht mehr genutzt.

Fallback für Plugins/Themes: Falls doch noch ein Plugin/Theme existiert, welches von den beiden Bibliotheken abhängig ist, werden die benötigten Skripte automatisch von der Google API eingebunden. Guter Schachzug meiner Meinung nach.

Ausschnitt aus der Funktion wp_default_scripts():

<?php
	// WordPress no longer uses or bundles Prototype or script.aculo.us. These are now pulled from an external source.
	$scripts->add( 'prototype', '//ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js', array(), '1.7.1');
	$scripts->add( 'scriptaculous-root', '//ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/scriptaculous.js', array('prototype'), '1.9.0');
	$scripts->add( 'scriptaculous-builder', '//ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/builder.js', array('scriptaculous-root'), '1.9.0');
	$scripts->add( 'scriptaculous-dragdrop', '//ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/dragdrop.js', array('scriptaculous-builder', 'scriptaculous-effects'), '1.9.0');
	$scripts->add( 'scriptaculous-effects', '//ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/effects.js', array('scriptaculous-root'), '1.9.0');
	$scripts->add( 'scriptaculous-slider', '//ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/slider.js', array('scriptaculous-effects'), '1.9.0');
	$scripts->add( 'scriptaculous-sound', '//ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/sound.js', array( 'scriptaculous-root' ), '1.9.0' );
	$scripts->add( 'scriptaculous-controls', '//ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/controls.js', array('scriptaculous-root'), '1.9.0');
	$scripts->add( 'scriptaculous', false, array('scriptaculous-dragdrop', 'scriptaculous-slider', 'scriptaculous-controls') );

Nebenbei: min.css/min.js für komprimierte Stylesheets/Skripte

Bisher wurden die unkomprimierte Stylesheets mit der Endung .dev.css kenntlich gemacht, analog bei den Skripten .dev.js.
WordPress 3.5 geht nun die typische .min Konvention ein, das heißt: Komprimierte Dateien bekommen die Endung .min.css/.min.js und die Unkomprimierten haben keinen Suffix mehr.

Vor WordPress 3.4:
Entwicklerversion: dateiname.dev.css
Komprimierte Version: dateiname.css

Mit WordPress 3.5:
Entwicklerversion: dateiname.css
Komprimierte Version: dateiname.min.css

Zum Thema

WordPress 3.3: Änderungen bei Javascript Bibliotheken und Funktionen

WordPress 3.3 hat den Status Feature Freeze erreicht. Das heißt, alle Neuerungen, die für WordPress 3.3 geplant waren, sind im Core. Neues wird nicht mehr kommen.

Auf der ToDo Liste für WordPress 3.3 standen auch viele Punkte, die sich rund um Javascript gedreht haben.

WordPress und jQuery

Andrew Ozz, der Javascript Guru für WordPress, hat jetzt eine Liste veröffentlicht, in welcher Entwickler auf die kommenden Änderungen im Bezug auf Javascript informiert werden.

jQuery

jQuery, die Javascript Bibliothek, wurde auf die Version 1.6.4 aktualisiert. In WordPress 3.2.1 befindet sich aktuell die Version 1.6.1.
Hier die Changelogs:

jQuery UI

jQuery UI, die UI Erweiterung für jQuery, wurde auf Version 1.8.16 aktualisiert. In WordPress 3.2.1 befindet sich aktuell die Version 1.8.12.
Hier die Changelogs:

Desweiteren wurde nun die komplette jQuery UI Bibliothek in WordPress aufgenommen. Folgendes ist in WordPress 3.3 verfügbar (Grünes ist Neu):

  • jQuery UI Core
  • jQuery Effects Core
    • Blind
    • Bounce
    • Clip
    • Drop
    • Explode
    • Fade
    • Fold
    • Highlight
    • Pulsate
    • Scale
    • Shake
    • Size
    • Slide
    • Transfer
  • jQuery UI Widget
    • Accordion
    • Autocomplete
    • Button
    • Datepicker
    • Dialog
    • Progressbar
    • Slider
    • Tabs
  • jQuery UI Draggable
  • jQuery UI Droppable
  • jQuery UI Mouse
  • jQuery UI Position
  • jQuery UI Resizable
  • jQuery UI Selectable
  • jQuery UI Sortable

WordPress Editor API

Die Editor API hat ein großes Update bekommen. Nicht nur TinyMCE wurde auf den neusten Stand, Version 3.4.5, denn mit WordPress 3.3 ist es auch möglich, den Editor samt Medienuploader, auch ins Frontend zu holen. Im Ticket #17144 gibt es dazu auch ein Beispielplugin.

Quicktags

Mit der Überarbeitung der Quicktags API ist es unter anderem möglich mehrere Instanzen von Quicktags auf einer Seite zu verwenden. Weitere Infos dazu im Ticket #16695.

Neuer Medienuploader – Plupload

Plupload hat es als einziges Google Summer of Code Projekt in WordPress 3.3 geschafft.
Plupload ist stabiler als SWFUpload und hat mehrere Features, wie Drag & Drop, automatische Größenänderung sowie HTML5 Support. Siehe Ticket #18206.

Geänderte Funktionen

Dazu zählt zum Einem wp_enqueue_script(). Vor WordPress 3.3 konnte ein registriertes Skript, welches zum Beispiel erst im the_content Hook eingebunden wurde, nicht im Footer geladen werden. Dies ist nun möglich, dank des drei Jahre alten Tickets #9346

Ab WordPress 3.3 verwendet die Funktion wp_localize_script(), welche zum Übersetzen von Javascript Texten oder Übergeben von Variablen genutzt wird, zur Ausgabe json_encode(). Damit fällt unter anderem die lästige l10n.js Datei weg. Weitere Infos im Ticket #11520.

Weitere Neuerungen sind aktuell noch die Feature Pointers oder die Option Auto für das Bildschirm-Layout.

Präsentationen vom WordCamp San Francisco 2011

Das WordCamp San Francisco 2011 ist vorbei. Neben dem State of the Word vom Matt Mullenweg gab es auch noch viele andere interessante Präsentationen rund um WordPress.

Ich habe sie mal für euch rausgesucht und hier aufgelistet.

WordPress Kern

Coding, Scaling and Deploys

coding-scaling-and-deploys

Transients, Caching, and the Complexities of Multisite

transients-caching-multisite

Fehler erkennen und beseitigen

How testing changed my life

testing

Debugging in WordPress

debugging-wordpress

JavaScript Unit Testing

dont-repeat-your-mistakes

WordPress Themes

WordPress Post Formats

wordpress-post-formats

Was mit WordPress erstellt werden kann

Building Custom CMS Applications On WordPress

custom-cms-applications

Options for a Multilingual Site

options-multilingual-site

Ecommerce and WordPress

ecommerce-and-wordpress
case-study-emusic

CSS

Making it snow

css3-animations

CSS Pseudos

css-pseudo

Responsive Web Design

responsive-web-design

Sonstiges

Desisions not Options

desisions-not-options

Version Control for Designers

version-control