13 Mayıs 2011, Cuma

Google I/o 2011: Kapatma Araçları İle Büyük Javascript Programlama

MICHAEL BOLIN: Merhaba. İyi akşamlar. Hoşgeldiniz, sanırım, son ne Google I oturumu / Ç. Ben yakın ve sevgili olan bir konu hakkında konuşmak için buradayım JavaScript programlama olan kalbime için Kapatma araçları ile geniş. Benim adım Michael Bolin. Gördüğünüz gibi ben orada eğer benim SpeakerMeter URL var Bana geribildirim vermek istiyorum. Ben Kapatma hakkında biraz konuşmak, bu yüzden geri bildirim harika olurdu. Ama başlayalım. Her şeyden önce, ben aslında istediğim bir şey açıklığa kavuşturmak için ben kimim ve neden beni buraya kadar izin verdin? Aslında Çünkü, Google'da

işe yaramaz. Google'da çalışmak için kullanılır. Ben varken ve ben Google Takvim'de üzerinde çalıştı. Bunun için ön uç geliştirme bir sürü iş yaptım. Ve sonra da ön uç sonra çoğunluğu Google Görevler gelişme. Ve so

nra sonrası Google I Kapatma adlı bir kitap yazdı: Kesin Kılavuzu. Belki bazıları o var. Ve temelde when-- sefer yaklaşık bir yıl ve bir buçuk önce--, Google Açık Kaynaklı Kapatma, ben sadece bu gerçekten old

“Michael Bolin JavaScript ile tinkered en geliştiriciler Dursun 100.000, böyle bir dilde kod 1000 satırları yazarken hayal edemiyorum. Ancak bu Google mühendisl...”
Google Developers

uğunu çok şiddetli şekilde hissedildi Önemli araç. Etkinleştirme bakımından ileri ağ hareket açısından insanlar gerçekten hızlı web uygulamaları yapmak. Ve bu, ne zaman herkes için web iyi yapar ne insanlar daha kaliteli uygulamalar inşa edebilirsiniz. Bu yüzden bazı büyük yapmanın alanda iş biraz yaptık JavaScript geliştirme. Ve biz bugün hakkında konuşmak için gidiyoruz budur. Bu yüzden ilk ben clarify-- gerekir ya da en azından ne demek istediğimi içi

Google I/o 2011: Kapatma Araçları İle Büyük Javascript Programlama Resim 1 Google I/o 2011: Kapatma Araçları İle Büyük Javascript Programlama Resim 2 Google I/o 2011: Kapatma Araçları İle Büyük Javascript Programlama Resim 3 Google I/o 2011: Kapatma Araçları İle Büyük Javascript Programlama Resim 4

n definition-- çeşit vermek Büyük programlamaya göre. Sadece konrtol atmak Ben sadece, bazı Numaraları ama daha özelliklerini yapmak için gidiyorum kodunun 30.000 satırlarını diyelim. En bu büyük programlama diyelim. Başka yönü büyük bir ekip yaşıyor. Daha fazla people-- var bir kere Daha fazla insanlara ihtiyacımız var, çünkü büyük bir inşa etmek application-- Şimdi de bu iletişim yükü var Eğer düşünmek zorundayız. Ben bu bakımından çok önemli olduğunu düşünüyorum JavaScript bir sürü insan sadece kullanılır çünkü kopyalama

