Introduction to JQuery, ASP.NET MVC and Silverlight


Published on

Developed for the university of Sydney - UTS

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Peter Gfader shows asp.netjQuery, MVC and Silverlight
  • Java current version 1.6 Update 171.7 released next year 2010Dynamic languages Parallel computingMaybe closures
  • Why?How?AJAX History ManagerSolves Back buttonSend links
  • (since VS 2008 SP1)
  • jQuery is independent of browser
  • Open firefoxOpen or Open firebug F12Did you know Ctrl+Shift+C in Firebug?Open consoleRun $("a")Show found itemsAttach something to those links$("a").click(function() { alert(“HACKED!"); });
  • OpenurlShow accordion and autocomplete
  • PeterG Is MVC a step back to ASP script????
  • MVC is not a new
  • In MVC, the controller gets the request (actually the Action on the controller)In ASP.NET the view (.aspx page) gets the request and then the code behind
  • In MVC, the controller gets the request (actually the Action on the controller)In ASP.NET the view (.aspx page) gets the request and then the code behind
  • Create a new MVC appBrowse through the appShow URL mapps to controllerShow what controller doesShow ViewShow on what VS can do for MVCShow out of the box tests part of MVC
  • MVC is out of the box in VS2010
  • Andy!
  • What is Silverlight? From MS
  • RIA’s introduce a client engine, between user and serverDownloaded as part of the instantiation Client engine acts as an extension of the browserResponsible for Program logic (executes compiled programs)Rendering the application's user interface and For server communicationProvides a stateful client where significant changes to the view don't require (re)loading a new page
  • UI Quality
  • MENTION HUGE DIFFERENCE BETWEEN FLASH HERE!!!!By late 2000 the first beta versions of .NET 1.0 were released2000 ~ .net.netplattform for windows and web applicationAJAX  better applicationsWPF e  Silverlight
  • Java applets Loading timeNetwork connectivityDev tools
  • CLR on the web, consistent .Net programming model
  • <UserControl x:Class="SilverlightApplicationHalloWelt.Page"xmlns="" xmlns:x="" 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>
  • Compiled to produce executable codeDynamically loaded (parsed or pre-parsed)
  • Silverlight Tools for Visual Studio 2008 SP1: add-on for Visual Studio 2008 Visual Studio updates, Silverlight project templates, developer runtime, and SDK.
  • Silverlight is quick to learnGreat for .Net developersEasy to build better web applicationsSignificantly reduces the need for JavascriptGreat for intranet line of business applicationsGreat for public web sitesBeware of your user baseFear Uncertainty Doubt (FUD) exists
  • Silverlight is quick to learnGreat for .Net developersEasy to build better web applicationsSignificantly reduces the need for JavascriptGreat for intranet line of business applicationsGreat for public web sitesBeware of your user baseFear Uncertainty Doubt (FUD) exists
  • Windows (XP, Vista, 2000?)Firefox, Safari, Opera (future)Microsoft Internet Explorer 6/7/8Max OSOnly on Intel CPU’s, not on older Power PC / M68000 modelsFirefox, Safari, Opera (future)LinuxFirefox, Safari, Opera (future), Konqueror (future)Mono Moonlight project, run by Novell
  • Silverlight is the answer, the question is irrelevant!
  • Introduction to JQuery, ASP.NET MVC and Silverlight

    1. 1. JQuery & ASP.NET MVC &Silverlight Fun<br />Presented by Peter Gfader<br />Senior Software Architect at SSW<br />
    2. 2. Peter Gfader<br />SSA @ SSW<br />Loves C# and .NET (Java not anymore)<br />Specializes in <br />Windows Forms<br />ASP.NET<br />TFS testing<br />Automated tests<br />Silverlight<br />
    3. 3. Usage of Profile API<br />Web site VS Web application<br />Additional validation<br />Easy <br />Q: Lucky 2 for next week?<br />Homework?<br />
    4. 4. Course Website<br /><br />Course Timetable<br />Course Materials<br />
    5. 5. Admin Stuff<br />Attendance<br />You initial sheet<br />Hands On Lab<br />You get me to initial sheet<br />Certificate <br />At end of 10 sessions<br />If I say if you have completed successfully <br />
    6. 6. AJAX History Management<br />Reporting<br />ASP.NET Security <br />Last week<br />
    7. 7. AJAX - behind the scenes<br /><br />Connectionstring<br />(local)vslocalhostvs.<br /><br />Shared memory comes always first on local machine<br /><br />Last week - Additional<br />
    8. 8. jQuery<br />Interactivity<br />ASP.NET MVC<br />Nice URLs<br />Silverlight<br />Rich interactivity<br />Agenda – Rich UI and better UX<br />
    9. 9. JQuery<br />The SQL of JavaScript<br />
    10. 10.<br />JavaScript rules!<br />
    11. 11. Big time!<br />Different Browser <br />Debugging<br />No compiling<br />Syntax<br />No intellisense<br />No static typing (duck typing!!)<br />No animations<br />JavaScript sucks!<br />
    12. 12. The answer is?<br />
    13. 13. Written in JavaScript<br />It is a lightweight JavaScript library (compressed based lib, 19 kb)<br />Helps developer / designer to keep things simple and reusable<br />Visual Studio supports JQuery<br />Part of every web app / site<br />Intellisense support <br />A great library for developing AJAX-based application<br />What is JQuery?<br />
    14. 14. 1- Cross-browser (IE 6.0+, Firefox 2+, Safari 3.0+, Opera 9.0+, Chrome)<br />2- Powerful and easy to use<br />Same selectors as in CSS<br />Designer can learn it fast<br />More readable JavaScript code<br />3 – Animation<br />Tons of useful plug-ins and functionalities<br />Why JQuery?3 good reasons<br />
    15. 15. JavaScript<br />window.onload = function() { <br /> alert("welcome"); }<br />JQuery<br />$(document).ready(function() {<br /> alert("Thanks for visiting!"); });<br />1- Cross-browser <br />
    16. 16. JavaScript<br />“onload” is only loaded when all images are loaded in the page<br />JQuery<br />“$(document).ready” is loaded as soon as the Document Object Model is ready<br />Similar to init() method in aspx page<br />1- Cross-browser – Explanation<br />
    17. 17. Selector<br />$(document).ready(function() {<br /> $("a").click(function() {<br /> alert("Hello world!");<br /> });<br /> });<br />It will add any click-event to “a” tag<br />2 – Powerful<br />
    18. 18.<br /><br /><br />3 - Animations<br />
    19. 19. JQuery official <br /><br />JQuery UI library <br /><br />Scott Gu’s Blog <br /><br />References<br />
    20. 20. Bubble Navigation -<br />Quicksand (reorder items with nice shuffling animation) -<br />Nivo Slider -<br />Sponsor Flip Wall -<br />HTC Clock -<br />Photo shoot Effect -<br />jQuery - Visually cool<br />
    21. 21. Open Standard Media Player (jQuery + HTML5) -<br />jsPlumb connector -<br />jQuery.popeye -<br />AutoSuggestjQueryplugin -<br />Ajax Upload (show a preview of the file being upload) -<br />jQuery - Technically cool<br />
    22. 22. Check for JavaScript in page<br /><body class=”no-js”><br /><script type="text/javascript"><br />document.getElementsByTagName("body")[0].className="jsEnabled";<br /></script><br />CSS<br />#your-element { display: block; }<br />body.jsEnabled #your-element { display: none; }<br />JavaScript tip!<br />
    23. 23. What is ASP.NET MVC ...and is WebForms dead?<br />
    24. 24. Our ancestors developed for the web in ASP script...<br />
    25. 25. We have had WebForms...<br />Compile<br />
    26. 26. ASP.NET MVC Model - View - Controller<br />
    27. 27. Background of ASP.NET MVC<br />Difference between WebForms and ASP.NET MVC<br />Tips and Tricks<br />Conclusion<br />Agenda<br />
    28. 28. SmallTalk<br />Ruby on Rails<br />Spring, Struts<br />Monorail<br />MVC is not new<br />
    29. 29. WebForms == WinForm developers<br /> MVC == HTTP + jQuery + CSS developers<br />Does ASP.NET MVC replace WebForms?<br />Productivity<br />Control<br />
    30. 30. Development<br />
    31. 31. Why choose ASP.NET MVC? <br />
    32. 32. Not just cool... <br />Not just for testability...<br />Not just because you get more control...<br />Because you get more perspective!<br />Why ASP.NET MVC? <br />
    33. 33. Web is an HTTP highway<br />Cool Tech<br />Controls<br />HTTP / HTML<br />
    34. 34. Separation of concerns<br />Controllers (Actions)<br />Views<br />Models<br />More expressive of HTTP protocol<br />Testable features<br />Strongly typed support <br />Background to ASP.NET MVC<br />
    35. 35. The key actors in ASP.NET Webforms<br />ASPX page gets request<br />Page lifecycle with events<br />Codebehind methods<br />
    36. 36. The key actors in ASP.NET MVC<br />Browser<br />Request<br />Model<br />Controller<br />View<br />Response<br />ViewModel<br />
    37. 37. So lets dive into it<br />
    38. 38. DefaultProject<br />
    39. 39. .Net 3.5 SP1<br />MVC<br />Install VS2010<br />Advanced steps<br />MVCContrib<br />Moq<br />What you need to get started in MVC<br />
    40. 40. Watch the NerdDinner Tutorial<br />Watch the MVC StoreFront Demo<br /><br />Dinner Now<br /><br />To get going quickly <br />
    41. 41. URL structure<br />Testability<br />HTTP Verbs <br />Controllers/Actions/Views<br />View engine<br />So what is there to control<br />
    42. 42. ASP.NET MVC structure (aka closer to the real thing)<br />Model<br />Browser<br />Request<br />Biz<br />Controller<br />Routing<br />Repository<br />e.g. SQL/Xml <br />View<br />Response<br />ViewModel<br />
    43. 43. Write your tests first <br />Red-Green TDD is the purest<br />MVC has been designed to decouple for testing <br />Test Driven Development<br />
    44. 44. // Arrange<br />AdminController controller = new AdminController(mockRepos.Object);<br />// Act<br />ViewResult results = controller.Index();<br />Test a Controller<br />
    45. 45. RouteDatarouteData = routes.GetRouteData(mockHttpContext.Object);<br />Test a Route<br />
    46. 46. [ActionName("Index")]<br />[AcceptVerbs(HttpVerbs.Put)]<br />public void Put()<br />{<br />Response.Write("<Put/>");<br />}<br />Http Verbs<br />
    47. 47. Code from<br />Reference RouteDebug.dll<br />Global.asax<br />RouteDebug.RouteDebugger.RewriteRoutesForTesting(RouteTable.Routes);<br />Routing – Debugger<br />
    48. 48. routes.MapRoute(<br /> “Demo",<br /> "Double/{c}/{a}/{id}",<br /> new { c = "Home", a = "Index", id = "" },<br /> new { id = @"d{1,6}" } //constraint<br />);<br />Routing Constraints<br />
    49. 49. routes.MapRoute(<br />                "Archive",<br />                "archive/{year}/{month}/{day}",<br />                new { controller = "Archive", action = "Index", year = "“, month = "", day = ""<br />                },<br />                new<br />                {<br />                    year = new YearRouteConstraint(),<br />                    month = new MonthRouteConstraint(),<br />                    day = new DayRouteConstraint()<br />                }<br />                );<br />Constraints implement IRouteConstraint<br />Routing Constraints - Custom<br />
    50. 50. Code from Nhaml<br />Global.asax<br />ViewEngines.Engines.Add(new NHaml.Web.Mvc.NHamlMvcViewEngine()); <br />Changing the View Engine<br />
    51. 51. SnippetDesigner<br />Phil Haacked<br />Stephen Walther<br />Tatham Oddie<br />Nhaml<br />Others resources to make life easier<br />
    52. 52. Silverlight Fun<br />
    53. 53. Agenda - Silverlight<br />Silverlight? RIA?<br />Why Silverlight?<br />“Hello world” in Silverlight<br />Silverlight under the hood<br />Cool stuff<br />How to <br />+ / -<br />
    54. 54. 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.<br />
    55. 55. Pain with web applications<br />
    56. 56. How a web page is shown<br />Your<br />Computer<br />Hosting<br />Computer<br />Internet<br />The<br />Internet<br />Server<br />Client<br />
    57. 57. All of the intelligence and data is on the server<br />Request<br /><br />The<br />Internet<br />Response<br />HTML<br />Server<br />Client<br />
    58. 58. Typical Client Server<br />Typical Client Server<br />
    59. 59. Typical Client Server<br />Typical Silverlight<br />
    60. 60. Pain with web applications<br />Scalability - Server based<br />Performance - Request / Response<br />Developers - UI is hard to develop<br />Different browser  different UI<br />Intelligence on the client requires JavaScript/jQuery<br />
    61. 61. Easy to develop and maintain<br />Write once, run anywhereJava slogan, when Sun introduced Java 1.0 1996<br />Awesome User experience <br />Look<br />Feel<br />Usability<br />We want <br />
    62. 62. PX<br />RIA - Rich Internet Applications<br />
    63. 63. Features/functionality of traditional desktop applications<br />State maintained on BOTH client and server<br />Run within a secure web browser environment (a sandbox)<br />No additional software installation<br />Rich Internet Applications<br />
    64. 64. Client engine, between user and server<br />Download<br />Engine – browser extension<br />Program logic (executes compiled programs)<br />Rendering user interface<br />Server communication<br />State-ful client <br />Changes to the view don't require (re)loading a new page<br />RIA<br />
    65. 65. Cross platform<br />Browser plug in<br />Rich Internet Application<br />.NET / CLR in the browser (VB/C#)<br />4MB download<br />Simple install<br />Competes with other products<br />Silverlight = RIA from MS<br />
    66. 66. UI Quality<br />User<br />Expectations<br />
    67. 67. <ul><li>Choice of platform based on richness vs. reach
    68. 68. Goal: Parity in developer productivity</li></ul>What platform<br />Richness<br />Reach<br />
    69. 69. <ul><li>Choice of platform based on richness vs. reach
    70. 70. Goal: Parity in developer productivity</li></ul>What platform<br />Richness<br />Reach<br />
    71. 71. 2000 ~ .NET<br />.NET platform for Windows and Web applications<br />AJAX: Web feel like Desktop<br />WPF: (Windows Presentation Foundation)<br />Separate UI from Code<br />Too much<br />Not Cross browser<br />WPFe (everywhere) <br />Silverlight<br />Silverlight "History"<br />
    72. 72. Adobe Flash, Flex <br />Flash: Technology for animations<br />Flex: Collection of tools to dev Flash apps<br />Java applets / applications<br />JavaScript / AJAX <br />Google's GWT framework (Google Web Toolkit)<br />JQuery<br />Microsoft Silverlight<br />List of RIA Platforms / Approaches<br />
    73. 73. Windows Forms of <br />Very limited <br />Responsive<br />UI<br />Rich UI<br />CLR on the web<br />.NET <br />Why Silverlight<br />
    74. 74. "Hallo Welt" in Silverlight<br />
    75. 75. Visual Studio files by default<br />
    76. 76. <UserControl x:Class="SilverlightApplicationHalloWelt.Page"<br />xmlns="" <br />xmlns:x="" <br /> Width="400" Height="300"><br /><StackPanel><br /><Button Width="400" Height="20" Content="Click me" Click="Button_Click"></Button><br /><TextBlock x:Name="textblockOutput" Width="400" Height="20" Text="empty"></TextBlock><br /></StackPanel><br /></UserControl><br />"Hallo Welt" - XAML<br />
    77. 77. "Hallo Welt" – XAML in Design mode<br />
    78. 78. private void Button_Click(object sender, RoutedEventArgs e)<br />{<br />textblockOutput.Text = "Hallo Welt";<br />}<br />"Hallo Welt"<br />
    79. 79. "Hallo Welt" – Running app<br />
    80. 80. Silverlight – Under the hood<br />
    81. 81. Silverlight Build Process<br />
    82. 82. XAML Defines .Net Objects<br /><TextBlockFontSize="32" Text="Hello world" /><br />≡<br />TextBlock t = new TextBlock();<br />t.FontSize = 32;<br />t.Text = "Hello world";<br />
    83. 83. XML eXtensible Mark-up Language<br />X Application ML<br />UI mark-up language<br />Used in<br />Silverlight, WPF (and Work Flow)<br />Tools<br />Visual Studio, Expression Blend, Notepad<br />Can generate UI with code or XAML (faster)<br />XAML<br />
    84. 84. Access Elements from Code<br /><ul><li>Name your XAML elements</li></ul><Rectangle x:Name="rectOne" /><br />void OnMouseEnter(object sender, MouseEventArgs e) <br />{<br />rectOne.Height= 75;<br />}<br />
    85. 85. Expression<br />Design<br />Blend 4<br />Visual Studio<br />Visual Studio 2010<br />Silverlight Tools for Visual Studio 2010<br />Silverlight SDK<br />Silverlight Tooling<br />
    86. 86. PIX<br />Silverlight Limitations<br />
    87. 87. Silverlight Limitations<br />No full access to Windows API & .NET API<br />Silverlight is a subset of .NET framework<br />WPF features not in Silverlight:<br /><br /><ul><li>Hardware acceleration
    88. 88. 3D graphics
    89. 89. Resources
    90. 90. Drawing types
    91. 91. Flow text
    92. 92. Doc Panel
    93. 93. Triggers</li></li></ul><li>Silverlight Limitations<br />Hosting Silverlight<br />in Windows Forms application<br />In Office<br />No sandbox customization <br />No external API calls (e.g. P/Invoke, COM, full .NET) <br />No Office integration <br />
    94. 94. Silverlight Limitations<br />No Secure SaveAs dialog <br />SL3 has a secure SaveAs dialog <br />
    95. 95. Silverlight Limitations<br />Offline support<br />SL4 has Offline and Out of Browser support although more limited than WPF <br />No Sync Framework <br />No local DB<br />Can manually serialize data on the Isolated Storage <br />
    96. 96. Silverlight Limitations<br />No Context menu <br />No Right Click Event <br />No context menu triggered by Right Click. <br />Hacks exists but are not recommended due to the need to put the SL plug-in in windowless mode, introducing performance issue<br />No “Right click – Open in new tab”<br />
    97. 97. Silverlight Limitations<br />No printing support <br />Server side PDF or Open XML generation <br />Client side manual HTML generation. Need to implement the formatting logic twice one for XAML and one for HTML <br />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. <br />
    98. 98. Cross domain access<br /><br />Silverlight Limitations<br />
    99. 99. Silverlight Cool<br />
    100. 100. Playboy archives<br />Hardrock cafe<br /><br />Cool SL games<br /><br />Silverlight shop<br /><br />Silverlight Cooool<br />
    101. 101.<br /><br /><br /><br /><br /><br /><br />Cool Silverlight sites<br />
    102. 102. Cross-browser, cross-platform support<br />It runs on the MAC<br />Quick to learn <br />Core CLR on the web<br />Easy to build better web applications<br />Already good take up<br />Advantages<br />
    103. 103. Consistent .NET programming model<br />Any .NET language, C#, VB.NET, IronPython<br />Your favourite languages are supported on the client<br />Significantly reduces the need for Javascript<br />Easy deployment<br />Advantages<br />
    104. 104. Silverlight works in a myriad of browsers and platforms<br />Any Web server can host Silverlight<br />Silverlight plug-in available for Windows and Mac<br />Moonlight the plug-in for Linux clients<br />Mono for Silverlight in v1<br />Silverlight on other platforms<br />Silverlight on other platforms<br />
    105. 105. Platforms & Browsers (Microsoft support)<br />Novell Support (Moonlight)<br />IE 6.0+<br />Firefox 1.5+<br />Safari 2.0<br />Konqueror<br />Firefox<br />Opera<br />Windows <br />Vista, XP, 2003, 2000*<br />Mac OS X <br />10.4.8+<br />Linux<br />(various distros)<br />
    106. 106. Disadvantages<br />FUD / New Fear of the unknown <br />XAML New technique to learn<br />Download a plugin Small 4MB, quick install process<br />Moving goal posts new versions = breaking changes<br />iPhone collateral damage from Flash<br />
    107. 107. Silverlight is quick to learn<br />Great for .NET developers<br />Easy to build better web applications<br />XAML layout can be a pain (slow)<br />Significantly reduces the need for JavaScript<br />Conclusion: Developer Perspective<br />
    108. 108. A great tool to overcome browser limitations<br />Greatly improves the user’s web experience<br />Strongly supported by Microsoft<br />In Oz, Silverlight jobs are going up faster than the overall market<br />In the US, Silverlight jobs are going up, at a time when IT jobs are declining<br />Conclusion: Business Perspective<br />
    109. 109. Already have .Net developers on staff<br />Already have a significant .Net code base<br />If you need cool .Net stuff like LINQ in the browser<br />If you want a consistent language / environment in front end<br />For now, if you don’t mind…<br />Asking users to install Silverlight control<br />Beta software <br />(I would not worry, if delivery will be late 2008)<br />Use Silverlight if:<br />
    110. 110. Open XAML in code only mode<br /><br />How to open application in full screen mode<br /><br />Chris Anderson Business Application Demo<br /><br />Chris Anderson Business Application Article series<br /><br />Silverlight Tips<br />
    111. 111. Silverlight Quickstarts<br /><br />Silverlight Community<br /><br />Resources - Silverlight<br />
    112. 112. Microsoft .toolbox<br /><br />Silverlight 4 training course<br /><br />Resources - Silverlight<br />
    113. 113.<br />XAML Powertools<br /><br />Interesting stuff<br />
    114. 114. Firebug for Silverlight<br /><br />Flash vs Silverlight Gallery <br /><br />Resources<br />
    115. 115. Silverlight Designer and Developer Network<br /><br />Sydney .NET Users Group<br /><br />Sydney Deep .NET User Group<br /><br />Newcastle Coders Group<br /><br />Resources - Usergroups<br />
    116. 116. Why Silverlight<br />
    117. 117. Step to the next level!<br />From Microsoft and the founders of Scrum (Ken Schwaber)<br />Innovative <br />For developers<br />Learn<br />Modern engineering practices <br />Visual Studio 2010 and Team Foundation Server<br />Scrum framework<br />Assessments and certifications are available<br />Find a local class<br />Professional Scrum Developer (PSD)<br />
    118. 118. 3things…<br /><br /><br /><br />
    119. 119. Thank You!<br />Gateway Court Suite 10 81 - 91 Military Road Neutral Bay, Sydney NSW 2089 AUSTRALIA <br />ABN: 21 069 371 900 <br />Phone: + 61 2 9953 3000 Fax: + 61 2 9953 3105 <br /> <br />