Yahoo! User Interface blog (YUIBlog)

Loader Utilisation à Quorus

24 mars 2011 à 09h49 par Peter Abrahamsen | En développement , Implémentations YUI | 1 Commentaire

Aujourd'hui, j'aimerais parler de YUI Loader et comment nous au Quorus, Inc , l'utiliser pour fournir des sites tiers avec de nouvelles fonctionnalités à la demande.

Le code que nous écrivons les caractéristiques des pouvoirs sur les pages des autres peuples, ce qui signifie que nous sommes dans la position peu enviable d'avoir non seulement aucun contrôle sur l'environnement du navigateur, mais de lourdes restrictions à la façon dont nous utilisons le document lui-même. Nos clients mettre un script bootstrap Quorus sur leurs pages; tout ce qu'il faut pour notre fonctionnalité est chargé dynamiquement et sur demande. Nous allons à longueurs héroïque pour faire en sorte que nos éléments, les styles et les scripts ne modifient pas le comportement de tout ce que nous ne sommes pas responsables.

Nous avons commencé notre base de code actuelle il ya deux ans, quand YUI 3 était juste à prendre forme. C'était une décision risquée au moment de s'engager dans une base de code qui ne serait pas touché beta pendant plusieurs mois. En rétrospective, je ne peux pas imaginer comment nous aurions accompli ce que nous avons sans elle. Je n'ai pas vu tout autre cadre qui a des composants approchent la puissance du chargeur, d'attributs , et CustomEvent .

Le script bootstrap Quorus nous fournissons à nos clients ne fait presque rien. Son travail consiste simplement à charger le noyau de notre plate-forme sans pour autant bloquer le reste de chargement de page, et de faire la queue toute l'API appels jusqu'à ce que nous avons fait. Ce fichier de script de base, appelé stage2, inlines yui , loader , et oop , ainsi que smarts suffisant pour charger des bibliothèques supplémentaires pour répondre à des appels d'API, l'utilisateur clique, et d'autres conditions dans l'environnement d'exploitation. La plupart des ressources d'autres sont servis par un serveur combo personnalisé qui sert personnalisée Quorus et du stock de modules YUI.

