Yahoo! User Interface Blog (YUIBlog)

Mobilni preglednik Cache granice: Android, IOS i webOS

28. lipanj 2010 u 8:45 am Ryan Grove | U razvoja i izvedbe se | 19 Komentari

Update (12. srpnja 2010): Dok su rezultati opisani u ovom članku su točne za HTML stranice, novi testovi su pokazali vrlo različite predmemorije granice za CSS i JS resursa. Ažurirani su rezultati opisani u Mobile granice predmemoriju preglednika, Revisited .

Početkom 2008, Wayne Shea i Tenni Theurer napisao post Yui Blog na iPhone Cacheability u kojima dijeli rezultate istraživanja u različitim svojstvima i ograničenjima Mobile Safari cacheu u iPhone OS 1.x. Između ostalog, otkrili su da su pojedine komponente veće od 25KB nije bilo spremljeno, i da je maksimalni ukupni predmemorija veličina od 475KB i 500KB.

Mnogo se toga promijenilo od tada. Vidjeli smo dva nova glavna tisak i mnoge manje za tisak u iPhone OS IOS (sada), i nekoliko drugih mobilnih uređaja s vrlo sposobnih preglednici su se pojavili na izazov iPhone. Stoyan Stefanov pronađena, krajem 2009, da iPhone-ovog cache granica nije promijenilo (na žalost, na gore). No, gdje sada stvari stoje? A što je s onima koji nisu IOS preglednicima?

Pozadina

Preglednici su dvije vrste sprema da smo se bave za potrebe ovih testova:

• Dio cache, ili objekt cache, pohranjuje pojedinačne datoteke. HTML, CSS, JavaScript, slike i sve ide u komponenti cache. Kad god je potrebno jedan od tih komponenti, preglednik prvi provjerava predmemoriju prije donošenja mreže zahtjev.
• Stranica cache, također poznat kao leđa / naprijed cache, pohranjuje cijelu stranicu i sve njene komponente, kao i njihovo trenutno stanje. Kada koristite tipku naprijed ili natrag, preglednik će učitati stranicu na web stranici cachea, ako je moguće.

Predmemorija HTML5 aplikacija je drugi tip cachea koji je široko je podržan od strane mobilnim preglednicima. Preglednik odluka već napraviti dobar posao dokumentiranja granice zahtjeva cache, tako da nisam uključuju ga u mom testiranju. Više o primjeni cachea kasnije.

Uređaji Ispitano

Testirao sam sljedeće mobilnih preglednika / platforma kombinacije:

• Android 2.1 (Nexus One)
• Mobile Safari na iOS 3.1.3 (1.-gen iPhone)
• Mobile Safari na iOS 3.2 (iPad)
• Mobile Safari na IOS 4.0 (iPhone 3GS)
• Mobile Safari na IOS 4.0 (iPhone 4)
• webOS 1.4.1 (Palm Pre Plus)

Napomena: Uz iznimku Mobile Safari na iOS 4.0, Testirao sam samo jedan uređaj u svakoj kategoriji. Ako postoje razlike između pojedinih uređaja ili razlike na temelju instaliranog softvera izvan OS, moji testovi ne bi otkrivanje tih varijacija. Ti posebni uređaji su testirani, jer oni su oni sam je pristup, a ne zato što smatram da budu važniji od drugih uređaja.

Metodologija

Cache testiranje je zamorno, ali relativno jednostavan.

Napisao sam mali app Sinatre ( to tanjura na GitHub! ) koji generira odgovor koji se sastoji od određenog broja pseudoslučajnih alfanumeriku i razmaka bajtova. Odgovori mogu biti poslužen gzip-ane ili nekompresirana. Sljedeći daleko buduće isteka odgovor zaglavlja se šalju kako bi se osiguralo da su svi odgovori smatra cacheable:

 Cache-Control: max-age = 315360000
 Istječe: Mon, 01 May 2020 03:47:24 GMT

Tijekom moje lokalne mreže, onda sam ručno izvodi sljedeće korake za svaki uređaj za testiranje komponenti cache:

1. Učitaj indeksa probnu stranicu prir.
2. Pritisnite na link na komponentu određene veličine, u rasponu od 5KB na 20 MB, i čekati da se završi učitavanje.
3. Pritisnite gumb za povratak.
4. Pritisnite istu vezu ponovno. Obratite pažnju da li su slučajni likovi su isti, i da li server konzola ispisuje log unos zahtjeva, kako bi se utvrdilo je li komponenta je spremljeno u 2. koraku.
5. Ponovite i podešavanje veličine kao komponente potrebne za određivanje maksimalne veličine komponenti koje će biti spremljeno.

Za testiranje stranicu cache, sam izvodi u suštini iste korake, osim da se umjesto pritiskom na vezu ponovno u koraku 4, ja sam otresla preglednika gumb naprijed, nanoseći ga koristiti stranicu predmemorije nego komponente predmemorija.

Podrška za ETag i Last-Modified određen je ugađati poslužitelja poslati odgovarajući ETag ili Last-Modified odgovor zaglavlja (u odvojenim testovima) i ispustiti daleko u budućnosti isteka zaglavlja. Zatim sam obavila Upit zaglavlja primljenih od poslužitelja za provjeru preglednik poslao očekuje If-None-Match ili If-Modified-Since zaglavlja na 4. korak.

Stranice

Testirao sam sa gzip i omogućena i osobe s invaliditetom, ali otkrio sam da gzip nije imalo utjecaja na cacheability na bilo kojem uređaju. Nekomprimirani komponenta je veličina ono što je važno u svim slučajevima, bez obzira da li ili ne taj dio je služio gzip-ane. Kao takav, sve komponente veličine spomenuti ovdje su Nekomprimirani veličinama.

Tablica u nastavku prikazuje svoje ukupne rezultate.

Tablica: Mobilni preglednik predmemorija obilježja

