"Konfigürasyon yerine kural" yaklaşımını benimseyen, uzun ömürlü ve büyük ölçekli uygulamalar geliştirmek için tasarlanmış kapsamlı JavaScript framework'ü.
Güçlü standartlar sayesinde gereksiz kod yazımını (boilerplate) azaltır ve takım çalışmasını kolaylaştırır.
Proje oluşturma, test etme, derleme ve bileşen ekleme işlemlerini otomatikleştiren çok güçlü komut satırı aracı.
Mantığı asgari düzeyde tutarak okunabilir ve ifade gücü yüksek HTML şablonları sunar.
Yerleşik veri yönetim kütüphanesi; API'ler ile modelleri sorunsuz şekilde senkronize eder.
URL odaklı mimarisiyle, karmaşık iç içe görünümleri ve uygulama durumunu (state) mükemmel yönetir.
DOM güncellemelerini son derece hızlı yapan, modern ve hafif bir render motoru (Glimmer VM).
Not: Ember.js güçlü bir derleme aşamasına (build step) ihtiyaç duyar. Aşağıdaki demolar, Ember'ın temel konseptlerini açıklamak için hazırlanmış simülasyonlardır.
Ember, kullanıcı arayüzünü oluşturmak için Handlebars (.hbs) kullanır. Bileşenler <Component /> sözdizimi ile çağrılır, veriler ise {{deger}} şeklinde basılır.
{ isim: "Ember Geliştiricisi", diller: ["JavaScript", "HTML", "CSS"], aktif: true }
// app/components/profile-card.js
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';
export default class ProfileCardComponent extends Component {
@tracked isim = 'Ember Geliştiricisi';
@tracked aktif = true;
diller = ['JavaScript', 'HTML', 'CSS'];
@action
toggleDurum() {
this.aktif = !this.aktif;
}
}
Glimmer bileşenleri, oluşturulma ve yok edilme süreçlerinde belirli metotları (hook) çalıştırır.
// Modern Ember (Glimmer) bileşenlerinde klasik lifecycle metotları
// yerine Element Modifiers kullanılır.
// app/components/my-component.js
import Component from '@glimmer/component';
export default class MyComponent extends Component {
constructor() {
super(...arguments);
console.log('1. Bileşen sınıfı başlatıldı');
}
}
// app/components/my-component.hbs
<div
{{did-insert this.setupDOM}}
{{will-destroy this.teardownDOM}}
>
Bileşen İçeriği
</div>
Ember.js URL odaklıdır. Router URL'yi okur, ilgili Route dosyasını bulur, veriyi çeker ve Template'i Controller ile birlikte render eder.
Ember uygulamasına hoş geldiniz!
// app/router.js
Router.map(function () {
this.route('posts', function() {
this.route('post', { path: '/:post_id' });
});
this.route('about');
});
// app/routes/posts/post.js
import Route from '@ember/routing/route';
import { service } from '@ember/service';
export default class PostRoute extends Route {
@service store;
// URL'den gelen id (post_id) parametresini alır
model(params) {
return this.store.findRecord('post', params.post_id);
}
}
Ember Data, backend verilerinizi (REST veya JSON:API) uygulamanızda yönetmenizi sağlayan yerleşik ORM benzeri bir yapıdır.
| ID | İsim | Rol |
|---|---|---|
| Veri yok. Butona tıklayın. | ||
// 1. Model Tanımlaması (app/models/kullanici.js)
import Model, { attr } from '@ember-data/model';
export default class KullaniciModel extends Model {
@attr('string') isim;
@attr('string') rol;
}
// 2. Route'da Veri Çekme (app/routes/kullanicilar.js)
import Route from '@ember/routing/route';
import { service } from '@ember/service';
export default class KullanicilarRoute extends Route {
@service store;
model() {
// API'ye GET isteği atar (örn: /api/kullanicis)
return this.store.findAll('kullanici');
}
}
Ember'ın geriye dönük uyumluluk politikası, projelerin yıllarca sorunsuz güncellenmesine olanak tanır.
Çok sayıda route, karmaşık durum yönetimi (state management) ve performans gerektiren büyük ölçekli Single Page Application'lar.
"Ember Way" standartları sayesinde, projeye yeni katılan bir geliştirici dosya yapısını ve mimariyi anında kavrar.