ve onlar için web üzerinde bulmak bazı kod yapıştırarak sahip oldukları bazı sayfayı süslemeleri ve bu tür ne JavaScript programlama nedir onların izlenim. Ve onlar gerçekten 10 almak için nasıl bir fikrim yok kod satırları 30.000-line JavaScript kopyalanan Uygulama. Bu bir başka yönü, daha uzun bir gelişim döngüdür. Eğer büyük bir çalışmaya bu, açısından önemlidir şirket insanlar üzerinde ve ekibi kapalı rulo olabilir. Onlar pick up ve dalmak mümkün olması için gidiyoruz Onlar aşina değiliz büyük bir kod tabanı. Ayrıca altı aylık bir süre boyunca, kendinizi bile olmayabilir Ne altı ay önce yaptığı kod hatırlıyorum. Bu yüzden organize edilmesi gerekmektedir. Sen o kadar dışarı tür döşeme bir yol olması gerekir geri gelebilir, başkasının içine gelebilir çünkü bu nedir daha karmaşık inşa sağlamak için gidiyor ve İlginç uygulamaları. Değil her şeyin karmaşık olması gerekir. Kesinlikle hayır. Ama gerçekten uygulamalar belli bir sınıf var ilginç biz web getirdi görmek istediğiniz. Ve bunun için, sadece bir almak gerekir, farklı alır Eğer ekip nasıl organize açısından farklı tack ve emin olabilir yapmak için kodunuzu düzenlemek İlginç bir ilerleme. Yani bu JavaScript programlama arıyorum alan Büyük de. Sanırım, Kapanış gerçekten uyuyor ve nerede ve işte Bu konuşuyor. Yani bugün zengin bir internet inşa etmek istiyorsa uygulama veya bir RIA, bunlar bir sürü düşünce vardır tek sayfalık uygulamaları. Böyle gitmek Gmail ve Takvim gibi, sen seni giriş aslında gerçekten sayfayı yeniden veya URL'leri değişmez. Belki fragman değişiklikleri ve sizin devlet izler. Ama başında JavaScript büyük bir paket yüklenemedi. Belki app gezinmek, belli egzersiz özellikleri, daha fazla JavaScript yüklenen. Ama temelde bu bir şey nerede kullanıyorsunuz Her şey o tek bir sayfada bellekte olduğunu. Bu zengin bir deneyim yaratmak istedik Yani, Açıkçası biz konum, bir masaüstü uygulaması daha yakındır var bir şey Şu anda HTML5 ile bir sürü yapıyor. Ama senin seçeneklerden bazıları ne olacağı hakkında düşünelim. Yani ilk böyle bir Java veya Flash gibi bir eklenti, kullanmaktır. Bazı insanlar için gittiğini Java uygulamaları, hatırlıyorum olabilir büyük şey olabilir ve onlar web kurtarmak için gittiğini ve Biz Swing tüm şeyler yazmak mümkün gittiğini ve hepsi mor ve gri olmak için gittiğini ve o was harika olacak. Ama sorun, yarım saat falan aldı Bu Java eklentisi yüklemek ve bu bakarak için kahve fincan. Hatta bunu indirmek için nasıl anlamaya olabilir varsayarsak. Ve daha sonra Flash. Flaş Açıkçası Java çok daha akıcı olduğunu. Ve bugün çok popüler. YouTube ilk çıktığında Açıkçası, ben bilmiyorum Bir olmasaydı YouTube olurdu Flash eklentisi. Ama kesinlikle Apple dayağı aşağı attı. IOS Flaş olmayan bir başlangıç ​​olduğunu. Yani genelinde kullanabileceğiniz bir kod tabanı var isterseniz Farklı cihazlar ve iOS desteklenmesi için önemlidir Eğer Flash daha gerçekten makul bir seçenek değildir. Bir RIA bina için iyidir Başka bir seçenek, GWT olduğunu. Açıkçası ben bir sürü insan var eminim Burada GWT kullananlar. Kesinlikle bu konferansta bir sürü insan olmuştur GWT hakkında çok konuşuyor. Eğer aşina iseniz Ve böylece, fikir temelde Eğer bir dilde uygulama yazmanızı Bu sizin için daha tanıdık. GWT durumda, Java bu. Ve sonra aracı Java kodu tercüme ilgilenir JavaScript içine. Ve kesinlikle bir sürü insan bir sürü yazdım GWT ile ilginç şeyler. Hatta bu sabah, inanıyorum ki, Angry Birds millet dedi onların şeyler GWT yazılmıştır. Yani açıkça bunu kullanarak yapılan bir sürü alabilirsiniz. Fakat aynı zamanda, gerçekten büyük bir sürü aslında var JavaScript Java sahip olmadığı sahiptir şeyler. Böyle Birinci dereceden fonksiyonlar olarak, gerçekten gerçekten büyük bir bir ve Kapanış en doğal kullanılması. Java parametre olarak bir işlev etrafında geçen aslında inanılmaz garip. Bunu yaptığınızda Oysa aynı zamanda çok düz ileri bulunuyor JavaScript o. Benzer HTML5, yeni tarayıcının API'leri, var şeyler her zaman dışarı geliyor. JavaScript çok doğrudan bunları kullanabilirsiniz. GWT size JSNI onları kaydırmak gerekiyor ya da bir başkasının vardır sizin için bu işi yapmak. Yani gerçekten bir mettle yakın alma hakkında bakım Tarayıcı, yani GWT onu almak için yollar vardır, konuşmak için. Eğer dil kullanarak sanki ama o kadar doğal değil Tarayıcı konuşuyor, JavaScript hangi. Ben teklif ve zengin internet inşa etmişlerdir yolu uygulamaları JavaScript sürü yazıyor. Bu harika olduğu için. Ben çok dediğimde, ben çok demek. Ben biz çalıştı son projesi 70,000 satırları yazdı JavaScript başvurumuz oldu. Ve biz Kapanış kullanarak yaptım. Ben de belirtildiği gibi, JavaScript birinci dereceden işlevleri vardır. Ayrıca Perl benzer edebi düzenli ifade vardır. Bir prototip tabanlı miras mekanizması olduğunu Java var ve diğer diller yok. O aslında bu, diğer ilham kaynağı oldu ki- aldı dil Öz çağırdı. Yani olsun düzgün bir sürü şey var olduğunda sizi olmanın yanı sıra, JavaScript mal tarayıcıya kapatın. Ama aynı zamanda bir dil olarak, çok iyi bir dildir. Onlar sadece ilişkilendirmek, çünkü insanlar o kötü izlenimler var geleneksel olarak tarayıcı programlama ile o Çünkü böyle şeyler temelde zor Internet Explorer 6 ve DOM tüm farklılıklar. Aslında çoğu kaynağıdır DOM API var İnsanların hayal kırıklığı. Ama JavaScript dili gerçekten ısı daha uzun sürer oysa olmamalıdır. Eğer ben deli olan tek kişi olduğumu düşünenler Biz JavaScript, tüm bu çok yazmalısınız düşünüyor Google yazmıştır altındaki uygulamaları, onlar JavaScript bulunmaktadır. Bir çok insan Google Web Toolkit olduğunu varsayalım Google üreten her şeyden sorumlu. Bu böyle değil. Bir kısmı da tarihe sadece nedeniyle oldu. Bu uygulamaların bazıları şimdiden inşa ve vardı edilmişti gidiş ve GWT-- bunu yeniden iyi bir seçenek gibi görünmüyor. Ama aynı zamanda, bazen sadece performans vardır karakteristikleri veya bu istedik ölçümleri uygulamaları karşılamak için. Ve bu sadece onları yazmak için anlamda bir çok yapılan JavaScript. Ve tüm bu temelde Kapatma tarafından desteklenmektedir. Sana söylüyorum, aynı zamanda Yani sen-meli JavaScript bir sürü yazma, henüz bazı açılardan JavaScript çalışır Büyük programlama yenmek için. Java aksine Yani, hiçbir ad yoktur. Dilin parçası olan hiçbir ithalat beyanı var JavaScript. Eğer çok kurmak olarak çünkü ad önemlidir kod, bunu modülarize için bazı yol gerekir. Bunu düzenlemek için bir yol gerekir. Ad alanları için oldukça iyi bir mekanizma haline gelmek bu tür bir şey yapıyor. Görünürlük kontrolleri başka önemli nokta vardır. Özellikle, nesne yönelimli programlama açısından Eğer özel halkı olan Java have-- korumalı anahtar kelimeler. Bu veriler sadece tarafından görülmelidir, söylüyorsun Bu sınıfa ait yöntem. Bu, aynı zamanda, büyük programlama yararlıdır. Bu miktar daha yardım etmektedir Çünkü modülarize kayıt Kod, veri modülarize. Ve bu derleyici tarafından zorlanan oluyor. Yani bu konuda bazı statik denetimi olsun Organizasyon ve kendiniz yönetmek zorunda değilsiniz. Benzer şekilde, bir tür sistemine sahip olan. JavaScript ne olduğunu pek fikir gibi bir sürü insan insanlar ördek türü, diyoruz. Yani bir nesneyi almak ve özelliklere sahiptir eğer sen istiyorum, sonra bunu istediğiniz şekilde kullanabilirsiniz. Açık bir sınıf oluşturmak zorunda ve sahip aksine kesinlikle yazılı imza ile yöntemler bu alır diyerek bir dize, bu bir sayı alır ve derleyici size izin vermez Bu sözleşme ihlal şey yapmak. Ama sen JavaScript daha yazmak ve sadece almak gibi İnsanların kod ve yukarı sadece bakmak için çalışıyoruz arayüz, bu aslında tür zor olabilir. Ben, ben, ben baktığımda bu birileri rahatsız bulmak Python belgeleri. Python en de hem kesinlikle yazılı değil. Yöntem ise daha belirgin olacağını gelmez neyi Bir çok kez Ben sadece onunla ilişkili tip imza biliyordu. Böylece daha fazla kod bu yaz bir sorun haline gelebilir. Ayrıca hangi I will, üstlenmeden ile ilgili oluyor Muhtemelen daha sonra içine almak. Ayrıca statik kontrol. Yani bu bir tür sistemine sahip ilgili olduğunu. Bir tür sistemine sahip ve ne zaman bir derleyici var derleyici olabilir derleme zamanında gelir türleri zorlar bulmak olmayabilir hatalar bütün bir sınıf bulmanıza yardımcı Sorununuzu çalışırken. Ama bir başka bir hata var ise benzer branch-- Eminim pek çok Python programcı değilim Bu problem-- vurdu değil nerede veya kodun herhangi bir dalı, ben demeliyim Düzenli idam. Ya da hata işleme kodunun çeşit söylüyorlar. Açıkçası Çünkü iyi girişler ile test etmek istiyorum hayır kimse onların kötü girdileri test eder. Neden biz hiç kötü girişler olurdu diye mi? Ama insanlar biri kadar çalışacak zamana kadar dışarı bulmuyorum Nihayet o hataya neden olur. Orada ne büyük bir sınıf pf sorunları var Bir olsaydı o statik kontrol edilebilir derleyici veya diğer statik analiz aracı çeşit için Sizin için kontrol emin gerçekleştirin. Kodunuzu alır gibi yine büyük programlama Daha büyük ve daha büyük bütün bu yönetmek gerçekten zor Kendinizi şeyler. Evet, birim testleri veya entegrasyonu yazma olmalıdır Aslında tüm bu kod yolları egzersiz testleri. Ama gerçek çoğu insan onlar varsayarak, yok olduğunu hiç testleri yazmak. Ve bu sonuncusu sahip değil yerleşik şablonları için destek. JavaScript, veya herhangi bir web uygulamasında Yani, genellikle konum HTML büyük dizeleri kadar bina. Bu sizin kullanıcı oluşturmak için kullandığınız bir şey olduğundan Bir web tarayıcısında arayüzü, temelde HTML ve CSS olduğunu. Ne yazık ki JavaScript, biz değiliz Çok satırlı dizeleri vardır. Ancak biz büyük DOM oluşturmak istiyorum yapılar HTML tanımlamıştır. Ve o zaman gerçekten tutucular sahip olmak ister, bu yüzden istiyorum biz temelde bir şablon olabilir ve de yerine şeyler. Bir tablodaki bir tekrarlanan satır varsa, değil mi? Bir şablon olmak o satır istiyorum o sadece can yeniden ve fakat aynı yapı HTML dışarı pompalamak Farklı değişkenler. Ve ne yazık ki yol dizeleri JavaScript çalışmak Bugün, o yapmak için çok basit değil şey çeşit. Peki bu JavaScript çalışır yollardan bazıları şunlardır yenmek veya zor büyük gelişmeyi yapmak için yapar. Google denilen tarafından bir araç paketi vardır Kaynaklı açık Kapatma araçları. Ve bu benim konuşma püf noktası hakkında budur. Ve bu araçlar JavaScript genel yararlıdır gelişme. Ama gerçek gücü başlattığınızda olduğunu düşünüyorum Büyük JavaScript geliştirme yapıyorum. Ve bu, tabii ki, sen başlamalı küçük bir proje ile. Bu büyük bir proje ile başlamak iyi bir fikir değil. Başlangıçta Yani bu araçların değerini göremeyebilirsiniz. Ama o zaman gerçekten istediğiniz bir noktaya alabilirsiniz Bunları kullanarak olmuştu. Yani ne olduklarını bakalım. İlki Kapatma Kütüphanesi. Kapatma Kütüphane ortak yarar bir kütüphanedir, widget, JavaScript ile yazılmış. Bu tarayıcılar arasında çalışır. Bu IE6 geri çalışır. Yani, senin jQueries sorguları benzer var senin Şey mooTools, senin YUI tüm bu tür. Bütün bunlar deneyin JavaScript kütüphaneleri size ve soyut uzak tarayıcı farklılıklara Ortak işlevsellik bir sürü sağlamak. Bir sonraki aracı Kapatma Şablonlar olduğunu. Yani Kapatma Şablonlar bir çiftleşmiş dilidir. Yeterince çiftleşmiş dilleri yoktu çünkü. Ama Kapanış şablonları bazı benzersiz var ve önemli özellikleri. Ve bunu aşağıdaki amaçlara kullanabilirsiniz Ben de belirtildiği gibi, bu HTML dizeleri oluşturmak zor JavaScript ham JavaScript kullanarak. Ama ayrı bir şablon dili olan aslında bu a yapar çok daha kolay ve daha az hata eğilimli göreceğiz olarak. Ve üçüncü aracı Kapatma Derleyici. Kapatma Derleyici bir JavaScript minifier olduğunu. Yani size JavaScript dolu yazmak anlamına gelir yorum ve aslında katkıda yok boşluk programın davranışı. Ama JavaScript indir kullanıcıların, ziyaret ettikleri zaman Siteniz, onlar, tabiri caizse, penaltı ödeme yapıyorsanız zamanı indirmek ve ne zaman zaman ayrıştırmak Bu ekstra bayt. Ve böylece azaltmak için JavaScript minifier kullanmak istiyorsanız JavaScript kodu boyutu. Bu bant genişliği tasarrufu sağlar. Bu kullanıcıların bant genişliği tasarrufu sağlar. Bu up-- başlar ve kullanıcıların uygulama başlayacaktır Daha hızlı orada ayrıştırmak için daha az JavaScript ve o var çünkü o daha küçük bir dosya var daha hızlı çünkü. Diğer minifiers orada vardır. JSMin ve UglifyJS gibi var. Fakat onların çoğu, sadece, oysa minification odaklanmak Kapatma derleyici de durum denetimi eklemek. Ve biz de biraz bundan daha görürsünüz. En önemli şey, ben Kapanış araçlar hakkında, düşünmek insanlar farkında değilsiniz, o Kütüphanesi, Şablonlar ise, ve derleyici, hepsi bağımsız araçları konum. Aslında herhangi bir JavaScript üç birini kullanabilirsiniz Proje bu ilgilendiğiniz tüm buysa. Ama çok uzakta, çoğu vardır Birlikte kullanıldığında zorlayıcı. Kodunuzu almak sonuçlar ve geliştirme, Bütün bu üç sadece daha çekici koymak zaman Birlikte şeyler. Ve ben Kapanış olduğu bu başka bir alan olduğunu düşünüyorsanız çok diğer teklifleri bir sürü ötesinde. JQuery JSMin Mustache.js vardır mi vardır bulunmaktadır. Bu araçlar her üçü için analogları vardır. Yani Kapanış bütün bu fikirleri icat iddia edemez. Ancak ben bu projelerin çoğu yapılır düşünüyorum tür bir siloda. Kapatma araçları gücünü bilerek yapılır Oysa Akılda birbirlerini aracı. Gerçekten onları biraraya koymak için yardımcı olur Ve bu yüzden. Gerçekten anlamak ve parası takdir etmek Kapatma Araçları, ilk önce biz bazı bakmak gerektiğini düşünüyorum JavaScript geliştiricileri bugün karşılaştıkları sorunlar. Ve belki sen bile yaşıyorsanız fark yoktur Bu sorun ya olması gerektiğini Daha iyi bir şey yapıyor. Yani burada ilk. İnsanlar-- Herkes Kütüphane Prototype JS kullanılırsa bilmiyorum. Prototip bir JavaScript kütüphanesi olduğunu geri dönüş yolu, yol gidiyor. Ve şöhret iddialarının biri olan terseness oldu. Yani bu Prototip sunan bir fonksiyondur. Herkes tarafından sadece bu fonksiyon ne bir tahmin var mı okuma? Bu boşluk yok. Evet. Yani aslında kodunuzu böler. Bu beyaz boşluk üzerine, vermek için dize böler. Bunu biliyor eğer kullandım çünkü Şimdi, bu muhtemelen Prototip önce JS. Eğer proje üzerinde yeni bir kişi varsa ve onlar geldi ama dolar işareti W diyor bu işlev üzerine oldukça var Onları ya, bu olmadan ne ile gelip zor Çalışan veya kod bakarak. Ve bir fonksiyon için sorun değil. Ama bu sizin bütün kütüphane tasarımı nasıl tür ise, temelde bu incitecek, okunmaz ama veciz olmak Eğer büyük bir JavaScript oluşturmaya çalışıyoruz Uygulama. Uzun bir süre insanlar tür ortadan kazanılmış veya adres Çünkü kütüphane tarzı haklı, bu tip savunarak, iyi benim kullanıcıların bant genişliği nedeniyle tasarruf ediyor Benim işlev adları için daha az bayt kullanıyorum. Ve böylece tel üzerinde yerden tasarruf ediyor ve bu nedenle Tamam hiç kimse anladığı şeyler yapmak için. Ama Kapanış derleyici, irade gibi şeyler Biz Kişilik Sokak göreceğimiz gibi senin için çok değişkeni yeniden adlandırmak Bu artık olarak zorlayıcı bir sebep bu şekilde şeyler. Yani Kapanış dünyada, gerçekten istediğiniz gidiyoruz okunabilir adlarını kullanın ve mantıklı ve mantıklı ve takım arkadaşları için daha fazla kendi kendini belgeleyen vardır. Başka bir şey HTML dizeleri kuruyor. Ben de belirttiğim gibi sorun JavaScript olduğunu, bir Eğer korumak istediğinizde bu, gerçekten büyük değil Eğer çalıştığınız HTML ve yapı biçimlendirme okunabilir değil öyle ki üretmek. Sen bunu yazdı eğer ne olurdu yakın olmak istiyorum Kendinizi HTML. Ama herkes bu işlev dönecekti biliyor mu? Yani aslında, bu fonksiyon, sadece bunu koştum, ne olursa olsun Ne buna verdiği girdiler bu fonksiyon undefined değerini döndürür. Ve neden JavaScript düzgün olmasıdır noktalı virgül ekleme denilen özellik. Ve temelde, her yerde noktalı virgül kullanmak istemiyorsanız noktalı virgül yerleştirilebilir burada için çıkarır. Ve böylece, diğer bazı dillerden farklı sen mantığı olabilir JavaScript return deyiminin sonra. Eğer isterseniz hata ayıklama sırasında aslında tür yararlı olur bir şey test ederken gerçekten hızlı dışarı çıkmak için. Ama üretim kodunda, bu aslında bir tür bir felaket. Peki olduğunu ne JavaScript temelde bir noktalı virgül ekler bu son karakteri nerede olacağını sonra. Ya da tercüman veya çalışma zamanı yapar. Daha sonra orada yeni bir çizgi ve çünkü yapar Bu, kendi başına, tüm statement-- Bu bir Geçerli JavaScript ifadesi. Yani ilk satırı sadece iade olur. Bu undefined değerini döndürür. Aslında bunun altında ifadesi asla idam olur. Küçük hatalar bir sürü hatalar insanlar yapmak var, Bu tür davranış etrafında. Bu biçimlendirme HTML gibi şeyler geldiğinde, yapar özellikle kötü. Insanlar zaman kendilerini açmak başka bir sorun Onlar bu şekilde kod, bu argümanlar olmasıdır yazmak değil, HTML kaçtı. Anlamı, kullanıcı kullanıcı çeşit ise ve Potansiyel sorumlu, kötü niyetli bir kullanıcı for-- Eğer bir veritabanı kullanıcı dışına bu değerleri okursanız onlar kaydoldum veya bir form falan doldurdu zaman seçti ki- gibi işaretler daha az kaçış yoksa ve içine HTML bu dize yıldırım etajer önce senin Uygulama, bir genelinde yerinde kendinizi yukarı açabilir betik saldırısı. Hangi sizin için çok utanç verici. Yaptım. Ben hayal edebileceğiniz gibi çok utandım. Ama gerçekten zor yapar bir araç olması daha iyidir hatalar bu tür yapmak. Başka bir sorun JavaScript bağımlılıkları yönetiyor. Ben projelerde, ya da ben ziyaret bile web siteleri bir sürü bakmak ve Onlar yavaş olduğunu merak ediyorum. Ve sonra kaputun altında biraz görünüm ve bir çok take Onları bu şekilde onların bağımlılıklarını yönetmek. Ve ben geliştirici aklından neler hayal edebiliyorum Onlar HTML ile gelip olarak. Yani bir numara gibi, ben JavaScript yazıyorum konum. Yani jQuery ihtiyacım var. Herkes jQuery serin diyor çünkü. Yani ben yapacağım budur. Yani onların sayfasında jQuery için bir komut dosyası etiketi koydu. Şimdiye kadar bu tamamen iyi. Ama sonra onlar çeşit var noktaya olsun girmek için insanlara bir tarih ihtiyacı var. Ve onlar bir tarih seçici ihtiyaç gibisin. Ve onlar gitmek ve onlar bir tarih seçici kitaplığı indirmek için yerde ve onlar sadece orada başka komut dosyası etiketi plop. Yani şimdi bu iki etiketleri var. Çok kötü değil, değil mi? Muhtemelen başka yerlerde bir tarih seçici ihtiyacımız olacak. Bu iyi. Ve sonra onlar biraz şablon çözümü istediğinize karar. Aslında Çünkü, bu tür onlara yardımcı olacaktır. Ve onlar jQuery ile veya kutunun bir dışarı alamadım veri toplayıcı, bu yüzden onlar yer alıyor. Ve sonra IE 6 test başladı ve konum ah, gibi, oğlu bir- Şimdi bu geçici çözümü eklemek lazım. Ve o büyük değil, bu yüzden herkes sadece bunu elde edebilirsiniz. Bu sadece başka bir komut dosyası etiketi ve şey bu tip. Ve sonra, ah, aslında, Ben de muhtemelen yazmalısınız unuttum benim de uygulama, tüm bu diğer yapıyorum yaparken JavaScript geliştirme. Ve böyle sayfaların bir sürü görmek, nerede Her şey inşa alır. Iyi bir şans da var ki ilgisiz şablon Çözelti nokta js jQuery paket oldu onların uygulanması. Ve şimdi bunun iki versiyonu aşağı çekiyoruz. Bu gibi bir çok şey gördüm. Peki ne kadar bu devam edebilir? Kaç komut etiketleri web sayfanıza ekleyebilirsiniz? Peki, bir sürü maalesef. Eğer baktım Ve eğer bu yavaşlık büyük bir kaynak, nasıl sayfa besleme veya Steve Souders'in çalışmalarının herhangi Daha hızlı web siteleri. Herkes size söyleyecektir. Bir, isteklerin sayısını en aza indirmek için gereken sizin yanınızdaki sayfa yapar. Bazen bir şeyler bölmek isteyebilirsiniz kadar cacheingini kaldıraç. Bu gerçekten sizin sayfanıza veya profiline bağlıdır indirmek için çalışıyoruz varlıklar. Eğer böyle bir şey görürseniz Ama, muhtemelen yapıyoruz Ters giden birşey mi var. Ve sen çok daha iyi bir şey yapıyor olabilir. Ve ayrıca, bu farklı kütüphanelerin bir yeri vardır muhtemelen aynı işlevselliği reimplementing ve sizin kullanıcılar artık bunu beş kez indirirken. Yani bağımlılıkları yönetmek. Yine, hiçbir import deyimi içinde var dedi JavaScript. Bu yüzden kutudan yapmak biraz zor. Geçenlerde oluyor görüldü ettik başka bir şey yaratıyor Mobil cihazlar için JavaScript özel bir sürümü. Mobil için JavaScript özel bir sürümü oluşturma iyi bir şey. Farklı yeteneklere sahip olduğundan ve bu tür bir şey. Ama sorun kütüphanelerin çatal görünce olmasıdır. Yani orada Zepto Js adında bir kütüphane var ve bu kadar jQuery So temelde bir mobil web uygulaması kiti Ne demek mobil web kiti derken, bir dizide güvenebilirsiniz Her kitaplık için bir sahip. Yoksa sorgu seçme yöntemi olduğunu biliyoruz jQuery, aksine DOM mevcut olmak geriye önemli kod uyumlu var ki o demetleri sorgu taklit edebilmek SelectorAll ve Bir dizinin ve bir bütün demet yineleme Böyle şeyler. Ve böylece yerine bir kitaplık yazmaya çalışıyorum, değil kendini tekrar ve daha sonra çeşit yapıyor post-processing bir mobil web kiti ne olacağını oluşturmak için optimize edilmiş sürümü ve daha sonra ne üreten, en bir diyelim tarayıcı agnostik versiyonu, insanlar bazen sadece seçim şeyleri çatal. Ve tabii ki o zaman, korumak çok zordur. Siz iki versiyonu var. Bir diğeri değil özelliklere sahiptir. Test. Yapmaya çalıştığınız şeyin tüm çabalar artık ikiye katlanır. Bir diğeri özel değişkenleri korumak olduğunu. Yine, biz görünürlük anahtar kelimeler hiçbir fikrim var, çünkü JavaScript. Hiçbir kamu özel anahtar vardır. Bir sürü insan, özel değişkenler öykünmek için Kapanış kullanın Java gibi dillerde. Ve böylece bu sizin nasıl bir uygulamasıdır Eğer ImmutableLatLng hayal eğer eğer bu yapabileceğini Bir yapıcı olarak bu tedavi. Sen lat, lng geçti. Bunlar için alıcılar orada istedim özellikleri değil belirleyiciler. Bu sizin için bunu istiyorum. Olumsuz o birini örneğini her zaman demektir Bu objects-- arasında bu durumda üç yeni fonksiyon nesneleri yaratıyor Bir yöntem nesne paylaşımı karşı. Yani bu daha fazla bellek kadar sürecektir. Ayrıca zaman bakmak artırır. Çünkü Kapanış kullanarak, aslında gerçek bir oluşturmak kapsam düzeyinde. V 8 gibi daha yeni motorları bu aslında olmamalı bakmak zamanı açısından anlamlı bir fark. Ama eski tarayıcılar, IE6 gibi, bunlar aslında haline daha önemli. Ve başka bir şey türlerini belgeliyor. Ben de belirtildiği gibi biz standart bir sözdizimi zorunda kalmazsınız JavaScript değişkenler ve yöntemler türlerini belgeleyen. Ama büyük bir uygulama ve insanlar için gidiyoruz eğer gerçekten hızlı bir API bakmak mümkün olmak istiyorum, daha var yararlı Eğer standart çeşit varsa türlerini belgelemek için bir yol. Bazen libraries-- Bu temelde yapabilirsiniz ki, Dojo yaptığı budur Biraz hat comment. Ve bu sürece, sahip olduğu gibi aslında oldukça iyi standart bir formatta tür. Ama bile bu örnekte, bazı alır bir yöntemi var parametre sayısı ve o zaman da Bir geri arama fonksiyonu belirtin. Ve bir sürü insan sadece geri arama bir işlev olduğunu söylüyorlar. Ama gerçekten, bu çağrı geri bir sözleşme vardır. Ve bu durumda bir şey olacağını bir lat LNG alıyor. Fakat geliştiriciler şu anda genellikle bakmak zorunda Yöntemin uygulanması nasıl çağrı görmek için geri gerçekte alır veya test. O tip tanımında ifade değil çünkü size argüman için verdi. Bir kütüphane alıp biliyorsanız kullanmak çok daha kolay geri arama işlevi sözleşme nedir. Eğer göndermek ya da aslında eğer nerede olduğunu anlamaya yardımcı olur Doğru yöntem olsa bile size kullanılarak ya da olmalıdır. Peki bu bir sorunların demet o JavaScript vardır geliştiriciler bugün sahip. Ve bu yüzden Kapatma araçları geçmesi ve atalım istiyorum Kapanış bu adres nasıl yardımcı olabileceğini bakmak sorunlar, daha iyi kod yazmak ve bu tuzaklardan kaçınmak ve umarım hataları önlemek. Yani ilk şey bu how-- temelde olduğunu Tüm Kapatma araçları kullandığınızda beraberken- Başvurunuz nasıl inşa edilmiştir. Ya da nasıl alt JavaScript üretirler. Üstündeki Yani, bu nedenle olurdu tek şey olurdu olduğunu Şablon kodu. Ben bir saniye içinde size göstereceğim. Kapatma Şablonları kendi çiftleşmiş dilidir. Yani o çiftleşmiş dilde şablonları yazın. Ve sonra, aracı, Kapanış şablonları aracılığıyla çalıştırmak ve bu JavaScript üretir. Yani şimdi yazdı her şablon haline Bir JavaScript işlevi. Dediğim gibi Kapatma Kütüphanesi, zaten bir kitaplık olduğunu Saf JavaScript. Yani şimdi zaten dize için JavaScript kütüphanesi var DOM programları ve diğer iyi şeyler her türlü ve. Ve sonra üçüncü uygulama kodudur. Yani hem güçlendirir kod yazmak mümkün olacaktır şablonlar ve yazdığınız kütüphane kodu. Ve bütün bunlar üç aşağı gitmek Kapatma derleyici içine. Ve böylece Kapatma Derleyici bir bütün program optimize etmek ve derleyici. Bunun tüm kaynak kodu vardır Anlamı senin onu derler kez ne zaman başvuru. Bu aksine, en Örneğin, Java diyelim. Nereye javactır geçmesi varlıkların bazı kavanozları are Nesneleri önceden derlenmiş ve bu nedenle bazı var Kapatma Derleyici küresel yapabileceğiniz optimizasyonlar seviyesi tüm kaynak kodu vardır çünkü. Ve sonra bir sonucu olarak bazı optimize JavaScript olsun. Biz Kapatma Derleyici bilerek üretti şey olsun tüm olası kod yolları, böylece JavaScript, konuşmak için Uygulama. Ve böylece bu bu kadar şey üretmek sağlayan nedir gerçekten küçük gerçekten kompakt ve çok hızlı. O yüzden sana göstermek istediğim ilk şey nedir sözdizimi Kapanış için şablonlar gibi görünüyorsun. Üst kısmında bir isim var. Bu durumda ben Widget olarak adlandırılan bir ad yaptı. Bir sonraki, ben, bu tür Java veya Javadoc gibi görünüyor sanırım Eğer gidiyorsun parametreleri ilan nerede şablonuna geçirilebilir. Yani bunlar temelde aşağıya şablon değişkenleri. Sonra HTML var ve biz bu dolar işareti var şey yer tutucu tipi. Eğer baktım eğer Hangi muhtemelen çok şaşırtıcı değil Diğer çoğu çiftleşmiş çözümleri. Biçimlendirme var ve o zaman şeyler var size eklemek istediğiniz. Başlangıçta, bu belki de çok zorlayıcı görünmüyor. Ama ne daha ilginç biz aracılığıyla bu çalıştırdığınızda olduğunu Kapatma Şablonlar aracı, ve böylece bu budur Eğer aracıyla çalıştırmak kez üretti. Peki gerçekte üretilen bir işlevdir. PHP de bir çiftleşmiş kütüphanesi PHP, aksine Yani, nerede gerçekten programlama ona erişim elde edemezsiniz. Sadece sayfa isabet gibi Bu tür bulunuyor ve şeyler sadece olur. Şimdi bu şablonu aslında bir işlevdir. Bir dönüş türüne sahip bir parametre olarak bu vardır. Bunu bu nesneyi alır görebilirsiniz. Ve sizin için yaptığı başka bir şey, varsayılan olarak, siz Tüm argümanlar Kaçar olduğunu görebilirsiniz. Yani benim orijinal tanımı konusunda daha önce o yorum yapılmış Eğer, bu şablonu yapmak denemek istiyorum, bir fonksiyonun nerede argümanlar kaçtı ve çapraz-site tabiydi değil scripting açıkları. Kapatma Şablonlar, varsayılan olarak bir şeyler kaçar. Bu bir şey kaçış yok demek açıklamaları ekleyebilir Şablon Bu değişken kaçış yok ya. Ama varsayılan olarak, çok daha güvenli olması gerekir. Başka bir şey, bu fonksiyon olmanın da olduğunu yapabilirsiniz Eğer programlama ile etkileşim bir şey, Eğer fonksiyon taşıma fikri aşina iseniz ve Ayrıca JavaScript fonksiyonları birinci dereceden olan o nesneler, onları etrafında geçirebilirsiniz. Yani programatiically, bununla başa çıkmak için çok güzel bir yoldur Bir şablon fikir. Eğer dikkatlice boşluk bakarsanız Ayrıca, görebilirsiniz Biz template-- koymak olduğunu Sadece ourselves-- için okunabilir hale getirmek için o çevrilmiş ne zaman kaldırılır Bir JavaScript işlevi. Yani bu bayt kaydeder. Eğer DOM çapraz zaman beyaz aslında az var şekilde olsun uzay düğümleri. Peki bu tüm güzel şeyler ve biçimlendirme oluşturmanıza yardımcı Bu muhtemelen olabilir gibi süs olarak temelde. Ayrıca ben bu ifadeleri var olduğunu işaret etmek istiyorum goog.provide olan üst eklenir var ve goog.require, bu bir parçası olan işlevleri Kapatma Kütüphanesi. Bu ad beyan temelde nasıl ve nasıl bağımlılıkları Kapatma Kütüphanesi'nde ifade edilir. Dediğim gibi Yani, hiçbir yerli ithalat fonksiyonu var JavaScript ancak Kapanış için kodunuzu yazarken Bu tarzda Kütüphane, şimdi standart bir yol var bağımlılıkları ifade ve biz bunun faydalarını göreceksiniz Bir saniye içinde. Yani ilk şey bu şablon işlevi var şimdi eğer, ise ve şimdi bunu kullanmak istiyorum. Yani şimdi bu dosyayı biz bu sağlamak dedi ad Widget aradı. Şimdi nereye bazı uygulama mantığı olacak biz kullanmak istiyorum. Yani şimdi bir widget için goog.require deyim var. Ve biz aslında kendimizi, yeni sağlamak için gidiyoruz ad düğmesi denir. Yani burada biz tarafından düğme ad için bir yöntem ekleyin düğme nesnesinin bir özelliği olarak ilan. Ve düğme nesnesi bir yan etkisi olarak oluşturulur var Bu goog.provide deyimi koşuyor. Ve şimdi biz bir özellik olarak ekleyin. Bu sadece bir işlev var. Tüm şablonlar tek argüman, argüman alabilir Bir nesne değişmezi olduğunu. Nerede özelliklerin isimleri için değerleridir Şablon ve mülkiyet değerleri değerleridir Şablon değerleri için. Ve böylece temelde biz şimdi bu veri nesnesi oluşturmak ve Sadece bir fonksiyonu olarak widget.button için geçebilir, değer döndürmek ve get düğmesi HTML o dönün. Ben bu şey olmak bulmak Birçok kişi çok daha rahat şey olmak, bu buluyorum. Eğer biçimlendirme yazmak istediğinizde, şimdi yapabilirsiniz, çünkü temelde istediğiniz herhangi bir şekilde bunu. Aslında değil, bu şablonda yorumları koyabilirsiniz parçası olarak gönderilen biçimlendirme dahil olsun. Ve gerçekten bu yazmak istiyorum. Ama elle yazmak istemiyorum. Ama bu gerçekten üretilmiş istediğiniz budur. Ve şimdi o var. Ve şimdi o içinde kullanabileceğiniz senin Düzenli JavaScript işlevi. Yani şimdi sadece gerçekten çalışıyoruz JavaScript dünya. Ben de belirttiğim gibi, biz ettik bu bağımlılıkları var goog.provide ve goog.require ile ifade edilmiştir. Üstündeki Yani biz Widget gerektirdiğini söyledi düğmesi var. Ve Widget iç adıdır soya gerektirir Kapatma Şablonları. Sen Kapatma kod aracılığıyla bakarsanız görürsünüz. Eğer soya gördüğünüzde onu Kapatma Şablonlar demektir. Ve uygulamada, Kapanış Şablonlar varsayılan olarak dahil şeyler demet. Çünkü bir çok kez DOM araçları içerir sen şablonun sonucunu almak ve bir DOM içine koymak istiyorum düğüm bunun dışında bir belge parçası oluşturmak veya. Bu önceleniminin ve bunu yapmak için dize araçları içerir Ayrıca araçlardan bir sürü için içerir uluslararasılaşma. Yani aslında uluslararası orada desteklemek oluyor. JavaScript şablonları özel mesaj etiketi var. Bir uygulama inşa ediyorsanız Yani istediğiniz lokalize, Kapanış şablonları da bu konuda yardımcı olur. Ama şey verdi örnekte olsa, biz konum Aslında tüm bu maddeleri kullanmayan, değil mi? Biz DOM programları hiç kullanmadım. Biz uluslararasılaşma hiç kullanmadım. Bir çok insan bu bağımlılıkları korumak için seçecek El oh tüm bu şeyler eklemek istemiyorum, diyerek. Biz göreceğiz Ancak, Kapatma Derleyici ilgilenir Senin için. Yani nerede, içinde, büyük kütüphaneleri oluşturmak için Tamam uygulama daha sonra, sadece bazı fonksiyonları kullanın. Eğer bu kütüphaneleri tedarik istiyorum gidiyoruz Çünkü, Diğer takım arkadaşları ve diğer projeler için söylemek Belki kullandığınız. Böylece pratikte göreceğiz ne kadar aslında DOM programları ve uluslararasılaşma şeyler şeritli alır. Sen daha olgun bir kitaplığı kullanarak bazı ceza ödemek yok. Yani, örneğin, kaldıraç bağımlılıkları bakımından, yaparız myapp adında yeni bir tanıtmak. Şimdi bu uygulama diyelim. Ve şimdi düğmeye gerektiren ve bazı DOM yarar gerektirir ve şimdi önde gider ve kullanan bir işlevi var Şablon ve bu standarda DOM içine ekler DOM yarar. Yani şimdi bağımlılık grafiği senin Uygulama değişti. Şimdi kökündeki yeni bir şey var Grafik myapp denir. Bu düğmeye bağlıdır ve bağımlılıkları hala tüm yol aşağı gitmek. Ama şimdi myapp DOM bağlıdır. Ve şimdi aslında DOM bağımlılık gelip gidiyor geri koduna. Ama uluslararasılaşma hala ayrılacaktır. Bu, tüm doğal olur, çünkü bu gibi gerçekten güzel Biz Kapatma Derleyici ile görürsünüz. Elle tüm bu komut dosyası etiketlerini yönetmek için çalışıyor aksine ve bağımlılık sipariş ne olduğunu anlamaya çalışıyorum ve aşağı göndermek istiyorum çünkü en az set bulmaya çalışıyorum mümkün olduğunca az JavaScript kodu. Sağ Kapatma derleyici içine atlama ve bazı bakarak etkileri. Yani Kapatma Derleyici, şimdi kodla yazılmış olduğunu stil, bu goog.provide anlar ve goog.require ifadeler. Bunun açısından oldukça ciddi alır Şimdi nerede bu o açısından verebileceğim tasarruf senin JavaScript kodu boyutu. Yani, varsayılan olarak, sadece tüm dosyaları birleştirilmiş ise bu geçişli bu myapp.js, gerekli olacaktır yaklaşık, 375K, ben yarattığını dosya. Çok çok büyük,. Bu kod bir çok şey var. Özellikle yaptıklarını bu kadar önemsiz bir şey için. Biz sadece bazı HTML kadar bina ve Bir DOM takarak. Yani biraz aşırı görünüyor. Eğer Kapatma Compiler çalıştırırsanız Ama sonra, orada bir Sadece boşluk denilen modu. Nerede yaptığı tüm boşluk ve yorumlarınızı kaldırmak olduğunu. Bu zaten biraz seni üzüyor. Eğer tahmin edebilir gibi Yani, Kapanış Kütüphanesi aslında Bu kurtuldum beri oldukça iyi belgelenmiş kod neredeyse% 75. Yani orada çok büyük bir galibiyet var. Buna karşılık, ben de YUI aracılığıyla aynı kodu koştum Kompresör ve UglifyJS. Bunlar şu anda popüler olan diğer bazı minifiers vardır. Eğer onlar biraz daha iyi yapmak görebilirsiniz Sadece modunu boşluk. Ve Kapatma Derleyici de basit modu vardır YUI Kompresör ve UglifyJS benzer. Ve bunu sadece biraz onları uzaklaşır görebilirsiniz. Ama biz büyüklüğünün bir sipariş bakmıyoruz farkı. Biz Kapatma Derleyici gelişmiş modda bakmak kadar. Gelişmiş mod oldukça farklı bir hayvandır. Temelde ne yapabilirim ben de belirtildiği gibi bir bütün olduğunu, bir Program optimize ve derleyici. Yani temelde kod yolları izler Ana yönteminden. Bu ana yöntemden. Yani bu aslında bu denir tek işlevi Uygulama. Ve içinden izlemek ve bu, tamam, sadece gerçekleştirebilir denir şeyler getButtonHtml getElement ve yedik böylece ve benzeri. O optimize bitince Ve sonra, sadece olacak olduğu tespit var ki ihtiyacı bitleri içerir bu JavaScript uygulama tarafından icra edilecektir. Yani şimdi biz 1/200 var şey aşağı ele verdik Biz başa ne orijinal boyutu. Bu bir araç yapalım, tabii ki çok daha iyi bir yoldur Bu sizin için el ile bu tür bir şey yapmak daha. Ve hatta bir adım daha ileri etkinleştirmek olmasıdır gitmek seçenekler platforma özgü bir kod ortadan kaldırmak için. Yani bu özel tanımlarınızı, bu özel seçenekler varsa derleyici geçmesine, sen söyleyebilirim bu olduğunu varsayalım mobil web kiti ve aynı zamanda o JScript, değil varsayalım Internet Explorer'da motoru. Bu özel örnekte, bu doğru olmayacaktır Tüm örnekler için, ancak 481 kadar tüm program aşağı alır temelde hiçbir şey byte. Eğer çalıştığınız aksine Ve bu tüm sizin için yapılıyor kodunuzu yeniden ve sırayla elle optimize etmek Bu aynı sonucu elde etmek için. Yani yine, bu da ben kütüphaneler bahsettiniz, geri geliyor Zepto.js ve jQuery insanlar bu çatalları yapıyoruz burada. Onlar sadece bir kendi kod yazma yerine eğer Nerede kullanarak kod bloklarını yok edebileceğini bu şekilde derleyici, sonra onlar ortak çok daha fazla payı olabilir Kod kadar dev bir çatal, yapmak zorunda aksine sert senkronize tutmak için. Biz bakmak Yani eğer, bu çıkış Kapatma Compiler. Bu çok, çok kompakt. JavaScript konferansta geçen hafta oldu ve Birisi, kurnaz açıklama yaptı I do not Bir derleyici olmak istiyorum. Ben bir derleyici bir derleyici olmak istiyorum. Ve bence bu iyi bir atasözü olduğunu düşünüyorum. Ama şu anda bir sürü insan sadece kullanmaya çalışıyor bkz Kısa değişken adları ve diğer bazı şeyler yapmaya çalışıyor ve tüm elle. Ama kimse, elle kod bu tür yazacak Hatta bu bizim istediğimiz gerçekten olsa Başlangıçta üretti. Başvurunuz büyük ve daha büyük olur gibi, hatta var daha önemli. Beş script bu örnekle, hayal Çünkü etiketleri, sen onların uygulanmasını büyüyen birisi hayal edebiliyorum 20 senaryo etiketleri ve sonra birisi kopyala-macunlar olmak çünkü onlar kendi sonraki proje için ihtiyaç olduğunu düşünüyorum. Sadece büyük JavaScript geliştirme yapmak için bir yol değil. O şey gerçekten önemli Özellikle Gerçekten kompakt, burada gördüğünüz gibi, sonucudur. Başka bir önemli şey de düşünmek olduğunu, Bizim uygulamaları JavaScript daha büyük alıyorsanız olarak, çok daha fazla IP fikri mülkiyet var ki, işte biz bu şeylerin girecek Kullanıcılarımızın aşağı göndererek. Ve çok büyük bir JavaScript uygulaması inşa ettik eğer, ve şimdi diyorum, Chrome Web Mağazası'nda koyarak konum veya diğer çeşitli yerlerde, sen vererek olmak istemiyorum senin Kaynak kodu uzakta, mutlaka. O ana hedefi değil bu yüzden bile Derleyici, aynı zamanda etkin bir şekilde Obfuscator olarak hizmet vermektedir. O kimse çok daha zor almak için yapar onlar kendi özelliklerini eklemek sonra almak ve kod o ve daha sonra kendi gibi iddia. Bu başka bir yönü, bence bu yüzden, bu tür benzersiz bulunuyor Şu anda büyük kalkınma, toplu olduğunu Kod çok daha ilginç. Eğer yapıyoruz eğer, oluşturmak için size çok daha fazla zaman aldı Eğer daha iyi bir yol olması gerekir iş nedenlerle onu korumak için. Ben de belirtildiği gibi, ayrıca, yerleşik hiçbir tür sistemi var Doğal JavaScript. Yani daha iyi yollarından biri o kullanmaktır yaklaştığı açıklamalar gibi temelde bir şey. Ve bu burada görüyorum. Biz diyoruz gibi, bazı JS stok var ve biz nerede have-- ne tür gibisin biz app param etiketleri var Java alışkın. Ama sonra küme parantezi şey bir tür olarak adlandırılan şeydir ifadesi. Ve bu temelde bu olabilir geçerli türleri olduğunu söylüyor Bu argüman için geçti. Biz de bir yapıcısı için bu ek açıklama var. Böylece temelde derleyici kullanarak sizi görürse, diyor Bu EnlBoy işlevi değil yeni anahtarla kullanarak kelime, sen bağırma. Bu yapıcı olduğunu kabul çünkü. Bu örneği olması gerektiği bir şey. Bu sıradan bir işlev değil. Aynı zamanda bu uygulama özel açıklama var. Ve bu varsayılan olarak değil ama bir çek ekleyebilir Diyor Derleyici, tüm şeye erişir emin App private ile açıklamalı sadece içinde ne den yapılır Kapatma sınıfı. Yani yine sıra bu biraz aksak oluşturmaya karşı kapanışları, şimdi daha iyi ne iletişim bir yol var Eğer çok daha özlü tarafından, yapmaya çalışıyoruz Sadece app özel derken. Aynı zamanda bu çalışma zamanı yük ortadan kaldırır, sen daha önce vardı bir kapatma oluşturmak. Şimdi bunun yerine bir alıcı yöntemini çağırmak, derleyici Doğrudan mülkiyet içine bu alıcı yöntemleri değiştirebilir ups bakmak, onları doğrultusunda can, ve bu daha da azaltabilir kod boyutu ve süresi performansını çalıştırın geliştirir. Ayrıca bu tip ifadeleri, onlar da etkinleştirmek Statik yazarak. Yani Derleyici da türleri uygulamak için mantığı vardır. Eğer Java alışık Yani sadece bir şey derleyici veya başka bir çok güçlü yazılmış bir dildir, bu Eğer açmak ve bunu yapmak için kontrol olabilir bir şeydir emin sen ettik sözleşmeler ilan onur ediliyor. Aslında kısmi tip bilgileri ile çalışabilen Bu sizi türleri belge olmayabilir Tüm fonksiyonlar için. Yapmanız Ama nerede, derleyici bunu kaldıraç ve nereye olacak bu temelde bir iyi çaba yapacağız bilmiyorum. Ama yanlış pozitif dönüş olmamalıdır. Sonunda zengin bir tip ifade dili var. Ben daha önce de belirttiğim gibi, biz sık sık bir şeyler nerede görmek birisi Sadece bir geri arama bildirir. Şimdi en azından orada aslında standart bir yol, ya da Kapatma Derleyici perspektif, sen söyleyebilirim ki Bu EnlBoy nesnesi alır bir işlevi olabilir olduğu null, hangi ön Ne soru işareti EnlBoy anlamına geldiğini. Bir var işlevi var ise de, türünü belirtebilirsiniz onun türünü döndürür. Bu bir dönüş türü olmadı. O çünkü Ve bu bir kazan hem derleyicisi için, bir Daha fazla kompleksi tür denetlemesi yapmak mümkün fonksiyonları gibi ifadeler. Ama aynı zamanda sizin geliştiriciler için, gittikleri ve koşmak çünkü ve kod aracılığıyla hızla gerçekten bak. Gibi, oh Ben sadece bir EnlBoy alır bir işlev geçmesi gerekiyor? Mükemmel. Anlamaya kod kazmak zorunda aksine öyle tam olarak ne. Bu yüzden hep birlikte, JavaScript kodunu getirmek için denemek için bazlar büyük alıyorsanız. Ben Chrome Kitaplar duyuru bugün de düşünüyorum Bu insanlar bu konuda çok heyecanlı olacak Daha büyük ve daha büyük uygulamalar yapmak istiyorum. Onlar bir seviyede JavaScript olmak zorunda gidiyoruz Ya GWT tercüme veya doğrudan bunları yazma. İstediğiniz Özellikle onları çevrimdışı çalışmak için. O çevrimdışı çalışır sonra tüm Çünkü var JavaScript, HTML ve CSS. Yani biz daha karmaşık uygulamalar getiriyor web, bu kod tabanları büyük almak için gidiyoruz. Ve JavaScript maalesef için tasarlanmış değildi Büyük programlama. Ve böylece bir şekilde kaçış ve başka çalıştırmak için çalışmaktır Programlama dili. Ama başka bir seçenek ile, tabiri caizse, onu evcilleştirmek için çalışmaktır Kapatma araçları. Ve bu, benim deneyimleri ne olduğunu oldukça iyi çalıştı. Ve bu yüzden JavaScript uzakta ama çalıştırmak için değil teşvik Bunun yerine oa büyük ayı sarıl. Ama Kapanış araçları kullanmak o kadar evcilleştirmek için sizin Uygulama büyüyecek ama yandan dışarı büyümek olamaz. Yani çok teşekkür ederim. Ve şimdi sorular için zamanımız var. [Alkış] Evet? İZLEYİCİ: Ben üzerinde başlıyor kimseyi biliyorum emin değilim gerçekten büyük JavaScript projesi. Biz zaten JavaScript projeler var ve biz muhtemelen konum Kapatma araçlarını kullanarak değil. Çok az insan Google dışında, ben gibi hissediyorum. Eğer çok büyük project-- geçiş nasıl Aslında fayda sağlayacağını projenin tür demek Kapatma tools-- gelen Tamam da, benzeri olmadan üzerine, biz sadece harcamak için gidiyoruz Önümüzdeki üç ay yorum yazma? MICHAEL BOLIN: Ben herhangi bir göç gibi düşünüyorum, sen kesinlikle parçalara yapmak istiyorum. Ve tabii ki tutun istemiyorum, kendinizi önlemek sen ise ileri ilerleme her türlü yapmaktan geçiş. Yani diyorum ki ilk şey goog.provide kullanıyor ve goog.require, bazı iskele sahip ifade etmek uygulamanızda bağımlılıklar. Ben adım olduğunu söyleyebilirim. Adım iki sonra, muhtemelen bazı mevcut mantığı var olduğunu olay dinleyicilerini veya dizi programları kayıt gibi şeyler. Ve sonra ne yapmak size bir seferde birini seçin olduğunu düşünüyorum Kapanış ile ne ev demlenmiş çözüm takas Kütüphane eşdeğer ve daha sonra kademeli olarak bunu. Bu, Google içinde ne de. Kütüphane sonsuza yoktu ve biz uzun vardı zaten inşa edildi çalışan uygulamaları. Ve aynı sorun oldu. Eğer istemiyorum çünkü bir gün içinde tüm kopyalayın lazım. Daha sonra uygulama boyutu iki katına ve bu değil çünkü Ya da kullanıcılar için gerçekten harika. Bu yüzden kesinlikle kesinlikle ve seni sahneye istiyorum düşünüyorum almak istiyorum. Gerektirmez ve sağlamak ile iskele oluştur o zaman ileriye gitmek gibi şeyler taşımak. İZLEYİCİ: Ben açıklamak gerekir. Biz zaten Dojo sağlamak ve ihtiyaç kullanıyorsunuz. Yani biz zaten yerinde bir şey var. Kesinlikle biz googs onları yerini alabilir. Problem değil. Ama gerçekten aslında görünüyor Kapatma Derleyici, var gibi bir hep ya hiç bir şey. Her şey ya o yüzden yorumlarla işaretlenmiş gibi silebilir ya da uygulamanızı siler yapacağını bilir. MICHAEL BOLIN: Ben gösterdiği gibi, Kapatma Derleyici var farklı mod. Yani basit mod örneğin, var. İZLEYİCİ: Ben gerçekten gelişmiş bir mod istiyorum. Ben büyük yararı olsun gibi hissediyorum orasıdır. Nasıl hiç oraya? Bir milyon mil uzakta. MICHAEL BOLIN: Bence Dojo bazı insanlar toplum, iyi ben biraz daha emin daha kulüpler ilgilendi bu da. Yapabileceğiniz başka bir şey, derleyici açık kaynak vardır. Bu Java ile yazılmış ve kendi eklenti sistemi gibi vardır Yeni derleyici geçişleri yazabilirsiniz. Hissediyorum eğer, büyük bir varsa Yani kod tabanı gibi göç etmek çok büyük, doğru olanı yapmak, ya da basit şey yazma gibi basit sanıyor- için derleyici kod bu-- ama kendi geçiş yazmaktır. Neyse Kapatma Derleyici sahip bir Zaten geçer sürü. Ve onlar da çok iyi birim test konum. Eğer bir şey bölerseniz yüzden oldukça net olacak. Ve ayrıca örnek kod bir sürü çıkmak zorunda. Yani anlar Kendi geçmek yazmak isteyebilirsiniz Biraz daha iyi dojo. Ve o bunu kaldıraç için en iyi yol olabilir. HEDEF KİTLE: Yani biz bir sürü var, hatta Dojo yok Orada ortak doc. MICHAEL BOLIN: Ne var? HEDEF KİTLE: Biz yorum var. Biz sıradan yorumların çeşit var. Ama biz tür parametresi yorum yapmamıştır. Kim olur, değil mi? Bunların ne anlamı var? MICHAEL BOLIN: Tür denetimi gelişmiş bir seçenektir Mod minification alır. Bu bir gereklilik değil. Yani her şeyi türü ile işaretlenmiş olması gerekmez ifadeler bile mutlaka gelişmiş modunu kullanmak. Bunu yaparsanız bu daha yararlı ama o sert ve hızlı bir değil gereklilik. İZLEYİCİ: Ben varsa ben yarım benim kod up-- işaretlenmiş Can ya da gerçekten, benim kod yüzüncü tipi ile işaretlenmiş Parametreler ben hiç böyle kullanabilirim? MICHAEL BOLIN: Evet, kesinlikle. Yani temelde her zaman o kabul, bir tür ifadeyi çıkarırsanız tipi ifadesi yıldız, olacağını, hangi herhangi bir tür anlamına gelir. Ve böylece zaten mekanizmaları vardır Bu durumla başa. İZLEYİCİ: Ben yerine Yani bütün Dojo ile gerektirir goog.requires ve gelişmiş Compiler çalıştırın, ne ne dersiniz? Benim [silmek olacak? Konumu?] sağ? MICHAEL BOLIN: bazı diğer uyarılar bulunmamaktadır aslında iyi web sitesinde belgelenmiştir. Alıntı özellikleri gibi şeyler açısından, bir olduğunu yaygın olanı. Muhtemelen kafamın üst kapalı büyük biri. Ama en Dojo kod oldukça benzer olduğunu düşünüyorum. Bu yüzden bir felaket olacağını sanmıyorum ama orada çok var mı kullanmanın tehlikeleri diyor code.google.com iyi sayfa Gelişmiş mod. Ve bu sizin için kodunuzu denetim yardımcı olacaktır şeylerin o tür. HEDEF KİTLE: Teşekkürler. HEDEF KİTLE: Merhaba. Biz oldukça büyük JavaScript proje var. Kaynağın falan Muhtemelen bir kaç megs. Büyük bir proje. Ama biz geçen yaz Kapanış derleyici geçilir ve biz onunla tamamen heyecan oldum. Ama bu Şablonları gördüm ilk kez. Ve ben o biz ilgilendiğiniz bir şey olduğunu düşünüyorum. Bir koşmak zorunda gibi görünüyor çünkü curious-- duyuyorum derleyici geçiş sadece herhangi orada them-- kullanın, böylece ben gibi, biz gelişmiş modu derleme kullanıyorsanız, biliyorum ama çalıştırabileceğiniz o derlenmemiş ve goog.requires sadece XHR isteklerini yapmak. Kodu alın ve bunları falan eval. Bu şablonları için eşdeğer olduğunu yapabilirsiniz, var mı kaynağından düz onları çalıştırmak? Çünkü bu noktada, derleyici çalışan biraz zaman alır. Büyük bir proje var çünkü. MICHAEL BOLIN: Yani nedense, bir araç inşa ben Benim slaytlar koymak ihmal. Bu Plovr denir. Benim O'Riley hayvan altın plover, bu yüzden adını benim aracı Plovr, bir e olmadan serin olmak istedim çünkü Flickr gibi. Eğer bir göz atın Ama eğer ne bazı modları sahiptir temelde sadece bir dizine de bunu işaret edebilir Kapatma Şablonlar dosyalarında JavaScript ve o-ecek sadece yukarı dönmeye ve diskten onlara hizmet. Ve JS olanlar bu birebir ve dot.soi dosyaları hizmet verecek Kapatma Şablonları için, bu sinek bunları tercüme edeceğiz. Yani kalkınma sensin, hala temelde ne debug Ham kod her şeyin üzerinde derleyici çalıştırmak zorunda değilsiniz ama bunu elde etmek için. Ben büyük kod için anlamak için Biraz daha yavaş dayandırır. HEDEF KİTLE: Tamam. Güzel. Teşekkürler. İZLEYİCİ: Ben aslında sizin için iki soru var. İlk soru tarayıcı yerli işlevselliği ile ilgili. Kapatma Derleyici, o algılamak için yeterince akıllı işlevsellik tür? Ve eğer öyleyse, sonra ne zaman yeni bir tarayıcı özellikli özellikler önümüzdeki dışarı, kütüphane varlık arasındaki gecikme süresi nedir Bu desteklemek mümkün olmayan ve karşı güncellendi. MICHAEL BOLIN: Bu iyi bir soru. Yani temelde JavaScript yazıyoruz. O varsa Yani sizin kadar JavaScript test edebilirsiniz normalde. Sen söyleyebiliriz document.body sorgu seçici eğer Tüm sonra bir şey yapmak. Ve eğer, başka bir şey. Ama aynı zamanda derleyici kullanarak bu fikir var gelişmiş mod, eksterna denen bu fikir. Temelde söylemek nerede, bunlar bütün semboller ortamda mevcut olacak ki benim kod içinde çalışır ve onların tip tanımları. Belge ve pencere ve bu tür bir şey So. Gördüğünüz gibi Çünkü, Kapatma Derleyici bir değiştirildi değişkenlerin sürü. Ama böyle, built-ins adlandırmak edemez Belge ve pencere. Eğer tarayıcı özellikleri hakkında konuşuyor Yani, olanlar genellikle bu eksterna listelenen beyan dosyaları temelde hangi tarayıcıyı ortamında var. Bunlar oldukça hızlı bir şekilde güncellenir, ben söyleyebilirim. Çünkü proje, bir sürü insan zarf bastırıyorlar. Bu anlamda derleyici, bir özellik arasındaki zaman Derleyici tarafından kullanılan dışarı çıkan, ya da mevcut veya derleyici tarafından tanınan oldukça küçük. HEDEF KİTLE: İkinci sorum gelişimi hakkında oldu. Bu sonrasına kadar bu minified kodu alamadım gibi görünüyor Eğer mantıklı derleyici aracılığıyla çalıştırmak. Ben gerçek gelişmeyi yapıyorum ve hata ayıklama olduğumda Firebug'ın veya Chrome'un geliştirici araçları ile, ben var Tüm 150 veya ne olursa olsun megabayt kadar yük Bu kütüphane dosyaları? MICHAEL BOLIN: Bu bunu nasıl bağlıdır. Yani bir şey de Kapatma Derleyici ile yapabilirsiniz Bugün göstermek vermedi, bunu sahip olabilirsiniz olduğunu Fikir modülleri. Yani GWT kod bölme bu fikri vardır, söylemek nerede Ben sadece bu özelliği kadar kullanıyorum, o zaman sadece dahil Bu JavaScript dosyaları. Ve kullanıcı bu diğer özelliğini kullanarak başlatır, sonra, sonra bu dosyaları aşağı çekin. Yani gerçekten iyi bir teknik bu özelliği modülleri kullanmaktır derleyici, sonuçta derlemek hangi kod ve irade bu kümeleri her duruma getirilmiş sürümü bu kodda mevcut semboller bağlıdır zaten yüklü. Yani temelde, sadece minimal set yüklüyoruz siz şu anda ihtiyacım olan işlevselliği için dosyaları Kullanıcı, diyelim ki, ayarlar sayfasına gider. Ve şimdi ayarları kod, şimdi, bu aşağı çekme edeceğiz temelde talep üzerine. Ve bu da geliştirme çalışır. Yani sadece tek tek dosyaları olacak Ben bir modül arıyorum ne katkıda bulunur. Yani, hayır, mutlaka her şeyi yüklemek zorunda değilsiniz Eğer başlatırken. HEDEF KİTLE: Teşekkürler. HEDEF KİTLE: bu çalışır mı? MICHAEL BOLIN: Üzgünüm. Seni görmedim. Işıklar parlak. HEDEF KİTLE: Bu ilk soruya ilgilidir. Sen ile prototip olduğunu bir slayt vardı Ben Kapanış kullandım, w dolar işareti bazı yeni yapılacak projeler, ama miras bir sürü var Prototip olan projeler. Will komutları bu tür için derleyici anlaşma Onları derlemek? Ya da hemen hemen tüm Prototype kaldırmak gerekiyor derleyici işe almak? MICHAEL BOLIN: hayır evet. Yani bir giriş olarak Prototip kaynak kodunu tedarik eğer derleyici, başka herhangi bir giriş gibi davranır. Ayrıca eğer-- böylece kullanılmayan fonksiyonlar sonra da yine gidecek. Eğer bir işlev varsa Ve ilginçtir, bir çok kullanırım o ve Kapanış Kütüphane'de çok ayrıntılı bir adı vardır, derleyici için küçük isimlerini bulacaktır en çok kullanılan fonksiyonları. Yani muhtemelen sizin yanınızdaki prototip fonksiyonları uzun şeyler değiştirildi alabilir, onlar sadece iki bayt konum her ne kadar bu muhtemelen değil. Aslında daha uzun olurdu. Ama temelde, üzgünüm, kısa cevap Sorunuzu evet. Sen derleyici ile Prototip kodu kullanabilirsiniz. HEDEF KİTLE: dünyanın en eğlenceli şeyleri Yani biri Eğer bunu minified sen misin yaptıktan sonra JavaScript yapıyor alanından bir hata raporu almak. Yani simge tablosu falan eşdeğer olduğunu söz sahibi olarak eklenebilir, bir az daha mükemmel optimize? MICHAEL BOLIN: Evet. Çalıştırdığınızda Yani temelde bir seçenek var derleyici, bir yan ürün olarak çıkışına bir şey olarak adlandırılan bir Kaynak haritası. Ve bu yüzden, aslında bir ters haritalama var her çizgisine derlenmiş kod satırı ve karakter ve orijinal kaynak kodu karakter konumu. Ve sonra orada var diğer bazı Java kodu var Sunucudan bir JavaScript yığın izleme alma ve Bir karartılmış JavaScript dosyası dönüştürerek. Tek bilmeniz gereken, gerçekten hat hakkında bakım ve olduğunu karakter ofset. Ve şu anda, sadece Chrome-- ve ben muhtemelen sanırım inanıyorum Daha sonra Safari-- çizgi ve karakter hem de sağlamaktadır. Diğer tarayıcılar çoğu sadece çizgi yapmak. Firefox 4 kontrol, ama yine de en azından Firefox 3.6 değil Sadece satır numarasını gönderdi. Herkes bu millet üzerinde herhangi bir etkiye sahip olmadığını, bu yüzden istiyorum onlar da karakter uzaklıklar gönderilen eğer harika olur. Eğer yapıyoruz tam olarak gelin, çünkü. HEDEF KİTLE: Ortak modülü uygulamaya Kapanış planlaması mı bağımlılık, CommonJS standardı? MICHAEL BOLIN: Bu iyi bir soru. Yani hiçbir plan yoktur ve hiçbir orada Anti-planın olarak bildiğim kadarıyla. Bu onlar üzerinde nefret değil ve onlar belki var iki dünya birleştirmek için tam olarak nasıl anladım. Nasıl ortaya koymak iyi bir öneri olsaydı, bence Bu iki şeyi birleştirmek, üzerinde çalışmak insanları düşünüyorum Kapanış çok ilgi olacağını Bunun olmasına yapımında. HEDEF KİTLE: Hala Kapanış üzerinde çalışıyor musunuz? Ya da bir şey Google'ın size ve çalışır olduğunu Artık üzerinde işe yaramaz. MICHAEL BOLIN: Herhalde Kapanması katkıda bulunur. Ve ben kesinlikle bu millet konuşmak. Biz bu konuda sadece geçen hafta bir tartışma vardı ve o tür listede, birçok öğelerden birini seviyorum. Kesinlikle var Biz seslenmek istiyorum ama kabarmış değil bir şey Üste henüz. Başka biri? Herkese teşekkürler. Ben Google I / O beğeneceğinizi umuyoruz.

