AngularJS ve yeni düzen web uygulamaları

AngularJS’ i daha doğrusu 2.versiyonu ile adı sadece Angular olacak Google destekli framework’ ün çalışmasını, ne işe yaradığını, vb sorulara cevapları aşağıdaki linkini verdiğim başlıklarda anlatmıştım. Lakin konumuzun başlığında da belirttiğim gibi yeni düzen’ i tek bir örnek ve açıklama ile anlatmak yetersiz oluyor.

http://angulartr.com/angular-baslangic/

http://angulartr.com/angularjs-nedir/

Bugün çok güzel hazırlanmış bir slide ile karşılaştım. İngilizce olan bu slide’ ı kendi örneklerimle de pekiştirerek size aktarmak istiyorum.


Olayımız nedir ?

AngularJS and REST Made Simple

angularjs rest

Tüm yazılımcıların hayalidir, en yeni VE en sade VE en makul VE gelecek vaad eden teknolojiler ile çalışmak.

Peki Angular ve Rest service ler ile çalışırsak işler nasıl yürüyecek? Bize karı ne olacak?

Öncelikle geleneksel web sitelerinin çalışma mantığını inceleyelim.

geleneksel web sitelerigeleneksel web siteleri

Kullanıcı bir web sayfasına girer ve serverdan tarayıcısına, resimler, HTML blokları, javascript kodları, yazılar ve veri bir bütün halinde gelir. Kullanıcı bu web sayfasında sörf yaparken (başka bir sayfaya tıklama) aynı işlem tekrar tekrar sıfırdan yapılır. İşte bu çalışma mantığı günümüz teknolojilerinin verdiği imkanlar gözönüne alındığında KABUL EDİLEMEZ dir.

Sistem ne zaman değişti ?

2007 yılında ilk iPhone piyasa sürülüp iOS uygulamaları üretilmeye başlandığında, sistem ister istemez değişmeye başladı.

angularjs-and-rest-made-simple-8-638

angularjs-and-rest-made-simple-9-638

Mobil uygulamaları cihazınıza indirdikten sonra artık tek ihtiyacı olan şey data idi. Server’ a istek gönderiyor, cevabını JSON formatında alıyor ve uygulama çalışıyordu.

Client side teknolojilerde hızlıca gelişmeye başlamıştı.

angularjs-and-rest-made-simple-10-638

Tüm bunlar yaşanırken Rest servislerin üstleneceği görevler nelerdi ?

angularjs-and-rest-made-simple-11-638

angularjs-and-rest-made-simple-13-638

  • Daha az kod
  • Açık kaynak
  • Mobil mimariye uygun
  • Kullanıcı rol yönetimi

Ve işte büyük resim

angularjs-and-rest-made-simple-16-638

Artık tam ortada rest servisimiz var. Business Logic ile uygulamamız (web yada mobil) arasındaki iletişimi o sağlıyor.

Soldaki yeşil kutu bir web uygulamasını temsil ediyor. Kullanılan teknolojiler farklılık gösterebilir.

Sağdaki yeşil kutu ise mobil uygulamaları temsil ediyor. Farkettiyseniz, tüm mobil işletim sistemleri var.

Mavi kutular ise Business Logic dediğimiz kısım. SQL yad noSQL data işlemlerimiz, cloud yada local dosya işlemlerimiz.

Şimdi bu resme bir daha baktığımızda ne görüyoruz ?

Sihirli kelime SPA (Single Page Application). Ben artık 1 taş ile 2,3,4,5 günden güne artacak kadar kuş vurucam.

Neden mi ?

Çünkü benim tüm yapılarım kendi içinde ayrıldı. Artık veri kaynağım bir yerde bağımsız, frontend’ im bir yerde bağımsız ve bunlar birbiri ile rest servisim sayesinde rahatça konuşabiliyor. En baştaki gibi birbirleri ile iç içe girmiş değiller. Herkes kendi alanında bağımsız.

En iyisi örneklendirerek (in action) anlatmak;

  • Yeni bir projeye başladık. Backend’ imiz Rest API olarak yazılıyor. Daha 1.dakikada projemiz web + mobil uyumlu halde geliştirilmeye başladı.
  • Web arayüzümüzü yazdık ve Rest Api’ mız ile bağladık.
    building-coldfusion-and-angularjs-applications-4-638
    Hemen çalışan bir kod örneği paylaşıyorum. Aşağıdaki uygulamada rest api + angular kullanarak, bir data kaynağından data’ yı çekip listeleme yapıyoruz. Zaten projelerimizde en çok yaptığımız iş bu değilmidir.

Yukarıdaki kod’ ta yapılan şudur;

Öncelikle CSS tabını es geçin onunla işimiz yok. HTML tabı bizim layout’ umuzdur. Kullanıcı uygulamamıza girdiğinde, serverdan olduğu gibi gelir, hiçbir render işlemine uğramadan. Ardından JS tabındaki kodlar çalışır. Sadece factory ve controller katmanlarına bakın. https://api.github.com/repos/angular/angular.js/issues/ adresine istek gönderim işlemi var. Bu method controller’ da kullanılıyor ve rest api servisinden dönen cevap, scope ta myData.issueList özelliğine kaydediliyor.

Şimdi HTML tabına dönelim, ng-repeat=”issue in myData.issueList | filter:filterText” satırına bakın. filter’ ı geçin, şimdilik işimiz yok onunla. AngularJS Framework’ ümüz sürekli olarak View yani HTML kodlarımız ve controller larımızı dinliyor. Herhangi bir data değişikliğinde ki, az önce böyle bir değişiklik oldu ve myData.issueList değeri, rest api servisinden gelen değerle set edildi. O anda hemen işlemleri başlatıyor. ng-repeat angularjs directive’ i kendisine verilen diziyi parçalar. Konumuz ng-repeat olmadığı için detaylarını geçiyorum.

