Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Толстый клиент + API –новаяпарадигма веб-разработки?Андрей Лебедев
Толстый клиент + API –удобно, эффективно, выгодно!• Быстрый интерфейс удобен пользователю• Эффективные преимущества MVC на...
Удобный пользовательский интерфейс• Скорость отклика пользовательского интерфейса• Минимизация траффика между сервером и к...
Эффективные преимущества для разработчиков• Архитектура Model – View на клиенте. Разделение бизнес-логики и визуализации• ...
Запуск проекта с большей для бизнесавыгодой.• Параллельная разработка с API• Удобный доступ для партнеров и стороннихразра...
20 лет назад: толстый и тонкий.
Двухзвенная архитектура,бизнес-логика на клиентеСервер(БД)Толстый клиент(бизнес -логика)
Трехзвенная архитектура,бизнес-логика на сервереБДСерверприложений(бизнес - логика)Тонкийклиент
Веб-сервер как сервер приложенийModel-View-ControllerDBWEB ServerBROWSERCONTROLVIEWMODELHTTPHTMLHTTPIMAGES, CSS, JS
Проблемы современных веб-приложений• Рендеринг страницы на сервере на каждый запроспользователя• Рендеринг страницы браузе...
Rest APIСерверное API и одностраничное веб-приложениеBROWSERDBCONTVIEWMODELCSSJavascriptWEB SERVERHTMLCSSJSIMAGESHTTPHTMLH...
API как средство интеграции клиентовAPIWeb Site Public APINative App
REST API. Универсальный интерфейс работы сданным.• Scalability of component interactions• Generality of interfaces• Indepe...
REST API. Основные понятия• Stateless• Cacheable• Uniform interface
REST API: HTTP запросы к серверу• GET http://example.com/resources/• GET http://example.com/resources/item19• POST http://...
REST API. Ответы от сервера• HTTP Заголовки имеют значение!• Формат тела ответа от сервераJSON, XML, HTML, текст и т.д.
«Пугающие» особенности одностраничныхвеб-приложение• Сломанная кнопка «Назад»• Проблема поисковой оптимизации страницы• От...
Сломанная кнопка «Назад»$(window).bind(‘hashchange’, function(event) {if(event.target.location.hash == ‘#!category’) {// s...
Проблема поисковой оптимизации страницыwww.example.com!#key=valuewww.example.com?_escaped_fragment_=key=value
Отсутствие статистики о просмотренныхстраницах_gaq.push([_trackPageview, "/#{url}"])
Ошибки на клиенте никто не мониторитAjax
Javascript фреймворки и библиотеки
Современная архитектура web-приложенияDOMVIEWMODELTEMPLATESTORAGE???
Кросс-доменные запросы и политика одногодомена.Server response head:Access-Control-Allow-Origin: http://example.comИлиAcce...
Запросы с авторизацией без использованияcookies.• Используйте кастомные заголовки взапросе
Выводы
Вопросы и ответы
Upcoming SlideShare
Loading in …5
×

API плюс толстый клиент – новая парадигма веб-разработки? / Андрей Лебедев (Грамант)

953 views

Published on

  • Be the first to comment

  • Be the first to like this

API плюс толстый клиент – новая парадигма веб-разработки? / Андрей Лебедев (Грамант)

  1. 1. Толстый клиент + API –новаяпарадигма веб-разработки?Андрей Лебедев
  2. 2. Толстый клиент + API –удобно, эффективно, выгодно!• Быстрый интерфейс удобен пользователю• Эффективные преимущества MVC на клиенте дляразработчиков• Запуск проекта с большей для бизнеса выгодой
  3. 3. Удобный пользовательский интерфейс• Скорость отклика пользовательского интерфейса• Минимизация траффика между сервером и клиентом• Доступ к данным с различных устройств
  4. 4. Эффективные преимущества для разработчиков• Архитектура Model – View на клиенте. Разделение бизнес-логики и визуализации• Модульное тестирование всех компонентов системы• Четкие зоны ответственности – гарантия качества кода
  5. 5. Запуск проекта с большей для бизнесавыгодой.• Параллельная разработка с API• Удобный доступ для партнеров и стороннихразработчиков• Поисковая оптимизация страниц с выгодой для себя
  6. 6. 20 лет назад: толстый и тонкий.
  7. 7. Двухзвенная архитектура,бизнес-логика на клиентеСервер(БД)Толстый клиент(бизнес -логика)
  8. 8. Трехзвенная архитектура,бизнес-логика на сервереБДСерверприложений(бизнес - логика)Тонкийклиент
  9. 9. Веб-сервер как сервер приложенийModel-View-ControllerDBWEB ServerBROWSERCONTROLVIEWMODELHTTPHTMLHTTPIMAGES, CSS, JS
  10. 10. Проблемы современных веб-приложений• Рендеринг страницы на сервере на каждый запроспользователя• Рендеринг страницы браузером при каждой загрузке
  11. 11. Rest APIСерверное API и одностраничное веб-приложениеBROWSERDBCONTVIEWMODELCSSJavascriptWEB SERVERHTMLCSSJSIMAGESHTTPHTMLHTTPJSON, XML, …Websockets
  12. 12. API как средство интеграции клиентовAPIWeb Site Public APINative App
  13. 13. REST API. Универсальный интерфейс работы сданным.• Scalability of component interactions• Generality of interfaces• Independent deployment of components• Intermediary components to reduce latency, enforcesecurity and encapsulate legacy systems
  14. 14. REST API. Основные понятия• Stateless• Cacheable• Uniform interface
  15. 15. REST API: HTTP запросы к серверу• GET http://example.com/resources/• GET http://example.com/resources/item19• POST http://example.com/resources/• PUT http://example.com/resources/item19• DELETE http://example.com/resources/item19
  16. 16. REST API. Ответы от сервера• HTTP Заголовки имеют значение!• Формат тела ответа от сервераJSON, XML, HTML, текст и т.д.
  17. 17. «Пугающие» особенности одностраничныхвеб-приложение• Сломанная кнопка «Назад»• Проблема поисковой оптимизации страницы• Отсутствие статистики о просмотренных страницах• Ошибки на клиенте никто не мониторит
  18. 18. Сломанная кнопка «Назад»$(window).bind(‘hashchange’, function(event) {if(event.target.location.hash == ‘#!category’) {// show category}});
  19. 19. Проблема поисковой оптимизации страницыwww.example.com!#key=valuewww.example.com?_escaped_fragment_=key=value
  20. 20. Отсутствие статистики о просмотренныхстраницах_gaq.push([_trackPageview, "/#{url}"])
  21. 21. Ошибки на клиенте никто не мониторитAjax
  22. 22. Javascript фреймворки и библиотеки
  23. 23. Современная архитектура web-приложенияDOMVIEWMODELTEMPLATESTORAGE???
  24. 24. Кросс-доменные запросы и политика одногодомена.Server response head:Access-Control-Allow-Origin: http://example.comИлиAccess-Control-Allow-Origin: *
  25. 25. Запросы с авторизацией без использованияcookies.• Используйте кастомные заголовки взапросе
  26. 26. Выводы
  27. 27. Вопросы и ответы

×