JavaScript for ASP.NET programmers (webcast by ComponentOne)

You can see the webcast slide here: http://www.slideshare.net/russellfustino/java-scriptforaspnet-programmers-webcast-upload (Russ Fustino and Chris Bannon)

There is not online viewing yet.

Here is the link to the video: http://our.componentone.com/2013/09/21/awesome-recorded-webcast-now-available-javascript-for-asp-net-programmer/

Here is an extract:

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

How do I use my skill set as an ASP.NET developer to 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 bindings?
  • What about frameworks?

component1map

Then they talk about Ajax

What exactly is Ajax?

Ajax (Asynchronous JavaScript and XML)

Allows us to load data from the server without a browser page refresh.

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

Then about jQuery

jQuery

  • JavaScript is HARD
  • jQuery is a JavaScript library that makes JavaScript easier
  • Simplifies DOM spelunking (explore caverns)
  • 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

jQuery Syntax
$(selector).action()
Where:

  • $ references jQuery:
  • (selector) queries the DOM element or elements
  •  and .action() performs an action on the element

Examples:
$(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 API help: http://api.jquery.com/
for Wijmo: http://wijmo.com/wiki/index.php/Getting_Started_with_Wijmo

jqueryapi

Then about jQueryUI

jQuery UI

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

HTML -> jQueryUI -> Widget (HTML, JavaScript, CSS)

jQuery UI

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

Widget

  • Options (Configure widget)
  • Methods (Command widget)
  • Event (Handle widget events)

jQuery UI API help: http://api.jqueryui.com

jqueryuiapi

Then about Wijmo a ComponentOne’s framework.

Wijmo is their core client-side framework built on web standards

  • HTML5
  • jQuery / jQuery UI
  • jQuery Mobile
  • CSS3
  • SVG
  • Knockout Angular JS
  • Breeze JS

Wijmo is one technology for all development

  • ASP.NET WebForms
  • ASP.NET MVC
  • JavaScript / jQuery / HTML5
  • Any Platform (PHP, Rails, etc)
  • Studio for ASP.NET
  • LightSwitch

Wijmo works everywhere.

  • Cross-browser support (IE6+, Firefox, Chrome, Safari)
  • Tablets
  • Mobile phones
  • Windows 8

Wijmo.

  • Wijmo Enhanced controls built on top of jQueryUI
  • Created by ComponentOne
  • Two Commercial versions – Wijmo Profesional – Wijmo Enterprise
  • Download from wijmo.com
  • Hosted on CDN
  • All widgets adapt automatically to jQueryUI or jQuery Mobile
  • More options, events and methods

then they talk about Knockout.JS

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

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.

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

ComponentOne special offers: http://www.componentone.com/SuperPages/SpecialOffers

Summary

  • 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
Advertisements
This entry was posted in ASP.NET, JavaScript, Web Development and tagged , , , , , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s