Bootstrap files d'attente jusqu'à l'API appels lancés dans le code du site hôte entre le moment où il charge et lorsque nous sommes prêts à aller dans un tableau sur notre objet global, QUORUS:

 QUORUS._callbacks = []; QUORUS.use = function () { // turn the arguments object into a regular array, // so that it can be stored safely var args = Array.prototype.slice.call(arguments, 0); QUORUS._callbacks.push(args); }; 

Une fois que nous sommes prêts à traiter les appels d'API, stage2 fonctionne un par un dans les temporisations. Cela garantit que nous céder le contrôle régulier au navigateur, ce qui rend l'expérience utilisateur plus réactive. Le comportement est un peu comme Y. AsyncQueue, mais plus simple et ne nécessite pas de YUI à charger:

 // Put the real 'use' function in place for any subsequent calls: QUORUS.use = function (feature, callback) { YUI.use('module-that-provides-the-feature', function (Y) { // find the API for the requested feature, and pass it to the callback callback(Y.APIs[feature]); // process another pending API call, if any: setTimeout(processAPICall, 0); }); }; // Play catch-up, running each callback in sequence: function processAPICall () { var callback = QUORUS._callbacks.shift(); if (callback) { QUORUS.use.apply(QUORUS, callback); } } // Start processing the queue: processAPICall(); 

Le bootstrap fichier est, en ce point, la plupart du temps immuable: c'est quelque chose que nous avons la main hors d'un client, qui pourrait nécessiter un mois ou plus à déployer toute nouvelle version nous leur avons donné un temps incroyablement-long pour une entreprise en démarrage agile. Le stage2 fichier, quant à lui, est petit, les charges de nos propres serveurs, et a une durée de vie du cache court. Cela garantit que l'utilisateur final ne sera avez une ancienne version pour plus de quelques minutes. Presque toutes les autres ressources dont nous avons besoin dans les bibliothèques JavaScript définitivement cacheable et les fichiers CSS.

Quand nous sortir une nouvelle version de notre code, stage2 dirige automatiquement les navigateurs pour commencer le téléchargement à partir d'un nouvel emplacement, veiller à ce qu'ils utilisent seulement le code le plus récent. Cette configuration nous permet de déployer rapidement des changements sans servir les actifs plus souvent que nécessaire. Non seulement cette maintenir nos coûts à faible bande passante, mais il offre une meilleure expérience utilisateur: les ressources en cache de charge très rapidement alors que la page se charge.

Si nous devions commencer notre base de code aujourd'hui, avec le bénéfice de la Galerie YUI , il ya un certain nombre de composants que nous pourrions utiliser pour nous faciliter la vie. L'un d'eux est Eric Ferraiuolo est responsable de la base de composants , qui assiste avec le câblage jusqu'à composants (généralement Widgets) sur demande. Une autre pourrait être de stockage Lite , pour nous aider à conserver l'état d'application des charges à travers la page.

Un grand merci à l'équipe de YUI pour leur excellent travail, et à la communauté pour leurs contributions. Si vous souhaitez lire sur nos approches pour sandboxing ou à la coordination des composants chargés de manière asynchrone, s'il vous plaît faites le moi savoir dans les commentaires!

A propos de l'auteur: Peter Abrahamsen écrit Ruby et JavaScript, gère l'infrastructure du serveur, et les études de conception centrée utilisateur à Seattle, Washington, États-Unis. Il peut être trouvé sur IRC que Rainhead.

Trouver des conversations: Bloglines | technorati

Partager et prolonger: Conservez ce lien avec del.icio.us | Digg it! | reddit!

Apporter YUI Theater aux téléviseurs à Internet

Décembre 6, 2010 à 10:14 par le Tchad Auld | En développement , Implémentations YUI | 4 Commentaires

Je voulais poster un rapide mise à jour sur un des projets liés YUI quelques j'ai travaillé sur un de mes amis, Ozgur Cem Sen (@ ozgurcemsen). Eric posté il ya quelques mois à propos de nos efforts pour amener YUI Theater Boxee . Nous venons de terminer retravailler l'interface utilisateur pour Boxee et ajoute quelques nouvelles fonctionnalités comme la navigation par tags et de recherche. Nous travaillons actuellement avec l'équipe de Boxee pour obtenir l'application ajoutée dans le nouveau référentiel Boxee Box . C'est en plus de l'référentiel standard, ils ont pour la version desktop. Le référentiel de Boxee Box a certaines exigences strictes de qualité autour de la performance et la vidéo. Les nouvelles versions devraient, espérons-le à l'intérieur de la semaine prochaine.

Bien finir le soft Boxee nous sommes tombés sur la plateforme de télévision Samsung et le timing était parfait car ils sont en fait l'exécution d'un "Free the TV" défi. Nous avons rencontré le concours assez tard dans le jeu et presque raté la date limite de soumission, mais nous avons poussé dur et réussi à recréer la même expérience pour Samsung dans l'ordre court. Si vous avez quelques minutes s'il vous plaît voter / aider à répandre le mot au sujet de notre mémoire pour Samsung YUI Theater - http://www.freethetvchallenge.com/submissions/249 . Nous avons 50 + d'autres entrées à battre.

Dernière, mais non des moindres - nous avons aussi tout récemment terminé son travail sur une application YUI Theater pour Plex . Il n'est pas dans le référentiel d'applications encore officiel, mais la demande est po En attendant, vous pouvez le télécharger ici si vous souhaitez - http://wiki.plexapp.com/index.php/YahooYUITheater .

Voici quelques vidéos des applications dans l'action:

• Samsung TV app - http://www.youtube.com/watch?v=e1kRicivfDU
• Plex app - http://www.youtube.com/watch?v=oxBPqVQqdnY
• Boxee app - http://www.youtube.com/watch?v=IK4i1DksuhU

Vous devez vous attendre à voir des efforts similaires pour Google TV et Yahoo Connected TV dans un avenir pas si lointain aussi bien.

Espérons que ces applications se révéler de précieuses ressources pour ceux qui ne peuvent généralement assister à la meetups et / ou n'a pas fait la dernière YUIConf . Nous allons continuer à ajouter de nouvelles vidéos comme ils sont libérés.

Trouver des conversations: Bloglines | technorati

Partager et prolonger: Conservez ce lien avec del.icio.us | Digg it! | reddit!

jQuery et YUI 3: A Tale of Two bibliothèques JavaScript

Octobre 27, 2010 à 2:08 pm par Mark Rall | En développement , Implémentations YUI | 5 Commentaires

Récemment, j'ai eu l'opportunité de construire ma première application JavaScript extrémité avant. Ce qui suit est un court récit de la découverte et l'évolution qui se produit quand essayant d'utiliser des outils qui ne sont pas adaptés à la tâche à accomplir. C'est un récit de l'apprentissage acquis par le développement de l'application même front extrémité à l'aide de deux bibliothèques très différentes, jQuery et YUI 3. Détails sur le client et le projet ont été volontairement omis.

Aperçu

Le projet comprenait la refactorisation de plusieurs outils Flash disparates en une seule application interactive basée sur des standards ouverts pour un éditeur de contenu à grande. D'une grande importance, la demande devait être hautement optimisé avec une empreinte initiale faible en raison du grand nombre d'impressions de page par jour, le client reçoit. Plusieurs phases ont été impliqués, le premier étant une première preuve de concept.

Le concept impliqué le développement d'un point de vue de ce que serait l'application terminée. Elle se composait de:

• Un fichier graine initiale (<1 Ko) responsable du chargement dynamique de toute cadres (par exemple, jQuery ou YUI 3) et le dossier de la demande initiale.
• Le développement et l'intégration de plugins jQuery pour soutenir un style élément de formulaire et de validation, et visualisations graphique dynamique.
• La génération et la population de l'interface utilisateur, basé sur les entrées utilisateur, par défaut de configuration et emplacement de l'application au sein du site de l'éditeur.
• Le calcul et la présentation de l'information basée sur l'entrée de l'utilisateur.

Dans l'intérêt de la divulgation complète, ma propre expérience à ce point avait été dans le développement de petites solutions autonomes, dont le type que vous pourriez décrivent habituellement sous forme de plugins. Il s'agit notamment des composants d'interface dynamiques tels que les carrousels d'images, des cartes interactives et Twitter / Flickr widgets. Au moment de la première barboteurs avec JavaScript, jQuery était populaire, facile à apprendre et m'a permis de reprendre rapidement les rudiments nécessaires pour les projets que je travaillais. Toutefois, ces unités étaient tous autonomes et n'avaient pas besoin d'interagir avec d'autres codes ou dans le cadre d'une plus grande application.

Première tentative

À l'issue de la première phase du projet, il est devenu douloureusement évident que j'avais affaire à une bête très différent de ce que j'étais habitué. Ayant eu peu d'expérience dans l'organisation du code, mon code est rapidement devenue désorganisée, inefficace et répétitives. En conséquence, la première partie de ce qui allait devenir une application beaucoup plus large a été lent à charger. En fait, il a fallu huit secondes pour générer cette seule preuve de concept. Un grand changement était nécessaire et alors que j'avais envisagé d'utiliser une petite bibliothèque, comme base de Dean Edward ou John Resig de l'Héritage Simple JavaScript tendance à ajouter de classe basée sur l'héritage pour jQuery, j'ai décidé d'aller encore plus loin.

Ce que je voulais, c'était un cadre complet, dans lequel matures pour développer ma première application OO. Quelque chose qui aurait pour effet de me guider dans le processus. En examinant les bibliothèques disponibles, j'ai décidé d'adopter YUI 3 pour les raisons suivantes:

• Intégré, basé sur l'héritage de soutenir le développement d'application, y compris l'attribut et la gestion de classe.
• Solution à long terme:
  • Support des standards et l'accessibilité.
  • Financé par une grande organisation, bien connu Yahoo!
  • Associé à des noms respectés comme Douglas Crockford , Nicolas Zakas , et Stoyan Stefanov .
• Optimisation des performances:
  • Le fichier source initiale de seulement 7KB.
  • Lazy-modules chargés à la demande.
  • La livraison CAN.
• La documentation complète et variée:
  • Developer Network Yahoo!
  • YUI 3 Documentation API
  • YUI Theater
  • YUI Library
  • YUI Blog
• Mature, évolution cohérente entre les versions.
• Des outils intégrés de YUI Compressor , YUIDoc , YUI Builder , et la console .
• Non seulement le code JavaScript, CSS un cadre aussi.

Take Two

Intégration YUI 3 a plusieurs avantages directs et indirects pour le projet:

• Héritage basée sur l'architecture et la gestion de classe à travers les attributs d'interface, et la base et le Widget classes productrices performantes, un code réutilisable et organisée.
• Séparation de la présentation du modèle et les données en utilisant les widgets de classe pour rendre d'autres vues (en ligne ou superposition) basé sur l'emplacement de l'application au sein du site.
• Sandboxing et dynamique module de l'inclusion par YUI.use ().
• Console de débogage de la Croix-navigateur utilisant YUI console .
• Le sauver, optimisation de la performance en utilisant YUI Compressor dans Eclipse.
• Facile d'inclusion et d'intégration de plugins jQuery pré-existante.
• Le sauver, de documentation automatique de code utilisant YUIDoc .

Le résultat final était un client heureux et un produit fini avec des temps de chargement d'une seconde (en se souvenant qu'il a pris 8 secondes pour charger la preuve de concept).

