This deck is from the Webcast on 9/12/13 from ComponentOne with Russ Fustino and Chris Bannon

1. RUSS FUSTINO
HEAD OF DEVELOPER EVANGELISM
@russcamtv
russf@componentone.com
www.componentone.com/russcam
JavaScript for the ASP.NET Developer
Chris Bannon - @Wijmo PM @b4nn0n
chris.bannon@componentone.com

2. 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

3. 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

4. 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?

5. MOBILITY IS IMPORTANT!
RESPONSIVE WEBSITE DEMO

6. SALES DASHBOARD

7. HOW DO I GET FROM THIS…
ASP.Net
Ajax
Controls
VS
Controls
Third
Party
Controls
MVC

8. …TO THIS?
HTML5
Ajax
jQuery
jQuery UI
Wijmo Knockout

9. RUSS FUSTINO‟S MAP
ASP.Net
Ajax
Controls
VS
Controls
Third
Party
Controls
MVC
MVVM
HTML5
Ajax
jQuery
jQueryUI
Wijmo Knockout

10. 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

11. DEMO
Ajax

12. 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

13. 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".

14. HTTP://API.JQUERY.COM/

15. HTTP://WIJMO.COM/WIKI/INDEX.PHP/GETTING_STARTED_WITH_WIJMO

16. DEMOS
jQuery and Ajax

17. JQUERY UI
•UI controls built on top of jQuery
•All open source
•Download from jqueryui.com
•Hosted on CDN

18. HOW JQUERY UI WORKS
HTML Widget
jQueryUI
HTML JS CSS

19. JQUERYUIWidgets
Accordion
Autocomplete
Button
Datepicker
Dialog
Menu
Progressbar
Slider
Spinner
Tabs
Tooltip
Interactions
Draggable
Droppable
Resizeable
Selectable
Sortable
Effects
Add class
Color animation
Effect
Hide
Remove class
Show
Switch class
Toggle
Toggle class
Utilities
Position
Widget class factory

20. WIDGET API
Widget
Options
(Configure widget)
Methods
(Command widget)
Event
(Handle widget
events)

21. HTTP://API.JQUERYUI.COM

22. DEMO 3
jQueryUI

23. • HTML5
• jQuery / jQuery UI
• jQuery Mobile
• CSS3
• SVG
• Knockout
• Angular JS
• Breeze JS
WIJMO IS OUR CORE CLIENT-SIDE FRAMEWORK BUILT
ON WEB STANDARDS
HTML5 TECHNOLOGY

24. • 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 DEVELOPMENT
OLOGY

25. • Cross-browser support
• IE6+, Firefox, Chrome, Safari
• Tablets
• Mobile Phones
• Windows 8
WIJMO WORKS EVERYWHERE
WORKS EVERYWHERE

26. 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

27. MORE OPTIONS, EVENTS AND METHODS

28. DEMO
Wijmo

30. DEMO
Wijmo
Windows Phone 8 HTML5
Adaptive Widget framework

31. KNOCKOUT.JS
• MVVM Support
• Declarative Bindings
• Observables
• Live Data
• Supported in every widget
• It‟s Optional

32. 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.

33. 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.

34. DEMO
Knockout

35. 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

36. COMPONENTONE SPECIAL OFFERS
• See:
• http://www.componentone.com/SuperPages/SpecialOffers

37. • 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

38. RESOURCES AND CONTACT INFO
• Email: russf@componentone.com
• Twitter: @russcamtv
• Blog: http://our.componentone.com/author/rfustino/
• Facebook: http://www.facebook.com/russellcamtv
• Daily News: http://russcam.componentone.com
• Wijmo MVVM Support
http://wijmo.com/widgets/mvvm-support/
• Download Wijmo
http://wijmo.com/downloads/
• Knockout
http://knockoutjs.com/
• Chris Bannon (Wijmo) Blogs: http://wijmo.com/posts/
http://our.componentone.com/author/c1_chrisb/