Choo Framework, Nedir, Nasıl Kullanılır — I?

Angular, React, Vue, Svelte ve benzeri kütüphaneler ve framework’lerden sonra Choo Framework ile herhangi bir uygulama geliştirmek ve üzerine emek harcamak fazlasıyla zaman kaybı olarak gözüküyor olabilir. Ancak bu ufak kütüphanenin yetenekleri ve size sağladığı çalışma ortamı gerçekten de şaşırtıcı.

Firefox, Firefox Send adında, popüler dosya paylaşım araçlarına alternatif olabilecek bir araç üretti. Kendisinin kaynak kodlarına göz gezdirirken, uygulamanın UI kısmını choo adında bir araçla yaptıklarını farkettim. Göz ucuyla incelemeye başladıktan sonra, pek de popüler olmayan, çok fazla dökümantasyonunun olmadığı bir kütüphane ile karşılaştım. Birkaç deneme yaptıktan ve ufak tefek bazı yerlerde kullandıktan sonra, içerisinde router ve state mantığı barındıran bu ufak kütüphaneyi kullanmaktan çok keyif aldığımı farkettim. Hemen hemen hiç Türkçe dökümantasyonunun olmaması üzerine(varsa da ben farketmedim) de giriş niteliğinde ufak bir tanıtım yapmaya karar verdim.

Giriş

Choo framework’u üretenler; daha basit, daha kullanışlı ve daha eğlenceli bir kullanım sunmak üzere inşaa ettiklerini belirtiyorlar. Karmaşık ve devasa yapılardan ziyade daha minimal ve ufak parçalara odaklanmanın çok daha keyifli ve sürdürülebilir olduğundan bahsediyorlar. Kendi açıklamalarından alıntılamak gerekirse; “We don’t believe that bigger is better”.

Öte yandan Choo’nun sunduğu yeni bir şey olmadığını da söyleyelim. Özellikle React ve Redux ile uygulama geliştirmiş ya da bu söz dizimine aşina olanlar için anlaması ve uygulamasının epey kolay olacağını söyleyebilirim. Uygulamayı geliştirdikçe daha az maliyetle benzer şeyleri yaptığınızı görmek şaşırtıcı olacaktır.

Geliştirici Ortamını Hazırlamak

Choo ile hızlı bir şelilde başlangıç yapmak için tıpkı create-react-app gibi create-choo-app’i kullanabilirsiniz. Yine choo tarafından geliştirilmiş başka bir web compiler olan bankai de kullanılabilir. Ben alışkanlığımı bozmamak adına parcel ile bir başlangıç paketi oluşturdum. Hali hazırda çok fazla bir pakete ihtiyacınız yok zaten. ‘parcel-bundler’ ve ‘choo’ paketlerini kurmanız yeterli. Bunun için hazırladığım bu ufak repoyu kullanabilirsiniz.

Başlangıç

Choo’da tıpkı React gibi ‘functional’ ya da ‘stateful’ türde component oluşturulabiliyor. Bir klasik olarak basit bir todo app ile framework’un temel taşlarını anlatmaya çalışacağım.

Öncelikle bunu için oluşturduğum bir klasör/uygulama yapısı var. Bunu paylaşarak daha oturaklı bir başlangıç yapalım.

Main.js içerisinde uygulamamızı tanımlayıp aykalandırıyorıuz. Burada bir nevi ufak bir ‘middleware’ yapısı da söz konusu. Store ve routes’ları tanımladığımız choo uygulamamıza ‘render’ edebilmesi için ‘mount’ etmeden önce gönderiyoruz. Yani, bir adet anasayfamız mevcut. Genel olarak kullanılan App.js yerine home.js içerisinde yazacağız uygulamayı. Home.js ise kendi içerisinde çeşitli component’ları çağıracak. Şimdilik, store içerisinde varolan data’yı static olarak render edeceğiz. Bunun dışında ekleme, silme ve güncelleme işlemlerini barındıran component’lar henüz mevcut değil.

main.js içerisine öncelikle choo paketini dahil ediyoruz. Sonrasında ise router olarak tanımlayabilmek adına home.js’i, store’u kullanabilmek içinde store.js’i dahil ediyoruz.

Burada, kullanmış ya da daha önce node.js ile üretilmiş bir projeye katkıda bulunanlar için tanıdık bir yapı söz konusu. Popüler node.js framework’lerinin de ayaklandırıldığı ana dosyada buna benzer bir yapısallık mevcut. Style, store ve home’u dosyaya dahil ettikten sonra, choo app’i tanımlıyoruz. Sonrasında ise .use, ve .route metodu ile dosyaya dahil ettiğimiz bileşenleri render edilecek olan app’in içerisine gönderiyoruz. Route tanımlarken vereceğimiz birinci parametre path’i, ikinci parametre ise o path’de render edilecek olan component’i temsil ediyor. home.js ise sonunda bir fonksiyona denk gelmeli. Yani tanımlayacağımız her route html return eden bir fonksiyon olarak tanımlanmalı.

Son olarak, .mount ile dosyayı, çağırdığımız index.html içerisindeki root elementine yerleştiriyoruz.

Store

store.js içerisinde yine export edilmek üzere store adında bir fonksiyon oluşturuyoruz ve fonksiyonun içerisinde kullanmak üzere bir ctx parametresi veriyoruz. Bu ctxiçerisinde tanımlayacağımız her değer, sonrasında uygulama içerisinde taşıyacağımız data’lardan oluşacaktır. Ctx aynı zamanda ‘params’, ‘href’, ‘query’, ‘events’ ve ‘route’ gibi uygulamanın çeşitli niteliklerini barındıran değerler de içermektedir. Sonrasında bu değerlerin hepsini home.js içerisinde kullanabiliyor olacağız.

Home

home.js ile birlikte uygulamamızın elementlerinin ve fonksiyonlarının yazılacağı yere geçmiş bulunmaktayız. Burada html’i render etmek için choo paketinin içerisinden çağıracağımız html metodunu kullanacağız. React’taki jsx kullanımına benzer bir kullanım söz konusu. Jsx’ten farkı ise bildiğimiz html kullanımının olması. Jsx’teki kimi kimi attributes’lerin camelCase yazımı söz konusu değil.

home adında bir fonksiyon oluşturup return ettiği kod bloğunu html metoduyla sarmalıyoruz. Böylelikle ‘Hello Choo!’ yazısını barındıran div elementi app içerisinde render olmuş oluyor.

Çok basit haliyle bir choo app ürettik. Henüz ne bir veri akışı var ne de component barındırıyor. Umarım tanıtım açısından faydalı bir giriş olmuştur. Makaleleri yazdıkça ve app’te ilerledikçe varolan değişiklikleri bir repo’da toplayacağım. Yerelinize hızlı bir şekilde çekip uygulayabilmeniz için buradan ulaşabilirsiniz.