SlideShare une entreprise Scribd logo
1  sur  17
Knockout.js
 Dynamic Web UIs and the MVVM pattern




Ægir Þorsteinsson
Landsbankinn
@thorsteinsson
http://thorsteinsson.is/
Knockout.js
MVVM for HTML and JavaScript



      Open source JavaScript library
        (MIT license – source on GitHub)


      ~ 1 year old; active community

                  Community project
                   (not run by Microsoft)
Knockout.js
 What is it good for?


  Rich client-side interactivity   Bye bye, overlapping mess of
                                   interrelated event handlers

                                   Hello, object-oriented JavaScript
         MVVM pattern
                                   and declarative bindings


     Wide browser support


                                   6+      2+
http://knockoutjs.com
MVVM in JavaScript

            View                HTML + declarative bindings
Browser




                Automatic


          ViewModel             JavaScript + observables


                Ajax / form posts
Server




           “Model”              Any server-side technology
Examples
Examples
Commonly-used bindings
         text      html      visible
                                       Content
                                       & appearance
          css      attr       style

         event    click      submit    Events


         value    options    checked
                                       Form fields
selectedOptions   enable     disable

                            template   Templating

                                       Control flow
          if       with      foreach
                                       (KO 1.3)
Knockout.js
How is it different?




    Automatic                        Integrated
                       Declarative
   dependency                        templating
                        bindings
     tracking
http://knockoutjs.com
SignalR
Persistent connection between JS and ASP.NET



      Open source JavaScript library
        (MIT license – source on GitHub)


      ~ 1 year old; active community

                  Community project
                   (not run by Microsoft)
SignalR
Browser




          JavaScript


                 Long polling / web sockets
Server




          ASP.NET
SignalR




      http://aegir.pagekite.me/chat
SignalR
SignalR
SignalR
More information

http://knockoutjs.com
http://signalr.net
http://learn.knockoutjs.com
http://knockmeout.net
Questions?


Ægir Þorsteinsson
Landsbankinn
@thorsteinsson
http://thorsteinsson.is/

Contenu connexe

Similaire à Knockout.js & SignalR

Connected Web Systems
Connected Web SystemsConnected Web Systems
Connected Web SystemsDamir Dobric
 
JSUG - Filthy Flex by Christoph Pickl
JSUG - Filthy Flex by Christoph PicklJSUG - Filthy Flex by Christoph Pickl
JSUG - Filthy Flex by Christoph PicklChristoph Pickl
 
Ajax toolkit-framework
Ajax toolkit-frameworkAjax toolkit-framework
Ajax toolkit-frameworkWBUTTUTORIALS
 
Ajax toolkit framework
Ajax toolkit frameworkAjax toolkit framework
Ajax toolkit frameworkSunil Kumar
 
Life as an asp.net programmer
Life as an asp.net programmerLife as an asp.net programmer
Life as an asp.net programmerArun Prasad
 
Locking the Throne Room - How ES5+ might change views on XSS and Client Side ...
Locking the Throne Room - How ES5+ might change views on XSS and Client Side ...Locking the Throne Room - How ES5+ might change views on XSS and Client Side ...
Locking the Throne Room - How ES5+ might change views on XSS and Client Side ...Mario Heiderich
 
HTML5がIE10/Windows 8にもたらすもの
HTML5がIE10/Windows 8にもたらすものHTML5がIE10/Windows 8にもたらすもの
HTML5がIE10/Windows 8にもたらすものMicrosoft
 
D22 Portlet Development With Open Source Frameworks
D22 Portlet Development With Open Source FrameworksD22 Portlet Development With Open Source Frameworks
D22 Portlet Development With Open Source FrameworksSunil Patil
 
D22 portlet development with open source frameworks
D22 portlet development with open source frameworksD22 portlet development with open source frameworks
D22 portlet development with open source frameworksSunil Patil
 
Isomorphic JavaScript with Nashorn
Isomorphic JavaScript with NashornIsomorphic JavaScript with Nashorn
Isomorphic JavaScript with NashornMaxime Najim
 
Lessons from the Trenches: Engineering Great AJAX Experiences
Lessons from the Trenches: Engineering Great AJAX ExperiencesLessons from the Trenches: Engineering Great AJAX Experiences
Lessons from the Trenches: Engineering Great AJAX Experiencesgoodfriday
 
Introduction to Seam Applications
Introduction to Seam ApplicationsIntroduction to Seam Applications
Introduction to Seam Applicationsnuwanrg
 
Introduction to seam_applications_formated
Introduction to seam_applications_formatedIntroduction to seam_applications_formated
Introduction to seam_applications_formatednuwanrg
 
Introduction to seam_applications_formated
Introduction to seam_applications_formatedIntroduction to seam_applications_formated
Introduction to seam_applications_formatednuwanrg
 
ITCamp 2012 - Florin Cardasim - HTML5 web-sockets
ITCamp 2012 - Florin Cardasim - HTML5 web-socketsITCamp 2012 - Florin Cardasim - HTML5 web-sockets
ITCamp 2012 - Florin Cardasim - HTML5 web-socketsITCamp
 