Leçons apprises

Sélectionnez l'outil idéal pour l'emploi

En lisant ce post, je suis sûr que certains lecteurs vont voir ce que les anti-jQuery. Pas du tout. jQuery est un projet fantastique responsables de nombreuses innovations. Mais, comme avec n'importe quel outil, il a ses forces et une destination. Sa force réside dans les incohérences navigateur normalisant, en abaissant la barrière à l'entrée pour le novice et l'amélioration de l'efficacité des programmeurs expérimentés. L'apprentissage primaire qui est sorti de ce projet est que vous ne pouvez pas compter sur un outil pour chaque tâche. YUI s'appuie sur ce que jQuery peut fournir en offrant également un cadre d'application bien architecturé. Mais il est juste de dire qu'elle a un coût, voir le point suivant.

Courbe d'apprentissage abrupte

Vous avez besoin de patience, surtout quand l'écriture de votre première application avec une bibliothèque inconnue que j'ai fait. Cependant, la récompense est immense. Par l'apprentissage d'une autre bibliothèque, non seulement vos compétences fondamentales d'améliorer JavaScript, vous aurez également développer une meilleure compréhension du fonctionnement des bibliothèques et les avantages qu'elles apportent. J'essaie d'apprendre de nouvelles choses sur YUI quotidienne et plus j'apprends, plus je suis dans la crainte de la pensée et le talent pur qui est allé dans la construction de YUI.

