Neden bir Javascript uygulama çatısı?

Öncelikle neden bir Javascript uygulama çatısına gereksinim var ondan bahsedelim.

jQuery neyimize yetmiyor?

Neden bir Javascript uygulama çatısı?

• İstemci-sunucu mimarisinin yaygınlaşması
• Tek sayfa uygulamalar (Single page apps)
• Daha büyük, karmaşık javascript kodları

• İstemci tarafındaki (son kullanıcı bilgisayarları ve akıllı telefonlar), donanımsal gelişme ile hesaplama gücü önemli ölçüde arttı.
• Business logic denilen hesaplamaların bir kısmı artık istemciler üzerinde yapılmaya başlandı.
• Kullanıcı etkileşimi arttı.
• Web siteleri artık web sitesinden çok birer uygulama olarak geliştiriliyor.
• Kullanıcı deneyimini geliştiren tek sayfa uygulamalar yaygınlaştı.
• Sonuçta artık elimizde daha büyük ve karmaşık kod tabanları var.

Teknik kısıt yok ama ...

Verimlilik ve sürdürülebilirlik önemli

• On binlerce satırlık devasa ve karmaşık tek sayfa uygulamaları yazmak için teknik bir kısıt yok. jQuery ile hatta ev yapımı kütüphanelerle bile kesinlikle yapılabilir.
• Ancak bu uygulamaların "çalışması" yeterli değil.
• Geliştirme sürecinde hem bir çok tekerlek icad edeceksiniz hem de ekibiniz dışındaki birini işe alınca o devasa sistemin kendi standartlarını öğrenmesi uzun sürecek.
• İnsanlar için kod yazmak gerek makinalar için değil.

• Gerek düşünce tarzında gerek teknik konularda kod tabanınızın bir standartı olacak.
• Dünyanın çoktan çözdüğü sorunları yeniden çözmeye zaman harcamayacaksınız.

AngularJs nedir?

AngularJs nedir?

• Bir javascript uygulama çatısı
• MVC tasarım deseni kullanır
• MIT lisanslı

• AngularJs bir uygulama çatısıdır.
• MVC tasarım desenini kullanır, bu konu aslında tartışmalı, birazdan değineceğim.
• Günün anlam ve önemine uygun olarak MIT lisansı ile sunulmuş.

AngularJs kafası

• HTML statik ancak artık dinamik olmalı
• Declarative UI
• Modüler geliştirme ve yeniden kullanılabilirlik
• Kaygıları ayırarak daha temiz modelleme

• AngularJs'in diğer alternatiflerinden ayrıldığı nokta şu: Diğerleri sadece bir js uyg. çatısı sunarken AngularJs HTMLin davranışını değiştirmeyi hedefliyor.
• Declarative UI
• Modüler geliştirme yazılımın her alanında çok önemli çünkü yeniden kullanılabilirliği artırıyor.
• Kaygıları ayırmak yani separation of concerns, iyi bir tasarımın başlıca göstergelerinden biri olan "loose coupling"i sağlar.

Dinamik HTML

• jQuery ile yapsaydık?
• Declarative. Imperative değil.

Dinamik HTML

function ProfileCtrl($scope) {
  $scope.reset = function() {
    $scope.user = {};
  };

  $scope.getUser = function() {
    $scope.user = {...};
  }
}

<div ng-app="">
  <div class="well" ng-controller="ProfileCtrl">
    <button class="btn" ng-click="getUser()">Kullanıcıyı getir</button>
    <button class="btn" ng-click="reset()">Reset</button>
    <div ng-if="!user.skills">Bir şey yok...</div>
    <ul class="well" ng-if="user.skills">
      <li ng-repeat="skill in user.skills" class="{{skill.type}}">{{skill.name}}</li>
    </ul>
  </div>
</div>

• Declarative. Imperative değil.
• Sunucu tarafındaki viewler tadında.
• DOMa müdehale yerine daha çok model ile muhattabız.

MVC nedir?

• Model View Controller
• Kaygıların ayrılması (separation of concerns)
• Günümüzde servis katmanı eklenmiş

• MVCnin ne olduğundan ayrıntılı bahsetmeyeceğim çoğunuz biliyoruzdur muhtemelen.
• Kaç kişi biliyor?
• Kaygıların ayrılması için yardımcı olur.
• Günümüzdeki pratiklerde controllerları destekleyen servis katmanları da kullanılmaktadır.

Angular'da MVC

• MVVM -> Model View View-Model
• View-Model -> $scope
• MVW -> Model View Whatever

• AngualarJs'in MVC kavramı biraz tartışmalı. Çok kısa bu tartışmadan bahsedeyim.
• AngularJs'in yaratıcıları başta MVC olduğunu ancak artık daha çok MVVM yapısında olduğunu söylemişlerdi.
• Bunun üzerine dönen uzun ve anlamsız tartışmalar sonucu yine AngularJs'in yaratıcılarından biri "böyle gereksiz tartışmalar yapmayın MVW diyin geçin" dedi.

MVC

• Bu klasik bir MVC gösterimidir.
• AngularJs'te Model yerinde $scope düşünülebilir.
• Bu nedenle MVVM deniliyor.

AngularJs'in sundukları

AngularJs neleri çözmez?

• Spagetti kod
• Performans sorunları
• SEO

• Spagetti kod
• Performans sorunları
• SEO

İki Yönlü Veri Bağlama

<div ng-app="">
  <div class="well">
    <label>Ad:</label>
    <input class="form-control" type="text" ng-model="adiniz" placeholder="Adınızı yazın">
    <h1>Selam {{adiniz}}!</h1>
  </div>
