Knockout (support slides for presentation)

Aymeric Gaurat-Apelli
Aymeric Gaurat-ApelliSelf Employed Consultant / Entrepreneur at Everywhere
Knockout.js
Hands on introduction
Who am I?
Why a “Who am I?”
• Aymeric Gaurat-Apelli
• .NET developer/consultant since beta
• Worked in France, Australia (Readify) and Thailand
• Web entrepreneur
• Facebook games (1M users/day)
• http://taskarmy.com
• http://weekplan.net (knockout.js SPA)
• Employee at Jetabroad (Thailand)
What is Knockout.js?
• Javascript MVVM library
• Declarative data binding
• Templating
• http://knockoutjs.com
MVV What?
Model
View
Model
View
Knockout.js
love
Javascript
object
Portion
of HTML
Javascript
object
Server
side
Basics
ko.applyBindings(viewModel, domElement);
Hey Knockout.js
Apply my view model here
HTML Page
No problem!
Basics
ko.applyBindings(myViewModel, domElement);
Hey Knockout.js
Apply my view model here
HTML Page
No problem!
Observables
Can have subscribers
Raise an event when the value changes
You can have observable arrays too
<input type=“text” data-bind=“value: personName” />
Two way binding
Enough bla bla.
Let’s code…
1 of 8

Recommended

Build Your Own Website with HTML/CSS by
Build Your Own Website with HTML/CSSBuild Your Own Website with HTML/CSS
Build Your Own Website with HTML/CSSThinkful
63 views18 slides
Build your own website July 2017 LA by
Build your own website July 2017 LABuild your own website July 2017 LA
Build your own website July 2017 LAThinkful
121 views18 slides
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252-450 by
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252-450Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252-450
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252-450Justin Ezor
34 views23 slides
Build Your Own Website with HTML/CSS by
Build Your Own Website with HTML/CSSBuild Your Own Website with HTML/CSS
Build Your Own Website with HTML/CSSThinkful
50 views17 slides
Single Page Applications com ASP.NET 5 by
Single Page Applications com ASP.NET 5Single Page Applications com ASP.NET 5
Single Page Applications com ASP.NET 5Andre Baltieri
743 views13 slides
Feccphx9:25 by
Feccphx9:25Feccphx9:25
Feccphx9:25Thinkful
97 views26 slides

More Related Content

What's hot

Integrating AngularJS into the Campus CMS by
Integrating AngularJS into the Campus CMSIntegrating AngularJS into the Campus CMS
Integrating AngularJS into the Campus CMSTom Borger
456 views17 slides
Build Your Own Website with HTML/CSS 8.15 by
Build Your Own Website with HTML/CSS 8.15Build Your Own Website with HTML/CSS 8.15
Build Your Own Website with HTML/CSS 8.15Thinkful
128 views19 slides
MVC Team by
MVC TeamMVC Team
MVC TeamMVC TEAM
285 views1 slide
Word Camp Cologne 2016: Session The WordPress 1% by
Word Camp Cologne 2016: Session The WordPress 1%Word Camp Cologne 2016: Session The WordPress 1%
Word Camp Cologne 2016: Session The WordPress 1%Dominic Grzbielok
631 views11 slides
Single Page Applications: Your Browser is the OS! by
Single Page Applications: Your Browser is the OS!Single Page Applications: Your Browser is the OS!
Single Page Applications: Your Browser is the OS!Jeremy Likness
4.9K views39 slides
Reusing JavaScript knowledge in Windows Store apps by
Reusing JavaScript knowledge in Windows Store appsReusing JavaScript knowledge in Windows Store apps
Reusing JavaScript knowledge in Windows Store appsTimmy Kokke
668 views29 slides

What's hot(19)