Seuls charger du contenu lorsque vous en avez besoin

Bien qu'il soit certainement plus facile de programmation pour charger tout ce que vous pourriez avoir besoin initial, les améliorations de performance acquise en tant que résultat direct de contenu lazy loading uniquement lorsque vous en avez besoin est énorme. Ce fut l'un des facteurs clés contribuant à considérablement améliorer la performance de l'application.

Interagir avec les DOM aussi peu que possible

Ce point n'a pas trait à la bibliothèque spécifique utilisé. En mettant en cache les éléments requis DOM et en utilisant des modèles HTML de plus, le temps de rendu IU a considérablement diminué. Les nœuds peuvent être mises en cache en utilisant Y.one () tandis que les listes nœud peut être capturée à l'aide Y.all (). Aussi Y.Node.create () a été très utile dans la conversion efficace des chaînes de texte grand format HTML aux éléments DOM avant l'insertion.

Apprenez par exemple, utiliser un CDN

En utilisant la bibliothèque CDN livré YUI, nous avons décidé de livrer tous les actifs du projet à travers CAN. Ce fut probablement le facteur le plus important prochaines contribuer à l'amélioration des performances.

Publiée, sous brouhaha

Pour les programmeurs expérimentés là-bas, essayez de ne pas rire de celui-ci. Ayant été utilisé pour écrire un peu plus de plugins dans le passé, je n'avais aucune idée de comment les applications doivent communiquer en interne. Même après avoir lu «Les événements personnalisés vous permettent de publier les moments intéressants ou des événements dans votre propre code afin que les autres composants sur la page peuvent s'abonner à ces événements et à y répondre,« J'ai encore raté.

