Stencil’e Giriş

Stenciljs aracına kısa bir giriş

Selçuk Kütük
Sep 9, 2017 · 4 min read

Nedir?

Stencil Ionic ekibi tarafından geliştirilen native web bileşenleri oluşturmak için hazırlanan bir araçtır. Bunun yanında sanal dom, reaktif veri aktarımı Typescript ve JSX gibi güçlü özellikleri ile uzun vade de oldukça iddialı ve umut verici görünüyor. İlk olarak Polymer Summit 2017 de duyurulan Stencil ben de dahil olmak üzere bir çok kişinin ilgisini çekmiş gibi görünüyor. Bu yazı ile kısa bir giriş yaparak basit bir örnek uygulama hazırlayacağız.

Neden?

Ekip Ionic bileşenlerinin bir sonraki sürümünü Stencil ile geliştirecek. Bu Ionic ile geliştirilmiş olan uygulamalara ciddi bir hız katacak ve aynı zamanda ciddi bir paket boyutu avantajı sağlayacak gibi görünüyor. Bunun yanı sıra Angular 4 ile Ionic uygulamarı geliştirmek hala mümkün olacak ve daha da önemlisi ve bana çok cazip gelen tarafı Angular 4 dışında Vue, React ve hatta saf Javascript ile ionic uygulamaları geliştirmek mümkün hale gelecek. Yani kısacası framework yada kütüphane bağımsız bir bileşen setine dönüşecek. Gerçekten kulağa çok hoş geliyor.

Dikkat: Stencil henüz alpha bile diyemeyeceğimiz çok ama çok erken bir sürümde. Bu nedenle ilk kararlı sürüm yayınlanana kadar dikkatli olunması ve değişimlerin iyi izlenmesi gerekmektedir. Çünkü bazı klavye bükücü anlamsız hatalar ve kararlı sürüme kadar bolca “breaking change” bizleri bekliyor olabilir.

Kurulum

Şu anda Stencil çok erken bir aşamada olduğu için bir cli aracı bulunmuyor. Bu nedenle hızlıca bir göz atmanın en iyi yolu ekip tarafından github üzerindeki başlangıç uygulaması reposunu bilgisayarımıza klonlamak (git clone)olacaktır. O zaman başlayalım:

Klonlama işlemi tamamlandıktan sonra bağımlılıklar için klasör içerisine girip npm yada yarn ile yükleme işlemini tamamlıyoruz.

Yükleme işlemi tamamlandıktan sonra projeyi yerel bir sunucu üzerinde ayağa kaldırmak için şu komutu çalıştırıyoruz:

Açılış öncesi kısa bir build işlemi gerçekleşiyor.
Build işlemi sonrasında uygulama yükleniyor.

Hadi Başlayalım

Stencil bileşenleri Typescript ve JSX kullanılarak oluşturuluyorlar. Bu hem Angular severlere hemde React severlere göz kırpıyor. Vue severler için zaten bir şey söylememe gerek yok. Kim gözünü nereye kırpsa sekip onlara geliyor. :) Bileşenler /src/components/ klasöründe bulunuyor. Bir bileşenin yapısına kısaca bir göz atmak istersek (my-name.tsx):

@Component: Bileşen için gereken meta verilerin tanımlanması için kullanılan dekorator. Bazı özellikleri tag, styleUrl, styleUrls.

@Prop: Bileşenin kabul ettiği öz niteliklerin değerlerini ele alırken kullanılan dekorator. Örneğin @Prop() adi: string = ``;

Bu bileşenin Stencil yapılandırma dosyasında tanımlanması gerekmektedir. Kontrol etmek için ana dizinde bulunan stencil.config.js dosyasına göz atalım:

Artık bileşeni index.html içerisinde tag adı ile kullanabiliriz:


Kendi Bileşenimizi Geliştirelim

Öncelikle bileşeni geliştirmeye başlamadan önce ilk kez kullanacağımız 3 yeni kavrama bir göz atalım.

@State() : Bileşen içerisinde kullanacağımız değişkenleri belirttiğimiz dekarator. Örneğin, @State() deger: number;

componentWillLoad : Yaşam döngüsü kancalarından bir tanesi. Bileşen yüklenmeden önce çalıştırılır. Diğerleri, componentDidLoad ve componentDidUnload. componentDidLoad, bileşen yüklendikten sonra componentDidUnload ise bileşen kaldırıldığında çalıştırılır.

onClick : Buttona tıklama olayını ele alacağımız event. Örneğin, onClick={() => this.artir()}

Şimdi ilk olarak /src/components/ dizinin içerisine ornek-sayac adında yeni bir bileşen dizini oluşturalım. Şimdi ise içerisine ornek-sayac.tsx ve ornek-sayac.scss dosyalarını oluşturalım. Son görünüm aşağıdaki gibi.

Dizin ağaç yapısı

Daha sonra yeni bileşenimizi stencil’e haber vermemiz gerekiyor. Bunun için stencil.config.js içerisindeki components string dizisine yeni bileşenimizi ekleyelim.

Şimdi ornek-sayac.tsx dosyasını açalım ve aşağıdaki şekilde düzenleyelim.

Şimdi ise isteğe bağlı olarak ornek-sayac.scss dosyasını aşağıdaki gibi düzenleyebilirsiniz.

Ve bileşenimiz hazır durumda. Son olarak bileşeni index.html’e eklemeliyiz.

Sonuç aşağıdaki gibi olmalı.

Projenin son hali

Bu yazı ile temel anlamda Stencil aracına bir giriş yapmış olduk. Yeni konularla bu yazı dizisini devam ettirmeye çalışacağım. Herkese iyi çalışmalar dilerim.

Orjinal Makale: https://selcukkutuk.com/stencil-e-giris/

Kodcular

Bu yayın yazılım üzerine üretilen blogların bir araya…

Selçuk Kütük

Written by

Yazılım Geliştirici (Software Developer) Orman Mühendisi (Forestry Engineer) https://selcukkutuk.com

Kodcular

Kodcular

Bu yayın yazılım üzerine üretilen blogların bir araya geldiği Türkçe yayındır.

Selçuk Kütük

Written by

Yazılım Geliştirici (Software Developer) Orman Mühendisi (Forestry Engineer) https://selcukkutuk.com

Kodcular

Kodcular

Bu yayın yazılım üzerine üretilen blogların bir araya geldiği Türkçe yayındır.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store