Un peu de Javascript dans ce monde de flasheur bon sang de bois !
Et avant toute chose, je tenais à clarifier mon statut : je suis graphiste/webdesigner et non développeur pur souche. 
Voila qui est dit, on peut donc partir sur de bonnes bases !
La YUI (pour Yahoo! User Interface et à prononcer “yaoui”) est la librairie Javascript écrite par le géant Yahoo! et qui comporte un nombre très intéressants de features pour la manipulation du DOM, la gestion d’Event et l’AJAX.
Le gros avantage de cette librairie sur les autres est sa robustesse puisque la YUI est compatible tout navigateur avec une gestion des links très aisées (pas besoins de charger toute la YUI pour une simple gestion d’event). Elle est donc beaucoup plus légère que le couple prototype/scriptaculous grâce à sa conception modulaire mais en revanche bien plus bavarde à cause des namespace.
Dans le détail :
La YUI est composée de trois grands ensembles qui permettent des possibilités assez impressionnantes :
- YUI Core : pour la manipulation du DOM…
Qui permet aisément ces quelques manipulations : getElementsByClassName, hasClass, addClass, removeClass, replaceClass.
Et un gestionnaire d’événements très puissant : addEvents. - YUI Library Utilities : animation, Browser History Manager (qui gére les “précedent-suivant” du navigateur dans une page géré en AJAX), Connection Manager (XHR/Ajax), Cookie Utility, Datasource, Drag and Drop, Element, get utility (dynamic script/css loading), ImageLoader, JSON, Resize Utility, Selector Utility, YUI Loader
- YUI Library Controls/Widgets : AutoComplete, Button, Calendar, Charts (création de graphiques à partir d’objets Json), Color Picker (à peu prés le même que celui de Photoshop), Container (qui permet de créer des popin draggables, très robustes, recentrables et animables), DataTable (qui permet de créer des tableaux triables aisément), ImageCropper beta, Layout Manager beta, Menu, Rich Text Editor, Slider, TabView, TreeView, Uploader…
Voici trois exemples d’utilisation de la YUI :
Images Cropper
Color Picker
Panel resizable
La page d’exemple : YUI examples.
Par ailleurs, la YUI semble être la seule librairie javascript qui bénéficie d’une vraie documentation normalisée.
Pour enfoncer le clou, elle est complétée par les Yahoo Design Pattern qui sont une base de documents qui décrit quelle est la transition (le pattern) la plus appropriée dans chaque cas. Il devient donc facile de créer un carrousel, un slider etc…
Quelques sites utilisant la YUI : Flickr, YahooMail, Nestoria, Slashdot, Opera.com, Smugmug, Wikia, TripIt, LinkedIn, MonCV.com…
9 mai 2008 à 1:44
La doc a l’air effectivement assez bien foutue.
Je trouve la syntaxe du moteur de Tween géniale aussi (avec les by / from / to)
var attributes = {
width: { from: 10, by: 200 },
height: { from: 10, by: 200 }
};
var myAnim = new YAHOO.util.Anim(’test’, attributes);
myAnim.animate();
9 mai 2008 à 9:05
Et on peut facilement gérer les anims.
Exemple :
var removeElement = function() {
var el = this.getEl();
el.parentNode.removeChild(el);
}
myAnim.onComplete.subscribe(removeElement);
Avec des tweens semblables à tweener (YAHOO.util.Easing.easeOut);
Les animations de courbes aussi sont bien foutues : http://developer.yahoo.com/yui/examples/animation/control_clean.html
14 mai 2008 à 9:16
Balèze.
14 mai 2008 à 12:12
J’ajoute qu’un de ses points forts est que les développeurs utilisent un maximum de bonnes pratiques HTML/CSS, et testent sur tous les gros navigateurs du marché (IE, FF, Safari, Opera… ce qu’ils appellent les “A-grade browsers”). On se concentre beaucoup plus sur les fonctionnalités c’est très agréable d’un point de vue de développeur. Par contre, ils sont un peu en retard sur certaines fonctionnalités graphiques (tableaux notamment, en comaprant par exemple avec ExtJS).