LearnReactUI
EnterpriseReact Sample Exporter CLI
Uzun zamandır aklımda olan bir projeyi gerçekleştirdim. Bu araç LearnReactUI platformu için örnek oluşturma süremi kısaltarak işleri daha kısa zamanda halletmemi sağlıyor. Detaylar yazının devamında.
Öncelikle bu ihtiyacın nereden çıktığına ve bize ne gibi avantajlar sağlayacağından bahsetmek istiyorum. Üzerinde çalıştığım 3 platform bulunuyor.
- onurdayibasi.com (Frontend/React Medium Blog yazıları)
- onurdayibasi.dev (React Örnek uygulamaları)
- learnreactui.dev (E-Kitaplar ve Örnek Uygulama/Kodları)
Temel çalışma şeklim. İlk 2 platformda oluşturduğum içeriklerin birleştirilmesi ise LearnReactUI.dev platformunun içeriklerini üretmek.
LearnReactUI içeriklerini oluşturulması tabiki kolay olmuyor. Blog yazılarının belli amaçlar ile birleştirilip, indekslenmesi, e-kitap oluşturulması ve bunların pdf çıktı haline getirilmesi oldukça emek ve zaman gerektiren konular.
Aynı zamanda örnek uygulamaların EnterpriseReact içerisinden çıkarılıp Tutorial ve Örnek uygulama haline getirilip, paketlenmesi, testi gerçekten çok emek isteyen konular.
Zaman diğer geliştiricilerde olduğu gibi benim için en önemli konulardan bir tanesi çünkü üretmek ve geliştirmek istediğiniz tonlarca iş bulunuyor.
- üretmek için araştırma yapmak gerekiyor,
- bu araştırmardan ürettiğiniz blog/örnek uygulamarın gerçekleştirimi için zaman harcıyorsunuz,
- son olarak bunların LearnReactUI için çıktı oluşturabilmek için ekstra zaman harcamam gerekiyor
Tüm bunları gerçekleştirmek için harcanan süreleri kısaltmam veya işleri daha verimli gerçekleştirmemiz gerekiyor.
Bunun için araçlar veya standartlar faydalanıyorum. Son dönemde bu verimliliği arttırmak için bir kaç ekstra iyileştirme yaptım.
1.Cover Image İyileştirme ve Standartlaştırma
2.E-Kitap Oluşturma İçin Ulysses Aracını Satın Aldım
3. EnterpriseReact Sample Exporter CLI
4. Markdown AI ile hazırlanması.
1. Cover Image İyileştirme ve Standartlaştırma
İlk olarak https://learnreactui.dev/ Cover görsellerinin üzerinden geçtim. Renk tonları, resim boyutları, metin boyutlarını standartlaştırdım. Artık bir template sahibim bu sayede hem göze, hemde geliştirme aşamasındaki süremi olabildiğince kısalttım.
2. E-Kitap Oluşturma İçin Ulysses Aracını Satın Aldım
Daha önceden Notion üzerinden çıktı aldığım için PDF formatı üzerinde kısıtlamalar veya başka formatlarda E-Kitap oluşturamıyordum.
Okuyucularımızdan bazılarından E-Pub formatında e-Kitapları okuyabilme talebi oldu. Bunun üzerine bir araç arayışına başladım ve Ulysses kitap oluşturma aracını buldum. Son çıkardığım 3 kitap bu araç ile ürettim
Bu ve bundan sonraki yazdığım E-Kitaplarda Ulysses kullanacağım için kalitenin daha üst seviyeye ulaşacağını söyleyebilirim.
3. EnterpriseReact Sample Exporter CLI
Son olarak EnterpriseReact sitesinde yer alan örneklerin LearnReactUI platformunda yayınlanması için bir takım iyileştirmeler yapmam gerekiyordu.
- EnterpriseReact Web Sayfasında Sembol Kullanımları blog yazımda bu iki platformu nasıl birbirine bağladığımı anlatmıştım.
EnterpriseReact içerisinde 300'ün üzerinde örnek bulunuyor. Elbette hepsini LearnReactUI aktarma gibi bir hedefimiz yok fakat örnek aktarmak oldukça maliyetli bir iş
- Markdown dosyası (ReadMe) dosyasının hazırlanması
- Cover dosyasının hazırlanması
- Örnek proje dosyasının hazırlanması gerekiyor.
Bundan önceki süreçte Örnek proje dosyaları hazırlarken kendim Vite ile yeni bir proje ortamı oluşturup, elimle ilgili dosyaları kopyalayıp, routing vs import path değiştirip örneği çalıştırmak ve dependency ayarlamak için uğraşıyordum.
Get Onur Dayıbaşı’s stories in your inbox
Join Medium for free to get updates from this writer.
Şimdi ise bir Exporter CLI yazdım. Gelin şimdi bunun nasıl çalıştığını inceleyelim
Öncelikle EnterpriseReact birçok örnek projeyi aynı anda geliştirebilecek bir altyapıya sahip yani LazyLoading ve DynamicRouting yapısı birbiri ile dokunmadan ayrıştırılabilecek şekilde, knowledge paketleri üzerinden ayrıştırılmış örnekler. Bunu en başından bu şekilde planlamıştım. Aşağıdaki blog yazılarını okuyabilirsiniz.
Şimdi sorun Enterprise içerisinde bulunan bu Sample nasıl Export edileceğinde. Öncelikle CLI bir Sample dosyası vermem gerekiyor Örneğin
- MotionBasicSample → tutorial LeanReactUI içerisinde bu linkten indirebilirsiniz
Part-1 Meta Dosyaların Oluşturulması
Bu kodu alan CLI öncelikle Babel Parser ile kodun AST(Abstract Syntax Tree) oluşturuyor ve bunlar üzerinden analiz işlemlerini başlatıyoruz.
Modüllerimiz 2 kısımdan oluşuyor.
- imports kısmı
- code kısmı
Kod kısmı oldukça basit. Aynı formatta alıp bir yere saklayıp tekrar kullanabiliriz. Fakat imports kısmı oldukça iş çıkartıyor.
- Birincisi import üzerinden diğer jsx, scss, css, js, ts, tsx dosyalarına linkler var. Artı bu import linkeri üzerinden package.json içerisindeki dependency belirleniyor.
Imports kısmı üzerinden Recursive dönerek diğer modüllere, oradan diğer modüllere derken bu modüller üzerinde geziniyoruz ve meta dosyalarımızı oluşturuyoruz
1nci Meta içerisinde;
- Dosya ismi, path, imports ve code kısımları yer alıyor.
2nci Meta içersisinde
- package.json içerisinde yer alacak olan Dependency paketleri ile eşleşmeler yer alıyor.
Part-2 Meta Üzerinden Örnek Uygulamanın Üretilmesi
Öncelikle Vite.js de içi boş bir proje oluşturdum. İçerisinde bir bileşen verdiğimizde sadece onu render edecek şekilde hazırlanmış
2nci olarak Meta dosyalarının üzerindeki analizler doğrultusunda sub-folder oluşturan ve bu dosyaları ilgili klasörlere taşıyıp, import pathlerini düzenleyen bir CLI Script çalışıyor.
Sonrasında oluşan örnek klasörü ilgili Vite projesinin içerisine kopyalayıp sadece ana bileşen olarak bu <Sample…> bileşeni vermemiz yeterli oluyor. Örnek uygulamamız hazır.
4. Markdown AI ile Hazırlanması
LearnReactUI paketlerin ihtiyaç duyduğu bir konuda Markdown oluşturulması. Özellikle örneklerde bu Markdown otomatik AI ile oluşturabileceğimi farkettim.
Önceden oluşturduğum Markdown formatı ile Sample kod dosyaları Cursor veya Copilot contextine yükleyerek yeni markdown oluşturmasını istiyorum. Bu sayede markdown oluşturmayı da hızlandırmış oldum.
Sonuç
Verimlilik için kendi geliştirme araçlarınızı oluşturmanız gerekiyor. Bu sayede işlerinizi daha kısa sürede ve daha kaliteli bir şekilde gerçekleştirebilirsiniz.
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.
