Jakiś czas temu kupiłem książkę „Ember.js dla webdeveloperów”, która zaraz po zakupie wylądowała na półce. Miała czekać na „swoją kolej”. Moim głównym zainteresowaniem i podstawowym „narzędziem” był zawsze Angular. Jendak przecież nie samym Angularem człowiek żyje 🙂 W końcu i Ember doczekał się zaszczytu poznania jego możliwości. Postanowiłem, że zanim rozpocznę ciężką naukę nowego frameworka, zbiorę trochę materiałów na jego temat. Z racji tego, że 12 czerwca pojawił się Ember 2.0 rozsądniej było rozpocząć naukę od najnowszej wersji i tym sposobem książka wróciła z powrotem na półkę.

Ember w wersji 1.x opierał się o wzorzec MVC (Model View Controller) i trochę się to zmieniło od wersji 2.0. Nowym elementem w blokowym środowisku jakim charakteryzuje się Ember są komponenty. Pozwalają one na zdefiniowanie własnych znaczników HTML, specyficznych dla aplikacji oraz implementacja ich zachowania przy pomocy JavaScript. Implementacja komponentów w Ember jest bardzo bliska stanadardom W3C Web Component. Mimo, że w wersji 2.0 nadal dostępne są kontrolery i widoki (Ember.Controller oraz Ember.View), mają one zostać całkowicie zastąpione przez Ember.Component.

Wg. mnie ogromnym plusem Ember jest wspaniałe narzędzie jakim jest ember-cli. Jest to narzędzie do zarządzania generowaniem kodu oraz przepływem sterowania w aplikacji Ember. Aby je zainstalować, należy w konsoli wydać polecenie:

npm install -g ember-cli

Warto również zainstalować narzędzie jakim jest watchman (link), ponieważ znacznie poprawia wydajność obserwacji zmian w plikach.
Po zainstalowaniu ember-cli możemy utworzyć naszą pierwszą aplikację wpisując polecenie:

ember new nazwa_aplikacji

Ember CLI domyślnie instaluje framework w wersji 1.13.11 oraz Ember Data (kolejne ciekawe narzędzie – ale o tym kiedy indziej) w wersji 1.13.15. Musimy zatem poprawić zależności w pliku bower.json.  W tym celu dla „ember” oraz „ember-data” wpisujemy "^2.0.0" aby zainstalować ich najnowsze wersje.

 

{
  "name": "test-app",
  "dependencies": {
    "ember": "^2.0.0",
    "ember-cli-shims": "0.0.6",
    "ember-cli-test-loader": "0.2.1",
    "ember-data": "^2.0.0",
    "ember-load-initializers": "0.1.7",
    "ember-qunit": "0.4.16",
    "ember-qunit-notifications": "0.1.0",
    "ember-resolver": "~0.1.20",
    "jquery": "^1.11.3",
    "loader.js": "ember-cli/loader.js#3.4.0",
    "qunit": "~1.20.0"
  }
}

 

 

Teraz wpisujemy komendę:

bower install

W przypadku zapytania o zależności, wybieramy oczywiście wersję 2.x

Twórcy Ember kładą główny nacisk na konwencję – zgodnie z ich filozofią Convention over configuration (konwencja ponad konfigurację). Można to zauważyć przyglądając się strukturze folderów, którą utworzył dla nas ember-cli. Wszystkie elementy aplikacji mają swoje miejsce. Jest to według mnie kolejny duży plus tego frameworka i nie ukrywam, że przez to krzywo spojrzałem na swojego faworyta jakim jest Angular 🙂

foldery_ember
Struktura folderów Ember.js wygenerowana przez ember-cli

Nietrudno się domyślić, że główne pliki naszej aplikacji znajdują się w folderze „app”.

Czas uruchomić naszą aplikację wykorzystując do tego wbudowany w Ember CLI serwer. Wydajemy zatem polecenie:

ember serve

następnie w przeglądarce wpisujemy adres plus port, na którym Ember uruchamia domyślnie nasz serwer – http://localhost:4200/ i możemy podziwiać jak Ember się z nami wita 🙂

