javascript for asp.net programmers (webcast) upload
DESCRIPTION
This deck is from the Webcast on 9/12/13 from ComponentOne with Russ Fustino and Chris BannonTRANSCRIPT
![Page 1: JavaScript for ASP.NET programmers (webcast) upload](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c6bde64a7959c4648b459e/html5/thumbnails/1.jpg)
RUSS FUSTINO HEAD OF DEVELOPER EVANGELISM
www.componentone.com/russcam
JavaScript for the ASP.NET Developer
Chris Bannon - @Wijmo PM @b4nn0n
![Page 2: JavaScript for ASP.NET programmers (webcast) upload](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c6bde64a7959c4648b459e/html5/thumbnails/2.jpg)
ABOUT ME
Head of Developer Evangelism at ComponentOne
Former Microsoft Developer Evangelist
Windows 8 Key Influencer
Social Media and Video Production Expert
INETA Lifetime Achievement Award Winner
![Page 3: JavaScript for ASP.NET programmers (webcast) upload](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c6bde64a7959c4648b459e/html5/thumbnails/3.jpg)
WHY USE JAVASCRIPT AND HTML5?
• 61% leave a site if it is not mobile-ready
• 79% search for another site
• 48% said if a site didn’t work on a mobile device, they didn’t feel the company valued their business
• Bottom line… there is a real world business need for mobile ready sites
• * Source Google Blog
![Page 4: JavaScript for ASP.NET programmers (webcast) upload](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c6bde64a7959c4648b459e/html5/thumbnails/4.jpg)
HOW DO I USE MY SKILL SET AS AN ASP.NET DEVELOPER,
TO A PROGRAM IN JAVASCRIPT?
• What is the pain solved using JavaScript anyway?
• How do I use AJAX in JavaScript?
• Are there ‘built in’ libraries available?
• How do I use third party controls?
• What about data binding?
• What about frameworks?
![Page 5: JavaScript for ASP.NET programmers (webcast) upload](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c6bde64a7959c4648b459e/html5/thumbnails/5.jpg)
MOBILITY IS IMPORTANT!RESPONSIVE WEBSITE DEMO
![Page 7: JavaScript for ASP.NET programmers (webcast) upload](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c6bde64a7959c4648b459e/html5/thumbnails/7.jpg)
HOW DO I GET FROM THIS…
ASP.Net
Ajax Controls
![Page 8: JavaScript for ASP.NET programmers (webcast) upload](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c6bde64a7959c4648b459e/html5/thumbnails/8.jpg)
…TO THIS?
HTML5
Ajax
![Page 9: JavaScript for ASP.NET programmers (webcast) upload](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c6bde64a7959c4648b459e/html5/thumbnails/9.jpg)
RUSS FUSTINO’S MAP
ASP.Net
AjaxControls
HTML5
Ajax
![Page 10: JavaScript for ASP.NET programmers (webcast) upload](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c6bde64a7959c4648b459e/html5/thumbnails/10.jpg)
WHAT EXACTLY IS AJAX?
Ajax == Asynchronous JavaScript and XML
Ajax is really a set of technologies working together:
XHTML and CSS for markup DOM for display and interaction XML and XSLT for data interchange & manipulation JSON for marshalling objects XMLHttpRequest for asynchronous communication JavaScript for tying it all together
Allows us to load data from the server without a browser page refresh
![Page 11: JavaScript for ASP.NET programmers (webcast) upload](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c6bde64a7959c4648b459e/html5/thumbnails/11.jpg)
DEMO
Ajax
![Page 12: JavaScript for ASP.NET programmers (webcast) upload](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c6bde64a7959c4648b459e/html5/thumbnails/12.jpg)
JQUERY• Javascript is HARD• jQuery is a Javascript library that makes Javascript easier• Simplifies DOM spelunking• Handles browser differences• Provides a key shortcut “$”
•Download from jquery.com• The jQuery library has a full suite of functions and methods for AJAX capabilities. •Hosted on CDN
![Page 13: JavaScript for ASP.NET programmers (webcast) upload](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c6bde64a7959c4648b459e/html5/thumbnails/13.jpg)
JQUERY SYNTAX
• $(selector).action()
• $ references jQuery; (selector) queries the DOM element or elements; and .action() performs an action on the element.• Examples of jQuery syntax:
◾$(this).hide() hides the current element.◾$("p").hide() hides all paragraphs.◾$("p.wow").hide() hides all paragraphs of the class "wow".◾$("#wow").hide() hides an element with the id of "wow".
![Page 14: JavaScript for ASP.NET programmers (webcast) upload](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c6bde64a7959c4648b459e/html5/thumbnails/14.jpg)
HTTP://API.JQUERY.COM/
![Page 15: JavaScript for ASP.NET programmers (webcast) upload](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c6bde64a7959c4648b459e/html5/thumbnails/15.jpg)
HTTP://WIJMO.COM/WIKI/INDEX.PHP/GETTING_STARTED_WITH_WIJMO
![Page 16: JavaScript for ASP.NET programmers (webcast) upload](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c6bde64a7959c4648b459e/html5/thumbnails/16.jpg)
DEMOS
jQuery and Ajax
![Page 17: JavaScript for ASP.NET programmers (webcast) upload](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c6bde64a7959c4648b459e/html5/thumbnails/17.jpg)
JQUERY UI
•UI controls built on top of jQuery•All open source•Download from jqueryui.com•Hosted on CDN
![Page 18: JavaScript for ASP.NET programmers (webcast) upload](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c6bde64a7959c4648b459e/html5/thumbnails/18.jpg)
HOW JQUERY UI WORKS
HTML Widget
jQueryUI
HTML JS CSS
![Page 19: JavaScript for ASP.NET programmers (webcast) upload](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c6bde64a7959c4648b459e/html5/thumbnails/19.jpg)
JQUERYUIWidgets
AccordionAutocompleteButtonDatepickerDialogMenuProgressbarSliderSpinnerTabsTooltip
Interactions
DraggableDroppableResizeableSelectableSortable
Effects
Add classColor animationEffectHideRemove classShowSwitch classToggleToggle class
Utilities
PositionWidget class factory
![Page 20: JavaScript for ASP.NET programmers (webcast) upload](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c6bde64a7959c4648b459e/html5/thumbnails/20.jpg)
WIDGET API
Widget
Options(Configure widget)
![Page 21: JavaScript for ASP.NET programmers (webcast) upload](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c6bde64a7959c4648b459e/html5/thumbnails/21.jpg)
HTTP://API.JQUERYUI.COM
![Page 22: JavaScript for ASP.NET programmers (webcast) upload](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c6bde64a7959c4648b459e/html5/thumbnails/22.jpg)
DEMO 3
jQueryUI
![Page 23: JavaScript for ASP.NET programmers (webcast) upload](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c6bde64a7959c4648b459e/html5/thumbnails/23.jpg)
•HTML5• jQuery / jQuery UI• jQuery Mobile•CSS3•SVG•Knockout•Angular JS•Breeze JS
WIJMO IS OUR CORE CLIENT-SIDE FRAMEWORK BUILT ON WEB STANDARDSHTML5 TECHNOLOGY
![Page 24: JavaScript for ASP.NET programmers (webcast) upload](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c6bde64a7959c4648b459e/html5/thumbnails/24.jpg)
• ASP.NET WebForms• ASP.NET MVC• JavaScript/jQuery/HTML5• Any Platform (PHP, Rails, etc)• Studio for ASP.NET• LightSwitch
WIJMO IS ONE TECHNOLOGY FOR ALL DEVELOPMENTOLOGY
![Page 25: JavaScript for ASP.NET programmers (webcast) upload](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c6bde64a7959c4648b459e/html5/thumbnails/25.jpg)
• Cross-browser support• IE6+, Firefox, Chrome, Safari
• Tablets •Mobile Phones •Windows 8
WIJMO WORKS EVERYWHEREWORKS EVERYWHERE
![Page 26: JavaScript for ASP.NET programmers (webcast) upload](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c6bde64a7959c4648b459e/html5/thumbnails/26.jpg)
WIJMO • Enhanced controls built on top of jQueryUI
• Created by ComponentOne
• Two Commercial versions • Wijmo Professional• Wijmo Enterprise
• Download from wijmo.com
• Hosted on CDN
• All widgets adapt automatically to jQueryUI or jQuery Mobile
![Page 27: JavaScript for ASP.NET programmers (webcast) upload](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c6bde64a7959c4648b459e/html5/thumbnails/27.jpg)
MORE OPTIONS, EVENTS AND METHODS
![Page 28: JavaScript for ASP.NET programmers (webcast) upload](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c6bde64a7959c4648b459e/html5/thumbnails/28.jpg)
DEMO
Wijmo
![Page 29: JavaScript for ASP.NET programmers (webcast) upload](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c6bde64a7959c4648b459e/html5/thumbnails/29.jpg)
![Page 30: JavaScript for ASP.NET programmers (webcast) upload](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c6bde64a7959c4648b459e/html5/thumbnails/30.jpg)
DEMO
WijmoWindows Phone 8 HTML5
Adaptive Widget framework
![Page 31: JavaScript for ASP.NET programmers (webcast) upload](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c6bde64a7959c4648b459e/html5/thumbnails/31.jpg)
KNOCKOUT.JS
•MVVM Support•Declarative Bindings•Observables• Live Data• Supported in every widget• It’s Optional
![Page 32: JavaScript for ASP.NET programmers (webcast) upload](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c6bde64a7959c4648b459e/html5/thumbnails/32.jpg)
WHAT IS MVVM?• Model• The Model encapsulates the domain model, business logic and may
include data access. For Example a Customer object contains properties for Name and Address.
• View• The view is the application’s User Interface (UI). It defines the
appearance of visual elements and controls such as text boxes and buttons.
• View Model• The view model is responsible for holding application state, handling
presentation logic and exposing application data and operations (commands) to the view such as LoadCustomers and SaveCustomers. It acts as the intermediary between the view and model.
![Page 33: JavaScript for ASP.NET programmers (webcast) upload](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c6bde64a7959c4648b459e/html5/thumbnails/33.jpg)
3 STEPS FOR USING KNOCKOUT WITH WIJMO
• 1. Add references to the latest jQuery dependencies, Wijmo widgets, Knockout .js file, and KO extension library for Wijmo.
• 2. Create the ViewModel and View: add JavaScript to define the data and behavior of the UI, and add markup to create the View—the visual, interactive UI.
• 3. Bind the Wijmo widget(s) to the ViewModel and activate KO.
![Page 34: JavaScript for ASP.NET programmers (webcast) upload](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c6bde64a7959c4648b459e/html5/thumbnails/34.jpg)
DEMO
Knockout
![Page 35: JavaScript for ASP.NET programmers (webcast) upload](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c6bde64a7959c4648b459e/html5/thumbnails/35.jpg)
KNOCKOUT OR ANGULAR?
• Knockout is just about data binding• Knockout is solid, very widespread, and reliable.• Fully supported by Wijmo
• Angular is a presentation framework…. • Routing• Animations• View orchestration• Dependency management• Data binding• Fully supported by Wijmo
![Page 36: JavaScript for ASP.NET programmers (webcast) upload](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c6bde64a7959c4648b459e/html5/thumbnails/36.jpg)
COMPONENTONE SPECIAL OFFERS
• See:• http://www.componentone.com/SuperPages/SpecialOffers
![Page 37: JavaScript for ASP.NET programmers (webcast) upload](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c6bde64a7959c4648b459e/html5/thumbnails/37.jpg)
• Responsive Design is important• jQuery makes JavaScript programming easier• jQuery UI makes using widgets and effects easier• Wijmo exposes more options, methods and events on top of jQuery• Great Wijmo support is available!• All Wijmo widgets work with jQuery Mobile • HTML5 clients are proliferating• Knockout and Angular are great for developers coming from .NET
• Download Wijmo! www.Wijmo.com/downloads
SUMMARY
![Page 38: JavaScript for ASP.NET programmers (webcast) upload](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c6bde64a7959c4648b459e/html5/thumbnails/38.jpg)
RESOURCES AND CONTACT INFO
• Email: [email protected]
• Twitter: @russcamtv
• Blog: http://our.componentone.com/author/rfustino/
• Facebook: http://www.facebook.com/russellcamtv
• Daily News: http://russcam.componentone.com
• Wijmo MVVM Supporthttp://wijmo.com/widgets/mvvm-support/
• Download Wijmohttp://wijmo.com/downloads/
• Knockouthttp://knockoutjs.com/
• Chris Bannon (Wijmo) Blogs: http://wijmo.com/posts/
http://our.componentone.com/author/c1_chrisb/