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

1. NAS, Predictions,
Preloading,
Presudo-
Isomorphism
Алексей Охрименко

2. Коротко обо мне
Меня зовут Алексей Охрименко
Я работаю в компании Acronis
Lead Software Developer ( JavaScript )
Twitter: @Ai_boy

3. Чего вы не услышите
• Изоморфность - Денис Измайлов ( сегодня 18:15 ) зал 5
• React, Flux - Аверин Сергей ( завтра 14:15 ) зал 1
• Load time - Ziling Zhao ( сегодня 16:45 ) зал 5
• Load time - Павла Минеев ( сегодня в 11:45 ) зал 1

4. О чем доклад
Perceived Performance*
* в русской википедии об этом даже нет статьи

6. Раз за разом люди упускают возможность
улучшить perceived performance и надеются
что пользователям это понравится

9. это единственная метрика, которой
пользуется пользователь
Perceived Performance

10. Можно улучшить за счет:
1) Реального увеличения производительности
2) Уменьшения производительности
3) Грамотного перераспределения ресурсов
Perceived Performance

11. • NAS - неблокирующее состояние приложения
• Predictions - предсказания
• Preloading - предзагрузки
• Pseudo-Isomorphism - псевдоизоморфизм
• COD.js / MALEVICH / React

12. http://www.acronis.com/en-us/cloud/backup-service/

14. 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/

15. NAS

16. Давайте разберемся
DOM медленный

20. Мы можем воспользоваться той же самой
техникой для обычных UI взаимодействий

21. Это и есть блокирование состояния приложения.
Узнаете?

22. А так?

25. 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/

26. 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/

27. Predictions
aka latency compensation

31. Predictions in Acronis
New Backup Plan

32. 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/

33. 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/

34. Preloading

35. Preloading
• Предзагрузка - это стандартная техника, когда мы
предварительно загружаем ресурс, к которому в будущем мы
будет обращаться
• Можно применять в весьма неожиданных местах
• Чтобы ее применять обязательно используйте Smart Queue

36. Preloading - standart

37. Preloading - advanced

38. 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/

39. 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/

40. Pseudo-Isomorphism

41. Pseudo-Isomorphism
• Это когда вы на сервере с помощью обычного шаблонизатора
Jinja2, PHP, etc. отрисовываете HTML и отправляете его на
clientside.
• Получить HTML для шаблона можно с помощью:
document.documentElement.outerHTML
• Впоследствии SPA, загрузившись и проинициализировавшись,
просто подхватывает инициативу
• Есть много разных способов имплементации данного подхода

42. 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/

43. 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/

44. Backend при этом не изменялся

45. Когда использовать
• Всегда - NAS это больше методология
• Это как Event Driven IO
Когда избегать
• Когда скорость появления конечного результата многократно
важнее
NAS

46. Когда использовать
• Когда состояние объекта предсказуемо
• Когда вред от «отката» незначителен
• Prediction на базе Prediction - приведет к сложному коду
Когда избегать
• При часто меняющемся backend API ( когда отсутствует
версионирование )
Predictions

47. Когда использовать
• Когда есть свободный HTTP канал (6 per domain, но можно
обойти с помощью трюка с sub-n.domain.com)
Когда избегать
• Когда уже HTTP канал часто бывает занят.
Preloading

48. Когда использовать
• Когда кол-во точек входа в приложение или часть приложения
ограничены
Когда избегать
• Когда кол-во точек входа в приложение или часть приложения
не более 2-3
Pseudo-Isomorphism

49. COD.js / MALEVICH / REACT

50. https://github.com/aiboy/acronis-codjs-react

51. Q&A
Twitter: @Ai_boy
Все ссылки будут продублированы в
Twitter