Integrating AngularJS into the Campus CMS by Tom Borger
Integrating AngularJS into the Campus CMSIntegrating AngularJS into the Campus CMS
Integrating AngularJS into the Campus CMS
Tom Borger456 views
Build Your Own Website with HTML/CSS 8.15 by Thinkful
Build Your Own Website with HTML/CSS 8.15Build Your Own Website with HTML/CSS 8.15
Build Your Own Website with HTML/CSS 8.15
Thinkful128 views
MVC Team by MVC TEAM
MVC TeamMVC Team
MVC Team
MVC TEAM285 views
Word Camp Cologne 2016: Session The WordPress 1% by Dominic Grzbielok
Word Camp Cologne 2016: Session The WordPress 1%Word Camp Cologne 2016: Session The WordPress 1%
Word Camp Cologne 2016: Session The WordPress 1%
Dominic Grzbielok631 views
Single Page Applications: Your Browser is the OS! by Jeremy Likness
Single Page Applications: Your Browser is the OS!Single Page Applications: Your Browser is the OS!
Single Page Applications: Your Browser is the OS!
Jeremy Likness4.9K views
Reusing JavaScript knowledge in Windows Store apps by Timmy Kokke
Reusing JavaScript knowledge in Windows Store appsReusing JavaScript knowledge in Windows Store apps
Reusing JavaScript knowledge in Windows Store apps
Timmy Kokke668 views
What happens after react? by Jesper Bylund
What happens after react?What happens after react?
What happens after react?
Jesper Bylund286 views
Abusing JavaScript for fun and profit by Myles Eftos
Abusing JavaScript for fun and profitAbusing JavaScript for fun and profit
Abusing JavaScript for fun and profit
Myles Eftos1K views
Build Your Own Website with HTML/CSS - July 17 - LA by Thinkful
Build Your Own Website with HTML/CSS - July 17 - LABuild Your Own Website with HTML/CSS - July 17 - LA
Build Your Own Website with HTML/CSS - July 17 - LA
Thinkful29 views
Build Your Own Website with HTML/CSS 8.15 by Thinkful
Build Your Own Website with HTML/CSS 8.15Build Your Own Website with HTML/CSS 8.15
Build Your Own Website with HTML/CSS 8.15
Thinkful118 views
Build Your Own Website with HTML/CSS by Thinkful
Build Your Own Website with HTML/CSSBuild Your Own Website with HTML/CSS
Build Your Own Website with HTML/CSS
Thinkful108 views
Build an App with JavaScript & jQuery by Aaron Lamphere
Build an App with JavaScript & jQuery Build an App with JavaScript & jQuery
Build an App with JavaScript & jQuery
Aaron Lamphere87 views
Htmlcssphx1018 by Thinkful
Htmlcssphx1018Htmlcssphx1018
Htmlcssphx1018
Thinkful134 views
WordPress Affiliate Toolkit - Affiliate Summit East 2014 by David Vogelpohl
WordPress Affiliate Toolkit - Affiliate Summit East 2014WordPress Affiliate Toolkit - Affiliate Summit East 2014
WordPress Affiliate Toolkit - Affiliate Summit East 2014
David Vogelpohl621 views
Working with an enterprise client - a case study of creating a WooCommerce pl... by Maciej Swoboda
Working with an enterprise client - a case study of creating a WooCommerce pl...Working with an enterprise client - a case study of creating a WooCommerce pl...
Working with an enterprise client - a case study of creating a WooCommerce pl...
Maciej Swoboda250 views
Canopy view of single-page applications (SPAs) by Benjamin Howarth
Canopy view of single-page applications (SPAs)Canopy view of single-page applications (SPAs)
Canopy view of single-page applications (SPAs)
Benjamin Howarth697 views
Build Your Own Website with HTML/CSS - July - LA by Thinkful
Build Your Own Website with HTML/CSS - July - LABuild Your Own Website with HTML/CSS - July - LA
Build Your Own Website with HTML/CSS - July - LA
Thinkful70 views

Viewers also liked

Form follows function 形式追随功能 by
Form follows function 形式追随功能Form follows function 形式追随功能
Form follows function 形式追随功能ejialin
1K views30 slides
Knockout js (Dennis Haney) by
Knockout js (Dennis Haney)Knockout js (Dennis Haney)
Knockout js (Dennis Haney)JavaScript Meetup HCMC
1.1K views25 slides
knockout.js by
knockout.jsknockout.js
knockout.jsAnton Patrushev
691 views31 slides
Knockout js by
Knockout jsKnockout js
Knockout jsLearningTech
700 views11 slides
Fundaments of Knockout js by
Fundaments of Knockout jsFundaments of Knockout js
Fundaments of Knockout jsFlavius-Radu Demian
2.4K views44 slides
Knockout.js explained by
Knockout.js explainedKnockout.js explained
Knockout.js explainedPaxcel Technologies
3.5K views49 slides

