Introduction to JQuery, ASP.NET MVC and Silverlight

JQuery & ASP.NET MVC &Silverlight FunPresented by Peter GfaderSenior Software Architect at SSW

Peter GfaderSSA @ SSWLoves C# and .NET (Java not anymore)Specializes in Windows FormsASP.NETTFS testingAutomated testsSilverlight

Usage of Profile APIWeb site VS Web applicationAdditional validationEasy Q: Lucky 2 for next week?Homework?

Course Websitehttp://sharepoint.ssw.com.au/Training/UTSNET/Course TimetableCourse Materials

Admin StuffAttendanceYou initial sheetHands On LabYou get me to initial sheetCertificate At end of 10 sessionsIf I say if you have completed successfully 

AJAX History ManagementReportingASP.NET Security Last week

AJAX - behind the sceneshttp://en.wikipedia.org/wiki/XMLHttpRequestConnectionstring(local)vslocalhostvs.http://weblogs.asp.net/jgalloway/archive/2005/12/02/432062.aspxShared memory comes always first on local machinehttp://msdn.microsoft.com/en-us/library/ms187662.aspxLast week - Additional

jQueryInteractivityASP.NET MVCNice URLsSilverlightRich interactivityAgenda – Rich UI and better UX

Maps.google.comJavaScript rules!

Big time!Different Browser DebuggingNo compilingSyntaxNo intellisenseNo static typing (duck typing!!)No animationsJavaScript sucks!

Written in JavaScriptIt is a lightweight JavaScript library (compressed based lib, 19 kb)Helps developer / designer to keep things simple and reusableVisual Studio supports JQueryPart of every web app / siteIntellisense support A great library for developing AJAX-based applicationWhat is JQuery?

1- Cross-browser (IE 6.0+, Firefox 2+, Safari 3.0+, Opera 9.0+, Chrome)2- Powerful and easy to useSame selectors as in CSSDesigner can learn it fastMore readable JavaScript code3 – AnimationTons of useful plug-ins and functionalitiesWhy JQuery?3 good reasons

JavaScriptwindow.onload = function() { alert("welcome"); }JQuery$(document).ready(function() { alert("Thanks for visiting!"); });1- Cross-browser

JavaScript“onload” is only loaded when all images are loaded in the pageJQuery“$(document).ready” is loaded as soon as the Document Object Model is readySimilar to init() method in aspx page1- Cross-browser – Explanation

Selector$(document).ready(function() { $("a").click(function() { alert("Hello world!"); }); });It will add any click-event to “a” tag2 – Powerful

http://tympanus.net/Tutorials/BubbleNavigation/http://demo.tutorialzine.com/2010/03/sponsor-wall-flip-jquery-css/demo.phphttp://demo.tutorialzine.com/2010/02/photo-shoot-css-jquery/demo.html3 - Animations

JQuery official http://jquery.com/JQuery UI library http://jqueryui.com/Scott Gu’s Blog http://weblogs.asp.net/scottgu/References

Bubble Navigation - http://tympanus.net/Tutorials/BubbleNavigation/Quicksand (reorder items with nice shuffling animation) - http://razorjack.net/quicksand/Nivo Slider - http://nivo.dev7studios.com/Sponsor Flip Wall - http://demo.tutorialzine.com/2010/03/sponsor-wall-flip-jquery-css/demo.phpHTC Clock - http://www.radoslavdimov.com/jquery-plugins/jquery-plugin-digiclock/Photo shoot Effect - http://demo.tutorialzine.com/2010/02/photo-shoot-css-jquery/demo.htmljQuery - Visually cool

Open Standard Media Player (jQuery + HTML5) - http://www.mediafront.org/project/osmplayerjsPlumb connector - http://morrisonpitt.com/jsPlumb/html/demo.htmljQuery.popeye - http://dev.herr-schuessler.de/jquery/popeye/demo.htmlAutoSuggestjQueryplugin - http://code.drewwilson.com/entry/autosuggest-jquery-pluginAjax Upload (show a preview of the file being upload) - http://www.zurb.com/playground/ajax_uploadjQuery - Technically cool

Check for JavaScript in page<body class=”no-js”><script type="text/javascript">document.getElementsByTagName("body")[0].className="jsEnabled";</script>CSS#your-element { display: block; }body.jsEnabled #your-element { display: none; }JavaScript tip!

What is ASP.NET MVC ...and is WebForms dead?

Our ancestors developed for the web in ASP script...

We have had WebForms...Compile

ASP.NET MVC Model - View - Controller

Background of ASP.NET MVCDifference between WebForms and ASP.NET MVCTips and TricksConclusionAgenda

SmallTalkRuby on RailsSpring, StrutsMonorailMVC is not new

WebForms == WinForm developers MVC == HTTP + jQuery + CSS developersDoes ASP.NET MVC replace WebForms?ProductivityControl