Browser / OS / uređaja	Jedna komponenta granica	Ukupno Komponenta granica	Stranica Cache Size Limit	Podržava Last-promijenjeno	Podržava ETAG	Preživi Napajanje ciklus
Android 2.1 (Nexus One)	~ 2MB (~ 2.048.000 b)	~ 2MB (~ 2.048.000 b)	∞ 2	Da	Da	Da
Mobile Safari, IOS 3.1.3 (1.-gen iPhone)	0b 1	0b 1	∞ 2	Ne	Ne	Ne
Mobile Safari, IOS 3,2 (iPad)	25.6KB (26214 b)	~ 281.6KB (~ 288.354 b)	25.6KB (26214 b)	Da	Da	Ne
Mobile Safari, IOS 4,0 (iPhone 3GS)	51.199KB (52428 b)	~ 1.05MB (~ 1.100.988 b)	∞ 2	Da	Da	Ne
Mobile Safari, IOS 4,0 (iPhone 4)	102.399KB (104857 b)	~ 1.9MB (~ 1.992.283 b)	∞ 2	Da	Da	Ne
webOS 1.4.1 (Palm Pre Plus) 3	~ 1MB (~ 1.048.576)	?	~ 1MB (~ 1.048.576)	Ne	Ne	Da

Android

Android preglednik izlaže najbolje priručne ponašanje svih testiranih uređaja. Iako se čini da stavljati nikakvo ograničenje na veličinu pojedinih komponenti, ukupna veličina priručne memorije čini se da je ograničena na oko 2 MB, što znači da se pojedine komponente učinkovito ograničene su na 2 MB, kao dobro.

Stranica predmemorija pojavio stavljati nikakvo ograničenje na veličinu pojedinačnih stranica, sretno caching svaki byte sam bacio na njega dok dostupni RAM je iscrpljen i preglednik srušio.

Bio sam ugodno iznenađen da otkrijete da je Android komponenta predmemorija preživio oba preglednika ponovno pokreće i napajanja cikluse, podvig nitko od IOS uređajima je u mogućnosti kako bi se slagala.

Mogući caveat: pregled Android je WebKit source stabla vodi me da vjerujem da u svoj ​​cache granice može se prilagoditi na temelju količine RAM-a i / ili flash memorije dostupne na određenom uređaju na kojem se izvodi. Ako je istina, samo ti brojevi se mogu primjenjivati ​​na Nexus One. U stvari, ako cache veličina prilagođava na temelju neiskorištenih memorije nego ukupne memorije, samo ti brojevi se mogu primjenjivati ​​na moj Nexus One.

Sam mogao biti u zabludi, ali su razlike u IOS 4,0 rezultata na iPhone 3GS iPhone 4 i podržavaju ovu teoriju. (Android i Mobile Safari su i WebKit-based preglednik, tako da oni svibanj imati takvo ponašanje zajedničko.) Ako ste upoznati s WebKit izvora i može baciti više svjetla na to, molimo Vas da stupite u kontakt sa mnom.

IOS

Stranice varirao divlje preko tri posljednje verzije IOS. Zapanjujuće Mobile Safari na iOS 3.1.3 nije predmemoriju komponente bilo koje veličine, bez obzira što je naizgled neograničene veličine stranicu prir. Ovo je zabrinjavajuća jer to znači IOS 3.1.3 korisnici su vjerojatno uzimajući suboptimalnu pregledavanje iskustvo, pogotovo ako ne koristite WiFi. Neograničeno stranica predmemorija veličina ipak malo dobre ovdje, jer to samo dolazi u igru ​​za natrag / naprijed navigations. Takvo ponašanje je značajna promjena od onoga što drugi iz prethodnih IOS izdanjima, a ja ne mogu zamisliti bilo koji dobar razlog za to, pa pretpostavljam da to može biti bug.

Mobile Safari na iOS 3.2 (koja je dostupna samo na ipad) ne pokazuje ovu grešku. Njegova 25.6KB komponenta limit i ~ 281.6KB ukupno predmemorija granica su bolje nego ništa, ali još uvijek izgleda bezvrijedan u odnosu na druge uređaje testirali. Jedinstveno među IOS uređajima, ipad se ograničiti veličinu stranice u stranicu cache 25.6KB, isto kao i njegove granice komponente veličine.

Mobile Safari na IOS 4.0 izlaže različite ograničenja na iPhone 3GS iPhone i na 4, što podrazumijeva da se prilagode granice na temelju dostupnih RAM-a (iPhone 3GS ima 256 MB, dok je iPhone 4 ima 512MB, oba uređaja testirana je imao 32GB flash memorije) . Na iPhone 3GS, IOS 4,0 ima 51.199KB ograničenje veličine komponenti i ~~~HEAD=dobj 1.05MB ukupnu veličinu predmemorije komponente.

Na iPhone 4, ograničenje veličine komponenta je gotovo točno dva puta limit na iPhone 3GS, na 102.399KB. Ukupna komponenta predmemorija veličina je oko 1.9MB. Možda zato što IOS i IOS 3,2 4,0 razvili su odvojeno, ali razgranala od zajedničkog pretka, stranica IOS 4,0 predmemorija veličina Čini se da je ograničen samo na raspolaganju RAM-a na oba uređaja testiranih, baš kao i iOS 3.1.3.

Nitko od IOS uređajima sačuvana sadržaj cache preko prisilnog restarta preglednika ili uređaja snage ciklusa, iako se nije sačuvala predmemoriju, kada samo prebacivanje aplikacija bez zapravo ubija preglednik.

webOS

Moji rezultati testova na webOS bili tako nedosljedno da imam malo povjerenja u njih. Sam uključen ono malo podataka sam uspio skupiti samo zbog cjelovitosti. Molimo da se s kršan rezervom.

Kao i kod kao što sam bio u mogućnosti odrediti, webOS može imati jedan individualni limit komponenti oko 1MB veličine, s odgovarajućom stranice ograničenja veličine u stranice cache. Sam bio u mogućnosti nagovoriti If-None-Match ili If-Modified-Since zaglavljima zahtjeva iz webOS, što znači da ne podržava ETag i Last-Modified .

Na nekim testovima, pokazalo se da webOS je maksimalna veličina komponente bio je veći od 1MB, ali ovo je nedosljedna. Koliko ja mogu reći, webOS izgleda kao da ima gadan bug gdje, nakon određene točke, kada se eventualno Maksimalna ukupna veličina dosegne predmemorija cache-samo potpuno prestane raditi zajedno dok je telefon snage prolazila. U nekim slučajevima čak i biciklizam nije moć popraviti cache lom, pa sam na kraju odustao pokušava utvrditi točan uzrok problema i točne granice webOS cache.