Viewers also liked(19)

Form follows function 形式追随功能 by ejialin
Form follows function 形式追随功能Form follows function 形式追随功能
Form follows function 形式追随功能
ejialin1K views
Introduction to Knockoutjs by jhoguet
Introduction to KnockoutjsIntroduction to Knockoutjs
Introduction to Knockoutjs
jhoguet1.9K views
Knockout js by hhassann
Knockout jsKnockout js
Knockout js
hhassann528 views
Knockout.js by Vivek Rajan
Knockout.jsKnockout.js
Knockout.js
Vivek Rajan11.7K views
Knockout JS Development - a Quick Understanding by Udaya Kumar
Knockout JS Development - a Quick UnderstandingKnockout JS Development - a Quick Understanding
Knockout JS Development - a Quick Understanding
Udaya Kumar157 views
Knockout js by shobokshi
Knockout jsKnockout js
Knockout js
shobokshi1.6K views
Download presentation by webhostingguy
Download presentationDownload presentation
Download presentation
webhostingguy214K views
Slideshare Powerpoint presentation by elliehood
Slideshare Powerpoint presentationSlideshare Powerpoint presentation
Slideshare Powerpoint presentation
elliehood812.8K views

Similar to Knockout (support slides for presentation)

MV* presentation frameworks in Javascript: en garde, pret, allez! by
MV* presentation frameworks in Javascript: en garde, pret, allez!MV* presentation frameworks in Javascript: en garde, pret, allez!
MV* presentation frameworks in Javascript: en garde, pret, allez!Roberto Messora
1K views31 slides
Browser Automated Testing Frameworks - Nightwatch.js by
Browser Automated Testing Frameworks - Nightwatch.jsBrowser Automated Testing Frameworks - Nightwatch.js
Browser Automated Testing Frameworks - Nightwatch.jsLuís Bastião Silva
7K views20 slides
An Introduction to Web Components by
An Introduction to Web ComponentsAn Introduction to Web Components
An Introduction to Web ComponentsRed Pill Now
1.4K views45 slides
JavaScript for ASP.NET programmers (webcast) upload by
JavaScript for ASP.NET programmers (webcast) uploadJavaScript for ASP.NET programmers (webcast) upload
JavaScript for ASP.NET programmers (webcast) uploadRuss Fustino
2.9K views38 slides
John Resig Beijing 2010 (English Version) by
John Resig Beijing 2010 (English Version)John Resig Beijing 2010 (English Version)
John Resig Beijing 2010 (English Version)Jia Mi
777 views51 slides
Knockout implementing mvvm in java script with knockout by
Knockout implementing mvvm in java script with knockoutKnockout implementing mvvm in java script with knockout
Knockout implementing mvvm in java script with knockoutAndoni Arroyo
1.2K views33 slides

Similar to Knockout (support slides for presentation)(20)

