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.3k
Knockout: как, зачем, почему
fwdays
March 05, 2013
Tweet
Share
More Decks by fwdays
See All by fwdays
Symfony best practices и не только Олег Зинченко
fwdays
0
1.9k
Beyond Testing Михаил Боднарчук
fwdays
0
650
Yii2 - на пути от Alpha до GA. Взгляд с практической стороны Александр Бордун
fwdays
0
1.7k
Laravel 4: простота во всем. Евгений Косинский
fwdays
0
860
Маленькая библиотека для большой компании. Антон Шевчук
fwdays
0
3.7k
Phalcon. Что нового? Александр Торош
fwdays
0
970
Выбираем поисковик умом головы. Андрей Аксенов
fwdays
0
1.2k
Past, Present, and Future: The Evolution of PHP Development. Nate Abele
fwdays
0
670
Функциональный тулчейн Nix
fwdays
1
380
Other Decks in Programming
See All in Programming
educure_カリキュラム生操作マニュアル.pdf
linew_official
0
470
二郎系ラーメンのコールで学ぶ AST 解析
memory1994
PRO
7
1.7k
Prepare for Jakarta EE 11 - Performance and Developer Productivity
ivargrimstad
0
460
Zero Waste, Radical Magic, and Italian Graft – Quarkus Efficiency Secrets
hollycummins
0
220
雑に思考を整理する技術と効能
konifar
55
25k
CircleCIを活用して AWSへの継続的デリバリーを 実践する
coconala_engineer
1
230
Semantic search with Django and pgvector
pauloxnet
0
240
HUIT新歓2024「競技プログラミング、やってみませんか?」
slephy2784
1
250
はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
mizdra
3
370
What We Can Learn From OSS
inouehi
0
400
Doctrine ORMでValue Objectを扱う方法4選 #phpstudy / 4 ways to handle Value Objects with Doctrine ORM
77web
4
110
Build with AI 2024 Seoul - 제로부터 시작하는 Flutter with Gemini 생활 - 박제창
itsmedreamwalker
0
200
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1355
200k
Bootstrapping a Software Product
garrettdimon
PRO
301
110k
BBQ
matthewcrist
80
8.7k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
GitHub's CSS Performance
jonrohan
1023
450k
How to Ace a Technical Interview
jacobian
272
22k
Agile that works and the tools we love
rasmusluckow
324
20k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
1
3.4k
RailsConf 2023
tenderlove
2
530
In The Pink: A Labor of Love
frogandcode
138
21k
Designing Experiences People Love
moore
136
23k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
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/