Preporuke

Na temelju tih rezultata, iznijet ću sljedeće preporuke svima razvoju web aplikacija za testiranih uređaja:

• Koristite daleko buduće zaglavlja isteka predmemorije. To će spriječiti da preglednik iz poslati uvjetni GET zahtjev, te će poboljšati cacheability u webOS, koji ne podržavaju ETag ili Last-Modified .
• Barem dok IOS 4,0 stiže na ipad, pokušati ograničiti pojedine komponente veličine do 25.6KB ili manje, nekomprimirani. I pozivam svoje iPhone korisnik za dogradnja za IOS 4.0 što je prije moguće.
• Ako Vaša web stranica mora podržavati IOS 3.1.3 korisnika (što je vjerojatno), ako to zahtijeva komponente veći od 25.6KB, ili ako ukupna veličina svih vaših komponenti je veća od 281.6KB, razmislite o korištenju cache HTML5 aplikacija, localStorage ili baze podataka za pohranu za pohranu vaše komponente. Alexa Kessinger nedavni YUI blog post, Uvod u korištenje Yui u 3 Offline Applications , može biti od interesa za Yui 3 programere s obzirom na takav pristup.
• Učinite svoj ​​testiranje. Nemojte pretpostaviti da su ti rezultati primijeniti na bilo koje buduće verzije bilo kojeg od testiranih preglednika ili naprave. Koristite ove rezultate kao polaznu točku, ali ih sami provjerite prije nego što bi glavne odluke na temelju pretpostavke o mobilnim predmemorija ograničenja. Mobilni preglednik svijet mijenja na munje tempom, tako da će ovo istraživanje ima vrlo kratak rok trajanja.

Ja sam napravio moj Ispitna pravila dostupan na GitHub i ja Vam savjetujemo da ga koristite, to tanjura i podijeliti ono što ste naučili.

Poziv za dokumentaciju

Browser proizvođači, molimo vas da razmislite dokumentiranje i objavljivanje cacheu Vašeg internet preglednika granice. U desktop svijetu gdje te granice su obično tako visoka kao da se nije pitanje, dokumentacija nije potrebna. U mobilnom svijetu, cache preglednika granice su vitalne informacije koje web programeri moraju imati kako bi se stvorili performant web stranice s uvjerljivih značajke.

Granice nove značajke kao što su localStorage i primjene cachea obično su dobro dokumentirani. Molimo produljiti ovu razinu dokumentaciju komponente cachea, kao dobro.

Nađi razgovore: Bloglines | technorati

Podijelite i proširiti: Označi s del.icio.us | digg it! | Reddit!

U Divlja za 25. lipnja 2010

25. lipanj 2010 u 10:10 pm Eric Miraglia | U U Wild | Komentari Isključeno

Kao i uvijek, javite nam u komentarima ili mijenjate brzine yuilibrary ako smo propustili nešto važno.

• YUI 3-based Aluminijski UI službeno je na konferenciji Liferay : Iz press release : "Kao dio tog napora, Liferay je najavio i odmah dostupnost Liferay slitine UI . Razvijen u suradnji s Yahoo YUI projekta, Alloy UI omogućuje niz bogatih komponenti korisničkog sučelja za brzo stvaranje user-friendly portlete i widgete i web aplikacija. Aluminijski UI bavi sa složenošću CSS, HTML i JavaScript, oslobađajući programerima da se usredotoče na poslovne zahtjeve i funkcionalnosti. Aluminijski UI također pomaže riješiti neke uobičajene cross-preglednik probleme s kompatibilnošću koji obično konzumiraju projekta resursa. Nova knjižnica ne zahtijeva portal i može se koristiti za razvoj komponenti za bilo koju web aplikacije. Liferay Portal će standardizirati svoj ​​front-end okvir oko slitine UI, širi jednostavnost i mogućnosti suvremenih portal-based enterprise rješenja. "Alloy UI predstavlja novu mogućnost za web programere da pojednostavi razvoj bogatih korisnička sučelja", rekao je Brian Chan, Liferay portala tvorac i glavni Software Architect. 'Mi smo sretni da su radili na tome s Yahoo tima i osjećam da će biti velika prednost za pomoć programeri sa svojim rješenjima.' "Svi aluminijski dijelovi sučelja su sada besplatno dostupni na Yui zajednice u Yui 3 galerije .
• AutoFusion je CarPrices.com pokreće Korištenje YUI 3.1.1 : YUI 3 Galerija suradnik Josh Lizarraga je radilo s Autofusion Inc na novom CarPrices.com projekta , izgrađen korištenjem niz YUI 3.1.1 komunalne i widgetima. Josh će imati više na ovom projektu u budućem YUIBlog post.
  
• Preuzmite Squad je Erez Zukerman Savjetuje JS devs gledati Crockford na Yui kazališta : Erez piše: " Douglas Crockford je genije. Ozbiljno - čovjek je briljantan. On trenutno služi kao Yahoo! 's glavnog JavaScript arhitekt, on je izumio JSON (naširoko koristi razmjena podataka format), on je dio ECMAScript odbora (dečki postavljanje JavaScript standarda) i ima vrlo široko razumijevanje opće povijesti programiranja jezika i informatike. Nedavno Crockford dao pet razgovore o JavaScriptu kao dio Yahoo! 's Yui kazališta . To su sve dostupne besplatno, a oni su više od pet sati u dužinu (više kao šest do sedam sati ukupno, mislim). Što je tako cool o tim razgovorima je da Crockford stvarno daje ptičje perspektive subjekta, prvi sat je samo povijest, a to je stvarno fascinantno. To je sve više mjesta, počevši od Jackquad tkalačkom stanu , kroz zašto smo oboje Delete i tipku vraćanja na našim tipkovnice, sve do modernih programskih jezika i JavaScript. "Za više Erez omiljenih JavaScript resursa, check out njegov post ili nad glavom na Crockford JavaScript na stranici za Douglas najnovijim video (s još mnogo toga za punjenje drugom stupcu Yui kazališta ).
  