hello-ember

 

 

Dokonajmy pierwszy zmian. Otwieramy zatem plik app/templates/application.hbs i zmieńmy „Welcome to Ember” na „Hi Ember 2.0!”.

 

<h2 id="title">Hi Ember 2.0!</h2>

{{outlet}}

 

 

Jak tylko zapiszemy plik, ember-cli zbuduje od nowa aplikację i odświeży automatycznie okno przeglądarki.

Ember do generowania szablonów korzysta z handlebars (stąd rozszerzenie *.hbs). Tajemniczy {{outlet}}, który jest w pliku applications.hbs to specjalne miejsce gdzie mogą być wstawiane kolejne szablony. Na przykład, kiedy ładujemy aplikację, domyślnie wywołujemy ścieżkę dla index. Ember szuka zatem szablonu index.hbs i jeżeli go znajdzie, renderuje go w miejscu {{outlet}}. Jeżeli adres url się zmieni wskazując na inna ściężke, np. contact, Ember wyszuka szablonu contact.hbs i ponownie renderuje go w miejscu {{outlet}}.
Sprawdźmy zatem jak to działa. Wygenerujemy ścieżkę index korzystając oczywiście z ember-cli:

ember generate route index

Zaraz po wpisaniu tego polecenia w konsoli, możemy zauważyć, że ember utworzył za nas plik, który będzie obsługiwał naszą ściężkę – app/routes/index.js, plik szablonu app/templates/index/hbs oraz plik do testów tests/unit/routes.index-test.js.

Otwórzmy zatem plik index.hbs, usuńmy z niego domyślny wpis {{outlet}} i wpiszmy: „Nasze główne okno aplikacji”. Ember po zapisaniu pliku automatycznie odświeży przeglądarkę, więc naszym oczom powinien pokazać się widok:

 

hi-ember2

Utwórzmy teraz kolejną ścieżkę:

ember generate route contact

I ponownie jak poprzednio – otwórzmy plik app/templates/contact.hbs, usuńmy {{outlet}} i wpiszmy „Nasza strona z kontaktem”. Teraz zmieniając adres url w przeglądarce na http://localhost:4200/contact pojawi nam się okno z napisem „Nasza strona z kontaktem”.

Otwórzmy teraz plik app/router.js aby zobaczyć co jeszcze za nas zrobił ember-cli.

 

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: config.locationType
});

Router.map(function() {
  this.route('contact');
});

export default Router;

 

 

Możemy zauważyć, że Ember utworzył za nas wpis w mapie dla obiektu Router. Dlaczego nie ma wpisu dla ścieżki index? Ponieważ jest ona domyślna dla aplikacji i nie wymaga takiego wpisu.
Otwórzmy jeszcze na chwilę plik app/templates/application.hbs i wpiszmy poniższy kod w celu utworzenia prostego menu.

 

 

<h2 id="title">Hi Ember 2.0!</h2>

{{#link-to 'index'}}Strona główna{{/link-to}} | {{#link-to 'contact'}}Kontakt{{/link-to}}

<hr>

{{outlet}}

 

 

Teraz nasza aplikacja powinna wyglądać jak poniżej. Kliknięcie na link ‚Kontakt’ spowoduje automatyczną zmianę adresu url i jednocześnie wyrenderowanie szablonu contact.hbs. Natomiast ‚Strona główna’ to powrót do domyślnego stanu aplikacji.

 

ember-menu

 

To tyle na dzisiaj. Zainstalowaliśmy Ember 2.0, poznaliśmy narzędzie ember-cli, utworzyliśmy dwie ścieżki oraz proste menu zmieniające stan aplikacji. Wiem, że Ember ma jeszcze mnóstwo tajemnic przed mną do odkrycia, więc to na pewno nie koniec wpisów na temat tego frameworka. Poza tym, to co tutaj opisałem to przecież jeszcze nic „konkretnego”, więc wstyd na tym zakończyć. 🙂