Category Archives: Javascript

Javascript import ve requeire farkı

6 Oca

Javascript dilinde import ve require anahtar kelimeleri, modülleri kod içerisine aktarmak için kullanılır. Modülleri yüklerken NodeJS tarafında require kullanılırken, Ecmascript 6 tarafında import kullanılır.

NodeJS de kullanılan require, modülleri senkron bir şekilde yükler. Yani modül yüklenene kadar kod bloke olur ve yükleme işleminden sonra kullanılabilir. Ecma script ile kullanılan import ise modülü asenkron olarak yükler ve kod yükleme sırasında bloke olmaz.

require ve import arasındaki temel fark, require sadece modül içeri aktarma işlemi sırasında kullanılırken, import hem tüm modülün içeri aktarımı, hem de ihtiyaç halinde bir modül içerisinden tek başına export edilmiş türlerin aktarımı için kullanılır. Tek başına export edilen türler birer fonksiyon, sabit, nesne olabilir.

require ile modül yükleme

Örneğin math modülünü require ile yüklemek için aşağıdaki komut kullanılır.

const math = require('math');

math modülüne ait tekil bir export edilmiş tipi yüklemek için: 

const log = require('math').log;

import ile modül yükleme

Örneğin math modülünün tümünü import ile yüklemek için aşağıdaki komut kullanılır.

import * as math from 'math';

math modülüne ait tekil bir export edilmiş tipi yüklemek için: 

import {log} from 'math';

math modülüne ait tekil olarak birden fazla export edilmiş tipi yüklemek için: 

import {log, factorial} from 'math';

import()

Math modülünün tanımlanması:

// math.js
export const pi = 3.14;
export const e = 2.71828;

Math modülünün calculate modülüne yüklenmesi.

// calculate.js
import { pi, e } from './math';
console.log(pi); // output 3.14
console.log(e); // output 2.71828

Asp.net MVC FileResult Dosyasını JQuery Ajax ile Yakalamak

1 Eyl

Asp.net mvc projelerinde dosya sonuçlarını kullanıcıya dönmek için action sonucunda File() metodu ile dönüş yapılabilmektedir.

Örneğin bir PDF için.

[HttpPos]
public FileContentResult Test(TestViewModel vm)
{
    var stream = new MemoryStream();
    //... add content to the stream.

    return File(stream.GetBuffer(), "application/pdf", "test.pdf");
}

Excel için;

[HttpPost]
public FileContentResult Test(TestViewModel vm)
{
    var stream = new MemoryStream();
    //... add content to the stream.

    return File(stream.GetBuffer(), "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", "File.xlsx");
}

Bu oluşturulan dosyaya javascript tarafından jquery ile request gönderilirken dikkat edilmesi gereken bir husus, jquery’nin dosyayı bozmasıdır. Benzer bir durum burada yaşanmıştır. Dosya indiriliyor fakat bozuk olduğu için excel tarafından açılamıyor.

Bunu düzeltmek için xhrFields alanında responseType olarak arraybufffer değeri verilmelidir.