Similaire à Knockout.js & SignalR (20)

Connected Web Systems
Connected Web SystemsConnected Web Systems
Connected Web Systems
 
Gwt session
Gwt sessionGwt session
Gwt session
 
JSUG - Filthy Flex by Christoph Pickl
JSUG - Filthy Flex by Christoph PicklJSUG - Filthy Flex by Christoph Pickl
JSUG - Filthy Flex by Christoph Pickl
 
Ajax toolkit-framework
Ajax toolkit-frameworkAjax toolkit-framework
Ajax toolkit-framework
 
Ajax toolkit framework
Ajax toolkit frameworkAjax toolkit framework
Ajax toolkit framework
 
Signal r
Signal rSignal r
Signal r
 
Life as an asp.net programmer
Life as an asp.net programmerLife as an asp.net programmer
Life as an asp.net programmer
 
Locking the Throne Room - How ES5+ might change views on XSS and Client Side ...
Locking the Throne Room - How ES5+ might change views on XSS and Client Side ...Locking the Throne Room - How ES5+ might change views on XSS and Client Side ...
Locking the Throne Room - How ES5+ might change views on XSS and Client Side ...
 
Advanced JavaScript
Advanced JavaScriptAdvanced JavaScript
Advanced JavaScript
 
HTML5がIE10/Windows 8にもたらすもの
HTML5がIE10/Windows 8にもたらすものHTML5がIE10/Windows 8にもたらすもの
HTML5がIE10/Windows 8にもたらすもの
 
D22 Portlet Development With Open Source Frameworks
D22 Portlet Development With Open Source FrameworksD22 Portlet Development With Open Source Frameworks
D22 Portlet Development With Open Source Frameworks
 
D22 portlet development with open source frameworks
D22 portlet development with open source frameworksD22 portlet development with open source frameworks
D22 portlet development with open source frameworks
 
Isomorphic JavaScript with Nashorn
Isomorphic JavaScript with NashornIsomorphic JavaScript with Nashorn
Isomorphic JavaScript with Nashorn
 
Real-time ASP.NET with SignalR
Real-time ASP.NET with SignalRReal-time ASP.NET with SignalR
Real-time ASP.NET with SignalR
 
Lessons from the Trenches: Engineering Great AJAX Experiences
Lessons from the Trenches: Engineering Great AJAX ExperiencesLessons from the Trenches: Engineering Great AJAX Experiences
Lessons from the Trenches: Engineering Great AJAX Experiences
 
Lessons
LessonsLessons
Lessons
 
Introduction to Seam Applications
Introduction to Seam ApplicationsIntroduction to Seam Applications
Introduction to Seam Applications
 
Introduction to seam_applications_formated
Introduction to seam_applications_formatedIntroduction to seam_applications_formated
Introduction to seam_applications_formated
 
Introduction to seam_applications_formated
Introduction to seam_applications_formatedIntroduction to seam_applications_formated
Introduction to seam_applications_formated
 
ITCamp 2012 - Florin Cardasim - HTML5 web-sockets
ITCamp 2012 - Florin Cardasim - HTML5 web-socketsITCamp 2012 - Florin Cardasim - HTML5 web-sockets
ITCamp 2012 - Florin Cardasim - HTML5 web-sockets
 

Dernier

"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr LapshynFwdays
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 3652toLead Limited
 
Training state-of-the-art general text embedding
Training state-of-the-art general text embeddingTraining state-of-the-art general text embedding
Training state-of-the-art general text embeddingZilliz
 
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupStreamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupFlorian Wilhelm
 
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Patryk Bandurski
 
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Scott Keck-Warren
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Commit University
 
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii SoldatenkoFwdays
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brandgvaughan
 
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Mattias Andersson
 
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machineInstall Stable Diffusion in windows machine
Install Stable Diffusion in windows machinePadma Pradeep
 
Vector Databases 101 - An introduction to the world of Vector Databases
Vector Databases 101 - An introduction to the world of Vector DatabasesVector Databases 101 - An introduction to the world of Vector Databases
Vector Databases 101 - An introduction to the world of Vector DatabasesZilliz
 
SAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxSAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxNavinnSomaal
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenHervé Boutemy
 
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfAddepto
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsSergiu Bodiu
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Manik S Magar
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Enterprise Knowledge
 

Dernier (20)

"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
 
Training state-of-the-art general text embedding
Training state-of-the-art general text embeddingTraining state-of-the-art general text embedding
Training state-of-the-art general text embedding
 
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupStreamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project Setup
 
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
 
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024
 
DMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special EditionDMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special Edition
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!
 
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brand
 
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?
 
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machineInstall Stable Diffusion in windows machine
Install Stable Diffusion in windows machine
 
Vector Databases 101 - An introduction to the world of Vector Databases
Vector Databases 101 - An introduction to the world of Vector DatabasesVector Databases 101 - An introduction to the world of Vector Databases
Vector Databases 101 - An introduction to the world of Vector Databases
 
SAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxSAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptx
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache Maven
 
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdf
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024
 

Knockout.js & SignalR