Yahoo! User Interface Blog (YUIBlog)

Implementieren von YUI auf der Agile Planner Assembla.com

Schnelle und Spaß - das war die Voraussetzung für die Benutzer des neuen Assembla.com Agile Planner - ein AJAX-Interface für das Hinzufügen von Entwicklungsaufgaben, aufbauend Geschichte / Feature Konturen, und Scheduling sie in Veröffentlichungen. Wir hatten Glück und haben YUI 3 zu machen, schnell und macht Spaß als auch zu implementieren.

Ich hatte eingesetzt YUI 2 für eine Reihe von Projekten vor, und ich hatte durch das Engineering der UI-Komponenten und der darunter liegenden Infrastruktur-Bibliothek beeindruckt. Ich wollte mehr über YUI 3 lernen, mit seiner kompakten Syntax und tiefer Schwerpunkt auf DOM-Manipulation und CSS3-Selektoren Stil. Dieses Projekt, mit einer geringen Abhängigkeit von "vorgefertigte Widgets," war eine perfekte Gelegenheit, um meine Füße nass mit YUI 3. Die Einrichtungen für die 'große App' über die Umsetzung eigener Module und die Integration mit YUI Loader machte es eine natürliche Wahl.

Der Agile Planner unterstützt eine Reihe von Drag & Drop-Interaktionen des Benutzers mit mehreren Gruppen und Interaktion Kontext basierende Verhaltensweisen. Gleichzeitig, verarbeitet es eine komplexe Reihe von Interaktionen mit dem Server, darunter das Zusammenlegen in neue Daten vom Server, und leitet Änderungen an den Server.

Wir verbesserten auf dem bestehenden Planner, die auf Schienen Handler und Prototype.js beruhte. YUI der Sandbox Philosophie und starken OOP Einrichtungen gemacht Koexistenz mit Prototype.js ein Kinderspiel.

Wir verwendeten eine große Anzahl von YUI Komponenten, zB:

• Async-Queue, um eine ansprechende Erfahrung auf einer Seite, die 1000 + gleichzeitige Tickets beinhalten bieten
• Drag & Drop-Interaktion mit Gruppen.
• IO als Verbindungs-Manager in die Warteschlange und Massage-Server-Interaktion.
• Event-delegieren, damit einfach feuchtigkeitsspendende HTML-Templates und über sie zu vergessen.
• Event-Taste für Tastatur Interaktion und Navigation.
• Sammlung für uns eine konsequente Umsetzung Erfahrung in allen Browsern.
• Plätzchen für eine einfache kurzfristige UI Beharrlichkeit.
• Profiler, um die größte Geschwindigkeit Gewinne finden
• YUI Doc, um Informationen für den Rest des Teams verlassen

Arbeiten mit YUI 3 auf einer App wie diese hat Spaß gemacht, und ich freue mich zu hören, was unsere Nutzer werden uns fordern als nächstes zu tun!

Über den Autor: Joachim Larsen ist ein Frontend-Ingenieur mit Assembla.com.

Finden Gespräche: Bloglines | technorati

Teilen und zu erweitern: Lesezeichen mit del.icio.us | Digg it! | reddit!