MV* presentation frameworks in Javascript: en garde, pret, allez! by Roberto Messora
MV* presentation frameworks in Javascript: en garde, pret, allez!MV* presentation frameworks in Javascript: en garde, pret, allez!
MV* presentation frameworks in Javascript: en garde, pret, allez!
Roberto Messora1K views
An Introduction to Web Components by Red Pill Now
An Introduction to Web ComponentsAn Introduction to Web Components
An Introduction to Web Components
Red Pill Now1.4K views
JavaScript for ASP.NET programmers (webcast) upload by Russ Fustino
JavaScript for ASP.NET programmers (webcast) uploadJavaScript for ASP.NET programmers (webcast) upload
JavaScript for ASP.NET programmers (webcast) upload
Russ Fustino2.9K views
John Resig Beijing 2010 (English Version) by Jia Mi
John Resig Beijing 2010 (English Version)John Resig Beijing 2010 (English Version)
John Resig Beijing 2010 (English Version)
Jia Mi777 views
Knockout implementing mvvm in java script with knockout by Andoni Arroyo
Knockout implementing mvvm in java script with knockoutKnockout implementing mvvm in java script with knockout
Knockout implementing mvvm in java script with knockout
Andoni Arroyo1.2K views
Testing ASP.NET - Progressive.NET by Ben Hall
Testing ASP.NET - Progressive.NETTesting ASP.NET - Progressive.NET
Testing ASP.NET - Progressive.NET
Ben Hall5K views
Angular or Backbone: Go Mobile! by Doris Chen
Angular or Backbone: Go Mobile!Angular or Backbone: Go Mobile!
Angular or Backbone: Go Mobile!
Doris Chen5K views
Testing Ext JS and Sencha Touch by Mats Bryntse
Testing Ext JS and Sencha TouchTesting Ext JS and Sencha Touch
Testing Ext JS and Sencha Touch
Mats Bryntse8.4K views
Improving Your Selenium WebDriver Tests - Belgium testing days_2016 by Roy de Kleijn
Improving Your Selenium WebDriver Tests - Belgium testing days_2016Improving Your Selenium WebDriver Tests - Belgium testing days_2016
Improving Your Selenium WebDriver Tests - Belgium testing days_2016
Roy de Kleijn343 views
Open Social In The Enterprise by Tim Moore
Open Social In The EnterpriseOpen Social In The Enterprise
Open Social In The Enterprise
Tim Moore718 views
Awesome html with ujs, jQuery and coffeescript by Amir Barylko
Awesome html with ujs, jQuery and coffeescriptAwesome html with ujs, jQuery and coffeescript
Awesome html with ujs, jQuery and coffeescript
Amir Barylko1.1K views
Mock with Mockito by Camilo Lopes
Mock with MockitoMock with Mockito
Mock with Mockito
Camilo Lopes1.9K views
How and why we evolved a legacy Java web application to Scala... and we are s... by Katia Aresti
How and why we evolved a legacy Java web application to Scala... and we are s...How and why we evolved a legacy Java web application to Scala... and we are s...
How and why we evolved a legacy Java web application to Scala... and we are s...
Katia Aresti1.3K views
ASP.NET MVC Best Practices malisa ncube by Malisa Ncube
ASP.NET MVC Best Practices   malisa ncubeASP.NET MVC Best Practices   malisa ncube
ASP.NET MVC Best Practices malisa ncube
Malisa Ncube2.7K views
Rp 6 session 2 naresh bhatia by sapientindia
Rp 6  session 2 naresh bhatiaRp 6  session 2 naresh bhatia
Rp 6 session 2 naresh bhatia
sapientindia1.4K views
Become a Full Stack Web Developer (.NET) - Thisiswali by thisiswali
Become a Full Stack Web Developer (.NET) - ThisiswaliBecome a Full Stack Web Developer (.NET) - Thisiswali
Become a Full Stack Web Developer (.NET) - Thisiswali
thisiswali168 views
ME vs WEB - AngularJS Fundamentals by Aviran Cohen
ME vs WEB - AngularJS FundamentalsME vs WEB - AngularJS Fundamentals
ME vs WEB - AngularJS Fundamentals
Aviran Cohen2.6K views
Beyond Fluffy Bunny. How I leveraged WebObjects in my lean startup. by WO Community
Beyond Fluffy Bunny. How I leveraged WebObjects in my lean startup.Beyond Fluffy Bunny. How I leveraged WebObjects in my lean startup.
Beyond Fluffy Bunny. How I leveraged WebObjects in my lean startup.
WO Community1K views

More from Aymeric Gaurat-Apelli

Living the lean startup by
Living the lean startupLiving the lean startup
Living the lean startupAymeric Gaurat-Apelli
441 views17 slides
Outsourcing for startups by
Outsourcing for startupsOutsourcing for startups
Outsourcing for startupsAymeric Gaurat-Apelli
615 views23 slides
Write Better Javascript code by
Write Better Javascript codeWrite Better Javascript code
Write Better Javascript codeAymeric Gaurat-Apelli
545 views18 slides
Event4 better javascript by
Event4   better javascriptEvent4   better javascript
Event4 better javascriptAymeric Gaurat-Apelli
247 views18 slides
Goalstribe by
GoalstribeGoalstribe
GoalstribeAymeric Gaurat-Apelli
252 views12 slides
TaskArmy - Pitch Deck by
TaskArmy - Pitch DeckTaskArmy - Pitch Deck
TaskArmy - Pitch DeckAymeric Gaurat-Apelli
485 views16 slides

