SlideShare a Scribd company logo
1 of 30
Download to read offline
itcampro@ itcamp13# Premium conference on Microsoft technologies
SPA Made Breezy
Tiberiu Covaci, @tibor19
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileHuge thanks to our sponsors!
itcampro@ itcamp13# Premium conference on Microsoft technologies
itcampro@ itcamp13# Premium conference on Microsoft technologies
itcampro@ itcamp13# Premium conference on Microsoft technologies
Single Page Applications
Made with Breeze.js
Tibi Covaci, @tibor19
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileWho am I
• Tiberiu ’Tibi’ Covaci
• Software engineer, 20 years experience
• MCT since 2004, teaching .NET
• Senior Trainer & Mentor in Romania
• Microsoft MVP for Windows Azure
• Father & Geek
• Twitter: @tibor19 / #itcamp13
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileAgenda
• What is SPA
• Technologies
• Demo
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileSingle Page Application
Rich Client App in HTML/JavaScript
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileWhy SPA?
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileOne ASP.NET
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileHybrid is the norm
ASP.NET Web
Form
ASP.NET
MVC Page
ASP.Net
MVC Page
SPA
No one pattern is the best Evolution, not revolution
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileKnockout
• JavaScript MVVM framework
• Independent library
• Works well with other frameworks
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileKnockout
• Declarative bindings
• Automatic refresh
• Dependency tracking
• Support for templating
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileKnockout observables
• Observable properties
• Observable arrays
• Computed(dependent) observables
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileKnockout bindings
• Controlling text and appearance
• Control flow
• Form field bindings
• Rendering templates
• Custom bindings
itcampro@ itcamp13# Premium conference on Microsoft technologies
Demo
itcampro@ itcamp13# Premium conference on Microsoft technologies
learn more at
knockoutjs.com
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileDurandal
• Clean MV* Architecture
• JS & HTML Modularity
• Simple App Lifecycle
• Eventing, Modals, Message Boxes, etc.
• Navigation & Screen State Management
• Consistent Async Programming w/ Promises
• App Bundling and Optimization
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileDurandal
• Use any Backend Technology
• Built on top of jQuery, Knockout & RequireJS
• Integrates with other libraries such as
SammyJS & Bootstrap
• Make jQuery & Bootstrap widgets
templatable and bindable (or build your own
widgets).
itcampro@ itcamp13# Premium conference on Microsoft technologies
Demo
itcampro@ itcamp13# Premium conference on Microsoft technologies
learn more at
durandaljs.com
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileRich data
Caching
Validation
Client Queries
Batch Save
Change Tracking
Roll Your
Own
itcampro@ itcamp13# Premium conference on Microsoft technologies
Free
Open Source (GitHub)
MIT License
itcampro@ itcamp13# Premium conference on Microsoft technologies
Technical Support
Professional Services
itcampro@ itcamp13# Premium conference on Microsoft technologies
itcampro@ itcamp13# Premium conference on Microsoft technologies
Demo
itcampro@ itcamp13# Premium conference on Microsoft technologies
learn more at
breezejs.com
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileSummary
• SPA is a good alternative
• KO and data binding makes code cleaner
• Durandal makes the MV* easy
• SPA is Breezy with KO and Durandal
itcampro@ itcamp13# Premium conference on Microsoft technologies
Thank you
Thanks to IdeaBlade
Ward Bell
Marcel Good
itcampro@ itcamp13# Premium conference on Microsoft technologies
Q & A

More Related Content

More from ITCamp

ITCamp 2019 - Ivana Milicic - Color - The Shadow Ruler of UX
ITCamp 2019 - Ivana Milicic - Color - The Shadow Ruler of UXITCamp 2019 - Ivana Milicic - Color - The Shadow Ruler of UX
ITCamp 2019 - Ivana Milicic - Color - The Shadow Ruler of UX
ITCamp
 

More from ITCamp (20)