Comme il s'avère, d'événements personnalisés Yui publication-souscription du modèle fonctionne à merveille pour les communications inter-classes et inter-objet. Vous pouvez même vous abonner pré et post à des événements et inclure une logique dynamique pour supprimer bouillonnant basées sur certaines conditions.

Intégrer les meilleures pratiques dans votre workflow

Utilisation d'Eclipse, nous avons pu intégrer JSLint et YUI Compressor dans le processus de construction. Plus simplement, chaque fois que vous appuyez sur Ctrl / Cmd + S votre code JavaScript est validée et optimisée. Cela signifie que vous êtes contre le code des tests de production optimisé, le grade de la toute première ligne de code. Cela signifie également que vous n'oublierez pas d'optimiser dans la course effrénée final à l'échéance de livraison.

Apprendre sur le tas YUI

Bien que chacun a un style d'apprentissage différent, j'ai pensé partager ce que j'ai utilisé les ressources pour apprendre YUI avec un objectif précis en tête.

• Regarder les épisodes pertinents Théâtre YUI pour obtenir un aperçu général de la bibliothèque ou d'apprendre un module spécifique. Je recommande vivement à commencer par:
  • Eric Miraglia Bienvenue à YUI 3
  • Todd Kloots sur YUI 3 Sucre
  • Matt Sweeney YUI 3 Performance
  • Luke Smith Débogage dans YUI 3
  • Isaac Schlueter à résoudre des problèmes avec YUI 3
  • Eric Ferraiuolo sur le Web App développement avec YUI 3
  • Evénements Luke Smith Evolved
• Lire sur YUI sur le Yahoo! Developer Network . J'essaie de lire un peu chaque semaine et en apprendre plus à chaque fois que je re-lire.
• Lire l' API documentation. Si vous ne pouvez pas le trouver sur YUI Theater ou sur le réseau de développeurs, de creuser dans l'API. Il paye même de lire directement le code.
• Lire et publier des questions au forum sur YUILibrary.com .
• Jouer beaucoup et amusez-vous!

Conclusion

YUI 3 est une bibliothèque riche en fonctionnalités, mature et en constante évolution adaptée pour des projets de petite à grande. Comme les applications Web frontal devient plus complexe, la nécessité pour les bibliothèques, comme YUI va croître. Alors que pour les non initiés peut être une expérience intimidante au premier abord, si vous restez avec lui, vous serez récompensé.

Trouver des conversations: Bloglines | technorati

Partager et prolonger: Conservez ce lien avec del.icio.us | Digg it! | reddit!

Bâtiment TipTheWeb avec YUI 3

Octobre 5, 2010 à 21:35 par Eric Ferraiuolo | En développement , In the Wild , Implémentations YUI | No Comments

A propos de l'auteur: Eric Ferraiuolo est un directeur de TipTheWeb et co-fondateur du logiciel Oddnut . Il écrit sur ​​son blog: 925 HTML , et peut être trouvé sur Twitter: @ ericf . Eric était un présentateur vedette à YUIConf 2009 .

TipTheWeb est un nouveau service qui permet aux personnes directement en charge leurs sites préférés, en la basculant. Par exemple, si vous trouvez un billet de blog grand, vous pourrait faire pencher qu'elle 25 cents.

TipTheWeb est un organisme sans but lucratif favorisant librement accessibles, du contenu Web de haute qualité par l'attribution des éditeurs qui reçoivent des pourboires. Si vous publiez en ligne, vous pouvez utiliser votre compte TipTheWeb de réclamer les endroits que vous publiez pour recevoir des conseils et être admissible à recevoir des récompenses de TipTheWeb.

TipTheWeb Utilisation des YUI 3

