Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Dd3f18c87b851137000c7427d7bd5d32?s=47 fwdays
March 05, 2013

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

Dd3f18c87b851137000c7427d7bd5d32?s=128

fwdays

March 05, 2013
Tweet

More Decks by fwdays

Other Decks in Programming

Transcript

  1. как, зачем, почему

  2. как, зачем, почему

  3. • Frontend MV* framework • MIT • Supported by Microsoft

    (Visual Studio 2012) Что за зверь?
  4. Для начала немного истории ... 1995-2000

  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  13. None
  14. None
  15. None
  16. None
  17. None
  18. None
  19. None
  20. None
  21. 2013

  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

  34. None
  35. None
  36. None
  37. None
  38. None
  39. None
  40. None
  41. C V M

  42. VM V M

  43. VM V M

  44. VM V M DECLARATIVE

  45. VM V M UNIT TESTABLE DECLARATIVE

  46. None
  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
  52. None
  53. Observable Properties

  54. Зависимые Свойства

  55. Listeners

  56. Bindings

  57. Dynamic Observable Properties

  58. Integrated Templating and Custom Bindings

  59. None
  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
  67. None
  68. None
  69. Knockout Ember Angular Кривые обучения

  70. Система диагнозтики рака • 20k LOC не считая библиотек •

    HTML5 (Canvas, SVG) + Hadoop Система для флеботомии • 3k LOC of CoffeeScript • getUserMedia API Используем с начала 2011 года
  71. None
  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

  77. None
  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/