ITCamp 2019 - Stacey M. Jenkins - Protecting your company's data - By psychol...
ITCamp 2019 - Stacey M. Jenkins - Protecting your company's data - By psychol...ITCamp 2019 - Stacey M. Jenkins - Protecting your company's data - By psychol...
ITCamp 2019 - Stacey M. Jenkins - Protecting your company's data - By psychol...
 
ITCamp 2019 - Silviu Niculita - Supercharge your AI efforts with the use of A...
ITCamp 2019 - Silviu Niculita - Supercharge your AI efforts with the use of A...ITCamp 2019 - Silviu Niculita - Supercharge your AI efforts with the use of A...
ITCamp 2019 - Silviu Niculita - Supercharge your AI efforts with the use of A...
 
ITCamp 2019 - Peter Leeson - Managing Skills
ITCamp 2019 - Peter Leeson - Managing SkillsITCamp 2019 - Peter Leeson - Managing Skills
ITCamp 2019 - Peter Leeson - Managing Skills
 
ITCamp 2019 - Mihai Tataran - Governing your Cloud Resources
ITCamp 2019 - Mihai Tataran - Governing your Cloud ResourcesITCamp 2019 - Mihai Tataran - Governing your Cloud Resources
ITCamp 2019 - Mihai Tataran - Governing your Cloud Resources
 
ITCamp 2019 - Ivana Milicic - Color - The Shadow Ruler of UX
ITCamp 2019 - Ivana Milicic - Color - The Shadow Ruler of UXITCamp 2019 - Ivana Milicic - Color - The Shadow Ruler of UX
ITCamp 2019 - Ivana Milicic - Color - The Shadow Ruler of UX
 
ITCamp 2019 - Florin Coros - Implementing Clean Architecture
ITCamp 2019 - Florin Coros - Implementing Clean ArchitectureITCamp 2019 - Florin Coros - Implementing Clean Architecture
ITCamp 2019 - Florin Coros - Implementing Clean Architecture
 
ITCamp 2019 - Florin Loghiade - Azure Kubernetes in Production - Field notes...
ITCamp 2019 - Florin Loghiade -  Azure Kubernetes in Production - Field notes...ITCamp 2019 - Florin Loghiade -  Azure Kubernetes in Production - Field notes...
ITCamp 2019 - Florin Loghiade - Azure Kubernetes in Production - Field notes...
 
ITCamp 2019 - Florin Flestea - How 3rd Level support experience influenced m...
ITCamp 2019 - Florin Flestea -  How 3rd Level support experience influenced m...ITCamp 2019 - Florin Flestea -  How 3rd Level support experience influenced m...
ITCamp 2019 - Florin Flestea - How 3rd Level support experience influenced m...
 
ITCamp 2019 - Emil Craciun - RoboRestaurant of the future powered by serverle...
ITCamp 2019 - Emil Craciun - RoboRestaurant of the future powered by serverle...ITCamp 2019 - Emil Craciun - RoboRestaurant of the future powered by serverle...
ITCamp 2019 - Emil Craciun - RoboRestaurant of the future powered by serverle...
 
ITCamp 2019 - Eldert Grootenboer - Cloud Architecture Recipes for The Enterprise
ITCamp 2019 - Eldert Grootenboer - Cloud Architecture Recipes for The EnterpriseITCamp 2019 - Eldert Grootenboer - Cloud Architecture Recipes for The Enterprise
ITCamp 2019 - Eldert Grootenboer - Cloud Architecture Recipes for The Enterprise
 
ITCamp 2019 - Cristiana Fernbach - Blockchain Legal Trends
ITCamp 2019 - Cristiana Fernbach - Blockchain Legal TrendsITCamp 2019 - Cristiana Fernbach - Blockchain Legal Trends
ITCamp 2019 - Cristiana Fernbach - Blockchain Legal Trends
 