L'interface utilisateur de TipTheWeb est entièrement construite sur le dessus de YUI 3 (nous avons bu le Kool-Aid.) L'approche que nous avons été d'utiliser YUI 3 comme le fondement et la structure de notre code JavaScript. Nous avons construit 33 YUI 3 modules sur mesure (56 si on inclut les sous-modules, des plugins, et roll-ups), plusieurs de laquelle nous avons contribué au YUI 3 Galerie: Component Manager , Markout , Overlay Extras , et des ressources REST .

Niveau de la page Classes

Les principaux éléments de TipTheWeb sont mises en œuvre sur quelques pages Web hautement fonctionnelles qui communiquent avec le serveur via Ajax. Pour chacune de ces pages que nous avons créé une coutume YUI module 3, qui expose une classe au niveau des pages utilisées pour coordonner les actions entre les parties fonctionnelles de la page.

Dans l'une des principales pages de notre application, la page Conseils, vous pouvez voir comment cette approche est appliquée avec la classe de page TipsWindow niveau. Les principales parties fonctionnelles de la page sont les widgets: CreateTip utilisé pour créer des conseils, et les widgets TipList pour l'édition, l'annulation, et le financement des conseils existants.

Un grand nombre de superpositions

Nous utilisons Y.Overlay s abondamment tout au long de notre application UI pour mettre en œuvre des interactions utilisateur, ce qui nous permet de garder l'interface sans encombrement tout en ayant la fonctionnalité des fonctions avancées disponibles sur la page. Nous avions besoin de fonctionnalités qui n'étaient pas intégrés dans Y.Overlay , donc nous avons développé Overlay Extras , qui est dans la YUI 3 Gallery et utilisé par beaucoup d'autres YUI 3 sites alimentés. Voici un endroit où nous utilisons les overlays sur TipTheWeb:

État actuel des TipTheWeb

Nous aimerions que vous puissiez essayer TipTheWeb ; en ce moment nous sommes dans invitons seule bêta, donc demander une invitation sur notre site et nous vous enverrons un code d'invitation.

Soyez sûr d'attraper notre conversation au YUIConf 2010 où nous allons présenter (plus de profondeur) sur la façon dont nous utilisons YUI 3 et YQL au TipTheWeb.

Trouver des conversations: Bloglines | technorati

Partager et prolonger: Conservez ce lien avec del.icio.us | Digg it! | reddit!

Orienter l'application: Location de voitures express

Septembre 28, 2010 à 06:01 par Stefan Klopp | Dans In the Wild , Implémentations YUI | 2 Commentaires

Location de voiture express est le premier site indépendant de comparaison de location de voitures sur Internet. Il permet aux utilisateurs voitures à louer en ligne dans plus de 1000 villes et aéroports du monde entier.

Notre base d'utilisateurs est largement non-technique, ce qui signifie qu'ils veulent comparer les prix et louer une voiture aussi facilement que possible. Avec la relance de notre site en Juin 2010, nous avons mis en place de nombreuses composantes de YUI 2 pour aider à fournir à nos clients une expérience intuitive.

Quels composants YUI utilisons-nous?

Les composants que nous avons été en utilisant notamment le Gestionnaire de connexion , saisie semi-automatique , DataSource , Calendrier , animation , JSON , et de conteneurs .

Pourquoi nous avons choisi de YUI

En examinant les différentes bibliothèques JavaScript que nous pourrions éventuellement utiliser sur Location de voiture express , nous avons constaté que l'YUI est la plus complète pour nos besoins. Le plus grand caractéristiques de vente a été pour nous l'approche très modulaire de la YUI a pris de mettre en œuvre des modèles de conception différente, ainsi que la documentation solide et des exemples qu'ils ont fournis. Du point de vue de développement ce qui a conduit au développement rapide de notre application sans avoir à lutter avec une bibliothèque.

Comment utilisons-nous YUI

Nous utilisons la YUI dans un certain nombre de façons. Nos quatre composants les plus utilisés sont semi-automatique, Calendrier, Container, et Connection Manager. Voici certaines des façons dont nous utilisons chacune de ces composantes.

