Michał Kotarbiński, Grzegorz Gwóźdź - Acxiom - 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.

2. Acxiom
Agenda
2
SPA
Frontend
Frontend
Frontend
Frontend
Backend
© 2013 Acxiom Corporation. All Rights
Reserved.
Backend
Backend
Backend

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

7. Optymalizacja




Szablony


Prekompilacja
Upraszczanie



Minimalizacja




AMD: Require.JS
 Organizacja kodu w moduły
Pliki JS (require.js)
HTML
CSS (saas / compas)
grafiki
Możliwość wybiórczego pobierania
submodułów
Ograniczenie liczby zapytań
Minimalizacja
Package
App
Redukcja zapytań do REST API
Widok
zależy
zależy
Model
Router
Zależy /
pobiera
Agenda
7
SPA
Frontend
Frontend
Frontend
Frontend
Backend
© 2013 Acxiom Corporation. All Rights
Reserved.
Backend
zależy
Kolekcje
Backend
Backend

8. Frameworki i narzędzia


Agenda
8


Frameworki




Backbone
Knockout
Angular
Styleguide
SPA
jQuery ;-)
KendoUI
Handlebars
Mocha.JS
Frontend
Narzędzia
Frontend
Frontend




JsHint, JsLint
Yeoman
Grunt
Bower

Biblioteki




Node.JS
Biblioteki dodatkowe
Frontend



Compass
Livereload
Connect
.... Oraz wiele innych
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

13. Dzięki!
Szukamy nowych pracowników!
W naszym biurze znajdziesz...
© 2013 Acxiom Corporation. All Rights
Reserved.
© 2013 Acxiom Corporation. All Rights
Reserved.