More Related Content
Similar to Single Page Applications przy wykorzystaniu REST (20)
Single Page Applications przy wykorzystaniu REST
- 1. SPA w Acxiom
Wprowadzenie do „Single Page Applications”
22.10.2013 – Michał Kotarbiński, Grzegorz Gwoźdź
© 2013 Acxiom Corporation. All Rights
Reserved.
© 2013 Acxiom Corporation. All Rights
Reserved.
- 3. Agenda
Czym jest SPA (Single Page App)
Frontend
MV*(Model-View-Stuff)
Szabolny w JS
Optymalizacja
Frameworki i narzędzia
Backend
REST
Projektowanie API
Bezpieczeństwo
Frameworki i narzędzia
Q&A
Agenda
3
SPA
Frontend
Frontend
Frontend
Frontend
Backend
© 2013 Acxiom Corporation. All Rights
Reserved.
Backend
Backend
Backend
- 4. Czym jest SPA (Single Page App)
Aplikacja Kliencka
Model
View
*
HTML
CSS
Szablony
Stan
aplikacji
REST
Client
AJAX
Aplikacja serwerowa
API
Dane
Security
Wydajność i skalowalność
User experience
Wspołbieżna praca nad Front- i Backendem
Możliwość zmiany backendu niezależnie od
frontendu (i vice versa)
Ten sam backend dla wielu apliakcji (JS,
Android, iOS)
SEO
Kompatybilność między przeglądarkami
Agenda
4
Cache
SPA
Frontend
Frontend
http://singlepageappbook.com/
Frontend
Frontend
Backend
© 2013 Acxiom Corporation. All Rights
Reserved.
Backend
Backend
Backend
- 5. MV*
Agenda
5
Miejsce przechowywania danych
Odpala Eventy podczas zmiany
Grupowany w kolekcje
View
Widok
Renderowanie do DOM
Aktualizowanie DOM
Podpinanie Eventów do elementów DOM
Zmiana Modelu
Odpala Eventy
Model
Modyfikuje
ViewModel
Presenter/Controller/ViewModel
SPA
Router
Obsługa nawigacji itp
Frontend
Frontend
Model
Frontend
Frontend
Backend
© 2013 Acxiom Corporation. All Rights
Reserved.
Backend
Backend
Backend
- 6. Szablony w JS
Funkcja js generowana na podstawie szblonu html
Generowanie „reprezentacji” danych otrzymanych z
modelu
{{view todoList}}
<ul>
Nieopłacalne w małych aplikacjach - choć wszystkie rosną
{{each todos}}
;)
{{view todoView}}
Problem z wyborem:
<li>
http://garann.github.io/template-chooser/
<div class="todo {{ done? }}">
{{{ text }}}</div>
Zalety
</li>
String interpolation
{{/view}}
Esacping HTML
{{/each}}
Simple Expressions
</ul>
Listy elementów
{{/view}}
Zagnieżdżone widoki
Agenda
6
Handlebars.js:
Znacznie szybsze (i wygodniejsze) niż ręczna modyfikacja
DOM
SPA
Frontend
Frontend
Frontend
Frontend
Backend
© 2013 Acxiom Corporation. All Rights
Reserved.
Backend
Backend
Backend
- 9. REST
REST = Representational State Transfer
REST -„Styl architektury”
Bezstanowość
Buforowanie (cache)
Jednorodny interfejs
THINK DATA!!!
System warstowy
(Opcjonalnie) kod na żądanie
Agenda
9
W REST najważniejsze są dane
(zasoby) nie protokoły i czynności
jakie na nich wykonujemy.
Klient-serwer
SPA
Frontend
Frontend
Frontend
Frontend
Backend
© 2013 Acxiom Corporation. All Rights
Reserved.
Backend
Backend
Backend
- 10. Projektowanie API
•
•
•
•
•
•
•
•
•
GET:
Odczyt
POST:
Utworzenie
PUT:
Update
DELETE: Usunięcie
HEAD:
Tylko metadane
Dwa typu zasobów:
•
•
•
•
GET http://example.com/customers?query=foobar
400 Bad Request
{error: „name cannot be null”}
http://example.com/1.0/customers
POST http://example.com/getCustomers
Kolekcje
/customers
Instancje
/customers/1234
200 OK
{code:”INVALID”, error: „name cannot be null”}
Wersjonowanie API
http://example.com/customers
URI
Media-Type
Reprezentacje, Nagłówki Kody HTTP:
•
•
•
Agenda
10
Przykłady
Akcje to metody HTTP (nie tylko GET i POST)
Nagłówki Content-Type, Accept, ETag...
400,409,..., nie ma potrzeby wymyślania własnych
Informacje dodatkowe np. paginacja przez QueryParams
SPA
Frontend
Frontend
Frontend
Frontend
Backend
© 2013 Acxiom Corporation. All Rights
Reserved.
Backend
Backend
Backend
- 11. Bezpieczeństwo
Nagłówki:
401 Unauthorized => „Musisz powiedzieć kim
jesteś”
403 Forbidden
=> „You shall not pass!”
Autoryzacja i autentykacja:
OAuth
API Key/Token
Basic over SSL
Unikać sesji (skalowalność!), choć nie
zawsze możliwe/opłacalne
Agenda
11
SPA
Frontend
Frontend
Frontend
Frontend
Backend
© 2013 Acxiom Corporation. All Rights
Reserved.
Backend
Backend
Backend
- 12. Frameworki i narzędzia
API
JAX-RS (Jeresy, RESTEasy)
@Path("/products/1.0")
@Produces("application/json")
@Consumes("application/json")
public class Products {
@GET
public Product getProduct() { ... }
@GET
@Path("{id}")
public Product getProduct(@PathPatam("id") int productId) { ... }
Spring MVC
Container
@POST
public Response createProduct(Product product) {
...
return Response.status(201).entity(result).build();
}
JBoss
Tomcat
@PUT
@Path("{id}")
public Response updateProduct(@PathPatam("id") int productId,
Product product) { ... }
Jetty
DLA APLIKACJI KLIENCKIEJ
NIE MA ZNACZENIA!!!
Agenda
12
SPA
Frontend
@DELETE
@Path("{id}")
public Product deleteProduct(@PathPatam("id") int productId) { ... }
}
Frontend
Frontend
Frontend
Backend
© 2013 Acxiom Corporation. All Rights
Reserved.
Backend
Backend
Backend