$.ajax({
    url: '/server/url',
    type: 'POST',
    contentType: "application/json; charset=utf-8",
    xhrFields : {
	   responseType : 'arraybuffer'
    },
    data: JSON.stringify(jsonData),   
    success: function (data) {
        var blob = new Blob([data], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" });
        var downloadUrl = URL.createObjectURL(blob);
        var a = document.createElement("a");
        a.href = downloadUrl;
        a.download = "data.xls";
        a.click();
    },
});

Asp.net MVC web site oluşturma platformu olması dolayısı ile günümüzde çok sık kullanılmasa bile hala günümüzde yaygın olarak kullanılmaktadır. Dosya indirme konusunda internette epeyce aranmış ve çok fazla çözüm gösterilememiş bir konuya açılık getirmek istedim.

Javascript Callaback Hell Nedir?

16 Oca

Programlama dünyasında asenkron yani eş zamansız olarak tabir edilen fonksiyonlar, yürütülen diğer fonksiyonlara paralel olarak çalışırlar.

Neden asenkron?

Asenkron işlemler, kod içerisinde çalıştırılan bir fonksiyonun ne kadar zaman alınacağı veya ne zaman tamamlanacağı bilinmediği durumlarda tercih edilirler. Örneğin aşağıdaki işlemlerin ne kadar süreceği bilinemez;

  • API’den talepte bulunmak.
  • Dosya okuma ve yazma işlemleri.
  • Veritabanında işlem yapmak.
  • Email göndermek.

Asenkron fonksiyonlar “sen diğer işlemlere devam et, benim işim bittiğinde ben sana haber ederim” yönteminde çalışırlar. Asenkron fonksiyonlar bize haber etmek için callback diye adlandırılan fonksiyonları kullanılırlar.

setTimeout() örneği

Javascript programlamada asenkron işlemlere örnek olabilecek en basit fonksiyon setTimeout() fonksiyonudur. setTimeout(callback, miliseconds) fonksiyonu iki parametre alır. Parametrelerden biri işlem bittiğinde çalıştırılacak olan callback fonksiyonu, diğeri ne kadar bekleneceğidir. Belirlenen süre kadar bekledikten sonra, parametre olarak aldığı fonksiyonu çalıştırır.

function notify() {
  console.log("Notification!");
}

setTimeout(notify, 3000);

Örnekte, 3 saniye bekledikten sonra callback olarak belirlenen notify() fonksiyonu çalıştırılır.

Asenkron fonksiyonlar çağrıldığında, hemen ardından çalıştırılan kod asenkron fonksiyonun bitmesini beklemek zorunda değildir.

function notify() {
  console.log("Notification!");
}

setTimeout(notify, 3000);
console.log("Merhaba!");

Yukardaki örnekte sırayla;

  • Önce setTimeout() süreci başlatılır.
  • Konsola “Merhaba!” yazılır.
  • 3 saniye dolduktan sonra konsola “Notification!” yazılır.

Callback hell

Callback hell(cehennem) kavramı, callback fonksiyonlar içerisinde tekrar asenkron fonksiyonların ardı ardına çağırılmasıyla oluşan karışık ortama verilen isimdir.

İşlemler dizisi şu şekilde olsun:

  • Ayarlar dosyasını oku ve API url bilgisini al.
  • API url talebi gönder ve iş listesini al.
  • Listedeki iş listesini başka bir API’ye Post olarak gönder
fs.read("settings.json", function(error, result){
    http.get(result.toDoUrl, function(toDoResponse){
        toDoResponse.todos.forEach(item=> { 
             http.post(result.customerToDoUrl, item, 
                function(response){
                 console.log(response);
             })
        }); 
    }
})

İşlem adımı ne kadar fazlaysa iç içe geçen işlemler dizisi o kadar uzun olacaktır.

Javascript programlama dilinde callback hell’den kurtulabilmek ya da daha düzenli hale getirebilmek için Promise yöntemi uygulanmaya başlandı. Ancak bu sefer de promise hell oluşmaya başladı.

Bu sorunlardan bizi kurtaran modern javascript kavramı async/await olmuştur.

async/await

Yukarıdaki işlemi async/await ile aşağıdaki şekilde de kullanabiliriz.

const settings = await fs.read("settings.json");
const todoResponse = await http.get(result.toDoUrl);

todoResponse.todos.forEach(item => { 
     const response = await http.post(result.customerToDoUrl, item);
     console.log(response);
})

Document Object Model (DOM) Nedir?

18 Kas

Document Object Model (DOM), hem HTML hem de XML için bir uygulama arabirimidir(API). DOM Türkçe’de Belge Nesne Modeli olarak adlandırılabilir.

DOM tüm sayfayı, düğüm hiyerarşisinden oluşan bir belge olarak oluşturur. Bir HTML veya XML sayfasının her bölümü bir düğümden türetilmiştir. Bu düğümlerin her biri ayrı birer nesnedir.

<html>
   <head>
      <title>E-Ticaret</title>
   </head>
   <body>
      <h1>Kategoriler</h1>
   </body>
</html>

Bu kod, DOM kullanılarak bir düğüm hiyerarşisi olarak aşağıdaki şekilde çizilebilir. Bir web sayfası yüklendiğinde, internet tarayıcısı(Chrome, IE, Mozilla, vs) sayfanın DOM modelini oluşturur.

DOM yapısı, bir belgeyi temsil eden ağaç yapısını oluşturarak, geliştiricilere belgenin yapısı üzerinde kolay bir denetim yapabilmelerini sağlar. Hangi nesnenin hangi nesneye bağlı olduğu kolay bir şekilde öğrenilebilir. Ağaçtaki düğümler DOM API sayesinde kaldırılabilir veya ağaca yeni bir düğüm eklenebilir.

DOM ve Javascript İlişkisi

DOM JavaScript’e özgü değildir ve aslında pek çok başka dilde uygulanabildiğidir. Ancak Web tarayıcıları için DOM, ECMAScript kullanılarak uygulanmıştır ve artık JavaScript dilinin büyük bir bölümünü oluşturmaktadır. Javascript DOM ile dinamik HTML oluşturmak için daha etkili işlemler yapabilmektedir.

  • Sayfadaki tüm HTML öğelerini ve HTML attribute değerlerini değiştirebilir.
  • Sayfadaki tüm CSS stillerini değiştirebilir.
  • Mevcut HTML öğelerini ve özniteliklerini kaldırabilir.
  • Yeni HTML öğeleri ve öznitelikleri ekleyebilir.
  • Sayfadaki mevcut tüm HTML olaylarına yanıt verebilir.
  • Sayfada yeni HTML elementi ekleyebilir.

DOM Neden Gerekli Hale Gelmiştir?

Web uygulamalarının yaygınlaşmaya başladığı yıllarda Internet Explorer 4.0 ve Netscape Navigator 4.0 ile birlikte, geliştiriciler ilk kez bir Web sayfasının görünümünü ve içeriğini sayfayı yeniden yüklemeden değiştirebilir hale gelmişlerdi. DHTML (Dynamic HTML) doğmuştur. Bu olay web teknolojisinde adeta yeni bir sayfa açmıştı. Fakat yeni bir sorunu da beraberinde getiriyordu. Microsoft ve Netscape gibi ticari firmalar DHTML’yi geliştirme sürecinde kendi yollarından gittiler. Böylece Web geliştiricilerinin herhangi bir Web tarayıcısı tarafından çalıştırılabilen tek bir HTML sayfası yazabildikleri dönemi sona erdirdiler. Buradaki tehlike, Microsoft ve Netscape firmalarının önüne geçilmediği taktirde Web’in iki gruba bölünecek olmasıydı.

Web’in platform bağımsız doğasını korumak için bir adım atıldı. Web standartları oluşturmakla görevli olan World Wide Web Consortium (W3C), DOM üzerinde çalışmaları başlatmıştır. DOM W3C trafından üç bölümde oluşturulmuştur.

  • DOM Core
  • DOM XML
  • DOM HML

DOM zamana bağlı olarak seviyeler halinde gelişim göstermiştir.

DOM Level 1

1998 yılında W3C tarafından tavsiye edilmiştir tek amacı belgenin yapısını oluşturmaktır. İki modülden oluşur.

  • DOM Core: Bir belgenin herhangi bir bölümüne kolayca erişmeyi ve belgede düzenleme yapmayı sağlar.
  • DOM HTML: DOM Core genişletilerek HTML’e özgü nesneler ve yöntemler eklenmiş halidir.

DOM Level 2

Bu seviyede DOM’a fare ve kullanıcı arabirimi olayları(events) ve stil sayfaları yanında yeni modüller eklendi.

  • DOM Views: Belgenin CSS Stil’den önce ve CSS Stil’den sonraki görünümlerini izlemek için arayüzleri tanımlar.
  • DOM Events: Olaylar için arayüzleri tanımlar.
  • DOM Style: CSS tabanlı stilleri yönetmek için arayüzleri tanımlar.
  • DOM Traversal and Range – bir belge ağacında gezinmek ve düzenleme yapmak için arayüzleri tanımlar.

DOM Level 3

Bu seviyede, belgeleri tek tip bir şekilde yükleme ve kaydetme yöntemlerinin yanı sıra bir belgeyi doğrulama yöntemleri DOM’a eklenmiştir.

Kaynaklar
  • Professional JavaScript for Web Developers 3rd Edition, Nicholas C. Zakas
  • https://www.w3schools.com/js/js_htmldom.asp

Opnelayers Contribution (Katkı Sunma)

27 May

Opanleyers, harita uygulamaları geliştirmek amacıyla geliştirilen açık kaynak kodlu bir Javascript kütüphanesidir. Uygulama kendini şu şekilde ifade eder:

A high-performance, feature-packed library for all your mapping needs.

yani

Tüm harita ihtiyaçlarınız için yüksek performanslı, özelliklerle dolu bir kütüphane.

Açık kaynak kütüphane olduğu için tüm geliştiricilerin sunabileceği katkılara açıktır. Openlayers kütüphanesine katkıda bulunabilmek için aşağıdaki adımları izleyebilirsiniz.

Geliştirme ortamının hazırlanması

Geliştirme ortamı için öncelikle kütüphanenin fork edilmesi gerekmektedir. Github ortamında bir havuzun (repository) fork işlemi, o kodun kendi Github havuzunuza bir kopyasının alınmasıdır. Şu anda Openlayers 6.3.1 sürümü yayınlanmış durumdadır.

Gerekli Geliştirme Araçları

Bilgisayarınızda bulunması gereken minimum ihtiyaç listesi:

  • Git
  • Node.js (minimum 8 ve üstü)

Kodun indirilmesi

Fork işleminin ardından kendi Github hesabınızda Openlayers kütüphanseisnin bir kopyası oluşturulur. Bu kopyayı kendi bilgisayarınıza clone veya downlad şeklinde indirmeniz gerekmektedir.

Uygulamanın çlışabilmesi için, kod indirme işleminden sonra kod dizininde bir terminal açarak node bağımlılıklarını yüklemelisiniz. Bunu yapan komut:

$ npm install

Örnek uygulamanın çalıştırılması

Kodda bulunan örnek uygulamalarının çalıştırılıp internet tarayıcısında görüntülenebilmesi için gerekli komut:

$ npm run serve-examples

“serve-examples” script’i, package.json içerisinde tanımlanmıştır.

Testlerin çalıştırılması

Openlayers uygulaması test driven olarak geliştirilmiştir. Uygulamanın çalışabilir olması için tüm testlerin geçmiş olması gerekmektedir. Katkı sunduğunuz kod birimlerinin testlerinin yapılmış ve geçmiş olması gerekmektedir.

Testler bir kez çalıştırılması için gerekli komut:

$ npm test

Testleri geliştirme süreci boyunca sürekli çalıştırmak için gerekli komut:

$ npm run karma

Örnek uygulamalar

Openlayers örnek uygulamaları “examples” dizininde bulunmaktadır. Eklemek istediğiniz özelliklere ait örnek çalışma dosyalarını(html, js, css) “examples” dizininde oluşturabilirsiniz.

Pull Request

Openlayers katkı alma talebini pull requests (çekme isteği) ile gerçekleştirir. Pull request göndermeden önce kodun, aşağıdaki çekme isteği yönergesine uygun olduğundan emin olmalısınız.

Bir pull request yapmadan önce, neye katkıda bulunmak istediğinizi açıklayan bir issue oluşturmalısınız. Bu sayede yaptığınız pull request, fark edilir ve uygun olmayan bir şeye katkıda bulunmanız sağlanır. Geliştirici olarak açtığınız issue uygun görülürse, openlayers yetkilileri tarafından ilgili issue, pull request accepted şeklinde etiketlenir. Bu etiketleme işleminden sonra artık pull request gönderebilirsiniz.

Pull request talebi:

  • OpenLayers’ın kodlama stiline uygun olmalıdır.
  • Sürekli Entegrasyon sistemi(Continuous Integration system) tarafından otomatik olarak yürütülen entegrasyon testlerini geçmelidir.
  • Her pull request için tek bir sorun üzerinde çalışın.
  • İşlem geçmişi(commit history), kodda yapılan değişiklikler açıklar. Bu nedenle, binlerce satırı değiştirerek bunu tek bir commit ile açıklamak yerine, küçük, mantıksal ve anlaşılabilir işlemlere commit’ler uygulayın.
  • Kısa ve öz commit mesajları ekleyin.
  • Kodunuz otomatik olarak birleştirilebilir olmalıdır. Bazen master’da yapılan diğer değişiklikler, pull request (çekme isteğinizin) otomatik olarak birleştirilemeyeceği anlamına gelebilir.

Kaynak: https://github.com/openlayers/openlayers/blob/master/CONTRIBUTING.md

Javascript unary plus (+) operator

30 Haz

Javascript ve diğer programlama dillerinde artı (+) ya da plus (+) operatörü,  toplama işlemi için kullanılmaktadır. Ancak (+) operatörünün Javascript dilinde geliştiricilere avantaj sağlayan bir özelliği daha bulunmaktadır. (+) operatörü, önünde bulunduğu operand eğer sayı değilse, onu sayıya dönüştürmeye çalışır. Operatörün kullanımı şu şekildedir:

+degisken

Yani sadece değişkenin önüne bir (+) işareti eklenir.

Dönüştürülebilen Türler

(+) operatörü aşağıdaki türleri sayıya dönüştürebilir:

  • string (sayı olarak)
  • null
  • boolean
  • integer (pozitif veya negatif)
  • float (pozitif veya negatif)
  • 0x formatındaki onaltılık sayılar.
  • scientific (exponent)  bilimsel üslü sayılar.

Dönüştürülemeyen Türler

(+) operatörü, sayıya dönüştüremediği değerleri NaN olarak verir.

  • undefined
  • string (yazılar)

Örnek

console.log(+”09″);  // Output: 9

console.log(+null);  // Output: 0

console.log(+”7″);   // Output: 7

console.log(+”-7″);  // Output: -7

console.log(+”-3.14″);  // Output: -3.14

console.log(+”3.14″);  // Output: 3.14

console.log(+false);   // Output: 1

console.log(+false);  // Output: 0

console.log(+”0xFF”);  // Output: 255

console.log(+”123e-5″);  // Output: 0.00123

console.log(+”xxx”);   // Output: NaN

console.log(+”undefined”);   // Output: NaN

Sonuç

(+) operatörü yani unary plus operatörünün Javascript dilinde kullanımı örneklerle desteklenerek incelenmiştir. (+) operatörünün pek bilinmeyen ve kullanılmayan bir kullanımı anlatılmıştır.

RxJS Operatorler

29 Haz

RxJS API’nin önemli bir aktörü de Operatörlerdir. Operatörler, gözlemlenebilir nesneler için yardımcı işlemler olarak düşünülebilir. Her bir yardımcı işlem fonksiyonel programlama yöntemine göre fonksiyonlar halinde planlanmıştır. RxJS’de Operatörler 8 alt başlık halinde gruplandırılmıştır.

Bu başlıklar altında onlarca operatör bulunmaktadır. Buradan tüm operatörlere erişebilmek mümkündür. Bu yazıda popüler olanlardan bir kaçını aşağıdaki gibi kullanılmaktadır.

from()

Bir Observable nesne içerisine  array, promise veya iterable değerler eklemek için kullanılır.

concat()

Birden fazla Observable nesnesini bir dizi elemanı gibi sıraya dizer ve sırayla çalıştırır. Biri bitmeden diğerine geçmez. Bunu, biri bitmeden diğeri başlayamayan işlem sıralaması olarak düşünebiliriz.

Bu işlemin çıktısı aşağıdaki gibi olacaktır.

1, 2, 3, 4, 5, 6, 7, 8, 9

merge()

Concat işleminin benzeri olan bu operatörde, birden fazla Observable nesnesini bir dizi elemanı gibi sıraya dizer ancak işlemlerin sırayla yapılması beklenmez.

Bu işlemin çıktısı aşağıdaki gibi olacaktır.

 4, 5, 6, 7, 8, 9, 1, 2, 3

map()

Gözlenen verilerde değişiklik yapmak için kullanılabilir.

Bu işlemin çıktısı aşağıdaki gibi olacaktır.

 1, 4, 9

ajax()

Uzak sunucudan bir Ajax talebi yapmak için kullanılır.

Bu işlemin çıktısı sunucudan gelen JSON response olacaktır.

Sonuç

RxJS kütüphanesinde bulunan Operatorler konusu örnekler ile desteklenerek açıklanmıştır.

Openlayers vector layer içerisinde feature araması

8 Tem

Opanlayers 3 kütüphanesinde vektör verilerin gösterilebilmesi amacıyla ol.layer.Vector nesneleri kullanılmaktadır. Bu nesneler içerisinde property olarak  bulunan ve veri kaynağını işaret eden ol.source.Vector nesneleri, vektörlerin nereden ve nasıl alındığını temsil etmektedir. En basit şekliyle bir vektör gösterim temsili şu şekildedir.

var vectorLayer = new ol.layer.Vector({
    source: new ol.source.Vector({
       ulr:'data/file.geojson'
    })
});

Vektör katmanı otomatik olarak verileri kaynak nesnesi aracılığı ile kaynaktan yükleyebilmektedir. Yuakrıdaki örnekte hedef veriler bir *.geojson dosyasında bulunmaktadır.

Başka bir kaynaktan elde edilen bir geometrik verinin katman içerisinde bulunup bulunmadığı bilgisi ya da arama metodu şu anda Openlayers kütüphanesinde bulunmamaktadır. Örneğin eczanelerin konumlarının (Lon, Lat) şeklinde bulunduğu bir katman olsun. Başka bir kaynaktan gelen tek bir noktanın (Lon,Lat) bu katman içerisinde bulunup bulunmadığını araştırmak istiyor olalım. Bu durumda ilk kullanılacak yöntemlerden biri geometrik verilerin WKT biçimlerini karşılaştırması olabilir. Bir noktanın WKT biçimi şu şekildedir:

     POINT(-71.064544 42.28787)

Bir katman içerisinde bir geojson nesnesinin arandığını varsayalım. Bu işlemi gerçekleştiren fonksiyonu şu şekilde hazırlayabiliriz.

var isGeojsonExistInLayer = function (layer, geojson) {
    var isExist = undefined;

    var feature = (new ol.format.GeoJSON()).readFeature(geojson);

    var formatWKT = new ol.format.WKT();
    var wktNew = formatWKT.writeGeometry(feature.getGeometry());

    if(angular.isArray(layer.getSource().getFeatures())){
        angular.forEach(layer.getSource().getFeatures(), function (item) {
            var wktExisting = formatWKT.writeGeometry(item.getGeometry());

            if (wktExisting === wktNew) {
                isExist = item;
            }
        });
    }

    return isExist;
};

Bu fonksiyonda kullanılan Foreach döngüsü angularjs kütüphanesine aittir. Uygulama kodları Openlayers v4.0.1 kütüphanesi kullanılarak hazırlanmıştır.

Angular 1.x Sonrası ve Angular 2

25 Oca

Google tarafından geliştirilen AngularJS geliştirme çatısında AngularJS 1.x ve Angular2 şeklinde bir ayrıma gidildi. Bu ayrım yaklaşık iki sene önce başladı ve bugün sonuçlarını değerlendirme fırsatım oldu.

Stack Overflow tarafından 2015-2016 yılında ölçülen ve 50.000 geliştiricinin katıldığı anket sonuçlarına göre ortaya çıkan teknoloji eğilimleri aşağıdaki grafikteki gibidir. Bu anket sonucunu paylaşmamın sebebi, geliştiricisi olduğum bir javascript kütüphanesi olan Angularjs tarafında yaşanan gelişmelerin sonucunu yansıtabilmektir.

Stack Overflow Trending Tech Anketi
Stack Overflow Trending Tech Anketi

 

Bu sonuçlara göre Facebook şirketi tarafından geliştirilen React kütüphanesinin son yıllarda önemli oranda bir geliştiriciyi kendine çektiği görülmektedir. Buna rağmen Google tarafından geliştirilen Angularjs kütüphanesi epeyce gerilemiş durumda.

react-angularjs-trends
Angularjs ve React Google arama trendleri

 

Google trendleri göz önüne alındığında son zamanlarda Angularjs ve React arama oranlarında yine React kütüphanesine olan ilginin arttığı görülmektedir.

Angularjs gibi kullanışlı bir kütüphaneye olan ilginin bu kadar gerilemesinin nedenlerinden biri Angular 2 sürümüyle yeni bir yola girmesidir. Şüphesiz daha performanslı ve daha hafif bir ürün ortaya koymak amacıyla Google tarafından böyle bir adım atılmıştır. Hem TypeScript dilinin hem ECMAscript 6 dilinin gücünden faydalanılmıştır. Ancak Angular 2 sürümü, geliştiricilere TypeScript dilini de bilmeyi zorunlu kılan bir ortam sunmuştur. Yani saf javascript bilgisi ile Angular 2 geliştirme yapılamamaktadır. Oysa Angularjs 1.x sürümlerinde saf javascript bilgisi yeterlidir.

Angular 2 sürümünün kullanıcılar tarafından sıcak bir şekilde karşılanmamasının bir diğer neden de geriye dönük uyumluluğunun olmamasıdır. Bu durum, geliştiricileri bir yol ayrımına getirmiştir. Angularjs 1.x ile geliştirilmiş uygulamalarınızı korumak ve devam etmek mi, yoksa geriye dönük olarak tüm uygulamalarınızı Angular 2 ile yeniden yazmak mı? Bu durum, Angular desteği sunan geliştirici topluluklarını da ikiye bölmüş durumdadır. Bu durumun sonucu zamana bağlı olarak görülecektir.

Şüphesiz teknolojik evrimin büyük bir hızla yaşandığı yıllardayız. Belkide bir kaç sene sonra Angular ve React kütüphenelerinin pabucunu dama atacak ve yerlerine yeni kütüphaneler üretilecektir. Hani bir zamanlar frontend geliştirme tarafında  popüler olan Flash, Java Flex, Silverlight’ta olduğu gibi. Bu elbette kaçınılmaz bir gelişim sürecidir. Ancak şirketlerin kendi ürünlerini kullananlarının önüne engel çıkarmasına şahsen bir anlam verebilmiş değilim. Bu da benim kişisel görüşümdür.

Angularjs Emit ve Broadcast

7 Oca

Angularjs uygulamalarında Dom elemanlarını haberdar etmek için kullanılan iki yöntemden biri broadcast diğeri de emit metotlarıdır.

Broadcast, root scope dan başlayarak bütün alt scope’ları yaydığı bilgiden haberdar edilebilir. Aşağıdaki resimde ifade edildiği şekli ile inceleyecek olursak, çalışma zamanında ilk MapController nesnesi Dom üzerine yerleştiğinde hiyerarşik olarak üst scope’dan aşağı doğru tüm scope’ları haberdar etmektedir.

Emit, yönteminde ise resimde görüldüğü üzere sadece parent scope’lar bilgilendirilir.