ITCamp 2019 - Andy Cross - Machine Learning with ML.NET and Azure Data Lake
ITCamp 2019 - Andy Cross - Machine Learning with ML.NET and Azure Data LakeITCamp 2019 - Andy Cross - Machine Learning with ML.NET and Azure Data Lake
ITCamp 2019 - Andy Cross - Machine Learning with ML.NET and Azure Data Lake
 
ITCamp 2019 - Andy Cross - Business Outcomes from AI
ITCamp 2019 - Andy Cross - Business Outcomes from AIITCamp 2019 - Andy Cross - Business Outcomes from AI
ITCamp 2019 - Andy Cross - Business Outcomes from AI
 
ITCamp 2019 - Andrea Saltarello - Modernise your app. The Cloud Story
ITCamp 2019 - Andrea Saltarello - Modernise your app. The Cloud StoryITCamp 2019 - Andrea Saltarello - Modernise your app. The Cloud Story
ITCamp 2019 - Andrea Saltarello - Modernise your app. The Cloud Story
 
ITCamp 2019 - Andrea Saltarello - Implementing bots and Alexa skills using Az...
ITCamp 2019 - Andrea Saltarello - Implementing bots and Alexa skills using Az...ITCamp 2019 - Andrea Saltarello - Implementing bots and Alexa skills using Az...
ITCamp 2019 - Andrea Saltarello - Implementing bots and Alexa skills using Az...
 
ITCamp 2019 - Alex Mang - I'm Confused Should I Orchestrate my Containers on ...
ITCamp 2019 - Alex Mang - I'm Confused Should I Orchestrate my Containers on ...ITCamp 2019 - Alex Mang - I'm Confused Should I Orchestrate my Containers on ...
ITCamp 2019 - Alex Mang - I'm Confused Should I Orchestrate my Containers on ...
 
ITCamp 2019 - Alex Mang - How Far Can Serverless Actually Go Now
ITCamp 2019 - Alex Mang - How Far Can Serverless Actually Go NowITCamp 2019 - Alex Mang - How Far Can Serverless Actually Go Now
ITCamp 2019 - Alex Mang - How Far Can Serverless Actually Go Now
 
ITCamp 2019 - Peter Leeson - Vitruvian Quality
ITCamp 2019 - Peter Leeson - Vitruvian QualityITCamp 2019 - Peter Leeson - Vitruvian Quality
ITCamp 2019 - Peter Leeson - Vitruvian Quality
 
ITCamp 2018 - Ciprian Sorlea - Million Dollars Hello World Application
ITCamp 2018 - Ciprian Sorlea - Million Dollars Hello World ApplicationITCamp 2018 - Ciprian Sorlea - Million Dollars Hello World Application
ITCamp 2018 - Ciprian Sorlea - Million Dollars Hello World Application
 
ITCamp 2018 - Ciprian Sorlea - Enterprise Architectures with TypeScript And F...
ITCamp 2018 - Ciprian Sorlea - Enterprise Architectures with TypeScript And F...ITCamp 2018 - Ciprian Sorlea - Enterprise Architectures with TypeScript And F...
ITCamp 2018 - Ciprian Sorlea - Enterprise Architectures with TypeScript And F...
 

Recently uploaded

Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
 

Recently uploaded (20)

Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu SubbuApidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 

