Dart dili ile web programlamaya giriş

Dart dilini flutter geliştirmelerimde aktif olarak kullanıyorum ve istersek web kodlamasını da dart dili üzerinden yapabilmekteyiz. Normalde javascript’in compile time bir dil olmaması dolayısıyla üzerine bir katman konularak Typescript kullanıyorum böylelikle type-safe ve OOP olarak geliştirme yapabiliyorum ama Typescript’i geliştirici tecrübemin tamamında kullanıyor olsam da mağlesef developer’ı üzen noktaları da mevcut

Dart dili ile web programlamaya giriş

Dart dili ile web programlamaya giriş

Giriş metninde Typescript kullanarak web geliştirmelerimi yaptığımı söylemiştim hatta mobil geliştirme geçmişimde cordova ve react-native ile cross-platform mobil uygulama geliştirdiğim zamanlarda(react-native ile halen geliştirmekteyim) tamamında Typescript kullanmaya özen gösterdim ama dediğim gibi mağlesef Typescript’inde kendine özgü sorunları mevcut özellikle her javascript paketi için @types dosyaları aramak zorunda kalmanız hele birde javascript dosyasının içeriğiyle @type içeriği uyuşmuyorsa o zaman gelde birde bu @type içeriğine el at ve javascript dosyasındaki yapı ile uyumlu hale getirmeye çalış bu durum az bilindik javascript kütüphanelerinde karşılaşılan bir senaryo eğer çok yüksek kitle tarafından kullanılan js paketlerini tercih ediyorsanız büyük ihtimalle pek bu sorunu yaşamayacaksınızdır. Çünkü katkıta bulunan topluluk tarafından hızlıca js ile @type senkron olarak güncelleniyor(çoğu zaman).

İşte tamda bu noktada artık web’de OOP geliştirme yapabilecek ve type-safe çalışabileceğim alternatif bir yardımcı araç ararken dart2js compiler aracını kullanarak ortaya javascript çıktısı veren ve Flutter ile cross platform mobil geliştirmede gücüne tanık olduğum Dart dili üzerinden bu geliştirmeleri yapabiliyor olmak gerkçekten beni çok mutlu etti.

Bu kadar ballandıra ballandıra anlattık peki Dart ile web geliştirmesi nasıl yapabiliriz. Öncelikle eğer makinenize daha önce Dart kurulmadıysa https://dart.dev/get-dart adresinden alternatif kurulum yöntemlerinden birini tercih edip makinenize kurabilirsiniz.

Eğer sizde Flutter ile halihazırda geliştirme yapıyorsanız Flutter sdk dizinin altında yer alan <Flutter SDK Path>\bin\cache\dart-sdk\bin yolunu Ortam değişkenlerinde yer alan Path’e eklemelisiniz.

Dart kurulumunun yapıldığı varsayılarak Web geliştirmesi yapabilmek için global olarak kurulması gereken 2 paketi alttaki gibi komut satırından kurmalısınız.

pub global activate webdev
pub global activate stagehand

Not: pub… ile başlayan komutlarınızın çalışması için 2 paragraf üsste Ortam değişkenleri path’ine Dart sdk yolunu girmeniz gerekmektedir. Eğer komut satırı açık iken Path’e sdk yolunu girdiyseniz komut satırını kapatıp tekrar açmalısınız yada yeni bir komut satırı başlatıp pub… komutlarını çalıştırabilirsiniz.

Üstteki komutlar başarıyla çalıştıktan sonra Ortam değişkenlerinden yer alan Path değişkenine alttaki path’de yer alan <Username> bilgisini kendi bilgisayar kullanıcı adınıza göre revize edip eklemeniz gerekmektedir yoksa alttaki adımlara devam edemeyeceksiniz.

Makinemde 2 path’in eklenmiş hali alttaki görselde mevcuttur.

Dart and Stagehand Environment Paths

Yeni bir web projesi oluşturma

Alttaki komutları çalıştırarak quickstart adında bir klasör oluşturup ardından bu klasör içerisine giriş yapıp stagehand komut satırı aracı ile web-simple template’i ile web projesi oluşturulmuş olacaktır.

