Knockout: как, зачем, почему

Transcript

1. как, зачем, почему
2. как, зачем, почему
3. • Frontend MV* framework • MIT • Supported by Microsoft (Visual Studio 2012) Что за зверь?
4. Для начала немного истории ... 1995-2000
22. Конец 2000х
23. C V M
24. C V M
25. C V M
26. C V M DAO DAO
27. C V M DAO DAO
28. C V M DAO DAO UNIT TESTABLE
29. C V M
30. C V M
31. C ? M
32. M C ?
33. declare and automate! FRP
41. C V M
42. VM V M
43. VM V M
44. VM V M DECLARATIVE
45. VM V M UNIT TESTABLE DECLARATIVE
47. Observable Properties
48. Change Listeners
49. Dependent Observable Properties
50. Dependent Observable Properties with Dynamic Dependency Resolution
51. (Including Dynamic Observable Properties!) Declarative Bindings based on Dependent Observable Properties
53. Observable Properties
54. Зависимые Свойства
55. Listeners
56. Bindings
57. Dynamic Observable Properties
58. Integrated Templating and Custom Bindings
60. UNIT TESTABLE
61. close enough FRP?
62. NICE CLEAN API
63. VM V M
64. plain HTML/CSS + knockout bindings + knockout templates mock data in ViewModels Web Designer
65. No need to have HTML at all most of the time! Backend AJAX mocks Front-end Developer
66. No need to do templating Simple services (most of the time front-end driven) Backend Developer
69. Knockout Ember Angular Кривые обучения
70. Система диагнозтики рака • 20k LOC не считая библиотек • HTML5 (Canvas, SVG) + Hadoop Система для флеботомии • 3k LOC of CoffeeScript • getUserMedia API Используем с начала 2011 года
72. Grammarly IDE for Computational Linguists • 1.5k LOC (5k) • Node.JS + CommonLisp • CodeMirror bindings • Brunch, Request, OMF Future: • Small bits and pieces (dashboards, admin) • New online grammar checker
73. Gotchas [грабли]
74. 1. Не пихаем JS в байндинги! 2. ViewModel != Model 3. Event delegation происходит в "глубину" 4. Структурируем VM 5. Не пишем на голом jQuery 6. Ищем плагины 7. Фреймворк != Модульность Грабли
75. 2 подхода к постороению страниц Простыня • Удобна для простых приложений • Удобна для дизайнера • Весь код на одной странице Кирпичи • Reuse • Хорош для крупных и мультистраничных приложений
76. Knockout http://knockoutjs.com/ http://learn.knockoutjs.com/ https://github. com/SteveSanderson/knockout/wiki http://stackoverflow.com/tags/knockout.js/info
78. We <3
79. http://urbodydecompose.deviantart.com/art/Tuxedo-cat-166270845 http://okbrightstar-stock.deviantart.com/art/Sleeping-125954264 http://catstock.deviantart.com/art/Sing-33055858 http://www.flickr.com/photos/nautical/133261261/ http://commons.wikimedia.org/wiki/File:WWW_logo_by_Robert_Cailliau.svg http://www.flickr.com/photos/thefangmonster/490423135/ http://www.flickr.com/photos/1uplego/7138185931/ http://www.flickr.com/photos/jotape_es/384293700/ http://www.flickr.com/photos/bmindful/418000489/ http://www.flickr.com/photos/wadem/2923627819/ http://www.flickr.com/photos/p-r-b/3205896562/ http://www.flickr.com/photos/zitona/4147791422/ http://www.flickr.com/photos/kk/106960641/ http://www.flickr.com/photos/bigberto/2767045155/ https://github.com/voodootikigod/logo.js http://www.w3.org/html/logo/ Credits
80. http://blog.stephenhorlander.com/2009/08/windows-theme-project-progress-report-3 http://www.flickr.com/photos/41027324@N03/4746972869// http://www.flickr.com/photos/m-i-k-e/6020157534/ http://www.flickr.com/photos/mag3737/4935272859/ http://www.flickr.com/photos/joao_trindade/4362414729/ http://www.flickr.com/photos/didmyself/6159223758/ http://www.flickr.com/photos/doglotion/2328627785/ http://www.flickr.com/photos/artlung/4424880628/ http://www.flickr.com/photos/stuckincustoms/4305080531/ http://denaja.deviantart.com/art/shocked-cat-344011338 http://www.flickr.com/photos/kenjonbro/7324363574/ http://www.flickr.com/photos/somebox/5664263870/ http://wulfila.deviantart.com/art/My-Isis-101844874 http://www.flickr.com/photos/10557450@N04/6632470867/ http://www.flickr.com/photos/geminidustin/275375865/