• Congrats na Matt Snider & Friends u Yui 2-based Mint.com, pobjednici jednog 2010 Webby : Čestitke Matt Snider . i drugih istaknutih krajnji inženjera u Mint.com za njihovo dobro zasluženi 2010 Webby nagradu u kategoriji financijskih usluga Mint je YUI 2-temelji od samog početka , a Matt i dalje biti veliki suradnik na projektu Yui . Možete vidjeti Matt je pet-riječ prihvaćanja govora preko YouTubea .
  
• Ajaxian je Dion Almaer razmatra Caridy Patiño Mayea na Prethodno učitavanje Galerija Modul za Yui 3 : Dion ima lijep post gore na Ajaxian pregled Caridy Patiño Mayea je predoptere modul za preddostavljanje caching i imovine , YUI 3 Galerija ulaz koji je pisao o nedavno na YUIBlog .
  
• Korištenje Yui rešetke s pokretnim tipa (po mijenjate brzine foxxtrot) : YUI suradnik Jeff Craig pisao o svojim iskustvima pretvaranje pokretne Vrsta blog Yui 2 Rastera: "Dakle, kao i bilo tko tko je ikada pročitao moj blog prije, vidjet ćete da je tijekom vikenda sam nadograditi moj blog predložak za korištenje Yui rešetki i YUI3 za JavaScript. Prebacivanjem daleko od MT predložaka (ili predlošci koji su bili standardni, kada sam instalirao prve verzije MTOS 4), bio sam u mogućnosti smanjiti HTML pageweight strane Peruča u blizini pola. Stari predlošci su stvarno div-teških i imao tonu dodatne oznake. Uglavnom, odluka je potaknut željom za ponavljanjem vizualni dojam moj blog, i osjećao sam da mogu i prepisati pod Yui Rastera dok sam to učiniti. "
• Nate Schutta Uspoređuje Yui i Dojo za IBM DevelperWorks : Nate Schutta pisanja za IBM developerWorks uspoređuje Yui 2.x i dojo-u novi post. Dok smo se više usredotočila na Yui 3.x codeline ovih dana, Nate je članak ima neke korisne smjernice za one razmišljanja o JavaScript knjižnice i donošenje odluke za svoje poslovanje ili projekta. Prvo - zašto YUI ili Dojo?

  Sa tako mnogo izvrsnih izbora na raspolaganju, zašto bi vam razmotriti Yui ili Dojo? Jednom riječju: cjelovitost. Za razliku od drugih rješenja koja uključuju dodatne knjižnice ili plug-ins, Dojo i YUI imati sve (i više) da je današnji front-end inženjer mogli poželjeti. A da je i blagoslov i prokletstvo, ako ste na tržištu za one-stop-shop za svoje potrebe AJAX, to su dvije snažne natjecateljice. Osim bogatstva JavaScript pomagača, ali i komunalnih poduzeća, i ponuditi vrhunska widgete i kontrole, daleko iznad ograničene palete standardnih preglednika.

  Nate savjet o općim kriterijima za odabir knjižnične je korisno:

  • Što želite od nje? Jeste li u potrazi za potpunu zamjenu gotovo sve elemente korisničkog sučelja na Vaše stranice, ili ste samo u potrazi za nešto da se malo boli JavaScript iz programiranja?
  • Kako je lako kod za čitanje? Unatoč ogromnim poboljšanjima u dokumentaciju tijekom posljednjih nekoliko godina, izgledi su da ćete morati kopati kod u nekom trenutku. Prije nego što je počinio u biblioteku, provesti neko vrijeme do koljena u izvoru. Je li lako razumjeti, ili se čak izvorni autor imati problema s njom?
  • Koliko je dobra dokumentacija? Čist i pregledan kod može napraviti za manje-nego-zvjezdani dokumenata, ali ništa ne pomaže da započnete sasvim kao tutoriali i primjeri. Probiti oko wiki ili web stranicu, i vidjeti što oni imaju za ponuditi. Jesu li primjeri jasni i lako slijediti? Da li je brz Google pretraživanje dovesti vas na pravilan dio svog materijala?
  • Što je zajednica kao da okružuje knjižnicu? Check out mailing liste. Postoji puno prometa? Su novi ljudi odnositi s poštovanjem i ismijavanje? Je li kod je obnovljeno u zadnje vrijeme, ili je bio zadnji release prije nekoliko godina?
  • Možete li pomoć? Iako se to odnosi na prethodne bitova o zajednici, to je uvijek vrijedno da bacite pogled na razvoj zajednice i vidjeti tko je što koristite. Check out dasaka posao da biste dobili osjećaj koji knjižnice se često prikazuje na biografije.

Nađi razgovore: Bloglines | technorati

Podijelite i proširiti: Označi s del.icio.us | digg it! | Reddit!

YUI: Otvorena sati petak 25. lipnja

23. lipanj 2010 u 3:07 pm od Luke Smith | U razvoj | Komentari Isključeno

Zadnji obrok Yui: Otvorene Sata biti će to petak, 25 lipnja.

Prošlog tjedna, Eduardo Lundgren nas je uveo u neki od velikih AlloyUI modula je nedavno dodane u Galeriji. Rasprava pokrivena primjeru, konfiguracije, razvojnih odluka, a neki povijest svog TreeView modula. Ali to je bio samo početak. Također smo istraživali njihov IO i čvora i oblik validacije module i proveo neko vrijeme na neke od vizualnih stilova na raspolaganju. Eduardo čak nam je dao puzavac pregled novog Liferay, Inc portal, pokreće sve to težak posao. Stvarno vrhunski rad.

Sve što je rekao, teško je reći je li show-a-reći ili razgovor bio je pravi zvijezda. Veliki broj odnose sadržaj na stranu, nije bilo puno dobre povratne informacije i raspravu o suradnji u zajednici, prirodu u Galeriji, i kako možemo učiniti i YUI bolje. Dakle, veliki hvala svima na pozivu!

Ovaj tjedan ćemo poprskati malo iu sirovom developer svijeta kao i dizajnera svijeta. Caridy Patiño se vratiti s nama razgovarati o svom Event Binder modula koji je prikazan ovdje baš jutros . Mi ćemo napraviti pregled kod i razgovarati o konfiguraciji korak koji treba obaviti prije nego YUI čak učita. To je točno: čista, nepokvaren DOM skriptiranje. Možda želite da nose kacigu.

