Get frustrated by cross-browser incompatibility? Hate to develop application using JavaScript? jQuery is a powerful JavaScript library that can enhance your websites regardless of your background. jQuery is fast, lean, simple and hugely expandable, enabling you to build compelling web applications quickly and easily. In this session, we will start with a quick introduction of jQuery, illustrate what’s so good about jQuery, and demonstrate step by step how to develop jQuery Ajax application efficiently with database, web services, OData, NetFlix and ASP.NET MVC. Microsoft is now shipping, supporting, and contributing to jQuery, with ASP.NET and Visual Studio. New features which will be available in the next release of jQuery such as globalization, templating and data-linking will be introduced in the session as well.
The Inclusive Web: hands-on with HTML5 and jQuerycolinbdclark
Driven by technologies such as HTML5, JavaScript, and jQuery, innovative new user experiences are thriving on the Web. This workshop, presented by Justin Obara and Colin Clark from the Fluid community (http://fluidproject.org), will provide Web designers and developers with an overview of modern Web accessibility techniques, providing hands-on ways to make HTML5 and jQuery-based applications more accessible, flexible, and inclusive of a diverse range of users. We’ll also cover some of the features of Fluid Infusion, an application framework built on top of jQuery.
The Inclusive Web: hands-on with HTML5 and jQuerycolinbdclark
Driven by technologies such as HTML5, JavaScript, and jQuery, innovative new user experiences are thriving on the Web. This workshop, presented by Justin Obara and Colin Clark from the Fluid community (http://fluidproject.org), will provide Web designers and developers with an overview of modern Web accessibility techniques, providing hands-on ways to make HTML5 and jQuery-based applications more accessible, flexible, and inclusive of a diverse range of users. We’ll also cover some of the features of Fluid Infusion, an application framework built on top of jQuery.
Last year, AOL adopted a new content strategy and has positioned itself as a premier destination for original content. Core to this strategy is having reusable, highly efficient and optimized common code and experiences at scale, which is where jQuery comes in. Check in with Dave Artz to see how jQuery has helped his front-end standards team tackle unique challenges like optimizing 3rd party widget performance, overriding plugin functionality, and managing dependencies and updates across 100+ sites spanning multiple back-end platforms.
I based my presention on the great "HTML5 for Web designers" by Jeremy Keith. Awesome and pragmatic book, the way I like it. Get your copy on: http://books.alistapart.com/products/html5-for-web-designers
Last year, AOL adopted a new content strategy and has positioned itself as a premier destination for original content. Core to this strategy is having reusable, highly efficient and optimized common code and experiences at scale, which is where jQuery comes in. Check in with Dave Artz to see how jQuery has helped his front-end standards team tackle unique challenges like optimizing 3rd party widget performance, overriding plugin functionality, and managing dependencies and updates across 100+ sites spanning multiple back-end platforms.
I based my presention on the great "HTML5 for Web designers" by Jeremy Keith. Awesome and pragmatic book, the way I like it. Get your copy on: http://books.alistapart.com/products/html5-for-web-designers
Apache Cordova is one of the most popular frameworks for cross-platform mobile development. Web developers can build apps for iOS, Android, and Windows based on the same frameworks they use for the Web by using a shared codebase. However, the methods for improving mobile app performance can be different from those web developers use for web apps. Doris Chen outlines what impacts “native performance” and explains how the startup time, as well as the overhead of resume, memory, communication, and the Web, can all contribute to the performance of Cordova apps. To build Cordova apps that perform well, it’s important to understand how to avoid common pitfalls and how to use the technologies in the most efficient ways. Doris introduces tools for performance tests and demonstrates how to measure mobile app performance by using diagnostic tools for different platforms. Doris also shares practical tips for building faster Cordova apps by exploring Document Object Model (DOM) complexity, animation techniques, and memory management.
This is a presentation that I gave to ESPN's Digital Media team about the trajectory of the Netflix API. I also discussed Netflix's device implementation strategy and how it enables rapid development and robust A/B testing.
Where we are, as Front-End developers? This presentation navigates a short timeline of the computer science focusing on the client-side development as a mean to answer why and what has changed, as well as explore patterns and tendencies for the near future.
English article: https://medium.com/@caiovaccaro/javascript-state-of-the-union-2015-part-1-7ccff74813fa#.8x9y48ohk
Business Intelligence made easy! This is the first part of a two-part presentation I prepared for one of our customers to help them understand what Business Intelligence is and what can it do...
This presentation, by big data guru Bernard Marr, outlines in simple terms what Big Data is and how it is used today. It covers the 5 V's of Big Data as well as a number of high value use cases.
avaScript, REST, CSOM, Office 365 APIs: Like it or not, client-side development is the future of SharePoint development. At the forefront of this wave is the powerful JavaScript library jQuery. Utilizing jQuery in SharePoint, developers can take their applications to the next level in less time. What's more, you can utilize jQuery in SharePoint 2007, 2010, 2013, and in Office 365 often without making changes to your code. In this class, you gain a new appreciate for jQuery and learn:
"What's possible," including visual enhancements and practical business intelligence
Tips and Tricks for deploying and maintaining scripts
How to get quick wins with little effort using third-party jQuery libraries
How to interact with SharePoint forms and lists using JavaScript and jQuery
Learning About JavaScript (…and its little buddy, JQuery!)Julie Meloni
Slides from an internal workshop at the GWU Library on 26 June 2012. The workshop was organized into three parts: "Understanding JavaScript Basics", "About the DOM (Document Object Model)", and "Where JQuery Fits in and How it Works".
How to build web sites that work well across various browsers versions and devices is always challenging for web developers. In the session, you’ll learn the best practices and strategy to develop cross-browser web sites that will work with the existing and future browsers. Tools for interoperability tests, cross-browser fundamentals, and tips and tricks on HTML5, CSS, JavaScript development will be illustrated. Feature detection, CSS prefix, and fallbacks will all be examined in the session. A real life example will be used to demonstrate step by step how to build cross-browser and plug-in-Free experiences. With a couple of simple changes to your sites, you can take advantage of web standards and HTML5 features today without breaking your sites in the future. Expect a lot of demos and code in the session.
Angular: Go Mobile!
How could you develop a mobile app across iOS, Android or windows devices? We’ll show how Apache Cordova opens the world of mobile app development to web developers. In the session, a “To Do” app using Angular will be explored and then it will be demonstrated step by step on how to turn it into a mobile app, with access to native device capabilities. Along the way, you'll also learn what kind of apps are best-suited for the hybrid architecture and when to make the switch from web app to mobile app.
In the talk, it starts with highlighting the new HTML5 and CSS3 features in modern browsers, then it illustrate how easy it is to convert a web application to a modern app. Finally it introduces Apache Cordova project and how feasible it is to leverage the web content (HTML5, CSS3, and JavaScript) and convert it into an app that will run cross platforms on Android, iOS and Windows.
Angular or Backbone, which one you will use in your mobile app? How could you develop a mobile app across iOS, Android or windows devices? This talk will take an intimate look at two of today’s most popular frameworks, Angular and Backbone and explore their differences. We’ll show how Apache Cordova opens the world of mobile app development to web developers. In the session, we will demonstrate a “To Do” app using Angular and Backbone, with access to native device capabilities. We’ll compare the frameworks when transported to the world of mobile app development. Along the way, you'll also learn what kind of apps are best-suited for the hybrid architecture and when to make the switch from web app to mobile app.
OSCON Presentation: Developing High Performance Websites and Modern Apps with...Doris Chen
Creating high performance sites and apps is crucial for every developer. In this session, we will explore the best practices and performance tricks, including startup time, UI responsiveness, and Memory efficiency to make your apps running faster and fluid. Come learn the tips, tricks, and tools for maximizing the performance of your sites and apps with JavaScript and HTML5.
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps FasterDoris Chen
How to tackle real-world web platform performance problems in modern websites and apps? This session starts with a basic understanding of the web platform and then explores to a set of problem/solution pairs built from industry-standard performance guidance. In the talk, we will demonstrate performance tips and tricks that will help you improve the performance of your apps and sites today. We will discuss the following respond to network requests, speed and responsiveness, optimizing media usage, and writing fast JavaScript. These performance tips and tricks apply equally to web sites that run on standards based web browsers, as well as to modern apps.
Developing High Performance Websites and Modern Apps with JavaScript and HTML5Doris Chen
Creating high performance sites and apps is crucial for every developer. In this session, we will explore the best practices and performance tricks, including startup time, UI responsiveness, and Memory efficiency to make your apps running faster and fluid. Come learn the tips, tricks, and tools for maximizing the performance of your sites and apps with JavaScript and HTML5.
What Web Developers Need to Know to Develop Native HTML5/JS AppsDoris Chen
You already have a Web app on the Internet and want to reach customers with a new, targeted experience on Windows 8. Come get practical guidance and best practices on how to reuse your Web assets. Come dive into the specifics of this exciting platform and see how you can use your Web skills to build deeply-integrated Windows apps.
This session will start with the introduction on new HTML5 and CSS3 features introduced in Internet Explorer. Internet Explorer is the browser for rendering modern (HTML5/CSS3) standards-compliant websites. It is also one of the foundations for Windows 8 app development.
• You’ll discover how this mirrors or differs from traditional Web programming and how to harness the rich capabilities of Windows 8 through JavaScript and the Windows Runtime.
• You'll learn techniques for turning your HTML5, CSS and JavaScript into a great Windows app including touch-enablement, adopting the Windows look and feel, and system integration.
This session will jump start you with everything you need to know to start building Windows 8 apps with the skills you already have.
Develop High Performance Windows 8 Application with HTML5 and JavaScriptHigh ...Doris Chen
Creating high performance apps is crucial for every developer. Come to learn How to make your HTML5 apps fast and responsive on Windows 8 platform. In this session, first we will start with the overview of Windows 8 and then introduce how to develop Windows 8 using HTML5 and JavaScript. We will explore the best practices and performance tricks to make your Windows 8 applications running faster.
What Web Developers Need to Know to Develop Windows 8 AppsDoris Chen
You already have a Web app on the Internet and want to reach customers with a new, targeted experience on Windows 8. Come get practical guidance and best practices on how to reuse your Web assets. Come dive into the specifics of this exciting platform and see how you can use your Web skills to build deeply-integrated Windows apps.
◦You’ll discover how this mirrors or differs from traditional Web programming and how to harness the rich capabilities of Windows 8 through JavaScript and the Windows Runtime.
◦You'll learn practical techniques on how to access a web service, how to work with camera, and how to make live tiles, etc.
◦Expect a lot of code and demo.
This session will jump start you with everything you need to know to start building Windows 8 apps with the skills you already have.
Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3Doris Chen
The demo and resrouces are available at http://bit.ly/Wins8DevHTML5Pres.
This session outlines some of what you can do with new HTML5 and CSS3 features introduced in Internet Explorer 10. Internet Explorer 10 is the browser for rendering modern (HTML5/CSS3) standards-compliant websites. It is also one of the foundations for Windows 8 style app development on Windows 8.
Get started writing Windows 8 style apps using your HTML5, JavaScript, and CSS skills today! You already have a Web app on the Internet and want to reach customers with a new, targeted experience on Windows 8. Come get practical guidance and best practices on how to reuse your Web assets. Come dive into the specifics of this exciting platform and see how you can use your Web skills to build deeply-integrated Windows apps.
◦You’ll discover how this mirrors or differs from traditional Web programming and how to harness the rich capabilities of Windows 8 through JavaScript and the Windows Runtime.
◦You'll learn techniques for turning your HTML5, CSS and JavaScript into a great Windows app including touch-enablement, adopting the Windows look and feel, and system integration.
This session will arm you with everything you need to know to start building Windows 8 style apps with the skills you already have.
Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3Doris Chen
This session outlines some of what you can do with new HTML5 and CSS3 features introduced in Internet Explorer 10. Internet Explorer 10 is the browser for rendering modern (HTML5/CSS3) standards-compliant websites. It is also one of the foundations for Metro style app development on Windows 8.
Get started writing Metro style apps using your HTML5, JavaScript, and CSS skills today! You already have a Web app on the Internet and want to reach customers with a new, targeted experience on Windows 8. Come get practical guidance and best practices on how to reuse your Web assets. Come dive into the specifics of this exciting platform and see how you can use your Web skills to build deeply-integrated Windows apps.
• You’ll discover how this mirrors or differs from traditional Web programming and how to harness the rich capabilities of Windows 8 through JavaScript and the Windows Runtime.
• You'll learn techniques for turning your HTML5, CSS and JavaScript into a great Windows app including touch-enablement, adopting the Windows look and feel, and system integration.
This session will arm you with everything you need to know to start building Metro style apps with the skills you already have.
Everyone wants to jump into HTML5 but how do you use the cool features of this new specification while ensuring existing and future browsers render your web pages as expected? This is where feature detection, Modernizr, polyfills and shims come in. In the session, you’ll learn the best practices and strategy to code with HTML5 and CSS3 features that won’t break for the existing and future browsers. You’ll learn step by step how to use specially crafted JavaScript and CSS code that emulate HTML5 features. Also, a real-life case study will be used to demonstrate step by step how to build Cross-Browser Plug-in-Free experiences. With a couple of simple changes to your sites, you can take advantage of HTML5 today without breaking your sites in the future. Expect a lot of demos and code in the session.
Everyone wants to jump into HTML5 but how do you use the cool features of this new specification while ensuring older browsers render your web pages as expected? This is where Modernizr, polyfills and shims come in. In the session, you’ll learn the best practices and strategy to deal with new HTML5 and CSS3 features in old legacy browsers. You’ll learn step by step how to use specially crafted JavaScript and CSS code that emulate HTML5 features. With a couple of simple changes to your sites, you can take advantage of HTML5 today without breaking your sites in older browsers. Expect a lot of demos and code in the session.
HTML 5 Development for Windows Phone and DesktopDoris Chen
In this session Ben Riga and Doris Chen from Microsoft will join us. Ben and Doris will give us an overview of Microsoft’s overall HTML 5 strategy overview including Internet Explorer on the desktop. They will also show us Windows Phone and Internet Explorer for Windows Phone. And finally they’ll provide a quick overview of the recently announced PhoneGap for Windows Phone.
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)
1. jQuery Makes Writing JavaScript
Fun Again
Doris Chen Ph.D.
Developer Evangelist
Microsoft
http://blogs.msdn.com/b/dorischen/
2. Who am I?
• Developer Evangelist at Microsoft based in Silicon Valley, CA
– Blog: http://blogs.msdn.com/b/dorischen/
– Twitter @doristchen
– Email: doris.chen@microsoft.com
• Has over 13 years of experience in the software industry focusing on
web technologies
• Spoke and published widely at JavaOne, O'Reilly, SD West, SD
Forum and worldwide User Groups meetings
• Before joining Microsoft, Doris Chen was a Technology Evangelist at
Sun Microsystems
• Doris received her Ph.D. from the University of California at Los
Angeles (UCLA)
3. Agenda
• Essentials of jQuery
• New jQuery Plugins: Templates, DataLink,
Globalization
• Working with OData, JSONP, Netflix
• Working with Web Services, Database and
OData
• Summary
4. What is AJAX?
• Ajax= acronym for:
> Asynchronous JavaScript And XML(or
XMLHTTPRequest )
• Browser client uses JavaScript to
Asynchronously get data from a server and
update page dynamically without refreshing the
whole page
• More interactive user experience
5. “Naked” Ajax is too complex
• A lot of JavaScript programming involved
> “It is buggy and broken”
> “Used for annoying people”
> Difficult to debug and maintain
> ...
• You need a deep understanding of Ajax
techniques
• Have to handle all XmlHttpRequest interactions
yourself
• Have to handle cross browser inconsistence
yourself
6. Solutions
• JavaScript Toolkits
> Wrap up ajax details in javascript libraries
> jQuery, Dojo, prototype+scriptaculous, Yahoo,...
8. What is jQuery?
• Created by John Resig and first announced Jan 2006 at
BarCampNYC
• Most popular JavaScript library in use today
> simplifies the interaction between HTML and JavaScript
• Free, open source (MIT, GPL)
• Cross Browser
> IE6+, FF2+, Sarari 3+, Chrome, Opera 9+
• Find it at http://jquery.com
• It’s a joy to use
9. Why jQuery ?
• Cross-browser compatibility
• Fast & Small
– 24KB in size (Minified and Gzipped)
– Core is minimum and add Plugins when
• Short Learning curve & Great Documentation
• Tons of Plug-in: jQuery plugin repository
• CSS3 Selectors Compliant
• Helpful Utilities
– string trimming, easily extend objects, iteration, array
manipulation, support function
• jQuery UI: jQuery User Interface
• Widespread Adoption
– Google, Microsoft, Amazon, Twitter, Dell, Mozilla, Wordpress &
Drupal, HP, IBM, Intel, Ruby on Rails
10. Getting Start
• Download jQuery at jquery.com
– <script type="text/javascript" src="/js/jQuery. js"></script>
• Microsoft CDN or Google CDN
– <script src="http://ajax.microsoft.com/ajax/jquery/jquery-
1.4.2.js" type="text/javascript"></script>
– <script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jqu
ery.js"></script>
12. Focus of jQuery
• Find someone in HTML and do something
$(“div”).addClass(“header”)
• JQuery object
> Commonly used “$”
> Can also named “jQuery”
jQuery(“div”).addClass(“header”)
13. Find Someone: Selector
• CSS Style
– $(“#myID”) // by id
– $(“.myClass”) // by class name
– $(“myTag”) // by tag (element name)
– $(“#id, .class, tag”) // multiple
• Hierarchy
– $("form input") // descendant
– $("#main > *") // child
– $("#prev ~ div") // sibling
• Form
– $("form :radio")
– $("#dvMainForm :checkbox")
– $("input:disabled")
14. Do something with the found
elements
• Attributes get/set
• Manipulation
• Events
• Effects
• AJAX
18. Effects
• Show and Hide
– $(“#target”).show()
– $(“#target”).hide()
• Fade in and out
– $(“#target”).fadein()
– $(“#target”).fadeout()
• Slide up and down
– $(“#target”).slideup()
– $(“#target”).slidedown()
• Custom animation Animation Demo
21. jQuery Stack & Chaining
$(‘tr’) //get all rows
.filter(‘:odd’) //get all odd rows
.addClass(‘myOddClass’)
.end() //back to all rows
.filter(‘:even’) //get all even rows
.addClass(‘myEvenClass’);
21
22. Agenda
• Essentials of jQuery
• New jQuery Plugins: Templates, DataLink,
Globalization
• Working with OData, JSONP, Netflix
• Working with Web Services, Database and
OData
• Summary
23. Microsoft is Contributing to jQuery Library
• jQuery Templates plugin, Data Link plugin, and Globalization plugin have
been accepted as officially supported plugins of the jQuery project
– jQuery Templates (with jQuery 1.4.2) and Datalink plugins (with jQuery
1.4.3) will be managed by the jQuery Core team
– jQuery Globalization plugin will become part of the jQuery UI project
– jQuery Templates plugin will be part of jQuery Core library 1.5
• API Documentation
– jQuery Templates http://api.jquery.com/category/plugins/templates/
– jQuery Data Link– http://api.jquery.com/category/plugins/data-link/
– jQuery Globalization– Available soon
• Download
– jQuery Templates – http://github.com/jquery/jquery-tmpl
– jQuery Datalink – http://github.com/jquery/jquery-datalink
– jQuery Globalization – http://github.com/jquery/jquery-global
• Full product support for jQuery
– Ship with Visual Studio with Great Intellisense support
24. Templates Plugin (jQuery 1.4.2)
• create client templates
– e.g. format a set of database records from the server
through an Ajax request
<body>
<ul id="movieList"></ul>
<script id="movieTemplate" type="text/x-jquery-tmpl">
<li><b>${Name}</b> (${ReleaseYear})</li>
</script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://nje.github.com/jquery-tmpl/jquery.tmpl.js"></script>
<script>
var movies = [
{ Name: "The Red Violin", ReleaseYear: "1998" },
{ Name: "Eyes Wide Shut", ReleaseYear: "1999" },
{ Name: "The Inheritance", ReleaseYear: "1976" }
];
$( "#movieTemplate" ).tmpl( movies )
.appendTo( "#movieList" );
</script> </body>
25. Datalink Plugin (jQuery 1.4.3)
• Easily keep user interface and data synchronized
– automatically synchronize the input fields of a form with the
properties of JavaScript product object
<script src="http://github.com/nje/jquery-
datalink/raw/e3e3be4312c9b224a8d9b25031f4ac876e4f70fd/jquery.js"></script>
<script src="http://github.com/nje/jquery-datalink/raw/master/jQuery.datalink.js"></script>
<form> <div>
First Name: <input type="text" name="firstName" />
</div></form>
person.firstName: <span id="objFirst"></span><br/>
<script>
var person = {}; $("form").link(person);
// Chain link the person object to these elements to show the results
$("#objFirst").link(person, {
firstName: {
name: "objFirst",
convertBack: function (value, source, target) {
$(target).text(value);
} } });
$(person).data("firstName", "John");
</script>
26. Globalization Plugin (jQuery 1.4.2)
• enables you to use different cultural
conventions
• formatting or parsing numbers, dates and
times, calendars, and currencies
• has information on over 350 cultures
• can use this plugin with the core jQuery library
or plugins built on top of the jQuery library
27. Agenda
• Essentials of jQuery
• New jQuery Plugins: Templates, DataLink,
Globalization
• Working with OData, JSONP, Netflix
• Working with Web Services, Database and
OData
• Summary
28. Develop Netflix Movie Search Application using
jQuery, OData, JSONP and Netflix Technologies
JSONP Ajax Call
OData Query
http://odata.netflix.com/Catalo
g/Titles?$filter=Name%20eq%2 Netflix OData
0'Star%20Trek' Provider
OData in JSON
Callback Render on jQuery Template
29. OData
• Web protocol for querying and updating data
• Uniform way of representing structured data
– Atom, JSON formats
• Uniform URL conventions
– Navigation, filtering, sorting, paging, etc.
• /Bookmarks?$orderby=Name //sorting
• /Bookmarks?$top=10&$skip=30 //paging
• Uniform operations
– Addressability
– GET, POST, PUT, DELETE
• http://www.odata.org/
33. Key Steps
• Start with an empty HTML page
• Define style or you can put it in a css file
• Develop start up page
• Define the template of the response page
• Compose the JSONP call
• Implement callback routine and using jQuery template
– Microsoft has contributed jQuery template jquery.tmpl.js to
jQuery project and it will be part jQuery in next release.
• Implement movie play using Netflix API
– You need to apply a Netflix Developer API account and get the
key.
– More information http://developer.netflix.com/
36. Make JSONP Call
<script type="text/javascript">
$("#btnLookup").click(function () {
// Build OData query
var movieName = $("#movieName").val();
var query = "http://odata.netflix.com/Catalog" // netflix base url
+ "/Titles" // top-level resource
+ "?$filter=substringof('" + escape(movieName) + "',Name)" //filter by movie name
+ "&$callback=callback" // jsonp request
+ "&$format=json"; // json request
// Make JSONP call to Netflix
$.ajax({
dataType: "jsonp",
url: query,
jsonpCallback: "callback",
success: callback
});
});
37. Callback and Template
<div id="movieTemplateContainer"></div>
function callback(result) {
<script id="movieTemplate" type=" text/x- // unwrap result
jquery-tmpl "> var movies = result.d.results;
<div>
<img src="${BoxArt.LargeUrl}" /> $("#movieTemplateContainer")
<strong>${Name}</strong> .empty();
<br/> $("#movieTemplate").tmpl(mov
<button id="playButton" movieID=${Netflix ies).appendTo("#movieTemplateCon
ApiId} onclick="play(this)">Play Now</button> tainer");
<p> }
{{html Synopsis}}
</p>
</div>
</script>
38. Netflix Movie Play
function play(mvInfo) {
var id = $(mvInfo).attr("movieID").substring(45);
javascript: nflx.openPlayer('http://api.netflix.com/cat
alog/movie/'+id, 0, 0, ‘YOUR NETFLIX DEVELOPER ACCOUNT
KEY');
}
</script>
<script src="http://jsapi.netflix.com/us/api/js/api.js"></sc
ript>
</body>
39.
40. Agenda
• Essentials of jQuery
• New jQuery Plugins: Templates, DataLink,
Globalization
• Working with OData, JSONP, Netflix
• Working with Web Services, Database and
OData
• Summary
41. Developing jQuery Application
• Server Agnostic
• Server
– Data Model: entity framework, JPA, etc
– Develop Restful Web Services (OData Services)
• Client
– Invoke Restful Web Services (OData Services)
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "/MovieService.svc/Movies",
data: data,
dataType: "json",
success: insertCallback
});
– Retrieve data and Present
• JavaScript, jQuery, jQuery templates, jQuery plugins, HTML5
42. Favorite Movie Site Overview
Insert Data into Database
Displaying Movie List
43. Key Steps: Insert Data into Database
• Create ADO.NET Entity Data Model based on the
DB
• Approach 1: Using generic handler
– low-level approach to interacting with .NET through
jQuery
– Simple, just need jQuery library
• Approach 2: Using Ajax-enabled WCF Service
– a little more work as need to serialize objects into JSON
• Approach 3 Using OData (WFC Data Service)
– Taking advantage of open standards such as REST, JSON,
and OData
– The OData protocol (WCF Data Services) works very
nicely with Ajax
• quickly expose database data to an Ajax application
46. Approach 3: Insert Data Using OData
Service
Create WCF Data Service (OData AddMovie.aspx
Service) $("#btnAdd").click(function () {
public class MovieService : DataService<Movies // Convert the form into an object
Entities> var data1 = { Title: $("#title1").val(), Genre: $("#g
{// This method is called only once to initialize enre").val(), ImageURL: $("#imageUrl").val() };
service-wide policies. // JSONify the data
public static void InitializeService(DataServi var data = JSON.stringify(data1);
ceConfiguration config) // Post it
{// TODO: set rules to indicate which entity $.ajax({
sets and service operations are visible, updatabl type: "POST",
e, etc. contentType: "application/json; charset=utf-8",
// Examples: url: "/MovieService.svc/Movies",
config.SetEntitySetAccessRule("Movies", data: data,
EntitySetRights.All); dataType: "json",
// config.SetServiceOperationAccessRule( success: insertCallback
"MyServiceOperation", ServiceOperationRights. });
All); });
config.DataServiceBehavior.MaxProtocolV function insertCallback(result) {
ersion = DataServiceProtocolVersion.V2; var newMovie = result["d"];
} // Show primary key
} alert("Movie added with primary key " + newMov
ie.MovieID); }
47. Display Favorite Movies
• Retrieving movie list from OData
– Approach 1: using jQuery and jQuery Plugin
templates to create a table with pagination
– Approach 2: using jQuery, jQuery Plugin templates
and Element Stack Plugin to create a fun Movie list
• http://www.marcofucci.com/tumblelog/15/mar/2010/
elementstack_v1-1/
48. Agenda
• Essentials of jQuery
• New jQuery Plugins: Templates, DataLink,
Globalization
• Working with OData, JSONP, Netflix
• Working with Web Services, Database and
OData
• Summary
49. Summary
• jQuery is easy to learn and use
– jQuery plugins, jQuery UI
• Microsoft is contributing to jQuery project
• jQuery can work with different server platform
– Easy to produce and consume Restful Web
Services, OData
50. Resources
• jquery.com Downloading
• api.jquery.com Documentation
• forum.jquery.com Community
• meetups.jquery.com Local Community
• plugins.jquery.com Extending
• jqueryui.com UI Widgets and Effects
• odata.org OData Services
51. Upcoming Web Camps
1 Day MVC and jQuery Web Camp
Feb. 26th, 2011, Mountain View, CA
March 25th, 2011, Seattle, WA
Free, learning innovative web technology,
hands on experience
Detail and Registration http://bit.ly/gT9sBb
52. jQuery Makes Writing JavaScript
Fun Again
Doris Chen Ph.D.
doris.chen@microsoft.com
Developer Evangelist
Microsoft
http://blogs.msdn.com/b/dorischen/