mkdir quickstart
cd quickstart
stagehand web-simple
Creating web-simple application `quickstartweb`:
C:\Users\muhac\Desktop\Dart\quickstartweb\.gitignore
C:\Users\muhac\Desktop\Dart\quickstartweb\CHANGELOG.md
C:\Users\muhac\Desktop\Dart\quickstartweb\README.md
C:\Users\muhac\Desktop\Dart\quickstartweb\analysis_options.yaml
C:\Users\muhac\Desktop\Dart\quickstartweb\pubspec.yaml
C:\Users\muhac\Desktop\Dart\quickstartweb\web/favicon.ico
C:\Users\muhac\Desktop\Dart\quickstartweb\web/index.html
C:\Users\muhac\Desktop\Dart\quickstartweb\web/main.dart
C:\Users\muhac\Desktop\Dart\quickstartweb\web/styles.css
9 files written.
--> to provision required packages, run ‘pub get’
pub get
Resolving dependencies…
+ … Packages
Downloading archive 2.0.10…
Downloading analyzer 0.38.4…
Downloading front_end 0.1.26…
Downloading dart_style 1.3.1…
Changed 63 dependencies!
Precompiling executables…
Precompiled build_runner:graph_inspector.
Precompiled build_runner:build_runner.

Bu adımda başarıyla gerçekleştiyse alttaki komut ile hemen web ortamında uygulamamızı görelim.

webdev serve
[INFO] Building new asset graph completed, took 2.5s
[INFO] Checking for unexpected pre-existing outputs. completed, took 5ms
[INFO] Serving `web` on http://127.0.0.1:8080
[INFO] Running build completed, took 2.8s
[INFO] Caching finalized dependency graph completed, took 148ms
[INFO] Succeeded after 2.9s with 11 outputs (1438 actions)

8080 portu üzerinden localhost’umuzda uygulamamız yayınlandı http://127.0.0.1:8080 yada http://localhost:8080 adresinden uygulamaya ulaşabilirsiniz.

Kendi kodumuzu ekleyelim projeye

Varsayılan olarak oluşturulan Dart Web projesinde alttaki örnek kodda görebileceğiniz gibi web klasörü altında yer alan app.dart dosyası projenin ayağa kalktığı dosyadır bu arada Dart projeleri main fonksiyonuna ihtiyaç duymaktadır proje ilk olarak bu fonksiyon üzerinden ayağa kalkmaktadır o yüzden adını değiştirmeyiniz.

Sonuç olarak alttaki gibi bir web çıktısı olacaktır.

See the Pen
NWKZOzL
by Murat ÖNER (@muratoner-the-typescripter)
on CodePen.

Bu kısmı alttaki gibi değiştirirsek sayfaya 4 li elementli bir liste oluşturmuş olacağız. Üstteki tek satırlık kod olan ve sayfaya sadece “Your Dart app is running.” yazan kısmı alttaki gibi değiştirin.

Üstteki kodun web çıktısı ise tam olarak şu şekildedir.

See the Pen
pozXxOB
by Murat ÖNER (@muratoner-the-typescripter)
on CodePen.

Dart ile type-safe kod yazıp OOP, SOLID, Patterns gibi prensiplere uyarak kodlama yapmak gerçekten oldukça keyifli Typescript’in eksiğinin olduğu birçok nokta gerçekten giderilmiş Dart dili ile.


Makalede kullanılan örneğe ve Dart ile ilgili diğer tüm örneklere github hesabımdan erişebilirsiniz. Buraya tıklayıp github hesabıma erişebilirsiniz.


✍ Lütfen olumlu-olumsuz tüm görüşlerinizi bana yorum yada mail yolu ile iletmeyi ihmal etmeyin.

🔗 Sosyal medya kanallarından makaleyi paylaşarak destek olursanız çok sevinirim.

👋 Bir sonraki makalede görüşmek dileğiyle.

Bunlar da hoşunuza gidebilir...

2 Cevaplar

  1. Gökhan ALKAN dedi ki:

    Merhabalar dart dili ile php dilini karşılaştırır isek ne gibi farklar var arasında?

  2. Murat ÖNER dedi ki:

    Sözdizimi olarak C#, Java, Javascript(ES++) sözdizimlerine benzediğinden bu dillerden birini kullananlar için kolaylıkla anlaşılabilir syntax’ı ve özellikleri mevcuttur.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir