Github Actions duyurulduğunda hemen kayıt oldum ve heyecanla beklemeye başladım. Hesabım için aktif olduğunda ise bir deneme fırsatı bulamadım. Bugün temel anlamda basit bir nuxtjs uygulaması nasıl deploy ediliyor diye baktım. Burada örneği nuxtjs ile yapıyor olmamın aslında hiçbir önemi bulunmuyor. Bugün nuxtjs ile bir PoC yapıyordum ve bunu Github Actions ile nasıl deploy edebilirim dedim ve başladım. O zaman adım adım ne yapıyoruz birlikte inceleyelim.

Surge.sh için token oluşturalım

Deploy etmek için kullanacağımız servis surge.sh olacak. Bu nedenle deploy aşamasında kullanacağımız bir token almamız gerekiyor. Tabi bu işlemi yapabilmemiz için surge cli’ı kurmamız gerekli. Bunu aşağıda yer alan komut ile gerçekleştiriyoruz.

npm install…

Çok az sayıda framework/library yerleşik bir http API’si bulundurur. Örneğin AngularJs ile birlikte $http, Angular 2+ da ise HttpModule ve HttpClientModule (HttpModule Angular 9 ile tamamen kaldırılacak.), JQuery tarafında ise $.ajax yerleşik olarak bulunuyordu. VueJs 2.0'a kadar ise benzer şekilde vue-resource ile işlemlerimizi yerleşik olarak yapabiliyorduk. Fakat VueJs ekibi bunun VueJs 2.0 ile birlikte ayrılması gerektiğine ve 3. parti kütüphanelerin buna daha iyi hizmet edebileceğine karar verdiler. Bunun için en çok önerilen ise Axios’tur.

Axios ile http işlemlerinizi çok basit ve etkili bir şekilde çözebilirsiniz. Varsayılan olarak Promise kullanır. Hem istemcide hemde sunucuda çalışır (SSR için uygun). VueJs ile kullanımı…

Yaşam döngüsü her framework yada library de olduğu gibi Stenciljs’de de önem arz etmektedir.

Bir bileşenin yaşam döngüsünü iyi bilmeliyiz ki herhangi bir t anında bileşene müdahale etmek gerekirse bunu nerede yapabileceğimizi kestirebilelim. Aşağıda çağrılma sıralarını dikkate almadan açıklamaya çalışacağım. Sonraki başlıkta ise farklı senaryolarda tam olarak hangi sıra ile çalıştıklarını belirtiyor olacağım. O zaman başlayalım.

connectedCallback()

Bu metot bileşen DOM’a her bağlandığında çalıştırılır. Bileşenin DOM’a her bağlandığında yapmasını istediğimiz işlemler burada yer alabilir.

Not: Bileşen DOM’a ilk bağlandığında connectedCallback() metodu componentWillLoad() metodundan önce çağrılır. …

Stencil ile bileşenler arasında nasıl haberleşme yapılabildiği ile ilgili kısa bir anlatım ve örnek

Stencil aracının ne olduğuna bir önceki yazımda giriş seviyesinde değinmeye çalışmıştım. Şimdi biraz daha derinlerine inmeye çalışacağım. Bileşen temelli araçların hemen tümünde bileşenler arası haberleşme/etkileşim (component communication/interaction) önem arz eder. Bu nedenle değineceğim ilk konu bu olacak.

Stencil aracında bileşenler arasındaki haberleşme Üst Bileşenden Alt Bileşene (Parent to Child), Alt Bileşenden Üst Bileşene (Child to Parent) olmak üzere iki şekilde gerçekleşmektedir. Aşağıdaki hazırladığım görsel ile basit bir şekilde bu haberleşmeyi anlatmaya çalıştım.

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ı…