Russ Fustino Head of Developer
Evangelism@[email protected]/russcam
JavaScript for the ASP.NET Developer
Chris Bannon - @Wijmo PM
@[email protected]
About meHead of Developer Evangelism at ComponentOneFormer
Microsoft Developer EvangelistWindows 8 Key InfluencerSocial Media
and Video Production ExpertINETA Lifetime Achievement Award
Winner
`
A little about You?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 didnt work on a mobile device, they didnt
feel the company valued their business
Bottom line there is a real world business need for mobile ready
sites
* Source Google BlogSessions are packed5How 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?
Mobility is important!Responsive Website Demo
Sales Dashboard
How do I get from thisAJAX, jQueryWijmoKnockout
9to this?AJAX, jQueryWijmoKnockout
Kendo UIIgnite UIBootstrap
10Russ Fustinos mapAJAX, jQueryWijmoKnockout
Kendo UIIgnite UIBootstrap
11What exactly is Ajax?Ajax == Asynchronous JavaScript and
XML
Ajax 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
Allows us to load data from the server without a browser page
refresh
Ajax == Asynchronous JavaScript and XML
Ajax 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 together12DemojQueryJavascript is HARDjQuery is a
Javascript library that makes Javascript easierSimplifies DOM
spelunkingHandles browser differencesProvides a key shortcut
$Download from jquery.comThe jQuery library has a full suite of
functions and methods for AJAX capabilities. Hosted on CDNjQuery
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".
jQuery easily selects DOM element(s) and performs some action on
the selected element(s).
15http://api.jquery.com/
http://wijmo.com/wiki/index.php/Getting_Started_with_Wijmo
DemosJquery UIUI controls built on top of jQueryAll open
sourceDownload from jqueryui.comHosted on CDN How jQuery UI
WorksHTMLWidgetjQueryUIHTMLJSCSS20jQueryUIWidget
APIhttp://api.jqueryui.com
Demo 3HTML5jQuery / jQuery UIjQuery MobileCSS3SVGKnockoutAngular
JSBreeze JSWijmo is our core client-side framework built on Web
standardsHTML5 Technology
Svg = scale vector graphics25ASP.NET WebFormsASP.NET
MVCJavaScript/jQuery/HTML5Any Platform (PHP, Rails, etc)Studio for
ASP.NETLightSwitch Wijmo is One Technology for All
Developmentology
No other competitor has a single tool across all of these
tools.26Cross-browser supportIE6+, Firefox, Chrome, SafariTablets
Mobile Phones Windows 8Wijmo works everywhereWorks Everywhere
Wijmo Enhanced controls built on top of jQueryUICreated by
ComponentOneTwo Commercial versions Wijmo ProfessionalWijmo
EnterpriseDownload from wijmo.comHosted on CDNAll widgets adapt
automatically to jQueryUI or jQuery Mobile
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! Thats 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.28More Options, Events and
Methods
Demo
DemoKnockout.jsMVVM SupportDeclarative BindingsObservablesLive
DataSupported in every widgetIts OptionalWhat is MVVM?ModelThe
Model encapsulates the domain model, business logic and may include
data access. For Example a Customer object contains properties for
Name and Address.ViewThe view is the applications User Interface
(UI). It defines the appearance of visual elements and controls
such as text boxes and buttons. View ModelThe 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.
MVVM is a software architectural design pattern that supports
data binding and a separation of concerns.
343 Steps for using Knockout with Wijmo1. 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 Viewthe
visual, interactive UI.
3. Bind the Wijmo widget(s) to the ViewModel and activate
KO.
DemoKnockout or Angular?
Knockout is just about data bindingKnockout is solid, very
widespread, and reliable.Fully supported by WijmoAngular is a
presentation framework. RoutingAnimationsView
orchestrationDependency managementData bindingFully supported by
Wijmohttp://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.37Demo
38Special Offer promo code WebASP913 20% discount on new
licenses for Wijmo Studio for ASP.NETStudio Enterprise C1
UltimateOffer is good through 9/30Offer cannot be combined with any
other offer/promoOnly applies to purchases made directly through
C1
Wijmo Professional includes the following ($495/$795) now (20%
off)Wijmo Enterprise includes everything in Wijmo Professional plus
SpreadJS ($895/$1195)
39Responsive Design is importantjQuery makes JavaScript
programming easierjQuery UI makes using widgets and effects
easierWijmo exposes more options, methods and events on top of
jQueryGreat Wijmo support is available!All Wijmo widgets work with
jQuery Mobile HTML5 clients are proliferatingKnockout and Angular
are great for developers coming from .NET
Download Wijmo! www.Wijmo.com/downloads
SummaryResources and Contact infoEmail:
[email protected]: @russcamtvBlog:
http://our.componentone.com/author/rfustino/Facebook:
http://www.facebook.com/russellcamtvDaily News:
http://russcam.componentone.comWijmo 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/
41If time permitsThemeRollerShow russcam daily news
Poll Question 1What is your .NET Framework Skill Set? Select all
that apply I have used in .NET
AJAX controls (update panel, script manager control)AJAX otherVS
Built in ControlsThird Party ControlsMVVM or MVCPoll question 2How
new are you to JavaScript Development?Brand newSeen it, used it,
but never really programmed in itAbout 1 year or under of hands on
programming experienceMore than 1 yearPoll Question 3Have you used
jQueryUI Widgets?YesNoWhat are jQueryUI Widgets?Poll Question 4Have
you used Wijmo?Yes In productionDownloaded it and kicking the
tiresNoPoll question 5What technologies are you using in ASP.NET?
Web FormsMVCSingle Page Applications (SPA JavaScript)ASP.NET Ajax
Control ToolKitOtherPoll question 6If 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 phoneI have a Smart phone, but I get up
and go look it up on my laptopI dont have a smart phone, so I need
to get off the couchPoll question 7Do you use at least 1
ComponentOne Product?
YesNoTrial
