Your SlideShare is downloading. ×
0
RUSS FUSTINO
HEAD OF DEVELOPER EVANGELISM
@russcamtv
russf@componentone.com
www.componentone.com/russcam
JavaScript for th...
ABOUT ME
Head of Developer Evangelism at ComponentOne
Former Microsoft Developer Evangelist
Windows 8 Key Influencer
Socia...
WHY USE JAVASCRIPT AND HTML5?
• 61% leave a site if it is not mobile-ready
• 79% search for another site
• 48% said if a s...
HOW DO I USE MY SKILL SET AS AN ASP.NET DEVELOPER,
TO A PROGRAM IN JAVASCRIPT?
• What is the pain solved using JavaScript ...
MOBILITY IS IMPORTANT!
RESPONSIVE WEBSITE DEMO
SALES DASHBOARD
HOW DO I GET FROM THIS…
ASP.Net
Ajax
Controls
VS
Controls
Third
Party
Controls
MVC
…TO THIS?
HTML5
Ajax
jQuery
jQuery UI
Wijmo Knockout
RUSS FUSTINO‟S MAP
ASP.Net
Ajax
Controls
VS
Controls
Third
Party
Controls
MVC
MVVM
HTML5
Ajax
jQuery
jQueryUI
Wijmo Knocko...
WHAT EXACTLY IS AJAX?
Ajax == Asynchronous JavaScript and XML
Ajax is really a set of technologies working
together:
 X...
DEMO
Ajax
JQUERY
• Javascript is HARD
• jQuery is a Javascript library that makes Javascript
easier
• Simplifies DOM spelunking
• Ha...
JQUERY SYNTAX
• $(selector).action()
• $ references jQuery; (selector) queries the DOM element or
elements; and .action() ...
HTTP://API.JQUERY.COM/
HTTP://WIJMO.COM/WIKI/INDEX.PHP/GETTING_STARTED_WITH_WIJMO
DEMOS
jQuery and Ajax
JQUERY UI
•UI controls built on top of jQuery
•All open source
•Download from jqueryui.com
•Hosted on CDN
HOW JQUERY UI WORKS
HTML Widget
jQueryUI
HTML JS CSS
JQUERYUIWidgets
Accordion
Autocomplete
Button
Datepicker
Dialog
Menu
Progressbar
Slider
Spinner
Tabs
Tooltip
Interactions
...
WIDGET API
Widget
Options
(Configure widget)
Methods
(Command widget)
Event
(Handle widget
events)
HTTP://API.JQUERYUI.COM
DEMO 3
jQueryUI
• HTML5
• jQuery / jQuery UI
• jQuery Mobile
• CSS3
• SVG
• Knockout
• Angular JS
• Breeze JS
WIJMO IS OUR CORE CLIENT-SID...
• ASP.NET WebForms
• ASP.NET MVC
• JavaScript/jQuery/HTML5
• Any Platform (PHP, Rails, etc)
• Studio for ASP.NET
• LightSw...
• Cross-browser support
• IE6+, Firefox, Chrome, Safari
• Tablets
• Mobile Phones
• Windows 8
WIJMO WORKS EVERYWHERE
WORKS...
WIJMO
• Enhanced controls built on top of jQueryUI
• Created by ComponentOne
• Two Commercial versions
• Wijmo Professiona...
MORE OPTIONS, EVENTS AND METHODS
DEMO
Wijmo
DEMO
Wijmo
Windows Phone 8 HTML5
Adaptive Widget framework
KNOCKOUT.JS
• MVVM Support
• Declarative Bindings
• Observables
• Live Data
• Supported in every widget
• It‟s Optional
WHAT IS MVVM?
• Model
• The Model encapsulates the domain model, business logic and may
include data access. For Example a...
3 STEPS FOR USING KNOCKOUT WITH WIJMO
• 1. Add references to the latest jQuery dependencies, Wijmo
widgets, Knockout .js f...
DEMO
Knockout
KNOCKOUT OR ANGULAR?
• Knockout is just about data binding
• Knockout is solid, very widespread, and reliable.
• Fully sup...
COMPONENTONE SPECIAL OFFERS
• See:
• http://www.componentone.com/SuperPages/SpecialOffers
• Responsive Design is important
• jQuery makes JavaScript programming easier
• jQuery UI makes using widgets and effects ...
RESOURCES AND CONTACT INFO
• Email: russf@componentone.com
• Twitter: @russcamtv
• Blog: http://our.componentone.com/autho...
JavaScript for ASP.NET programmers (webcast) upload
Upcoming SlideShare
Loading in...5
×

