ANGULARJS İLE
BÜYÜK ÖLÇEKLİ UYGULAMA GELİŞTİRME

 

Armağan Amcalar

PHPKonf, Istanbul

26 Temmuz 2015

Ben Kimim?

Armağan Amcalar

Startup Kitchen Kurucu ortak, Baş Yazılım Mimarı
Lonca Kurucu, Kethüda

 

Hobi projeleri

pedals.io
trax.io

AngularJS ile geliştirdiğimiz projeler

Web

Line.do

trax.io

İşte Oyun Yönetim Paneli

Tuşla Yönetim Paneli

Phonegap

Tuşla

Dinlet.io

Node-webkit

Dinlet.io

s3drive

Büyük ölçek ne kadar büyük?

Kodun satır sayısı

Geliştirici sayısı

Geliştirme süresi

Üçüncü partilerle entegrasyon

Kullanıcı sayısı

Problemler

Çok kod

Uzun geliştirme süresi

Farklı seviyelerdeki takım üyeleri

Standartların eksikliği

Performans

Karmaşıklık

Düzen

Framework seçimi

Öğrenme ve uygulama kolaylığı

Yaygınlık

Problem çözme

Dayatılan yapılar ve genel mimari

Gelecek güncellemeler

Performans

Görsel tatmin

Neden AngularJS?

Kolay görünüyor (büyülü!)

Gelişmiş kullanım kılavuzu

Geniş kullanıcı topluluğu

Geniş kütüphane desteği

Google

Neden AngularJS değil?

Karmaşık altyapı ve kavramlar

Anlaşılması güç hatalar

Berbat hata ayıklama deneyimi

Çirkin kod yazmaya yeterli zemin

Düşük sürdürülebilirlik

Yanlış yönlendirici kaynaklar (versiyon farklılıkları)

Çözmesi çok zor performans problemleri

Birden çok platformda kullanamama

AngularJS 2.0

AngularJS'i bırakıp tartJS'e geçtikten sonra projeyi daha çok sevmeye başladım!

— M. D. (26)

 

Ben seviyorum HTML içinde logic'i. Angular'ı kontrol edebiliyorsan güzel. Bundan 6 ay önce AngularJS ile yazdığım kodu zor anlıyorum şu an. Yani çok düzenli bir yapı değilse maintain etmek ölüm.

— M. T. (25)

İtiraflar

Genel yazılım mimarisi

MVC mimarisi

Domain Driven Design

Event Driven Programming

Modülerlik

Çok katman soyutlama

Dikkat edilecekler

Dosya yapılanmaları

Karmaşıklık yönetimi

Modüler yapı

SOLID prensipleri

Tekrar kullanılabilirlik

Sürdürülebilirlik

AngularJS yapıları

Module

Service

Controller

Directive

Filter

Component

İyi AngularJS mimarisi

Uygulamanın farklı bölümleri için farklı modüller

Domain modelleri için servisler

Inheritance, mixin gibi kavramlar kullanılmıyor

Kod paylaşımı için servisler

Küçük controller'ler

Küçük template'ler

Mümkün olduğunca çok sayıda component

Modüller

Kötü fikir: tek modül

var app = angular.module('myApp', ['ngRoute', 'ngResource']);

app.controller('LoginController', ['$scope', function($scope) {}]);
app.controller('ContentController', ['$scope', function($scope) {}]);

Modüller

İyi fikir: anlamlı modüller

var account = angular.module('myApp.AccountModule', []);
var backoffice = angular.module('myApp.BackofficeModule', []);
var content = angular.module('myApp.ContentModule', []);

account.controller('LoginController', ['$scope', function($scope) {}]);
content.controller('ContentController', ['$scope', function($scope) {}]);

var app = angular.module('myApp', ['myApp.AccountModule', 'myApp.BackofficeModule', 
    'myApp.ContentModule', 'ngRoute', 'ngResource']);

Servisler ve modeller

İş mantığı ve veri iletişimi ayrılmalı

Veri iletişimi için ngResource ile temel katman modeller

İş mantığı için ilk katmanla konuşan ikinci katman modeller

Çeşitli yardımcı servisler

Örnek servisler

Veri iletişimi katmanında REST uçlarına uygun

Bütün $http isteklerini barındırır

Örn. AccountService, ContentService

DDD'deki servis katmanına benzer

Örnek modeller

İş mantığı için ilk katmandaki servisleri kullanan diğer servisler

Örn. LoginService, UserService, ACLService, VideoService, TweetService

DDD'deki Domain Model kavramına benzer

Örnek servisler

Yardımcı servislerle kod paylaşımı

Örn. DOM manipülasyonu, uygulama içi kısa fonksiyonlar, dış kütüphaneler