Zatim ćemo prijeći na jednako nijansirano kože procesa dizajna s Jeff Conniff i Yahoo odgovoran za tekuće različitim od klizača izgled i osjeća. On će nas provesti kroz njegovu procesu izgradnje vizualne imovine i pokazati kako možete poduzeti iste PSDs i jednostavno stvoriti boja tematske imovinu da stane na svoje stranice paleti. Ovdje su Photoshop datoteke , ako želite igrati zajedno. Ja ću govoriti o nekim odlukama u izgradnji CSS i DOM strukturu klizača.

Mi smo natrag u uobičajenom terminu ovaj tjedan: petak od 10 do 12pm PDT. Tu je novi sudionik broj za konferencijski poziv, ali inače, pojedinosti veze su isti kao i obično.

1. Birajte na 1-888-371-8922 (non-US sudionika, elektronička pošta mene za lokalni broj)
2. Unesite kod sudionika 47188953 #
3. Pridružite sjednicu screen sharing (to će vas zatražiti da instalirate plugin Adobe Connect, ako je to vaš prvi put ga koristite)

Također sam stvorio forum thread za ove Otvorenog sati, tako da možemo početi raspravu rano!

Također, kao i uvijek, možete pratiti u toku s nadolazeće raspored i teme slijedeći mijenjate brzine yuilibrary na Twitter ili se pretplatite na kalendar događaja Yui .

Nadam se da vas vidjeti tamo!

Nađi razgovore: Bloglines | technorati

Podijelite i proširiti: Označi s del.icio.us | digg it! | Reddit!

U Yui 3 Galerija: Caridy Patiño Mayea je događaj Binder Modul pruža podršku za rano i Event Event binding-driven Modul Loading

23. lipanj 2010 u 9:25 am Caridy Patino | U razvoj , YUI tri Galerija | 1 komentar

Ovaj članak predstavlja moje Event modul Binder , nedavno objavljen u Yui 3 galerije.

YUI 3 je sve dobro prianjanje u developer zajednici, sa značajnim usvajanje najnovijih 3.1.1 release i veliku infuziju novih, inovativnih projekata u Yui 3 galerije . Mnogi programeri su uzimajući njihove glave oko na zahtjev prirode Yui 3 i počinju utjecati na one sposobnosti u svojim dizajnom. Ovaj pristup ima velike prednosti, ali također može predstaviti neke izazove.

Jedan od tih izazova je uhvatiti korisničke interakcije rano. Čak i kao preglednik počinje donošenja stranicu, želimo da korisnik moći pokrenuti interakciju s elementima stranice. U mnogim slučajevima, te veze moglo dogoditi prije nego proces JavaScript inicijalizacija (uključujući vezanost događaja slušateljima) je završen.

U mnogim slučajevima možete pojednostaviti kod inicijalizacije postavljanjem samo svoje slušatelje događaja, a zatim dodao logiku za utovar komada koje vam je potrebno za svaku interakcije s korisnikom. Nedavno, inženjeri na Facebook govorio o sličnom pristupu za poboljšanje procesa utovara - pogledajte intervju s Rey Bango na JSConf. Ovdje je primjer kako se ova tehnika može raditi u Yui 3:

  <Script src = "& http://yui.yahooapis.com/combo?3.1.1/build/yui/yui-min.js
 
	 3.1.1/build/oop/oop-min.js i 3.1.1/build/event-custom/event-custom-base-min.js i
	 3.1.1/build/event/event-base-min.js i 3.1.1/build/dom/dom-base-min.js i
	 3.1.1/build/dom/selector-native-min.js i 3.1.1/build/dom/selector-css2-min.js i
	 3.1.1/build/node/node-base-min.js "> </ script>
 
 YUI (). Koristiti ('event-baza ", funkcija (y) {
     / / Pričekati dok korisnik fokusira na ulazni element za početak učitava imovine
     Y.on ("klik", funkcija (e) {
 
       Y.use ('anim', 'io', funkcija () {
           / / Učitavanje daljinski sadržaja i prikazati koristeći animaciju ovdje
       });
 
       e.halt (); / / zaustavljanje širenja
     } "# Demo");
 }); 

To predstavlja neki složenost u kodu, jer ne samo slušatelji moraju nositi s interakcije s korisnikom, ali i sa nekim utovara logike. Još jedna mana ovog pristupa je da imate još nešto za učitavanje JavaScript kôd na vrhu (u ovom slučaju YUI sjeme, Event Utility, a neki ovisnosti) kako bi se definirati barem slušatelja i opterećenja logiku uhvatiti rano akcije. Dakle, razmotrimo ovo kao dva odvojena upotrebnih predmeta:

• Snimanje rano korisničke interakcije
• Olakšavanje na zahtjev prirodu nekih korisničkih interakcija

Za rješavanje tih potreba napravio sam novi modul za 3 Yui . Moj glavni cilj je bio stvoriti komponentu koja radi bez utjecaja na aplikacijsku logiku. Ovaj novi modul naziva se " Gallery-event-vezivo "i sada je dostupna kroz Yui Loader.

Snimanje rano korisničke interakcije

Glavni cilj ove značajke je jamčiti da korisnik interakcije s čekanjem dok se događaj slušatelji inicijalizirana.

Pogledajmo jedan primjer događaja veziva :

  YUI ({
     / / Posljednja galerija izgradnje ovog modula
     Galerija: 'galerija-2010.06.07-17-52'
 }). Koristiti ('Galerija-event-vezivo "," događaj ", funkcija (Y) {
 
     Y.on ("klik", funkcija (e) {
 
         / / Učiniti vaše stvari ovdje
         e.halt (); / / zaustavljanje širenja događaja, ako želite ...
 
     }, '# Demo');
 
     / / Ispiranje rane interakcije korisnika
     Y.EventBinder.flush ("klik");
 
 }); 