JavaScript for ASP.NET programmers (webcast) upload

2,161

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,161
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
52
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Sessions are packed
  • AJAX, jQueryWijmoKnockout
  • AJAX, jQueryWijmoKnockoutKendo UIIgnite UIBootstrap
  • AJAX, jQueryWijmoKnockoutKendo UIIgnite UIBootstrap
  • Ajax == Asynchronous JavaScript and XMLAjax is really a set of technologies working together:XHTML and CSS for markupDOM for display and interactionXML and XSLT for data interchange & manipulationJSON for marshalling objectsXMLHttpRequest for asynchronous communicationJavaScript for tying it all together
  • jQuery easily selects DOM element(s) and performs some action on the selected element(s).
  • Svg = scale vector graphics
  • No other competitor has a single tool across all of these tools.
  • Meet the new Adaptive Widget framework from Wijmo. All of our widgets will automatically adapt to jQuery Mobile or jQuery UI environments. Simply by swapping out jQuery UI for jQuery Mobile, you can convert your widgets to be mobile without changing a single line of code! That’s right, Wijmo 2013v1 supports both jQuery UI and jQuery Mobile including both Themerollers and Themes. Wijmo is offering something that no other tool can: a set of widgets that automatically adapts to its environment.
  • MVVM is a software architectural design pattern that supports data binding and a separation of concerns.
  • http://www.johnpapa.net/compare-durandal-to-angular-not-knockout-to-angular/AngularJS is Google's framework for developing Web applications. Angular provides a number of essential services that work very well together and were designed to be extensible. These services include data-binding, DOM manipulation, routing/view management, module loading, and more.
  • Wijmo Professional includes the following ($495/$795) now (20% off)Wijmo Enterprise includes everything in Wijmo Professional plus SpreadJS ($895/$1195)
  • Transcript of "JavaScript for ASP.NET programmers (webcast) upload"

    1. 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. 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. 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. 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. 5. MOBILITY IS IMPORTANT! RESPONSIVE WEBSITE DEMO
    6. 6. SALES DASHBOARD
    7. 7. HOW DO I GET FROM THIS… ASP.Net Ajax Controls VS Controls Third Party Controls MVC
    8. 8. …TO THIS? HTML5 Ajax jQuery jQuery UI Wijmo Knockout
    9. 9. RUSS FUSTINO‟S MAP ASP.Net Ajax Controls VS Controls Third Party Controls MVC MVVM HTML5 Ajax jQuery jQueryUI Wijmo Knockout
    10. 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. 11. DEMO Ajax
    12. 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. 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. 14. HTTP://API.JQUERY.COM/
    15. 15. HTTP://WIJMO.COM/WIKI/INDEX.PHP/GETTING_STARTED_WITH_WIJMO
    16. 16. DEMOS jQuery and Ajax
    17. 17. JQUERY UI •UI controls built on top of jQuery •All open source •Download from jqueryui.com •Hosted on CDN
    18. 18. HOW JQUERY UI WORKS HTML Widget jQueryUI HTML JS CSS
    19. 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. 20. WIDGET API Widget Options (Configure widget) Methods (Command widget) Event (Handle widget events)
    21. 21. HTTP://API.JQUERYUI.COM
    22. 22. DEMO 3 jQueryUI
    23. 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. 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. 25. • Cross-browser support • IE6+, Firefox, Chrome, Safari • Tablets • Mobile Phones • Windows 8 WIJMO WORKS EVERYWHERE WORKS EVERYWHERE
    26. 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. 27. MORE OPTIONS, EVENTS AND METHODS
    28. 28. DEMO Wijmo
    29. 29. DEMO Wijmo Windows Phone 8 HTML5 Adaptive Widget framework
    30. 30. KNOCKOUT.JS • MVVM Support • Declarative Bindings • Observables • Live Data • Supported in every widget • It‟s Optional
    31. 31. 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.
    32. 32. 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.
    33. 33. DEMO Knockout
    34. 34. 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
    35. 35. COMPONENTONE SPECIAL OFFERS • See: • http://www.componentone.com/SuperPages/SpecialOffers
    36. 36. • 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
    37. 37. 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/
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×