Not just cool... Not just for testability...Not just because you get more control...Because you get more perspective!Why ASP.NET MVC?

Web is an HTTP highwayCool TechControlsHTTP / HTML

Separation of concernsControllers (Actions)ViewsModelsMore expressive of HTTP protocolTestable featuresStrongly typed support Background to ASP.NET MVC

The key actors in ASP.NET WebformsASPX page gets requestPage lifecycle with eventsCodebehind methods

The key actors in ASP.NET MVCBrowserRequestModelControllerViewResponseViewModel

.Net 3.5 SP1 http://www.microsoft.com/downloads/MVC http://www.asp.net/MVC/download/Install VS2010Advanced stepsMVCContribhttp://www.codeplex.com/MVCContribMoqhttp://code.google.com/p/moq/What you need to get started in MVC

Watch the NerdDinner Tutorial http://www.asp.net/MVCWatch the MVC StoreFront Demohttp://blog.wekeroad.com/Dinner Nowhttp://dinnernow.net/To get going quickly

URL structureTestabilityHTTP Verbs Controllers/Actions/ViewsView engineSo what is there to control

ASP.NET MVC structure (aka closer to the real thing)ModelBrowserRequestBizControllerRoutingRepositorye.g. SQL/Xml ViewResponseViewModel

Write your tests first Red-Green TDD is the purestMVC has been designed to decouple for testing Test Driven Development

// ArrangeAdminController controller = new AdminController(mockRepos.Object);// ActViewResult results = controller.Index();Test a Controller

RouteDatarouteData = routes.GetRouteData(mockHttpContext.Object);Test a Route

[ActionName("Index")][AcceptVerbs(HttpVerbs.Put)]public void Put(){Response.Write("<Put/>");}Http Verbs

Code from http://haacked.comReference RouteDebug.dllGlobal.asaxRouteDebug.RouteDebugger.RewriteRoutesForTesting(RouteTable.Routes);Routing – Debugger