Açıklama

Michael Bolin JavaScript ile tinkered en geliştiriciler Dursun 100.000, böyle bir dilde kod 1000 satırları yazarken hayal edemiyorum. Ancak bu Google mühendisleri gibi Gmail ve Google Maps gibi Web üzerindeki en popüler ve gelişmiş uygulamalar, birçok üretmek için "Kapatma" adlı JavaScript araçları paketi kullanarak yapmış tam olarak ne olduğunu.

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

Google Developers

Google Developers

Google Developers kanalı, dersleri, söyleşiler, en son haberleri ve en iyi uygulamaları sunuyor. Android, Chrome, Web Geliştirme, Polimer, Performans, iOS ve daha fazla bilgi! Burada resmi Google Geliştiriciler kanalına abone olarak bu kaynağın yararlanın: https://www.youtube.com/channel/UC_x5XG1OV2P6uZZ5FSM9Ttw?sub_confirmation=1   Https://twitter.com/googledevs: Twitter Google Geliştiriciler izleyin Https://plus.google.com/+GoogleDevelopers: Google Google Geliştiriciler izleyin Http://googledevelopers.blogspot.com/: Google Developers Blog göz atın

YORUMLAR



9.7/10

  • 455
    Olumlu
  • 10
    Olumsuz
  • 69
    Yorum
  • 68012
    Gösterim

SPONSOR VİDEO

Rastgele Yazarlar

  • metal571

    metal571

    30 Mayıs 2006
  • MotoManTV

    MotoManTV

    10 Aralık 2009
  • Soulkiller13 ツ

    Soulkiller13

    30 Mayıs 2013

ANKET



Bu sayfa işinize yaradı mı?