Saisie semi-automatique

La composante saisie semi-automatique est largement utilisé sur notre site pour aider les utilisateurs à trouver une ville ou d'aéroport dans lequel de louer une voiture. Nous avons vraiment aimé la manière dont il a été facile à mettre en œuvre de ce volet, et comment il réagit rapidement. Nous cache des résultats de recherche côté serveur pour aider à améliorer les résultats de recherche, mais ayant la mise en cache côté client aussi énormément aidé à accélérer la réponse de la composante. Une autre caractéristique que nous avons vraiment été amené était la facilité avec laquelle les résultats ont été au style. Lors de l'affichage des emplacements à l'utilisateur ce fut cruciale que nous avions besoin pour identifier les endroits où trouver dans les villes et qui ont été trouvés dans les aéroports.

Calendrier

Le composant Calendrier est également utilisée dans le site quand un locataire est de remplir les dates d'effectuer une recherche. Nous utilisons une version personnalisée de John Péloquin Calendrier intervalle de sélection et de l'afficher dans une boîte de dialogue YUI . Essentiellement, ce que nous voulions faire était le locataire une vue de deux mois au moment de choisir leurs dates, ainsi que visuellement leur montrer ce que plage de dates qu'ils ont actuellement sélectionné. Encore une fois, cela a été extrêmement simple à mettre en œuvre en utilisant YUI Calendar 2, et il est descendu pratiquement à créer un dialogue YUI, fixant les corps pour contenir un div pour le calendrier, puis en attachant un calendrier Intervalle YUI à celle div.

Conteneurs

Nous utilisons Conteneurs YUI à travers notre site web dans un certain nombre de façons différentes. Dans l'exemple ci-dessus nous étions en utilisant une boîte de dialogue pour nous aider à afficher le calendrier d'intervalle lorsque l'utilisateur a choisir une date. Sur notre page de résultats de taux, nous faisons un usage intensif des conteneurs à donner au locataire plus d'informations sur les différents aspects de l'agence de location de voiture et le véhicule qu'ils pourraient éventuellement louer. La plupart des conteneurs sur cette page sont Panneaux que nous ré-utiliser pour chaque liste différente. Par exemple, l'affichage du véhicule les caractéristiques du panneau:

Les choses se sont un peu plus fun avec le Locataire nominale agence de notation. Lors de l'affichage des notes, nous avons vraiment voulu attirer l'attention de l'utilisateur pour les scores d'une agence reçus et d'afficher ces informations dans un endroit propre, facile à visualiser chemin. En utilisant le contrôle de dialogue, nous avons pu contraindre la fenêtre et le centre de la boîte de dialogue facile pour nous aider à atteindre cet objectif. En fixant un en-tête et pied de page vierge qu'il fait style simple en ajoutant simplement les styles appropriés à notre CSS. Le résultat final était un récipient propre notes qui fournit au locataire avec les informations qu'ils veulent.

Connection Manager

Connection Manager est utilisé à travers le site quand nous avons besoin pour extraire des données via une requête XHR. Dans certains des exemples ci-dessus, nous utilisons ce composant pour demander des villes et aéroports du implementaitons AutoComplete et en tirant les informations note pour le Locataire nominale de dialogue.

Une façon intéressante, nous utilisons Connection Manager est avec notre bloc centre de location qui se trouve sur la plupart des pages. Pour aider à la performance, nous faisons beaucoup de pleine page mise en cache sur plusieurs de nos pages de contenu. Toutefois, nous avons toujours voulu afficher le bloc de centre dynamique location sur ces pages. Cela nous a présenté avec un problème que nous avons pu résoudre avec Connection Manager. Plutôt que d'avoir à briser notre page entièrement mis en cache et cache seulement les aspects de la page, nous avons trouvé qu'il était plus facile de simplement inclure le bloc central de location via une requête asynchrone simple. Nous avons constaté que cela nous a permis de conserver les performances d'avoir une page entièrement mise en cache, et pourtant afficher du contenu dynamique dans notre boîte centre de location.

Final Thoughts