Recently uploaded

Unit 1_Lecture 2_Physical Design of IoT.pdf by
Unit 1_Lecture 2_Physical Design of IoT.pdfUnit 1_Lecture 2_Physical Design of IoT.pdf
Unit 1_Lecture 2_Physical Design of IoT.pdfStephenTec
12 views36 slides
Uni Systems for Power Platform.pptx by
Uni Systems for Power Platform.pptxUni Systems for Power Platform.pptx
Uni Systems for Power Platform.pptxUni Systems S.M.S.A.
56 views21 slides
virtual reality.pptx by
virtual reality.pptxvirtual reality.pptx
virtual reality.pptxG036GaikwadSnehal
11 views15 slides
Vertical User Stories by
Vertical User StoriesVertical User Stories
Vertical User StoriesMoisés Armani Ramírez
14 views16 slides
STPI OctaNE CoE Brochure.pdf by
STPI OctaNE CoE Brochure.pdfSTPI OctaNE CoE Brochure.pdf
STPI OctaNE CoE Brochure.pdfmadhurjyapb
14 views1 slide
Design Driven Network Assurance by
Design Driven Network AssuranceDesign Driven Network Assurance
Design Driven Network AssuranceNetwork Automation Forum
15 views42 slides

Recently uploaded(20)

Unit 1_Lecture 2_Physical Design of IoT.pdf by StephenTec
Unit 1_Lecture 2_Physical Design of IoT.pdfUnit 1_Lecture 2_Physical Design of IoT.pdf
Unit 1_Lecture 2_Physical Design of IoT.pdf
StephenTec12 views
STPI OctaNE CoE Brochure.pdf by madhurjyapb
STPI OctaNE CoE Brochure.pdfSTPI OctaNE CoE Brochure.pdf
STPI OctaNE CoE Brochure.pdf
madhurjyapb14 views
Attacking IoT Devices from a Web Perspective - Linux Day by Simone Onofri
Attacking IoT Devices from a Web Perspective - Linux Day Attacking IoT Devices from a Web Perspective - Linux Day
Attacking IoT Devices from a Web Perspective - Linux Day
Simone Onofri16 views
iSAQB Software Architecture Gathering 2023: How Process Orchestration Increas... by Bernd Ruecker
iSAQB Software Architecture Gathering 2023: How Process Orchestration Increas...iSAQB Software Architecture Gathering 2023: How Process Orchestration Increas...
iSAQB Software Architecture Gathering 2023: How Process Orchestration Increas...
Bernd Ruecker37 views
Serverless computing with Google Cloud (2023-24) by wesley chun
Serverless computing with Google Cloud (2023-24)Serverless computing with Google Cloud (2023-24)
Serverless computing with Google Cloud (2023-24)
wesley chun11 views
SAP Automation Using Bar Code and FIORI.pdf by Virendra Rai, PMP
SAP Automation Using Bar Code and FIORI.pdfSAP Automation Using Bar Code and FIORI.pdf
SAP Automation Using Bar Code and FIORI.pdf
ESPC 2023 - Protect and Govern your Sensitive Data with Microsoft Purview in ... by Jasper Oosterveld
ESPC 2023 - Protect and Govern your Sensitive Data with Microsoft Purview in ...ESPC 2023 - Protect and Govern your Sensitive Data with Microsoft Purview in ...
ESPC 2023 - Protect and Govern your Sensitive Data with Microsoft Purview in ...
Automating a World-Class Technology Conference; Behind the Scenes of CiscoLive by Network Automation Forum
Automating a World-Class Technology Conference; Behind the Scenes of CiscoLiveAutomating a World-Class Technology Conference; Behind the Scenes of CiscoLive
Automating a World-Class Technology Conference; Behind the Scenes of CiscoLive
GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N... by James Anderson
GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N...GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N...
GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N...
James Anderson85 views

Knockout (support slides for presentation)