Ember.js

Jak robić aplikacje po stronie przeglądarki

O mnie

Software Developer, Team Leader @ netguru

Pracuję z Ember.js, Ruby on Rails i React.js

SPA

Single Page Application

Brak przeładowań strony podczas wykonywania akcji

Doświadczenia podobne do aplikacji natywnej na OS

Nieograniczona długość życia aplikacji po stronie klienta

SPA

Wyzwania

Co jeśli użytkownik spędzi na naszej stronie 10 dni?

Jak synchronizować dane po stronie serwera?

Jak utrzymywać URL, skąd wiedzieć co i kiedy pokazać?

Ember.js

Ember.js

Start

1. Instalacja node.js

2. Instalacja ember-cli

$ npm install -g ember-cli

3. Start projektu

$ ember new my-new-app

4. Kodowanie

$ ember server
$ brew install nodejs

Co daje Ember.js?

Routing

Dynamiczne szablony

Abstrakcję na dane

Zarządzanie odświeżaniem

Animacje

Wsparcie

Routing i animacje

sklep.com/zamow

sklep.com/zamow

sklep.com/zamow

sklep.com/zamow

sklep.com/zamow/dane

sklep.com/zamow/zaplac

Dynamiczne szablony

 

 Masz 10 nieodczytanych wiadomości.

 Najnowsza z nich to "To już ostatnia  poprawka..."

 

const state = {
    messages: [
        {
            id: 1,
            title: 'To już ostatnia poprawka...',
        },
        {
            (...)
        },
    ],
};
<h1>Masz {{state.messages.length}} nieodebranych wiadomości</h1>
<h4>Ostatnia z nich to: '{{state.messages.firstObject.title}}</h4>

Dane i synchronizacja

Ember Data jest biblioteką opartą o wzorzec adaptera

Koordynuje warstwę komunikacji

Potrafi działać real time w oparciu o WebSockets

Dane i synchronizacja

function fetchUsers() {
    $.ajax('localhost/users', function(err, res) {
        // zaktualizuj treść strony o listę userów
    }
}

$(document).ready(function() {
    fetchUsers();
});
(...)
return this.store.findAll('user');
(...)
{{#each users as |user|}}
    <h4>{{user.name}}</h4>
{{/each}}

Community

Thanks!

Ember.js - jak tworzyć aplikacje po stronie przeglądarki

By Kuba Niechcial

Ember.js - jak tworzyć aplikacje po stronie przeglądarki

Krótkie wprowadzenie do Ember.js - co to znaczy SPA, jakie wyzwania stoją przed nami podczas tworzenia SPA. Czym różnią się aplikacje serwerowe od aplikacji w przeglądarce? Jak Ember.js może nam w tym pomóc?

  • 1,024