Web Bileşenleri, web için uygulama geliştirme hakkında bildiğiniz her şeyi değiştirecek. İlk kez, web'de yalnızca kendi HTML etiketlerimizi oluşturmakla kalmayıp mantığı ve CSS'yi de kapsayan alt düzey API'lar sunulacak. Global stil sayfasında standart koda vedaa artık gerek yok. Her şeyin birer element olduğu yeni ve cesur bir dünya.
DotJS'deki konuşmamda, Web Bileşenlerinin sunduğu özellikleri ve modern araçları kullanarak bunları nasıl oluşturabileceğinizi adım adım açıklıyorum. Size Polymer'i kullanarak web uygulaması oluşturmayı kolaylaştıracak bir araç iş akışı olan Yeoman'ı göstereceğim. Polimer kitaplığı, günümüzde modern tarayıcılarda Web Bileşenleri'ni kullanarak uygulama geliştirmeye yönelik çoklu dolgular ve şekerden oluşan bir kitaplıktır.
Özel öğeler oluşturun ve başkaları tarafından oluşturulan öğeleri yükleyin
Bu konuşmada şunları öğreneceksiniz:
- Web Bileşenlerini oluşturan dört farklı teknik özellik hakkında: Özel Öğeler, Şablonlar, Gölge DOM ve HTML içe aktarma.
- Kendi özel öğelerinizi tanımlama ve Bower'ı kullanarak başkalarının oluşturduğu öğeleri yükleme
- JavaScript yazmaya daha az, sayfaları oluşturmaya daha fazla zaman ayırın
- Bir uygulamayı jeneratör polimer ile Polymer'i kullanarak oluşturmak için modern kullanıcı arabirimi araçlarını (Yeoman) kullanın
- Web bileşenleri oluştururken Polymer'in süper değişimi.
Örneğin, Polymer'in Web Bileşeni çoklu dolgularını ve kitaplığın kendisini yüklemek için şu tek astarı çalıştırabilirsiniz:
bower install --save Polymer/platform Polymer/polymer
Bu işlem, bir bower_components klasörü ve yukarıdaki paketleri ekler. --save, bunları uygulamanızın bower.json dosyasına ekler.
Daha sonra, Polymer'in akordeon öğesini yüklemek isterseniz şunu çalıştırabilirsiniz:
bower install --save Polymer/polymer-ui-accordion
ve sonra bunu uygulamanıza aktarın:
<link rel="import" href="bower_components/polymer-ui-accordion/polymer-ui-accordion.html">
Zamandan tasarruf etmek için, ihtiyacınız olan tüm bağımlılıkları içeren yeni bir Polymer uygulaması geliştirebilirsiniz. Bu diğer tek satırlık öğede Yeoman ile standart kod ve uygulamanızı optimize etmeye yönelik araçlar gerçekleştirilebilir:
yo polymer
Bonus adım adım açıklamalı kılavuz
Ayrıca, konuşmada gösterdiğim Polymer Jukebox uygulamasının adım adım 30 dakikalık ek açıklamalı videosunu kaydettim.
Bonus videoda ele alınan konular:
- "Her şey bir öğedir" mantrası ne anlama gelir?
- Polymer'in Platform çoklu dolgularını ve öğelerini yüklemek için Bower nasıl kullanılır?
- Müzik Kutusu uygulamamızı Yeoman jeneratör ve alt jeneratörlerle destekleme
- Ortak metin aracılığıyla oluşturulan platform özelliklerini anlamak
- Bir Angular uygulamasını Polymer'e işlevsel olarak nasıl taşıdığım.
Yeni Polimer öğelerimizi oluşturmak için de Yeoman alt jeneratörlerinden yararlanıyoruz. Örneğin, çalıştırdığımız foo bir öğe için ortak metin oluşturmak amacıyla:
yo polymer:element foo
Bu sorgu bize öğenin otomatik olarak içe aktarılmasını isteyip istemediğinizi, bir kurucunun gerekli olup olmadığını ve diğer birkaç tercihi soracaktır.
Her iki konuşmada da uygulamanın en son kaynakları GitHub'da bulunabilir. Daha düzenli ve daha kolay okunması için metni biraz daha düzenledim.
Uygulamanın önizlemesi:
Daha fazla bilgi
Özetle, Polymer artık yerel olarak uygulanmalarını beklediğimiz modern web tarayıcılarında Web Bileşenleri'ni etkinleştiren bir JavaScript kitaplığıdır. Modern araçlar, bunları kullanarak iş akışınızı iyileştirmenize yardımcı olabilir. Kendi etiketlerinizi geliştirirken Yeoman ve Bower'ı denemekten keyif alabilirsiniz.
Konuyla ilgili göz atmaya değer birkaç makale daha: