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.

NAS, Predictions, Preloading, Presudo-Isomorphism / Охрименко Алексей (Acronis)

539 views

Published on

На примере фреймворка COD.js ( c React as View Layer ) и топовых продуктов фирмы Acronis мы увидим, каких удивительных результатов можно добиться используя:
1) NAS — неблокирующее состояние приложения;
2) Predictions — дизайн-паттерн, позволяющий предсказывать состояния системы и производить так называемую "latency conpensation" — технику, которую очень любят в Game Dev;
3) Preloading — стандартную и всем знакомую технику, у которой есть пара интересных способов применения, заслуживающих внимания;
4) Presudo-Isomorphism — очень хитрую технику, которую так активно использует Facebook.

Все это будет показано на примере реальных продуктов. С простыми и понятными примерами, которые можно будет применить в любом продукте.

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

NAS, Predictions, Preloading, Presudo-Isomorphism / Охрименко Алексей (Acronis)

  1. 1. NAS, Predictions, Preloading, Presudo- Isomorphism Алексей Охрименко
  2. 2. Коротко обо мне Меня зовут Алексей Охрименко Я работаю в компании Acronis Lead Software Developer ( JavaScript ) Twitter: @Ai_boy
  3. 3. Чего вы не услышите • Изоморфность - Денис Измайлов ( сегодня 18:15 ) зал 5 • React, Flux - Аверин Сергей ( завтра 14:15 ) зал 1 • Load time - Ziling Zhao ( сегодня 16:45 ) зал 5 • Load time - Павла Минеев ( сегодня в 11:45 ) зал 1
  4. 4. О чем доклад Perceived Performance* * в русской википедии об этом даже нет статьи
  5. 5. Раз за разом люди упускают возможность улучшить perceived performance и надеются что пользователям это понравится
  6. 6. это единственная метрика, которой пользуется пользователь Perceived Performance
  7. 7. Можно улучшить за счет: 1) Реального увеличения производительности 2) Уменьшения производительности 3) Грамотного перераспределения ресурсов Perceived Performance
  8. 8. • NAS - неблокирующее состояние приложения • Predictions - предсказания • Preloading - предзагрузки • Pseudo-Isomorphism - псевдоизоморфизм • COD.js / MALEVICH / React
  9. 9. http://www.acronis.com/en-us/cloud/backup-service/
  10. 10. 0 1000 2000 3000 4000 5000 6000 7000 8000 Original Load Login New Backup Plan Apply Plan Remove Plan http://www.acronis.com/en-us/cloud/backup-service/
  11. 11. NAS
  12. 12. Давайте разберемся DOM медленный
  13. 13. Мы можем воспользоваться той же самой техникой для обычных UI взаимодействий
  14. 14. Это и есть блокирование состояния приложения. Узнаете?
  15. 15. А так?
  16. 16. 0 1000 2000 3000 4000 5000 6000 7000 8000 Original Load Login New Backup Plan Apply Plan Remove Plan http://www.acronis.com/en-us/cloud/backup-service/
  17. 17. 0 1000 2000 3000 4000 5000 6000 7000 8000 Original NAS Load Login New Backup Plan Apply Plan Remove Plan http://www.acronis.com/en-us/cloud/backup-service/
  18. 18. Predictions aka latency compensation
  19. 19. Predictions in Acronis New Backup Plan
  20. 20. 0 1000 2000 3000 4000 5000 6000 7000 8000 Original NAS Load Login New Backup Plan Apply Plan Remove Plan http://www.acronis.com/en-us/cloud/backup-service/
  21. 21. 0 1000 2000 3000 4000 5000 6000 7000 8000 Original NAS Predictions Load Login New Backup Plan Apply Plan Remove Plan http://www.acronis.com/en-us/cloud/backup-service/
  22. 22. Preloading
  23. 23. Preloading • Предзагрузка - это стандартная техника, когда мы предварительно загружаем ресурс, к которому в будущем мы будет обращаться • Можно применять в весьма неожиданных местах • Чтобы ее применять обязательно используйте Smart Queue
  24. 24. Preloading - standart
  25. 25. Preloading - advanced
  26. 26. 0 1000 2000 3000 4000 5000 6000 7000 8000 Original NAS Predictions Load Login New Backup Plan Apply Plan Remove Plan http://www.acronis.com/en-us/cloud/backup-service/
  27. 27. 0 1000 2000 3000 4000 5000 6000 7000 8000 Original NAS Predictions Preloading Load Login New Backup Plan Apply Plan Remove Plan http://www.acronis.com/en-us/cloud/backup-service/
  28. 28. Pseudo-Isomorphism
  29. 29. Pseudo-Isomorphism • Это когда вы на сервере с помощью обычного шаблонизатора Jinja2, PHP, etc. отрисовываете HTML и отправляете его на clientside. • Получить HTML для шаблона можно с помощью: document.documentElement.outerHTML • Впоследствии SPA, загрузившись и проинициализировавшись, просто подхватывает инициативу • Есть много разных способов имплементации данного подхода
  30. 30. 0 1000 2000 3000 4000 5000 6000 7000 8000 Original NAS Predictions Preloading Load Login New Backup Plan Apply Plan Remove Plan http://www.acronis.com/en-us/cloud/backup-service/
  31. 31. 0 1000 2000 3000 4000 5000 6000 7000 8000 Original NAS Predictions Preloading P-I Load Login New Backup Plan Apply Plan Remove Plan http://www.acronis.com/en-us/cloud/backup-service/
  32. 32. Backend при этом не изменялся
  33. 33. Когда использовать • Всегда - NAS это больше методология • Это как Event Driven IO Когда избегать • Когда скорость появления конечного результата многократно важнее NAS
  34. 34. Когда использовать • Когда состояние объекта предсказуемо • Когда вред от «отката» незначителен • Prediction на базе Prediction - приведет к сложному коду Когда избегать • При часто меняющемся backend API ( когда отсутствует версионирование ) Predictions
  35. 35. Когда использовать • Когда есть свободный HTTP канал (6 per domain, но можно обойти с помощью трюка с sub-n.domain.com) Когда избегать • Когда уже HTTP канал часто бывает занят. Preloading
  36. 36. Когда использовать • Когда кол-во точек входа в приложение или часть приложения ограничены Когда избегать • Когда кол-во точек входа в приложение или часть приложения не более 2-3 Pseudo-Isomorphism
  37. 37. COD.js / MALEVICH / REACT
  38. 38. https://github.com/aiboy/acronis-codjs-react
  39. 39. Q&A Twitter: @Ai_boy Все ссылки будут продублированы в Twitter

×