Armağan Amcalar PRO
Armagan is the founder of Coyotiv GmbH, and is currently on a mission to bring a scalable and nimble engineering culture to startups and enterprises. Armagan is a public speaker, a mentor and a lecturer.
Armağan Amcalar
PHPKonf, Istanbul
26 Temmuz 2015
Line.do
trax.io
İşte Oyun Yönetim Paneli
Tuşla Yönetim Paneli
Tuşla
Dinlet.io
Dinlet.io
s3drive
Kodun satır sayısı
Geliştirici sayısı
Geliştirme süresi
Üçüncü partilerle entegrasyon
Kullanıcı sayısı
Çok kod
Uzun geliştirme süresi
Farklı seviyelerdeki takım üyeleri
Standartların eksikliği
Performans
Karmaşıklık
Düzen
Öğrenme ve uygulama kolaylığı
Yaygınlık
Problem çözme
Dayatılan yapılar ve genel mimari
Gelecek güncellemeler
Performans
Görsel tatmin
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
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)
MVC mimarisi
Domain Driven Design
Event Driven Programming
Modülerlik
Çok katman soyutlama
Dosya yapılanmaları
Karmaşıklık yönetimi
Modüler yapı
SOLID prensipleri
Tekrar kullanılabilirlik
Sürdürülebilirlik
Module
Service
Controller
Directive
Filter
Component
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
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) {}]);
İ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']);
İş 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
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
İş mantığı için ilk katmandaki servisleri kullanan diğer servisler
Örn. LoginService, UserService, ACLService, VideoService, TweetService
DDD'deki Domain Model kavramına benzer
Yardımcı servislerle kod paylaşımı
Örn. DOM manipülasyonu, uygulama içi kısa fonksiyonlar, dış kütüphaneler
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
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>
Bir fonksiyonu yerine getirmek için kullanılan directive tabanlı, ufak boyutlu, tekrar kullanılabilir yapılar
Web Components'a hazırlanmak
s3d.directive('buckets', function() {
return {
restrict: 'E',
templateUrl: 'components/buckets/buckets.html',
controller: 'BucketsController'
};
});
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);
}
});
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%;
}
<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>
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
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
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
https://angular.io/docs/js/latest/guide/making-components.html
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
http://blog.ninja-squad.com/2014/12/15/what-is-coming-in-angularjs-1.4/
https://www.airpair.com/angularjs/posts/component-based-angularjs-directives
http://chariotsolutions.com/blog/post/new-angular-router-simple-example/
http://blog.thoughtram.io/angularjs/2015/01/02/exploring-angular-1.3-bindToController.html
http://angularjs.blogspot.com.tr/2015/03/forms-in-angular-2.html
Armağan Amcalar
hello@arm.ag
twitter: @dashersw
github: dashersw
blog: arm.ag
By Armağan Amcalar
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.
Armagan is the founder of Coyotiv GmbH, and is currently on a mission to bring a scalable and nimble engineering culture to startups and enterprises. Armagan is a public speaker, a mentor and a lecturer.