Single Page Applications przy wykorzystaniu REST

1,705 views

Published on

Michał Kotarbiński, Grzegorz Gwóźdź - Acxiom - Single Page Applications przy wykorzystaniu REST

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,705
On SlideShare
0
From Embeds
0
Number of Embeds
45
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Single Page Applications przy wykorzystaniu REST

  1. 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. 2. Acxiom Agenda 2 SPA Frontend Frontend Frontend Frontend Backend © 2013 Acxiom Corporation. All Rights Reserved. Backend Backend Backend
  3. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 13. Dzięki! Szukamy nowych pracowników! W naszym biurze znajdziesz... © 2013 Acxiom Corporation. All Rights Reserved. © 2013 Acxiom Corporation. All Rights Reserved.

×