ITCamp 2013 - Tiberiu Covaci - SPA Made Breezy

  • 1. itcampro@ itcamp13# Premium conference on Microsoft technologies SPA Made Breezy Tiberiu Covaci, @tibor19
  • 2. itcampro@ itcamp13# Premium conference on Microsoft technologies Development & MobileHuge thanks to our sponsors!
  • 3. itcampro@ itcamp13# Premium conference on Microsoft technologies
  • 4. itcampro@ itcamp13# Premium conference on Microsoft technologies
  • 5. itcampro@ itcamp13# Premium conference on Microsoft technologies Single Page Applications Made with Breeze.js Tibi Covaci, @tibor19
  • 6. itcampro@ itcamp13# Premium conference on Microsoft technologies Development & MobileWho am I • Tiberiu ’Tibi’ Covaci • Software engineer, 20 years experience • MCT since 2004, teaching .NET • Senior Trainer & Mentor in Romania • Microsoft MVP for Windows Azure • Father & Geek • Twitter: @tibor19 / #itcamp13
  • 7. itcampro@ itcamp13# Premium conference on Microsoft technologies Development & MobileAgenda • What is SPA • Technologies • Demo
  • 8. itcampro@ itcamp13# Premium conference on Microsoft technologies Development & MobileSingle Page Application Rich Client App in HTML/JavaScript
  • 9. itcampro@ itcamp13# Premium conference on Microsoft technologies Development & MobileWhy SPA?
  • 10. itcampro@ itcamp13# Premium conference on Microsoft technologies Development & MobileOne ASP.NET
  • 11. itcampro@ itcamp13# Premium conference on Microsoft technologies Development & MobileHybrid is the norm ASP.NET Web Form ASP.NET MVC Page ASP.Net MVC Page SPA No one pattern is the best Evolution, not revolution
  • 12. itcampro@ itcamp13# Premium conference on Microsoft technologies Development & MobileKnockout • JavaScript MVVM framework • Independent library • Works well with other frameworks
  • 13. itcampro@ itcamp13# Premium conference on Microsoft technologies Development & MobileKnockout • Declarative bindings • Automatic refresh • Dependency tracking • Support for templating
  • 14. itcampro@ itcamp13# Premium conference on Microsoft technologies Development & MobileKnockout observables • Observable properties • Observable arrays • Computed(dependent) observables
  • 15. itcampro@ itcamp13# Premium conference on Microsoft technologies Development & MobileKnockout bindings • Controlling text and appearance • Control flow • Form field bindings • Rendering templates • Custom bindings
  • 16. itcampro@ itcamp13# Premium conference on Microsoft technologies Demo
  • 17. itcampro@ itcamp13# Premium conference on Microsoft technologies learn more at knockoutjs.com
  • 18. itcampro@ itcamp13# Premium conference on Microsoft technologies Development & MobileDurandal • Clean MV* Architecture • JS & HTML Modularity • Simple App Lifecycle • Eventing, Modals, Message Boxes, etc. • Navigation & Screen State Management • Consistent Async Programming w/ Promises • App Bundling and Optimization
  • 19. itcampro@ itcamp13# Premium conference on Microsoft technologies Development & MobileDurandal • Use any Backend Technology • Built on top of jQuery, Knockout & RequireJS • Integrates with other libraries such as SammyJS & Bootstrap • Make jQuery & Bootstrap widgets templatable and bindable (or build your own widgets).
  • 20. itcampro@ itcamp13# Premium conference on Microsoft technologies Demo
  • 21. itcampro@ itcamp13# Premium conference on Microsoft technologies learn more at durandaljs.com
  • 22. itcampro@ itcamp13# Premium conference on Microsoft technologies Development & MobileRich data Caching Validation Client Queries Batch Save Change Tracking Roll Your Own
  • 23. itcampro@ itcamp13# Premium conference on Microsoft technologies Free Open Source (GitHub) MIT License
  • 24. itcampro@ itcamp13# Premium conference on Microsoft technologies Technical Support Professional Services
  • 25. itcampro@ itcamp13# Premium conference on Microsoft technologies
  • 26. itcampro@ itcamp13# Premium conference on Microsoft technologies Demo
  • 27. itcampro@ itcamp13# Premium conference on Microsoft technologies learn more at breezejs.com
  • 28. itcampro@ itcamp13# Premium conference on Microsoft technologies Development & MobileSummary • SPA is a good alternative • KO and data binding makes code cleaner • Durandal makes the MV* easy • SPA is Breezy with KO and Durandal
  • 29. itcampro@ itcamp13# Premium conference on Microsoft technologies Thank you Thanks to IdeaBlade Ward Bell Marcel Good
  • 30. itcampro@ itcamp13# Premium conference on Microsoft technologies Q & A