Yahoo User Interface Blog (YUIBlog)

YUI en Loader veranderingen voor 3.4.0

In 3.4.0 zijn we begonnen met het proces van het verschuiven van een deel van de logica Loader rond, om niet alleen het meer performante, maar om het robuuster en gemakkelijker te gebruiken op andere plaatsen (zoals op de server). We zullen uitrollen meer veranderingen in de toekomstige herzieningen, maar ik wilde wat tijd in beslag nemen en wat was veranderd, waarom het werd gewijzigd uit te leggen en hoe het van invloed kunnen ontwikkelaars. Voor het merendeel van de use-cases, zullen ontwikkelaars merken niets anders, behalve dat alles een beetje sneller en hun eis downloads zijn een beetje kleiner.

Seed File

Het eerste wat ik wil-adres is het YUI seed-bestand. In vorige versies van YUI, ons zaad bestand is erg klein en bevatten geen Loader of een van de meta-data. We hebben geconstateerd dat in de 90% use-case dit niet zo performant als we hadden gehoopt. De normale gebruiker bevat het zaad bestand dan hun modules, die op zijn beurt betekent dat het zaad eerst moet halen Loader vraagt, dan is al zijn afhankelijkheden te berekenen, dan halen ze allemaal. We hebben nu het gevoel dat dit extra HTTP request is de verkeerde dingen te doen, dus de nieuwe standaard seed-bestand bevat Loader en de meta-data. Ja, zal dit het eerste verzoek een beetje groter, maar het zal het laden van modules maken dat veel sneller, omdat al haar meta-data aan de vereisten is nu al op de pagina.

Als u wenst te gebruiken de oude manier, kunt u gewoon in plaats daarvan zijn de Yui-base seed file. Het bevat alles wat nodig is om YUI draaien in stand-alone modus plus het bevat de mogelijkheid om Loader te halen op de vraag. Als u een nog fijnere korrel-afhankelijkheden, hebben we een Yui-core seed-bestand dat is precies wat de oude Yui-base zaad was.

     / Build / yui / yui-min.js / / YUI Seed + lader
     / Build / yui-base / yui-base-min.js / / Oude YUI Seed met Loader te halen ondersteuning
     / Build / yui-core / yui-core-min.js / / Oude Yui-base zonder Loader te halen ondersteuning

Opgemerkt moet worden dat deze URL's zijn anders dan de vorige URL's. Iedereen die was het gebruik van de yui/yui-base.js bestanden moeten ze repoint naar yui-core/yui-core.js . Als u wilt dat de oudere manier van laden het zaad en het halen van Loader, zou u gebruik maken van de yui-base/yui-base.js seed-bestand.

De andere redenering voor deze verandering is ons stappenplan voor het maken van YUI draaien in zo veel plaatsen mogelijk te maken. Het oude seed-bestand plus Loader in een enkele combo server verzoek is allemaal goed en wel als je een combo-server beschikbaar is in uw applicatie. Maar hoe zit het op de server? Of in een offline applicatie op een mobiel apparaat? Deze plaatsen moeten bestand te openen te minimaliseren, terwijl nog steeds de informatie die ze nodig hebben.

Updatepakketten

Het volgende dat we veranderd was het verwijderen van updatepakketten uit het systeem en de in gebreke blijvende allowRollup vals in de Loader config. Wat betekent dit voor u? Nou ja, hopelijk helemaal niets. Voordat ik uitleg over de impact van de verandering, laat het me uitleggen de redenering erachter. De belangrijkste reden is, wederom, performance, samen met laadvermogen levering. Neem dit voorbeeld:

      Module A: vereist event-a, event-b
      Module B: vereist event-c, event-d

Wanneer u beide verzoeken, de rollup logica voorafgaand aan de 3.4.0 gebruikt om te bepalen dat u de gebeurtenis rollup te krijgen. Die in feite betekende dat je krijgt:

      event.a, event.b, event.c, event.d, event.e, event.f, event.g, event.h

U eindigde met meer op uw pagina dan je werkelijk nodig is. Door het uitschakelen van de rollup te ondersteunen, zal YUI nu vragen om alleen wat je eigenlijk gevraagd en niets meer. In de meeste gevallen zult u niet opmerken. Module ontwikkelaars, kan er een situatie waar de dingen die werkte in het verleden kan nu niet werken. De reden hiervoor is dat ze daadwerkelijk gewerkt door ongeval. Laat ik gebruik maken van een echte wereld bijvoorbeeld: Dial.

In 3.3.0, Dial vereist dit:

     vereist: [
         'Widget',
         "Dd-drag ',
         'Vervanger',
         'Event-mouseenter', 
         'Transitie',
         'Intl'
     ]

Voor het grootste deel, Dial werkte in 3.4.0, Wel keyboard support niet werken. Na het doen van enkele eenvoudige onderzoeken, bleek dat het pakket ondersteuning was eigenlijk het gehele evenement rollup (waaronder event-move en event-toets) aanvragen. Zonder de rollup logica te trekken in alle geval, 3.4.0 Dial had niet langer al haar eisen. Het maken van Dial de eisen van meer specifiek en het definiëren van al zijn werkelijke afhankelijkheden goed maakt het werken zoals verwacht.

     vereist: [
         'Widget',
         "Dd-drag ',
         'Vervanger',
         'Event-mouseenter',
         'Event-move',
         'Event-key',
         'Transitie',
         'Intl'
     ]

Voor module-ontwikkelaars, het is een best practice om ervoor te zorgen dat uw module vereist precies wat het nodig heeft om te functioneren. Ga er niet vanuit dat een upstream-module vereist is. Het is altijd beter om ervoor te zorgen dat je vragen wat je nodig hebt.

Dit betekent ook dat de module aan de vereisten is meer goed gedefinieerd. Bijvoorbeeld, datatype-date is Intl ondersteuning ingebouwd In vorige versies zou je toegang krijgen tot de Intl als volgt:

     Y.Intl.getAvailableLangs ("datatype-date ');

Maar aangezien deze module heeft niet echt een taal (het datatype-date-format -module doet), zal dit mislukken. Het moet meer specifieke en eigenlijk vragen voor talen voor de juiste module:

     Y.Intl.getAvailableLangs ("datatype-date-format ');

Bouwen File Explosion en submodule verwijderen

Na het maken van deze verandering, was de volgende verandering hebben we exploderen de build directory en het verwijderen van submodules van de kern van het systeem. Submodule logica was niet verwijderd, alleen onze meta-data structuur was veranderd. Dit zal achterwaartse compatibiliteit voor de huidige installaties.

Submodules in de kern van het systeem veroorzaakt een paar zaken die we nodig hadden op te lossen. De eerste reden was prestaties. Elke keer Loader die nodig is om afhankelijkheden te berekenen, is het nodig om de submodule / plugin structuur van elke module lopen. Door dit te doen duizenden keren pijn deed onze prestaties tijdens de Loader te berekenen routine. Door het verwijderen van ondersteuning voor submodules in de kern van het systeem hebben we gered tienduizenden functie aanroepen en iteraties.

Loader werd veranderd, zodat als er een use onroerend goed in een module meta-data gedefinieerde meer modules, zal die modules te gebruiken in plaats van te proberen om de originele module te laden. Dus, als je gevraagd " dd zou "Loader inspecteren" dd "'s meta-data en zie een gebruik eigenschap die er ongeveer zo uitziet:

     "Dd-DDM-base, dd-DDM, DD-DDM-drop, dd-drag, dd-proxy, dd-inperken, dd-drop, dd-scroll, dd-drop-plugin"

In de kern YUI seed-bestand, zijn we ook met inbegrip van wat we zijn virtuele updatepakketten of aliassen te bellen. Deze module definities zijn exact hetzelfde als de meta-data in Loader. Deze manier kunt u alle bestanden geëxporteerd vanuit onze afhankelijkheid Configurator en nog steeds aan deze updatepakketten gebruiken zonder Loader aanwezig zijn op de pagina. In toekomstige versies zullen we verfijnen deze aanpak nog meer.

Na het maken van deze verandering, wij dan vooraf aan ons te bouwen bestanden te exploderen. In voorgaande releases, de submodules bepaald de modules bestand pad. Bijvoorbeeld:

     "Dd": {
         "Submodules": {
             "Dd-drag": 
             / / Module data
         }
     }

In 3.3.0 wanneer u "dd" gebouwd, de bestandsstructuur zag er ongeveer zo uit:

     / Build / dd / dd-drag.js
     / Build / dd / dd-ddm.js
     / Build / dd / dd-drop.js

Met het bouwsysteem explodeerde in 3.4.0, "dd" 's nu te bouwen bestanden zien er als volgt uit:

     / Build / dd-drag / dd-drag.js
     / Build / dd-DDM / DD-ddm.js
     / Build / dd-drop / dd-drop.js

Dit liet ons toe om het "pad" eigendom te verwijderen uit al onze module meta-data ook, opslaan bestandsgrootte en het verminderen van de logica die nodig is om de modules url paden monteren.

Als u met een vooraf geconfigureerde combo URL, je moet herberekenen uw URL wanneer u een upgrade.

Het nadeel van deze verandering is dat als je zijn inclusief een combo URL van modules om "prep" uw pagina kunt u niet alleen de versie nummer te veranderen en te upgraden. U moet opnieuw de afhankelijkheid Configurator en een nieuwe URL met nieuwe module structuur te genereren.

De Toekomst

Ik zal verder te verfijnen, refactoren en elk aspect van onze Loader en Seed strategie te maximaliseren. Deze eerste stappen nodig waren om te helpen bij toekomstige veranderingen die moeten worden gemaakt voor niet alleen onze client-side strategie, maar ook onze server, command-line en mobiele apparaat strategieën goed.

Zoek gesprekken: Bloglines | technorati

Delen en uit te breiden: Bookmark met del.icio.us | digg it! | reddit!