https://api.github.com/repos/angular/angular.js/issues/ adresi bir endpoint’ tir. Bu adres sizin uygulamanızın rest api si değil lakin bu önemli değil. Sizin olsaydı, api.github.com yerine www.sitem.com olacaktı. O yüzden değişen birşey yok. Kendi backend’iniz olarak düşünün.

Sonuç olarak;

Artık backend’ imizi sadece business logic ile uğraştırıyoruz. Bu işlemlerden sadece veri çekim ve sunum işlemini yanlızca backend yapabilirdi, ama data yı HTML ile birleştirmeyi vb. işlemleri tarayıcınızda AngularJS gibi bir framework ile yapabiliyor.

Bu ve bunun gibi işlemlerle projeniz ortaya çıkıyor. AngularJS’ in route, controller, service vb. katmanlarını da kullanıyorsunuz ve artık tam teşekküllü bir uygulama ortaya çıkıyor.

Böyle çalıştım ne kazandım?

  • Muazzam bir kaynak tasarrufu. Data render işlemi backend’ te yapılsaydı, gereksiz yere server’ ın işlem gücü bununla uğraşacaktı.
  • Gereksiz network trafiğini engelledik. SPA dedik yani kullanıcımız sitemize hangi sayfadan girerse girsin, ana şablon bir kere tarayıcısına oturur.
    app-layout

    Kullanıcımız sitemizde surf yaparken, bir sonraki sayfada sadece farklı olan kısmın HTML’ i serverdan çağrılır. Örneğin her sayfada var olan ve değişmeyen Sidebar, Header, Footer vb. kısımlar boş yere tekrar tekrar gelmez.
    Örneğin amazon.com da ürünleri gezerken, her ürün sayfası sıfırdan yükleniyor, halbuki Angularjs ile SPA olarak yazılsa bir üründen diğerine geçerken sadece, diğer ürünün datası rest api mizden çekilecek, sayfamızın main content’ inde yer alan ürün bilgileri element’ inin içi AngularJS’ in https://docs.angularjs.org/api/ng/service/$interpolate servisi sayesinde otomatik sıfırlanıp, yeni ürünün datası ile tekrardan şekillendirilecek. Aşağıdaki resimde gösterildiği gibi, bir üründen diğerine geçerken HTML yerine sadece rest api den json gelecek, aradaki fark uçurumdur.
    angularjs-and-rest-made-simple-9-638

  • Uygulamam tamamen mobil uyumlu 🙂 Nasıl mı?
    Web uygulamamız için rest api yazarken, mobil uygulamamızın veri ihtiyacınıda karşılamış olduk. İster web ister mobil uygulamamız her ikiside çalışırken veri kaynağı olarak rest apimizi kullanacak.
    Ayrıca illa Android yada iOS yada diğer platformların SDK’ larını kullanarak native uygulama yazmak zorunda değilsiniz. http://ionicframework.com/ ionic Framework ile yeni bir proje oluşturuyorsunuz ki kendisi zaten Angular uyumlu olduğu için, web uygulamanızın kodlarını taşıyorsunuz bile denebilir ve çok kısa süre içinde, ionic framework üzerinden hybrid olarak her platforma mobil uygulamanızı çıkarıyorsunuz 🙂

Kazandıklarımızın listesi uzar gider, ama aklınızda birşeyler oluşmuştur. Yukarıda bahsettiğim gibi bir tuşla kaç kuş vuracağınız belli değil 🙂

Gelecekte neler olacak ?

Gelecekte SPA bir standart haline gelecek. Çünkü sizinde yukarıda deneyimlediğiniz gibi, artık klasik yapıları kullanmak kabul edilebilir gibi değil.

Uygulamalarınız için rest api geliştirmenin yanında, Google ve Facebook’ un yeni girdiği bir pazar olan BaaS(Backend as a Service) te kullanabilirsiniz.

Şöyle;

Google’ ın yakın zamanda satın almış olduğu https://www.firebase.com/ e üye oluyorsunuz ve size noSql bir database + bu database’ de crud(create, read, update,delete) işlemleri yapabileceğiniz bir api veriyor. Siz DB işlemlerini yapmak için sadece bu api’ ye post gönderiyorsunuz. Gerisi onun işi. Ne server kurdum, ne database, ne de diğer klasik işlemlerin hiçbirini yapmadım ve de Backend’ te hiç kodlama yapmadım 🙂 Ayrıca kendiliğinden realtime, yani socket ile anlık veri akışı var.

larger-14-GoogleCloud-Firebase-1

Tabiki özellikleri bununla sınırlı değil. Authentication özelliği de var, her isteyen database’ inizdeki koleksiyonlarda değişiklik yapamaz. Backend’ te kod yazmazsam, zamanlanmış işlerimi nasıl yapıcam ? Merak etmeyin bu tarz vb.işlemleriniz için javascript ile kod yazabiliyorsunuz. Detayları sitesinden incelemenizi tavsiye ederim.

Tüm bu gelişmeler demek oluyorki artık yazılımcıların eli daha da gelişiyor. https://www.firebase.com/docs/web/examples.html adresinden yapılmış harika örneklere gözatabilirsiniz.

Bu yazımda yeni web düzenini hakkında fikirlerimi paylaşmak istedim. Umarım keyifle okumuşsunuzdur.

1 Comment AngularJS ve yeni düzen web uygulamaları

Leave A Comment

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