U ovom primjeru, YUI utovarivač će pokušati učitati gallery-event-binder i event module na zahtjev, a nakon što ste oboje spremni zajedno sa svojim ovisnosti, kod unutar funkcije povratnog poziva (treći argument) će se izvršiti. Tijekom izvršenja, slušatelj je postavljen za element s id=demo . Trik ovdje je da jednom Y.EventBinder.flush('click') dobiva se zove, sustav će ispuštati neke od događaja koji bi mogli kliknite su se dogodili prije toga dobiva inicijalizacijski kôd izvršava.

Konfiguracija

Ova tehnika zahtijeva neke dodatne konfiguracije, posebno definiciju YUI_config kao globalne varijable Da biste promijenili Yui izvršenje. Ne brinite, to je vrlo jednostavan. Pogledajmo primjer u detaljima:

 
 YUI_config = {
     / / Standardni YUI_config konfiguracija
     kombinirati: istina,
     filter: 'min'
 
     / / Događaj vezivom konfiguracija počinje ovdje
     eventbinder: {
         / / Event handler za pohranu događaja koje želite redispatch.
         fn: funkcija (e) {
             var vezivo = YUI_config.eventbinder,
                 filter = / yui3-event-vezivo /,
                 Spremnik = (e.target | | e.srcElement),
                 info = {
                     cilj: kontejner,
                     Vrsta: e.type
                 };
 
             / / Izgled za element s klasom yui3-događaj-veziva
             dok je (kontejner &&! filter.test (container.className)) {
                 Spremnik = container.parentNode;
             }
 
             if (kontejner) {
                 (Binder.q = binder.q | | []) Push (informacija).;
 
                 / / Spriječiti akciju zadani preglednik za ovaj događaj
                 if (e.preventDefault) {
                     e.preventDefault ();
                 }
                 povratak (e.returnValue = false);
             }
         },
         / / Sučelje za slušanje za određene događaje
         listenFor: funkcija (tip) {
             var d = dokument;
             / / Prije knjižnice opterećenja, moramo se nositi s preglednika nedosljednosti
             if (d.addEventListener) {
                 d.addEventListener (vrsta, this.fn, false);
             Else {}
                 d.attachEvent ('o' + tipa, this.fn);
             }
 
             ovo vratiti;
         }
     }
 };
 / / Dodavanje događaja u procesu praćenja provedbe
 YUI_config.eventbinder.listenFor ("klik");

Ovaj kod bi trebali biti uključeni na samom vrhu stranice. To će biti samo nekoliko ugriza nakon što se umanjiti ovu konfiguraciju objekt. Preporučujem koristeći cacheable (vanjski) datoteku za proizvodnju i uključujući u glavu dijelu u Vašim web stranicama. Možete pročitati više o YUI_config i različitim konfiguracijama koje možete ugađanje kroz ovaj objekt u službene dokumentacije API .

Možete izmijeniti ovu konfiguraciju kako bi vam najbolje odgovarati i definirajte događaje koji vam je stalo, kao dobro. U gornjem primjeru, dodali smo "klik" na popisu praćenja (zadnja linija). Možete dodati više događaja na popisu praćenja pomoću vezna:

  YUI_config.eventbinder.listenFor ("klik") listenFor ('keyup') listenFor ('Prelazak mišem ")..; 

Kako se ova značajka radi?

Nakon konfiguracije (tj. YUI_config ) logika je pogubljen, zajedno s pozivom na YUI_config.eventbinder.listenFor i slušatelja za određenu vrstu događaja bit će definirani. Samo događaji koji bubble up će biti nadzirano kao slušatelj će biti definirana za document elementa. Kada korisnik interakcija je uhvaćen na toj razini, to će se analizirati, posebno provjeru ako je meta element ili bilo koju od svojih predaka ima classname yui3-event-binder . Ako je tako, događaj će biti dodan u redu i ponašanje za zadani tom slučaju će se spriječiti. Ova tehnika omogućuje jednostavan način za praćenje određene vrste interakcije u određenim dijelovima stranice.

Kada se to kod izvršava, slušateljima za događaje iz određenog tipa ili vrste se dodaju u document , pa kad ti događaji pojavljuju i mjehur prema gore (to samo prati događaje koji mjehurić), oni će biti zaustavljen, a njihovi podaci pohranjeni u redu za obradu . Kasnije, u use() povratni poziv kad inicijalizacija završi, jednostavno nazovite Y.EventBinder.flush redispatch za sve pohranjene kliknite događaje kao da se dogodilo samo tada ljubaznošću i event-simuliraju modula.

Olakšavanje na zahtjev prirodu nekih korisničkih interakcija

Glavni cilj ove značajke je bi trebao pomoći programerima definiranje učitavanja logiku na temelju korisničke interakcije.

Evo još jedan primjer događaja veziva :

 
 YUI ({
   Moduli: {
     'Moj-custom modula ": {
       fullpath: '. / moj-custom-module.js'
     }
   }
 }). Koristiti ('Galerija-event-vezivo "," čvor ", funkcija (Y) {
 
   / / Postaviti slušatelja za '# demo a' i osloniti na "moje-prilagođenih modula ' 
   / / Rukovati da se određeni događaj.
   Y.EventBinder.on ('klik', 'moj-custom modula', '# demo');
 
   / / Postavljanje delegatski slušatelja za sve sidra na popisu i oslanjaju se  
   / / Na 'moj-custom-modul' i 'moje-drugi-modula za rukovanje te određene događaje
   Y.EventBinder.delegate ('klik', ['moj-drugi-modul'], '# mylist', 'li');
 
 });

Ovdje koristimo Y.EventBinder.on i Y.EventBinder.delegate definirati neke slušatelje. Ove dvije metode wrap Y.on i Y.delegate voziti učitava logiku kroz interakcije s korisnikom. To nam omogućuje da odgodi utovar specifične funkcionalnosti na stranici dok korisnik pokuša koristiti određenu značajku.

U tom slučaju, kada korisnik klikne na jedan od elemenata, mi učitati jednu ili više prilagođenih Yui module koje provode sve značajke povezane s tom klik. Nakon što ti moduli postati dostupan (i novi slušatelji su postavljeni), vezivo će isprati događaj koji je bio na čekanju za vrijeme utovara procesu očuvanja stanje djelovanja.

This feature doesn't require any initial configuration. Both of Event Binder's features can be used at the same time to cover early and on-demand user-interactions. In this case, you need to define the configuration, then set the on-demand listeners, and finally flush the early events.

Here's an end-to-end event binder example :

 
// configuration
YUI_config = { /* your custom event-binder configuration here */ };
YUI_config.eventbinder.listenFor('click')
 
// initialization
YUI({
  modules: {
    'my-custom-module': {
      fullpath: './my-custom-module.js'
     }
   }
}).use('gallery-event-binder', function(Y) {
  
  Y.EventBinder.delegate('click', ['my-custom-module'], '#doc', '.yui3-event-binder a');
  Y.EventBinder.flush('click');
 
});

A more advanced configuration

You can modify the fn function in your configuration to be more selective about which events to queue and you can store more information about the events. Additionally adds a yui3-waiting class to the click target which we style in CSS to display a loading spinner:

 
YUI_config = {
    // standard YUI_config configuration
    combine: true,
    filter: 'min',
 
    // event binder configuration starts here
    eventbinder: {
        // set of options that should be preserved for every event (all optional)
        eventProperties: [
            "ctrlKey", "altKey",
            "shiftKey", "metaKey",
            "keyCode", "charCode",
            "screenX", "screenY",
            "clientX", "clientY",
            "button",
            "relatedTarget"
        ],
 
        // listener callback function
        fn: function(e) {
            var binder = YUI_config.eventbinder,
                props = binder.eventProperties,
                filter = /yui3-event-binder/,
                target = (e.target || e.srcElement),
                container = target,
                info = {
                    target: target,
                    type : e.type
                },
                i;
 
            if (target.nodeType === 3) {
                // target is a text node, so use its parent element
                target = target.parentNode;
             }
 
            // look for an element with the class yui3-event-binder
            while (container && !filter.test(container.className)) {
                container = container.parentNode;
             }
 
            if (container) {
                target.className += ' yui3-waiting';
 
                // back up the event properties to simulate the event later on
                for (i = props.length - 1; i >= 0; --i) {
                    info[props[i]] = e[props[i]];
                 }
 
                (binder.q = binder.q || []).push(info);
 
                // prevent the default browser action for this event
                if (e.preventDefault) {
                    e.preventDefault();
                 }
                return (e.returnValue = false);
             }
        },
 
        listenFor: function(type) {
             var d = dokument;
 
            if (d.addEventListener) {
                d.addEventListener(type, this.fn, false);
             Else {}
                d.attachEvent('on' + type, this.fn);
             }
 
            return this;
         }
     }
 };
// add events to the monitoring process
YUI_config.eventbinder.listenFor('click');

Check out this event binder example to see this advanced configuration in action.

Zaključak:

For high performance web applications, it's important for pages to load and become responsive quickly. To accomplish this, we have to rely on on-demand loading techniques. Once you start using them, it's equally important to control user interactions that can happen before the corresponding code for an action become available.

Event Binder (gallery-event-binder) provides friendly APIs to deal with both use-cases without you having to change your application logic. It can be applied to any YUI 3 application without introducing extra complexity to your code.

Find conversations: bloglines | technorati

Podijelite i proširiti: Označi s del.icio.us | digg it! | Reddit!

Using the YUI 3 Calendar Date Selector from Alloy

June 18, 2010 at 10:46 am by Eric Miraglia | In Development , YUI 3 Gallery | 6 Comments

The Alloy components (contributed by Nate Cavanaugh and Eduardo Lundgren from Liferay) in the YUI 3 Gallery are simple to use. This example illustrates the use of the Alloy calendar to progressively enhance a set of select elements for date selection.

Let's start with the markup — the HTML that will be on the page and functioning regardless of whether JavaScript is enabled. Alloy's Calendar module does not require this markup; you can feed it an empty element and it will create the select elements for you in the event that your use case would not benefit from progressive enhancement.

 <div id="calendar">
	<select class="yui3-datepicker-month" name="month" id="monthselect">
		<option value="0">
			 Siječanj
		</option>
		<option value="1">
			February
		</option>

 ...

	</select>

        <select class="yui3-datepicker-day" name="day" id="dayselect">
		<option value="1">
			 1
		</option>
		<option value="2">
			 2
		</option>

 ...

	</select>

        <select class="yui3-datepicker-year" name="year" id="yearselect">
		<option value="2009">
			 2009
		</option>

 ...

	</select>
</div> 