routes.MapRoute( “Demo", "Double/{c}/{a}/{id}", new { c = "Home", a = "Index", id = "" }, new { id = @"\d{1,6}" } //constraint);Routing Constraints

routes.MapRoute( "Archive", "archive/{year}/{month}/{day}", new { controller = "Archive", action = "Index", year = "“, month = "", day = "" }, new { year = new YearRouteConstraint(), month = new MonthRouteConstraint(), day = new DayRouteConstraint() } );Constraints implement IRouteConstraintRouting Constraints - Custom

Code from NhamlGlobal.asaxViewEngines.Engines.Add(new NHaml.Web.Mvc.NHamlMvcViewEngine()); Changing the View Engine

SnippetDesignerhttp://www.codeplex.com/SnippetDesignerPhil Haackedhttp://haacked.comStephen Walther http://stephenwalther.com/Tatham Oddiehttp://blog.tatham.oddie.com.au/Nhamlhttp://code.google.com/p/nhamlOthers resources to make life easier

Agenda - SilverlightSilverlight? RIA?Why Silverlight?“Hello world” in SilverlightSilverlight under the hoodCool stuffHow to + / -

Microsoft Silverlight is a cross-browser, cross-platform implementation of .NET for building and delivering the next generation of media experiences & rich interactive applications for the Web.

How a web page is shownYourComputerHostingComputerInternetTheInternetServerClient

All of the intelligence and data is on the serverRequestwww.ssw.com.auTheInternetResponseHTMLServerClient

Typical Client ServerTypical Client Server

Typical Client ServerTypical Silverlight

Pain with web applicationsScalability - Server basedPerformance - Request / ResponseDevelopers - UI is hard to developDifferent browser  different UIIntelligence on the client requires JavaScript/jQuery

Easy to develop and maintainWrite once, run anywhereJava slogan, when Sun introduced Java 1.0 1996Awesome User experience LookFeelUsabilityWe want

PXRIA - Rich Internet Applications

Features/functionality of traditional desktop applicationsState maintained on BOTH client and serverRun within a secure web browser environment (a sandbox)No additional software installationRich Internet Applications

Client engine, between user and serverDownloadEngine – browser extensionProgram logic (executes compiled programs)Rendering user interfaceServer communicationState-ful client Changes to the view don't require (re)loading a new pageRIA

Cross platformBrowser plug inRich Internet Application.NET / CLR in the browser (VB/C#)4MB downloadSimple installCompetes with other productsSilverlight = RIA from MS

Choice of platform based on richness vs. reach

Goal: Parity in developer productivityWhat platformRichnessReach

2000 ~ .NET.NET platform for Windows and Web applicationsAJAX: Web feel like DesktopWPF: (Windows Presentation Foundation)Separate UI from CodeToo muchNot Cross browserWPFe (everywhere) SilverlightSilverlight "History"

Adobe Flash, Flex Flash: Technology for animationsFlex: Collection of tools to dev Flash appsJava applets / applicationsJavaScript / AJAX Google's GWT framework (Google Web Toolkit)JQueryMicrosoft SilverlightList of RIA Platforms / Approaches

Windows Forms of Very limited ResponsiveUIRich UICLR on the web.NET Why Silverlight

Visual Studio files by default

<UserControl x:Class="SilverlightApplicationHalloWelt.Page"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="400" Height="300"><StackPanel><Button Width="400" Height="20" Content="Click me" Click="Button_Click"></Button><TextBlock x:Name="textblockOutput" Width="400" Height="20" Text="empty"></TextBlock></StackPanel></UserControl>"Hallo Welt" - XAML

"Hallo Welt" – XAML in Design mode

private void Button_Click(object sender, RoutedEventArgs e){textblockOutput.Text = "Hallo Welt";}"Hallo Welt"

Silverlight – Under the hood

XAML Defines .Net Objects<TextBlockFontSize="32" Text="Hello world" />≡TextBlock t = new TextBlock();t.FontSize = 32;t.Text = "Hello world";

XML eXtensible Mark-up LanguageX Application MLUI mark-up languageUsed inSilverlight, WPF (and Work Flow)ToolsVisual Studio, Expression Blend, NotepadCan generate UI with code or XAML (faster)XAML

Access Elements from CodeName your XAML elements<Rectangle x:Name="rectOne" />void OnMouseEnter(object sender, MouseEventArgs e) {rectOne.Height= 75;}

ExpressionDesignBlend 4Visual StudioVisual Studio 2010Silverlight Tools for Visual Studio 2010Silverlight SDKSilverlight Tooling

Silverlight LimitationsNo full access to Windows API & .NET APISilverlight is a subset of .NET frameworkWPF features not in Silverlight:http://msdn.microsoft.com/en-us/library/cc903925(VS.95).aspxHardware acceleration

TriggersSilverlight LimitationsHosting Silverlightin Windows Forms applicationIn OfficeNo sandbox customization No external API calls (e.g. P/Invoke, COM, full .NET) No Office integration

Silverlight LimitationsNo Secure SaveAs dialog SL3 has a secure SaveAs dialog

Silverlight LimitationsOffline supportSL4 has Offline and Out of Browser support although more limited than WPF No Sync Framework No local DBCan manually serialize data on the Isolated Storage

Silverlight LimitationsNo Context menu No Right Click Event No context menu triggered by Right Click. Hacks exists but are not recommended due to the need to put the SL plug-in in windowless mode, introducing performance issueNo “Right click – Open in new tab”

Silverlight LimitationsNo printing support Server side PDF or Open XML generation Client side manual HTML generation. Need to implement the formatting logic twice one for XAML and one for HTML Final version of SL 3 should provide more “hacks” for generating bitmaps from visuals enabling some more options for client side printing compared to the manual HTML generation. Still done through HTML bridge. This will for example enable printing of Charts.

Cross domain accesshttp://weblogs.asp.net/jgalloway/archive/2008/12/12/silverlight-crossdomain-access-workarounds.aspxSilverlight Limitations

Playboy archivesHardrock cafehttp://www.mscui.net/PatientJourneyDemonstrator/Cool SL gameshttp://www.silverarcade.com/Silverlight shophttp://www.eastberlinshop.com/Silverlight Cooool

http://silverlight.idvsolutions.com/http://memorabilia.hardrock.com/http://apps.junkship.org/apps/tarantula/http://joestegman.members.winisp.net/DeepZoom/http://www.tafiti.comhttp://www.imeta.com/SilverlightShowcaseApp.htmhttp://silverlight.net/samples/2b2/silverlightchess/run/Default.htmlCool Silverlight sites

Cross-browser, cross-platform supportIt runs on the MACQuick to learn Core CLR on the webEasy to build better web applicationsAlready good take upAdvantages

Consistent .NET programming modelAny .NET language, C#, VB.NET, IronPythonYour favourite languages are supported on the clientSignificantly reduces the need for JavascriptEasy deploymentAdvantages

Silverlight works in a myriad of browsers and platformsAny Web server can host SilverlightSilverlight plug-in available for Windows and MacMoonlight the plug-in for Linux clientsMono for Silverlight in v1Silverlight on other platformsSilverlight on other platforms

Platforms & Browsers (Microsoft support)Novell Support (Moonlight)IE 6.0+Firefox 1.5+Safari 2.0KonquerorFirefoxOperaWindows Vista, XP, 2003, 2000*Mac OS X 10.4.8+Linux(various distros)

Introduction to JQuery, ASP.NET MVC and Silverlight

More Related Content

What's hot (20)

Similar to Introduction to JQuery, ASP.NET MVC and Silverlight (20)

More from Peter Gfader (20)

Recently uploaded (20)

Introduction to JQuery, ASP.NET MVC and Silverlight

Editor's Notes