Globalement nous avons été extrêmement satisfaits de notre choix d'utiliser YUI. Elle nous fournit une bibliothèque modulaire qui est bien documenté, facile à utiliser et mettre en œuvre.

Trouver des conversations: Bloglines | technorati

Partager et prolonger: Conservez ce lien avec del.icio.us | Digg it! | reddit!

Mise en oeuvre: Lamplight

Septembre 15, 2010 à 09:00 par Jenny Donnelly | En implémentations YUI | Comments Off

Trouver des conversations: Bloglines | technorati

Partager et prolonger: Conservez ce lien avec del.icio.us | Digg it! | reddit!

En utilisant YUI 2 sur le moteur de recherche DuckDuckGo

Août 19, 2010 à 05:41 par Gabriel Weinberg | En implémentations YUI | 2 Commentaires

DuckDuckGo est un moteur de recherche qui utilise abondamment YUI. Voici ce qu'il utilise en particulier:

• ImageLoader. Matt Mlinac de YUI 2 imageLoader a été la première chose que j'ai mis en œuvre et ce qui m'a d'abord accroché sur YUI pour ce projet. DuckDuckGo a favicons à côté des résultats et a souvent "Zero-cliquez sur Info" au-dessus des résultats qui comprend généralement une image . I didn't want these images to compete with the results when loading, as getting results as fast as possible is the ultimate goal.

  The ImageLoader Utility handles this well by loading the images after the page load. DDG also auto-loads the next page of results when you scroll down. Sometimes the favicons icons are therefore hidden, and with ImageLoader their load is delayed (sometimes indefinitely) until necessary. To accomplish this, there is a different image group per (internal) page, each with its own custom trigger.

   div.event=new YAHOO.util.CustomEvent('it');
      var ig1=new YAHOO.util.ImageLoader.group(div,'click');
      ig1.addCustomTrigger(div.event);
      div.ig = ig1;
  

• Cookie . DuckDuckGo has a lot of settings , which are stored via cookies and alternately via URL params . When cookies are used, I use Nicholas Zakas's YUI 2 Cookie Utility to easily get and set the values.

   YAHOO.util.Cookie.set(cookie, value, { expires: new Date("January 12, 2025") });
    x=ki||YAHOO.util.Cookie.get("i"); 

• StyleSheet . Some DDG settings change the look and feel of the site. These changes are actually accomplished after page load via Luke Smith's YUI 2 StyleSheet Utility . Some of these changes are straightforward and I can just use the setStyle Dom function .

   YAHOO.util.Dom.setStyle('b2','display','block'); 

  Others require actual class changes, which I use the utility to do.

   YAHOO.util.StyleSheet('DDG').set('.ci', {display: "block"}).
              set('.cid', {display: "block"}).
              set('.ci2', {display: "block"}).
              enable(); 

• Dom . I also use some functions in Matt Sweeney's base YUI 2 Dom component . I referenced setStyle above, and I also use the related getStyle , addClass and removeClass functions. In addition, I find the getViewportHeight , getViewportWidth , getX and getY functions to be incredibly useful to make things work cross-browser, and now on mobile screens as well.

• KeyListener . DDG has a bunch of keyboard shortcuts that let you navigate results without the mouse. I use the YUI 2 KeyListener component to enable these shortcuts.

   kl14 = new YAHOO.util.KeyListener(document, { keys:[70] }, { fn:not } );kl14.enable(); 

• AutoComplete . I'm currently working on adding search suggestions to the search engine, and will be using Jenny Donnelly's YUI 2 AutoComplete component for the front-end. I understand that AutoComplete is getting introduced in YUI 3 soon. Everything else I use has already been introduced in YUI 3, though I still use YUI 2. However, I will be exploring the migration to YUI 3 soon.

About the author: Gabriel Weinberg is the founder of the DuckDuckGo search engine, based out of Valley Forge, PA. Gabriel has been a startup founder for over ten years, and his last company was sold in 2006. Gabriel holds degrees from MIT in Physics and the Technology and Policy Program.

Trouver des conversations: Bloglines | technorati

Partager et prolonger: Conservez ce lien avec del.icio.us | Digg it! | reddit!