With this markup in place (or with just an empty root element if we aren't progressively enhancing existing form fields), we bring in the Alloy Calendar module with datepicker selection support from the YUI 3 Gallery . This requires us to have YUI 3 on the page and then to follow the configuration step outlined on the module's Gallery page .

 <script src="http://yui.yahooapis.com/3.1.1/build/yui/yui-min.js"></script>
<script>
YUI({
	// All of this configuration information can be cut-and-pasted from the Gallery entry for
	// this module: http://yuilibrary.com/gallery/show/aui-calendar-datepicker-select
    gallery: 'gallery-2010.06.07-17-52',
    modules: {
        'gallery-aui-skin-base': {
            fullpath: 'http://yui.yahooapis.com/gallery-2010.06.07-17-52/build/gallery-aui-skin-base/css/
							gallery-aui-skin-base-min.css',
            type: 'css'
        },
        'gallery-aui-skin-classic': {
            fullpath: 'http://yui.yahooapis.com/gallery-2010.06.07-17-52/build/
							gallery-aui-skin-classic/css/
							gallery-aui-skin-classic-min.css',
            type: 'css',
            requires: ['gallery-aui-skin-base']
         }
     }
}).use('gallery-aui-calendar-datepicker-select', function(Y) {
    var datePickerSelect = new Y.DatePickerSelect({
		displayBoundingBox: '#calendar',
		dateFormat: '%m/%d/%y',
		yearRange: [ 2009, 2012 ],
		dayField: Y.one("#dayselect"),
		dayFieldName: "day",
		monthField: Y.one("#monthselect"),
		monthFieldName: "month",
		yearField: Y.one("#yearselect"),
		yearFieldName: "year"
	}).render();
});

</script> 

Here's a live version of this simple example .

It's as simple as that. The configuration properties for datePickerSelect are lucidly defined in the Alloy documentation . In this example, the properties are used to set the root element, format the date, set the date range, and then wire up our existing select elements to the widget instance so that it knows which form fields to use for progressive enhancement. In practice, only the root element ( displayBondingBox ) is a required property.

Check out the YUI 3 Gallery roster for a full list of the Alloy UI contributions .

Find conversations: bloglines | technorati

Podijelite i proširiti: Označi s del.icio.us | digg it! | Reddit!

Implementation Focus: YUI 3 Powering Autofusion's ResearchPro

June 18, 2010 at 9:00 am by Josh Lizarraga | In Development | Comments Off

About the author: Josh Lizarraga is a YUI Contributor and frontend developer located in San Diego, California. He uses YUI to build rich frontend interfaces and Ajax applications for Autofusion, Inc. , a San Diego firm that offers web solutions to the automotive industry in the United States and Canada. When he's not on the clock, Josh enjoys contributing to the YUI project with test cases and Gallery modules.

About the Project

In addition to serving industry professionals, Autofusion provides end-user information resources via our CarPrices.com sister-site. “ResearchPro” is the name we've bestowed on our brand new car research application, which allows the user to quickly and easily find everything there is to know about a potential new car purchase.

Researching a new car before you buy is typically a daunting yet necessary experience, and the current options available to consumers are not very user-friendly. ResearchPro attempts to remedy these issues with a simple, guided approach to car research. We also take the experience one step further, allowing customers to receive a free quote on their dream car from local dealers.

Why YUI?

We started using YUI 2 for all of our frontend development about two years ago, and haven't looked back. YUI's focus on application development makes it a no-brainer for Autofusion, as we provide many embeddable web apps and widgets to our customers.

Over the years we have used just about every YUI 2 component there is in both our client web properties and our internal tools. YUI's proven track record and incredible documentation really set it apart from the other libraries we've worked with. The refinements to the library offered by YUI 3 made it an easy choice for this project.

How YUI is Utilized in the Project

ResearchPro makes use of several YUI 3 components, namely IO , JSON , Node , Event , Animation , and even the beta Slider widget. We're also using the selector-css3 and event-mouseenter modules, as well as a custom module that handles the JSON communication with the backend.

Challenges and Benefits of Using YUI 3

Migrating from YUI 2 to YUI 3 was both the largest challenge and the largest benefit during ResearchPro's development. Working with Node instances instead of DOM nodes directly can take some adjusting to at first, but we quickly found that this excellent abstraction greatly reduces the amount and complexity of the code for a given task. Likewise, the chainability of YUI 3 methods offers some great syntactic sugar that is hard to live without.

The primary challenge of the YUI 3 migration was and continues to be beta bugs. The first YUI 3 beta was released a few months before we started development, and we took that opportunity to start this project with the new codeline. We wanted to be familiar with YUI 3 once it replaces YUI 2 in our workflow down the road. During development, we discovered and reported several bugs, some of which are still being worked out today.

What's Next for Autofusion?

We are always developing new products with YUI and revising our existing offerings to incorporate YUI on the frontend. Our online inventory solution is powered by YUI 2, and we're currently planning a refined version of the product that will use YUI 3 in its place.

Our inventory interface makes heavy use of the Container module family, so hopefully by the time we start development YUI 3 will have implementations of Panel and Dialog. We've been very pleased with the rapid growth of features, and expect YUI to be our frontend toolkit of choice for years to come.

Find conversations: bloglines | technorati

Podijelite i proširiti: Označi s del.icio.us | digg it! | Reddit!

YUI: Open Hours, Wed June 16th

June 15, 2010 at 12:26 am by Luke Smith | In Development | 2 Comments

It's time again for YUI: Open Hours ! A change of schedule this week, though. The call will be on Wednesday .

I want to start by sending a huge thanks to Iliyan Peychev, Andrew Bialecki , Matt Snider , and Jacob Fogg for featuring their Gallery widgets in the last Open Hours. From Matt's game UI inspired Radial Menu to Iliyan's full featured Accordion , it was a great exploration of the types of UI tools you can find (or create) in the Gallery today as well as a study in different ways to use YUI 3 to solve UI challenges. You can find links to the modules in the May 21st Open Hours post , and a sampling of some of the interesting points from the discussion in the comments .

This week, hot on the heels of their huge YUI 3 Gallery contribution , Nate Cavanaugh and Eduardo Lundgren of Liferay, Inc. will be joining us to introduce us to some of the new AlloyUI modules. This is a pretty big deal. We've been working with these guys for months to get their 65 modules into the Gallery. That's right, 65 modules! All created by just Nate and Eduardo. Talk about productive.

Obviously we'll barely have time to scratch the surface of all the AlloyUI modules, but we will do a quick overview of some of the most interesting or popular ones and cover some “Getting started” code. There's such a variety of modules, there will be something for everyone.

• For YUI 3 newcomers or folks that have been waiting for the YUI 2 widgets to be migrated, there are now a lot more options to check out.
• For people wanting to take those first steps creating something in YUI 3, there are now more things to write plugins for, patch, or extend.
• For seasoned component developers, there's now a lot more implementation code to reference for evolving conventions and components to collaborate on.
• For more complex app developers, you can get a sense of one team's strategy for code submodularization and approach for building and packaging modules in a larger or more complex application.

Nate and Eduardo are open to whatever questions you have, so the conversation can go however deep, and in whichever direction you want. If you have any questions about a particular module or about anything else, ask away.

We're changing up a little this week and moving Open Hours to Wednesday . The time will be the same as before, though (10am – 12pm PDT), and the connection details are also the same:

1. Birajte na 1-888-371-8922 (non-US sudionika, elektronička pošta mene za lokalni broj)
2. Enter the attendee code 4718 8953#
3. Pridružite sjednicu screen sharing (to će vas zatražiti da instalirate plugin Adobe Connect, ako je to vaš prvi put ga koristite)

And as always, you can keep up to date with the upcoming schedule and topics by following @yuilibrary on Twitter or subscribing to the YUI Event Calendar .

Nadam se da vas vidjeti tamo!

Find conversations: bloglines | technorati

Podijelite i proširiti: Označi s del.icio.us | digg it! | Reddit!