Controller'ler

Mümkün olduğunca kısa

DOM'dan tamamen bağımsız

Sunucu ile konuşmaz

Veri saklamaz

Bir ya da bir kaç ikinci katman servis ve yardımcı servislerle haberleşir

Template'ler

Mümkün olduğunca kısa

Mantık barındırmaz!

 

Bir kez bind edilmiş

 

ng-show/hide yerine ng-if kullanır

<div ng-show={{user.isEditor || content.owner.id == user.id}}>delete</div>
<div>{{::content.owner.name}}</div>

AngularJS component'leri

Bir fonksiyonu yerine getirmek için kullanılan directive tabanlı, ufak boyutlu, tekrar kullanılabilir yapılar

Web Components'a hazırlanmak

Klasör dizimi

Directive

s3d.directive('buckets', function() {
    return {
        restrict: 'E',
        templateUrl: 'components/buckets/buckets.html',
        controller: 'BucketsController'
    };
});

Controller

s3d.controller('BucketsController', function($scope, AWSService) {
    AWSService.listBuckets(function(err, buckets) {
        $scope.buckets = buckets.Buckets;
        $scope.$digest();
    });

    $scope.setCurrentBucket = function(bucket) {
        $scope.currentBucket = bucket.Name;
        AWSService.setCurrentBucket(bucket.Name);
    }
});

CSS

buckets {
    display: block;
    margin-top: 40px;
    text-align: center;
}

bucket {
    display: inline-block;
    padding: 20px;
    width: 120px;
    text-align: center;
    vertical-align: top;
    border-radius: 2px;
    word-break: break-word;
    cursor: pointer;
}

bucket.selected,
bucket:hover {
    background: rgba(0,0,0,0.1);
    -webkit-transition: background 0.2s;
}

buckets h2 {
    line-height: 106px;
}

.icon-bucket {
    margin: 0 0 20px;
    font-size: 30px;
    display: block;
}

buckets .icon-spin2 {
    -webkit-transform-origin: 48% 50%;
}

HTML

<h2 ng-if="!buckets.length">
    <i class="icon-spin2"></i>Loading buckets...
</h2>
<bucket ng-repeat="bucket in buckets" ng-click="setCurrentBucket(bucket)"
    ng-class="{selected: bucket.Name == currentBucket}">
    <i class="icon-bucket"></i>
    {{bucket.Name}}
</bucket>

Örnek

İpuçları

Kodun boyutu artsa da karmaşıklığı artmamalı

Build araçları ile bütün kodunuzu birleştirin

$watch, $apply gibi araçları dikkatli kullanın

Tekil binding'ler kullanın

Binding'lerde fonksiyon kullanmayın

Kod parçaları arasındaki bağımlılığı azaltmak için component'leri ve olay güdümlü mimariyi tercih edin

İpuçları

Controller'da view durumu ile ilgili işlem yapmaktan çekinmeyin

Kod bileşenlerini kısa tutun

Bileşen bağımlılık sayılarını kontrol edin

Kod yazım standartlarınızı belirleyin ve takip edin

Kod review süreci uygulayın

Batarang ile scope dağılımına dikkat edin

Çeşitli sayaçlarla kodunuzun işleyişini inceleyin

 

https://github.com/johnpapa/angular-styleguide

AngularJS 2

Component temelli, React benzeri mimari

Yepyeni (berbat) TypeScript sentaksı

Alışılmadık (berbat) ES5 sentaksı

Alışılmadık değişiklikler:

—$scope, controller, service, $digest yok

Daha karmaşık mimari

WebComponents desteği

Mevcut Angular uygulamalarını geçirmek zorlu

 

Örnek

https://angular.io/docs/js/latest/guide/making-components.html

Sonuç

Her seçim bir kaybediştir

AngularJS büyük ölçekli uygulamaların problemlerini azaltmaz

Karmaşıklık arttıkça uygulama geliştirme zorlaşır

AngularJS dikkatli kullanılırsa component tabanlı mimariyi zevkli hale getirir

Bazı okumalar

Teşekkürler!

Armağan Amcalar

hello@arm.ag
twitter: @dashersw
github: dashersw
blog: arm.ag

AngularJS ile Büyük Ölçekli Uygulama Geliştirme

By Armağan Amcalar

AngularJS ile Büyük Ölçekli Uygulama Geliştirme

AngularJS ilk bakışta kolay kullanımlı bir framework olsa da, büyük projeler için diğer her framework kadar zorlu. Bu konuşmada kompleksiteyi artırmadan yıllarca geliştirme yapabileceğiniz AngularJS mimarilerinden bahsedeceğiz.

  • 5,283