Google Polimer - Web Uygulamalarının İnşa Edilme Şeklini Nasıl Değiştirir?
Google Fotoğraflar’ın yanı sıra, Google, Polymer’ı sıfırdan yeniden oluşturup performans iyileştirme ve verimliliği ele aldı. Polymer’ı Web için bir SDK (Yazılım Geliştirme Kiti) olarak düşünün; web uygulaması geliştirme Web Components adlı yeni bir standart kullanarak çok daha hızlı.
Web Bileşenleri bize izin veriyor web sitelerimiz için özel öğeler ve etiketler oluşturun. Bu yayında, Google Polimer'deki özel öğelerin web uygulaması geliştirmeye nasıl yardımcı olabileceğine bakacağız. Ayrıca, bu özel öğelerin nasıl işe yarayabileceğine dair birkaç gösteriye de bakacağız..
Web Bileşenleri Hakkında
Web Bileşenlerinin nasıl çalıştığını anlamanın en iyi yolu, şu anki gibi standart öğelere bakmaktır. . Ne zaman ekleriz Sesin URL kaynaklarıyla birlikte, web tarayıcıları bu öğeyi oynat ve duraklat düğmesi, zaman rayı ve ses kaydırıcısının bulunduğu bir ses oynatıcısı olarak gösterecektir. Oynatıcı kontrollerinin nasıl yapıldığını ve nasıl tasarlandığını merak ettiniz mi?
UI kontrol çalar, olarak da bilinen Shadow Roots altında gizli Gölge DOM. Shadow DOM’i görüntülemek için Chrome DevTools > üzerine tıklayın diş simge> seçin Kullanıcı aracısını gösterir gölge DOM seçenek.
Aşağıdaki ekran görüntüsünde, bir yığın bulabilirsiniz Bugün, Web Bileşenleri ile kendi öğelerimizi de adlandırabiliriz. Gibi bir eleman inşa edebiliriz, Ayrıca, bu özel elemanlar birkaç kabul edilmiş özel özniteliğe de sahip olabilir. İle ilgili olarak Polimer, neredeyse her web uygulamasının ihtiyacını karşılayan bir dizi element ile birlikte gelir. Google bu öğeleri gruplara ayırır: Demir Öğeleri, Kağıt Öğeleri, Google Web Bileşenleri, Altın Öğeleri, Neon Öğeleri, Platin Öğeleri ve Moleküller. Demir Elementler, temel elementlerin bir koleksiyonudur. Bu temel öğeler normalde kullandığımız şeylerdir. bir web sayfası oluşturmak bir girdi, form ve resim gibi. Aradaki fark, Polimerin bu elementlere ekstra güç katmasıdır.. Bu gruptaki tüm öğeler Yukarıdaki örnek ilk önce görüntü yer tutucusunu gösterecek ve ardından görüntüdeki gerçek görüntünün içine kaybolacaktır. Kağıt elemanları bir Materyal Tasarımı öğeleri grubudur. Materyal Tasarımı, hem web hem de Android uygulamalarını görsel olarak daha tutarlı hale getiren Google platformlarında kullanıcı arayüzü ve deneyimini sağlayan Google tasarım dilidir. Malzeme Tasarımına Özgü Bazı Unsurlar Kağıt ve Yüzen Hareket Düğmesidir (FAB). kâğıt Google’ın metaforu içeriğin altında yatan ortam. Polimer içeren bir kağıt eklemek için, Yüzen Eylem Düğmesi (FAB), genellikle göze çarpan renkte, ekranda yüzen bir simgeye sahip dairesel bir düğmedir. Google, bu düğmenin sık erişilen bir işlev taşıdığını önerir. İşte bir örnek: Aşağıdaki kod pasajı, görüntüye ve FAB'a sahip bir Kağıt Malzemesi ekler. Aşağıdaki sonucu alacağız: Bir fotoğrafımız var “kalp” Bunun üstünde yüzen düğme. Fotoğrafı beğenmek için tıklayın, düğme, tıklamayı onaylamak için bir dalgalanma efekti verir. Google Web Bileşenleri, Google API’ler ve Google Haritalar, Youtube ve Google Feed gibi hizmetler ile başa çıkabilmek için özel bir unsurdur. Bu gruptaki öğeler Google hizmetleriyle etkileşimi birkaç satır öteye taşı. Aşağıdakiler, Google Haritalar’ı kullanarak Google Harita’nın gösterilmesine bir örnektir. Yukarıdaki gibi Youtube videosu göstermek ister misiniz? kullanabilirsiniz Benzer şekilde çıktıyı özniteliklerle özelleştiriyoruz. Altın Elementler e-ticaret uygulamaları için özel olarak tasarlanmış öğeler. Burada, hepsinin sahip olduğu kredi kartı, e-posta, telefon ve ZIP girişini gösteren bir öğe bulacaksınız. format doğrulama Doğru veri girişi ve güvenliği sağlamak için. Visa kredi kartı girişi eklemek için bir örnek. Kalan öğeler arasında animasyon ve özel efektler için Neon öğeleri, çevrimdışı ve anında bildirimler için Platin öğeleri ve son olarak Moleküller, üçüncü taraf kütüphaneleri için sarıcılar bulunur. Editörün Notu: Bu yazının yazıldığı sırada Neon Elementler, Platin Elementler ve Moleküller hala mevcut değildir.. Web geliştirmenizde Polymer kullanmak ister misiniz? İşte nasıl kurup web sayfalarınıza entegre edeceğiniz. Çoğu Polimer elemanı birbirine dayandığından, Polimer kurulumunun en iyi yolu Bower'dir. Bower, projeyi çalıştırmak için gereken komut dosyalarını veya stilleri yüklemeyi kolaylaştıran bir proje bağımlılık yöneticisidir. Bower ile web kitaplıklarının kolayca nasıl kurulacağı, güncelleneceği ve kaldırılacağı hakkındaki yayınımıza göz atın. Polymer'i entegre etmek için Terminal'i başlatın, sonra bir tane yarattığınızı farz ederek proje dizininize gidin. O zaman koş Bu kurulum, her gruptaki tüm elemanları kullanacağımızı varsayar. İhtiyacınız olmayanı bağımlılık listesinden çıkarabilirsiniz. Bağımlılıklar belirlenirken, Bu işlem, depolardan büyük miktarda dosya almayı gerektirdiğinden biraz zaman alabilir. Bir kez yaptıklarında, onları kaydedilmiş olarak bulmalısınız. bower_components Klasör. Polymer bileşenlerini kullanmak istediğiniz HTML dosyasını açın. Belge kafasının içinde, WebComponents.js bağlantısını yapın hangisi polyfill Henüz Web Bileşenlerini desteklemeyen tarayıcılar için bileşen dosyalarını içe aktar HTML İçe Aktarma kullanarak. İşte bir örnek: Bu kurulum kullanmamızı sağlayacaktır. Zaten Google Polymer’ı kullanan web uygulamalarından bazıları. Google, Google IO 2015 web sayfasında Google Polymer'ı kullandı; Google Fi, ortaktaki taşıyıcılar ve satıcılar için Google kablosuz hizmeti; ve Google Müzik. CustomElements, Web Bileşenleri ile oluşturulmuş özel öğeleri bulabileceğiniz bir merkezdir. Listeyi oluşturmak ve oluşturmak için Paper öğesini kullanır. Ayrıca, bu elemanları Bower ve NPM üzerinden kurmak için uygun bir rota sağlar.. Kod düzenleme için şaşırtıcı derecede iyi çalışan bir Chrome uygulaması. Bu uygulama, kullanıcı arayüzünde FAB düğmesini, Kağıt menüsünü ve Kağıt iletişim kutusunu kullanır. Bir sürükle ve bırak arayüzü kullanarak Polimer elemanları ile web uygulaması oluşturmak için bir araç. Tamamen Polimer unsurlarla oluşturulmuş bir borsa raporu ve tahmini. Gmail için bir e-posta istemcisi uygulaması. Güzel ve akıcı görünüyor, ancak ne yazık ki tam olarak çalışmıyor. Polimerin muazzam bir kapsamı vardır ve API'sinin yanı sıra tüm özel öğelere alışmak biraz zaman alabilir. Bununla birlikte, Web Bileşenleri ve Polimer kesinlikle web uygulamaları oluşturma yöntemimizi etkileyecektir. Web Bileşenleri hakkında daha fazla bilgi okuyarak kalabalığın önünde kalın - referanslar aşağıdadır. UI oynatıcı denetimlerini gizleyen öğeler. 
Kullanıcı adı Twitter kullanıcı adını belirtmek için kullanılacak.
Polimerde Özel Elemanlar
1. Demir Elemanları
Demir- önceden eklenmiş, örneğin preload, karartmak, ve tutucudur Öznitellikler:
src tam olarak yüklendiğinden, düzgün görüntü yükleme efekti gerçekleştirmek.2. Kağıt Elemanları
kâğıt
yükseklik Kağıdı kaldırmak için, bu nedenle kotu güçlendirmek için bir gölge ekleyincanlandırılmış Kağıt yükseklik değişikliği olarak animasyon uygulayacak.Yüzen Eylem Düğmesi (FAB)
3. Google Web Bileşenleri
enlem ve boylam haritada konumu belirlemek için. Ayrıca yuva yapabiliriz
4. Altın Elementler
5. Diğer Öğeler
Polimerlerin Entegre Edilmesi
bower init bower.json dosyasını, proje bağımlılıklarını kaydetmek için kullanılacak projenize başlatma komutu. Bower.json dosyasını açın ve aşağıdaki satırları ekleyin. "bağımlılıklar": "polimer": "Polimer / polimer # ^ 1.0.0", "google-web bileşenleri": "GoogleWebComponents / google-web-bileşenleri # ^ 1.0.0", "demir öğeler": " PolymerElements / iron-elements # ^ 1.0.0 "," kağıt unsurlar ":" PolymerElements / paper-elements # ^ 1.0.0 "," altın unsurlar ":" PolymerElements / gold unsurlar # ^ 1.0.0 "
bower yükleme bağımlılıkları listeye kurma komutu.
Vitrinler
Google
Özel Öğeler
Chrome Dev Editor
Polimer Tasarımcısı
Günlük Stok Tahmini
Polimer Posta
Son düşünceler
Faydalı Referanslar
