Web Bileşenleri, web için geliştirme hakkında bildiğiniz her şeyi değiştirecek. Web'de ilk kez, hem kendi HTML etiketlerimizi oluşturmamıza hem de mantığı ve CSS'yi kapsamamıza olanak tanıyan düşük düzey API'ler olacak. Artık global stil sayfası çorbaları veya ortak metin kodları yok. Her şeyin bir öğe olduğu cesur yeni bir dünya.
DotJS'deki konuşmamda, Web Bileşenlerinin sunduğu avantajları ve bunları modern araçları kullanarak nasıl oluşturacağınızı ele alıyorum. Modern tarayıcılarda Web Bileşenleri'ni kullanarak uygulama geliştirmek için polyfill ve sugar kitaplığı olan Polymer'i kullanarak web uygulamaları oluşturmayı kolaylaştıran bir araç iş akışı olan Yeoman'ı göstereceğim.
Özel öğeler oluşturma ve başkaları tarafından oluşturulan öğeleri yükleme
Bu konuşmada şunları öğreneceksiniz:
- Web bileşenlerini oluşturan dört farklı özellik hakkında: Özel Öğeler, Şablonlar, Gölge DOM ve HTML içe aktarmaları.
- Bower'ı kullanarak kendi özel öğelerinizi tanımlama ve başkaları tarafından oluşturulan öğeleri yükleme
- JavaScript yazmaya daha az, sayfa oluşturmaya daha fazla zaman ayırın
- generator-polymer ile Polymer kullanarak bir uygulamanın iskeletini oluşturmak için modern ön uç araçlarını (Yeoman) kullanın
- Polymer, web bileşenleri oluşturma sürecini nasıl değiştiriyor?
Örneğin, Polymer'in Web Bileşeni polyfill'lerini ve kitaplığın kendisini yüklemek için aşağıdaki tek satırlık komutu çalıştırabilirsiniz:
bower install --save Polymer/platform Polymer/polymer
Bu işlemle bir bower_components klasörü ve yukarıdaki paketler eklenir. --save, bunları uygulamanızın bower.json dosyasına ekler.
Daha sonra Polymer'in akordeon öğesini yüklemek isterseniz şu komutu çalıştırabilirsiniz:
bower install --save Polymer/polymer-ui-accordion
ve ardından uygulamanıza aktarın:
<link rel="import" href="bower_components/polymer-ui-accordion/polymer-ui-accordion.html">
Zaman kazanmak için ihtiyacınız olan tüm bağımlılıkları, şablon kodunu ve uygulamanızı optimize etmek için araçları içeren yeni bir Polymer uygulamasının iskeletini Yeoman ile şu tek satırlık komutla oluşturabilirsiniz:
yo polymer
Bonus adım adım açıklamalı kılavuzu
Ayrıca, konuşmada gösterdiğim Polymer Jukebox uygulamasının 30 dakikalık bonus bir adım adım açıklamalı kılavuzu da kaydettim.
Bonus videoda ele alınan konular:
- "Her şey bir öğedir" mantrasının anlamı
- Polymer'in Platform polyfill'lerini ve öğelerini yüklemek için Bower'ı kullanma
- Jukebox uygulamamızı Yeoman oluşturucu ve alt oluşturucularla iskelet oluşturma
- Şablon aracılığıyla desteklenmiş platform özelliklerini anlama
- Bir Angular uygulamasını işlevsel olarak Polymer'e taşıma deneyimim.
Yeni Polymer öğelerimizi oluşturmak için Yeoman alt oluşturucularından da yararlanırız. Örneğin, foo öğesinin şablonunu oluşturmak için şu komutu çalıştırırız:
yo polymer:element foo
Bu işlem, öğenin otomatik olarak içe aktarılmasını isteyip istemediğimizi, bir kurucu sınıfının gerekli olup olmadığını ve birkaç başka tercihi sorar.
Her iki konuşmada da gösterilen uygulamanın en son kaynakları artık GitHub'da mevcut. Daha düzenli ve biraz daha kolay okunması için biraz daha yeniden yapılandırdım.
Uygulamanın önizlemesi:
Daha fazla bilgi
Özetlemek gerekirse Polymer, Web Bileşenlerinin doğal olarak uygulanmasını beklerken bu bileşenleri modern web tarayıcılarında etkinleştiren bir JavaScript kitaplığıdır. Modern araçlar, iş akışınızı iyileştirmenize yardımcı olabilir. Kendi etiketlerinizi geliştirirken Yeoman ve Bower'ı deneyebilirsiniz.
Bu konuyla ilgili göz atabileceğiniz diğer makaleler:
- Yeoman ve Polymer ile Web Uygulamaları Oluşturma
- Web bileşenlerini Vulcanize ile birleştirme
- Chrome Geliştirici Zirvesi: Polymer açıklayıcı, kapsüllenmiş, yeniden kullanılabilir bileşenler
- Geliştirme Otomasyonu Manzarası
- Web bileşenleri: web geliştirmenin geleceği
- Yeoman iş akışı ile uygulama oluşturma