Ember.js to biblioteka języka JavaScript, która pozwala programistom na sprawne budowanie aplikacji na podstawie znanego wzorca MVC (Model-View-Controller). Jej autorami są Yehuda Katz oraz Tom Dale a pierwsze wydanie ujawnione zostało w 2001 roku. Udostępnione zostało na licencji MIT. Ember.js sprawdza się przede wszystkim podczas tworzenia jednostronicowych aplikacji internetowych czyli jako SPA (Single Page Applications). Posiada wszelkie ułatwienia związane z pisaniem aplikacji na SPA, między innymi możemy tu wymienić: automatyczną aktualizację szablonu strony (template) czy router, a ponadto usprawnia automatyczne aktualizowanie szablonów czy dwustronne wiązanie danych. Ember.js skonstruowany jest dla programistów, którym zależy na produktywnej pracy. Zatem zaprojektowany został z myślą o ergonomii a pomoże nam w tym API, które sprawi, że programowanie będzie szybkie i przyjemne.
Na temat funkcjonalności warto wiedzieć, że w Ember.js podobnie jak w AngularJS, binding danych jest dwustronny a obiekty tworzy się za pomocą „Ember.Object.extend()”. Zatem wszystkie właściwości tak tworzonych obiektów są aktualizowane w sposób automatyczny. Odnośnie szablonów widoków, Ember.js wspiera mechanizm szablonowy, który może wcześniej być renderowany na serwerze. Często zwiększa to szybkość strony, zwłaszcza na urządzeniach z niską mocą obliczeniową. Podobnie jak w Backbone.js do obsługi szablonów wymagana jest biblioteka handlebarsJS. Niestety nie obsługuje załączania szablonów z zewnętrznych plików zatem zwykle są one przechowywane w jednym pliku HTML. Ember.js posiada wtyczkę, która zawiera udogodnienia do prostego tworzenia animacji widoku. Widoki natomiast wbudowane są w szablony i mogą służyć do prostych zdarzeń takich jak na przykład kliknięcie w akcje, która jest znacząca dla kontolera. Natomiast kontroler to obiekt, który przechowuje stan aplikacji czyli wszystkie dane, które zostały pobrane, zmodyfikowane, stworzone i inne tego typu dane. Składowanie danych w Ember.js czyli sposób komunikacji z serwerem opiera się na dostarczaniu przez framework własnych rozwiązań (RESTAdapter), które wymagają do działania właśnie serwisu „RESTowego”. Routing URL czy też obiekty-routery są zdecydowanie mocną stroną Ember.js. Odpowiadają one za mapowanie adresu URL na obiekt modelu, przekazując jednocześnie informację do kontrolera, który prezentuje ten obiekt i generuje dla niego właściwy szablon. Routing Embera pozwala programistom korzystać z bardzo rozbudowanego i w pełni konfigurowalnego modułu routingu.
Dużą zaletą Ember.js jest to, że potrafi znacznie przyśpieszyć proces przełączania między projektami/aplikacjami. Oprócz tego jako framework służący do tworzenia interaktywnych aplikacji internetowych, przez jego interaktywność możemy rozumieć wiele zachowań. Przykładowo w przeciwieństwie od aplikacji napisanej w sposób bardziej klasyczny, nie musimy sami pisać warstwy, która wysyła żądania AJAX w celu pobrania czy modyfikacji danych. Nie skupiamy się także na operacjach na DOM-nodach, czy na przechowywaniu danych pomiędzy akcjami użytkownika. Ember.js zdejmuje z programisty wiele uciążliwych aspektów tworzenia aplikacji. Odnośnie DOM – framework ten asynchronicznie aktualizuje modele. Wszelkie zmiany modeli nie wpływają bezpośrednio na aktualizacje widoku są wówczas ustawione w kolejkę i wyekspediowane jako grupa. Okazuję się to o wiele bardziej wydajne niż błyskawiczne aktualizacje widoku. Dodatkowo Ember.js wyposażony jest w wewnętrzne wprowadzenie specyfikacji Promises/A+. Promises to popularna alternatywa dla oddzwanianiu przy postępowaniu z odpowiedziami serwera. Oprócz tego Ember.js posiada różne popularne wtyczki, które wspierają walidację wejścia. Czyli są to wtyczki, które pomagają w walidacji wejścia klienta przed rozpoczęciem przetwarzania lub wysłania do serwera. Wprawdzie nie zastępuje to serwerowej walidacji ale może znacznie ulepszyć doznania użytkownika.
Ciekawostką jest, że przykładowymi witrynami, które wykorzystują framework Ember.js są między innymi: Groupon, Zendesk, Addepar czy Benefitcloud.
Przykładowy kod w Ember.js
Ember.js Przykład #1
import Ember from 'ember';
import config from './config/environment';
const Router = Ember.Router.extend({
location: config.locationType
});
Router.map(function() {
});
export default Router;
Ember.js Przykład #2
import { test } from 'qunit';
import moduleForAcceptance from 'super-rentals/tests/helpers/module-for-acceptance';
moduleForAcceptance('Acceptance | list-rentals');
test('visiting /list-rentals', function(assert) {
test('visiting /', function(assert) {
visit('/list-rentals');
visit('/');
andThen(function() {
assert.equal(currentURL(), '/list-rentals');
assert.equal(currentURL(), '/');
});
});
Ember.js Przykład #3
test('should filter the list of rentals by city.', function (assert) {
visit('/');
fillIn('.list-filter input', 'seattle');
keyEvent('.list-filter input', 'keyup', 69);
andThen(function () {
assert.equal(this.$('.listing').length, 1, "should show 1 listing");
assert.equal(this.$(".listing .location:contains('Seattle')").length, 1, "should contain 1 listing with location Seattle");
});
});