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

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

4. `

5. A LITTLE ABOUT YOU?

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

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

8. MOBILITY IS IMPORTANT! RESPONSIVE WEBSITE DEMO

9. SALES DASHBOARD

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

11. …TO THIS? HTML5 Ajax jQuery jQuery UI WijmoKnockout

12. RUSS FUSTINO’S MAP ASP.Net Ajax Controls VS Controls Third Party Controls MVC MVVM HTML5 Ajax jQuery jQueryUI WijmoKnockout

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

14. DEMO Ajax

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

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

17. HTTP://API.JQUERY.COM/

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

19. DEMOS jQuery and Ajax

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

21. HOW JQUERY UI WORKS HTML Widget jQueryUI HTMLJSCSS

22. JQUERYUI Widgets 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

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

24. HTTP://API.JQUERYUI.COM

25. DEMO 3 jQueryUI

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

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

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

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

30. MORE OPTIONS, EVENTS AND METHODS

31. DEMO Wijmo

33. DEMO Wijmo Windows Phone 8 HTML5 Adaptive Widget framework

34. KNOCKOUT.JS MVVM Support Declarative Bindings Observables Live Data Supported in every widget It’s Optional

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

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

37. DEMO Knockout

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

39. DEMO

40. SPECIAL OFFER – PROMO CODE WEBASP913 20% discount on new licenses for Wijmo Studio for ASP.NET Studio Enterprise C1 Ultimate Offer is good through 9/30 Offer cannot be combined with any other offer/promo Only applies to purchases made directly through C1

41. 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/downloadswww.Wijmo.com/downloads SUMMARY

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

43. IF TIME PERMITS ThemeRoller Show russcam daily news

44. POLL QUESTION 1 What is your.NET Framework Skill Set? Select all that apply… I have used in.NET… AJAX controls (update panel, script manager control) AJAX other VS Built in Controls Third Party Controls MVVM or MVC

45. POLL QUESTION 2 How new are you to JavaScript Development? Brand new Seen it, used it, but never really programmed in it About 1 year or under of hands on programming experience More than 1 year

46. POLL QUESTION 3 Have you used jQueryUI Widgets? Yes No What are jQueryUI Widgets?

47. POLL QUESTION 4 Have you used Wijmo? Yes – In production Downloaded it and kicking the tires No

48. POLL QUESTION 5 What technologies are you using in ASP.NET? Web Forms MVC Single Page Applications (SPA – JavaScript) ASP.NET Ajax Control ToolKit Other

49. POLL QUESTION 6 If your laptop in 10 feet away… and you are sitting on the couch … and you need to look up something on the internet… What do you do? Look it from my smart phone I have a Smart phone, but I get up and go look it up on my laptop I don’t have a smart phone, so I need to get off the couch

50. POLL QUESTION 7 Do you use at least 1 ComponentOne Product? Yes No Trial