</div>

• Şimdi bunun neresi 2 yönlü diyeceksiniz?
• Veri inputtan scope'a bağlanıyor sonra scopetan div içine bağlanıyor.
• Yani veri controllerda da viewda da aynı anda kullanılabilir oluyor.

Module kavramı

<div ng-app="myApp">
    ...
  </div>

angular.module('myApp', ['ngResource', 'videoPlayer'])

• Constant, service, controller, directive eklenebilir.
• Yeniden kullnılabilir parçalar yaratmaya yarar.
• Bootstrap, select2 gibi kütüphanelerin AngularJs versiyonları modül olarak yazılmış.

Dependency Injection

angular.module('myApp', ['ngResource', 'videoPlayer'])

  .constant('ENDPOINT', 'https://api.kodgemisi.com/v2/')

  .factory('UserSyncService', ['$scope', 'ENDPOINT', function($scope, ENDPOINT){
    ...
  }])

  .controller('ProfileCtrl', ['$scope', 'UserSyncService', function($scope, userSyncService){
    ...
  }])

• Minify sorunları

Scope kavramı

• Prototypical inheritance

<div ng-app="">
  <div>
    <input type="text" ng-model="data">
    <h3>Root scope: {{data}}</h3>
  </div>
  
  <div ng-controller="FirstCtrl">
    <input type="text" ng-model="data">
    <h3>1. Controller: {{data}}</h3>
  </div>
  
  <div ng-controller="SecondCtrl">
    <input type="text" ng-model="data">
    <h3>2. Controller: {{data}}</h3>
  </div>
</div>

• Böyle bir yapımız olduğunu düşünelim.
• Her controller yeni bir child scope oluşturur.

Scope kavramı

• Prototypical inheritance

• Sırayla değer girin
• Burada prototypical inheritance nasıl çalışır diye anlatmayacağım.
• Yalnıca böyle bir şey var haberiniz olsun :)

AngularJs'in MVC kullanımı

Model

• Model inputtan veya AJAXtan gelir
• $scopea konulur
• Model üzerindeki değişiklikler izlenir

View

• HTML + Template
• {{ }} ng-bind ng-model
• String interpolation

• String interpolation bir çok dilde olan bir özellik.
• Bir string içindeki değişkenin, değişkenin değeriyle değiştirilmesidir.
• Önceki örnekte görmüştük: Selam {{adiniz}} demiştik.

Controller

• ViewModeli manipule eder
• DOM'a kesinlikle dokunmaz
• Her controllerın yeni "scope"u vardır
• Controller inheritance YOK!

• ViewModel dediğimiz ne burda? $scope
• Her controllerın yeni "scope"u vardır
• Chennemde yanarsınız

DOM etkileşimi ve directive kavramı

Directive

• DOM ile etkileşimin tek yolu
• ng-repeat ng-if ng-class ng-Bind
• Özelleştirilebilir, kendi directive'lerinizi yazın

Directive örneği

angular.module('SampleForDirective', [])
  .directive('toggle', function() {
    return function(scope, element, attrs) {
      element.addClass('btn-success').text('Açık');
      var on = true;

      element.on('click', function() {
        if(on)
          element.removeClass('btn-success').addClass('btn-danger').text('Kapalı');
        else
          element.removeClass('btn-danger').addClass('btn-success').text('Açık');

        on = !on;
      });
    };
  });

<button class="btn" toggle=""></button>

Directiveler her yerde

• Tag Attribute Class

<button class="btn" toggle=""></button>

<button class="btn toggle"></button>

<toggle></toggle>

AngularJs ve testler

• Hepimiz test driven development yapıyoruz değil mi?
• Test yazmayan kendini bilmez var mı aramız da?
• Hepimiz test yazıyoruz tabiki...
• İnş cnm yhaa
• Testler, ülkemizin kanayan yarası.
• Refactoring yapacağınız zaman çoook önemli.

Jasmine

describe('Test showcase', function() {
 
  describe('ProfileCtrl', function(){
 
    it('should instantiate "users" model with 2 users', function() {
      var scope = {};
      var ctrl = new ProfileCtrl(scope);
 
      expect(scope.users.length).toBe(2);
    });
  });
});

$ karma start karma-config.js 
INFO [karma]: Karma v0.10.5 server started at http://localhost:9876/
INFO [launcher]: Starting browser Chrome
INFO [Chromium 30.0.1599 (Ubuntu)]: Connected on socket GzV3EwULE_yqFCU5elUh
Chromium 30.0.1599 (Ubuntu): Executed 1 of 1 SUCCESS (0.14 secs / 0.023 secs)

Chromium 30.0.1599 (Ubuntu) Test showcase ProfileCtrl should instantiate "users" model with 2 users FAILED
  Expected 0 to be 2.
  Error: Expected 0 to be 2.
      at null.<anonymous> (/home/destan/dev/...samples/tests.js:9:34)
            </anonymous>

Sık yapılan hatalar

DOMa directive dışında müdahale

• Directive kullanın
• Controller doğru yer değil
• Testlerde zorluk

Angular'a dışarıdan müdehale

$.get('http://api.kodgemisi.com/v2/user/35', function(data) {
  $scope.user = data;
});

$.get('http://api.kodgemisi.com/v2/user/35', function(data) {
  $scope.$apply(function(){
    $scope.user = data;
  });
});

$http('http://api.kodgemisi.com/v2/user/35')
.success(function(data, status) {
  $scope.user = data;
})

Build-in fonksiyonları kullanın

{{Bunlar çıkmasın}}

<div>{{user.name}}</div>

<div ng-bind="user.name"></div>