Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Knockout: как, зачем, почему
Search
fwdays
March 05, 2013
Programming
0
1.4k
Knockout: как, зачем, почему
fwdays
March 05, 2013
Tweet
Share
More Decks by fwdays
See All by fwdays
Symfony best practices и не только Олег Зинченко
fwdays
0
2.1k
Beyond Testing Михаил Боднарчук
fwdays
0
770
Yii2 - на пути от Alpha до GA. Взгляд с практической стороны Александр Бордун
fwdays
0
1.8k
Laravel 4: простота во всем. Евгений Косинский
fwdays
0
960
Маленькая библиотека для большой компании. Антон Шевчук
fwdays
0
3.8k
Phalcon. Что нового? Александр Торош
fwdays
0
1.1k
Выбираем поисковик умом головы. Андрей Аксенов
fwdays
0
1.4k
Past, Present, and Future: The Evolution of PHP Development. Nate Abele
fwdays
0
760
Функциональный тулчейн Nix
fwdays
1
460
Other Decks in Programming
See All in Programming
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
380
ニーリーにおけるプロダクトエンジニア
nealle
0
710
Goで作る、開発・CI環境
sin392
0
190
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
210
都市をデータで見るってこういうこと PLATEAU属性情報入門
nokonoko1203
1
590
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
170
datadog dash 2025 LLM observability for reliability and stability
ivry_presentationmaterials
0
420
GoのGenericsによるslice操作との付き合い方
syumai
3
710
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
250
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
110
AIコーディング道場勉強会#2 君(エンジニア)たちはどう生きるか
misakiotb
1
270
すべてのコンテキストを、 ユーザー価値に変える
applism118
2
1.1k
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1370
200k
4 Signs Your Business is Dying
shpigford
184
22k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
230
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Stop Working from a Prison Cell
hatefulcrawdad
270
20k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Balancing Empowerment & Direction
lara
1
390
VelocityConf: Rendering Performance Case Studies
addyosmani
331
24k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
680
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Transcript
как, зачем, почему
как, зачем, почему
• Frontend MV* framework • MIT • Supported by Microsoft
(Visual Studio 2012) Что за зверь?
Для начала немного истории ... 1995-2000
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
2013
Конец 2000х
C V M
C V M
C V M
C V M DAO DAO
C V M DAO DAO
C V M DAO DAO UNIT TESTABLE
C V M
C V M
C ? M
M C ?
declare and automate! FRP
None
None
None
None
None
None
None
C V M
VM V M
VM V M
VM V M DECLARATIVE
VM V M UNIT TESTABLE DECLARATIVE
None
Observable Properties
Change Listeners
Dependent Observable Properties
Dependent Observable Properties with Dynamic Dependency Resolution
(Including Dynamic Observable Properties!) Declarative Bindings based on Dependent Observable
Properties
None
Observable Properties
Зависимые Свойства
Listeners
Bindings
Dynamic Observable Properties
Integrated Templating and Custom Bindings
None
UNIT TESTABLE
close enough FRP?
NICE CLEAN API
VM V M
plain HTML/CSS + knockout bindings + knockout templates mock data
in ViewModels Web Designer
No need to have HTML at all most of the
time! Backend AJAX mocks Front-end Developer
No need to do templating Simple services (most of the
time front-end driven) Backend Developer
None
None
Knockout Ember Angular Кривые обучения
Система диагнозтики рака • 20k LOC не считая библиотек •
HTML5 (Canvas, SVG) + Hadoop Система для флеботомии • 3k LOC of CoffeeScript • getUserMedia API Используем с начала 2011 года
None
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
Gotchas [грабли]
1. Не пихаем JS в байндинги! 2. ViewModel != Model
3. Event delegation происходит в "глубину" 4. Структурируем VM 5. Не пишем на голом jQuery 6. Ищем плагины 7. Фреймворк != Модульность Грабли
2 подхода к постороению страниц Простыня • Удобна для простых
приложений • Удобна для дизайнера • Весь код на одной странице Кирпичи • Reuse • Хорош для крупных и мультистраничных приложений
Knockout http://knockoutjs.com/ http://learn.knockoutjs.com/ https://github. com/SteveSanderson/knockout/wiki http://stackoverflow.com/tags/knockout.js/info
None
We <3
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
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/