AngularJS Bootcamp'te yaptığım Neden Backbone.js'ten AngularJS'e Geçtik? adlı sunumum.

1. Neden Backbone.js’ten
AngularJS’e geçtik?
Ömer Büyükoğlu
Web Team Lead
Twitter: Buyomer
GitHub: Buyomer
2014

2. vs

3. vs
Sebepler:
• Uygulamanın okunulabilir ve geliştirilebilir olmasını
sağlamak.
• Single Page Application (SPA) geliştirerek duyarlı ve hızlı
bir uygulama geliştirmek.
• Test edilebilir kod yazmak.
MVW*’a Gecis
*Model View Whatever

4. vs
Uygulamanın okunulabilir ve geliştirilebilir olmasını sağlamak.

5. vs
Uygulamanın okunulabilir ve geliştirilebilir olmasını sağlamak.

6. vs
Uygulamanın okunulabilir ve geliştirilebilir olmasını sağlamak.

7. Single Page Application (SPA) geliştirerek duyarlı ve hızlı bir
uygulama geliştirmek.
Web SunucuKullanıcı
URL ile sunucuya istek
Web sayfası & tüm kütüphaneWeb sayfası & tüm kütüphane
http://www
vs
Geleneksel Web Siteleri

8. Single Page Application (SPA) geliştirerek duyarlı ve hızlı bir
uygulama geliştirmek.
Web SunucuKullanıcı
Web sayfası & tüm kütüphane
Sayfada bir linke tıklanırsa
Web sayfası & tüm kütüphane
http://www
vs
Geleneksel Web Siteleri

9. Single Page Application (SPA) geliştirerek duyarlı ve hızlı bir
uygulama geliştirmek.
vs
API

10. Single Page Application (SPA) geliştirerek duyarlı ve hızlı bir
uygulama geliştirmek.
Web SunucuKullanıcı
URL ile sunucuya istek
Web sayfası & tüm kütüphane
http://www
vs
Single Page Application

11. Single Page Application (SPA) geliştirerek duyarlı ve hızlı bir
uygulama geliştirmek.
Web SunucuKullanıcı
Sayfada bir linke tıklanırsa
Sadece Data
http://www
vs
Single Page Application

12. Test edilebilir kod yazmak.
vs
Test yazmak neden önemlidir?
• Daha iyi kod yazmanızı sağlar.
• Hata oluştuğunda geri dönüp problemi tespit etmeyi
kolaylaştırır.
• Projenin kalitesini arttırır.
• Deployment süreçlerini hızlandırır.

13. Hangi tarafı seçmeliyiz?
vs

14. Öğrenme ve Adaptasyon Süreci
vs

15. Boyut
Taban 6.4kb 81kb
Şablon
*Prodüksiyon versiyonları
4.9kb (underscore.js) Dahili
Data Adapter 32kb (jQuery) Dahili
Destek 17kb (json2.js) -
Toplam 60.3kb 81kb
*

16. Topluluk ve Trendler

17. Routers
var App = Backbone.Router.extend({
routes: {
“home": "home",
“search/:query": "search"
},
home: function() {
this.changeView(new App.views.Home());
},
changeView = function(view) {
if ((currentView) != null) {
currentView.remove();
}
this.currentView = view;
$("#container").html(this.currentView.el);
};
});

18. Routers
var App = angular.module()
.config(function($routeProvider) {
$routeProvider
.when('/', {
controller:'homeCtrl',
templateUrl:'home.html'
})
.when('/user/:userId', {
controller:'profileCtrl',
templateUrl:'profile.html'
})
})
});

19. Models
var App.models.User = Backbone.Model.extend({
urlRoot : '/user'
});
App.User = {}
$resource(‘/api/user/:id’, {id: ‘user_id’})
$http.get(“/api/user”, {id: ‘user_id’})

20. Views/Controllers
var App.views.Alertbox = Backbone.View.extend({
template: _.template(‘alertbox’),
events = {
'click a.alert_button’: 'alertbox',
};
alertbox = function() {
alert(“Hello World!”);
};
});

21. Views/Controllers
alertbox.html
App.controller('alertCtrl', ['$scope', function($scope) {
$scope.alertbox = function() {
alert(‘Hello World!’)
});
}]);
<div ng-controller=“alertCtrl”>
<a id=“alert button” ng-click=“alertbox()”>Uyari</div>
</div>
<input type=“text” ng-focus=“alertbox()”/>

22. Views/Controllers
<div class=“username”>
<span> <%= username %> </span>
</div>
<div class=“username”>
<span> {{usermane}} </span>
</div>

23. Sonuç?

24. Sonuç?
+ Ozgur birakmasi
+ Basit
- Ozgur birakmasi
- Ogrenme
- Takim halinde calismak zor
- jQuery Kutuphaneleri
+ Kurallari var
+ Takim halinde calismak
+ Direktif Kutuphaneleri
+ Framework
- Library

25. Why you don’t use AngularJS?

26. 2014
Teşekkürler
Ömer Büyükoğlu
Web Team Lead
Twitter: Buyomer
GitHub: Buyomer
SlideShare: Buyomer