• Like

Considerations with Writing JavaScript in your DotNetNuke site

  • 4,044 views
Uploaded on

Whether you want to take advantage of jQuery, ASP.NET AJAX, or just plain JavaScript, come learn the rules and guidelines for taking advantage of JavaScript within your DotNetNuke site. We'll talk …

Whether you want to take advantage of jQuery, ASP.NET AJAX, or just plain JavaScript, come learn the rules and guidelines for taking advantage of JavaScript within your DotNetNuke site. We'll talk through considerations for enhancing your content, skins, and modules, the best ways to include JavaScript behaviors, and some ways to avoid inconsistencies and frustration.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • The module pattern is discussed by Douglas Crockford in his book 'JavaScript: The Good Parts,' and doing a quick search I also found this related blog post: http://www.yuiblog.com/blog/2007/06/12/module-pattern.

    Effectively, the module pattern has all of your script happening inside of a call to an anonymous function. Because you're in a function, all of the variables and functions created are scoped to that function, and not accessible from outside of that function (i.e. not accessible from any other script on the page). This keeps your script non-intrusive and maintainable. You can have your module return something if you need to make part of its functionality available outside of the module itself. You can also pass in arguments to the function (e.g. jQuery) in order to have a local reference to them. You can also look at the 'plugin development pattern' link that is on slide 10, in that article's 'Keep private functions private' section for another example.

    Hope that helps!
    Are you sure you want to
    Your message goes here
  • i can't find the 'module pattern' anywhere online. nor reference to rewritten jQuery's factory function within Sitefinity, save here. and this is pretty vague to me....can you explain that guy so more or know of some posts/docs/refs that do it?
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
4,044
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
23
Comments
2
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • Whether you want to take advantage of jQuery, ASP.NET AJAX, or just plain JavaScript, come learn the rules and guidelines for taking advantage of JavaScript within your DotNetNuke site. We'll talk through considerations for enhancing your content, skins, and modules, the best ways to include JavaScript behaviors, and some ways to avoid inconsistencies and frustration.
  • While it may be tempting to think that jQuery is just always on the page, that you don't have to think about it, that's not quite the case. The main reason that you see it on the page is that the Enable Skin Widgets option is checked in the Site Settings. If you turn that off jQuery will only be loaded when something requests it. If you're logged in, you may think that it's still there, but that's because the (older) IconBar control panel requests it. Once you logout, jQuery is only on the page if a module on the page requests it. To do that, call DotNetNuke.Framework.jQuery.RequestRegistration() from your module, skin, skin object, etc.
  • In the host settings, there are a few options in terms of how jQuery gets included on the page. You can reference the Debug version, if you're a developer (though, in general, I don't think that'll get you much benefit). You can also use a hosted version of jQuery. The two big options for that are the Google CDN and Microsoft's CDN. The benefit of using a CDN is that most people will already have a cached version of the file when they get to your site, so they won't need to have to latency induced by that initial download. For this reason, I recommend the Google CDN, since the Microsoft CDN isn't nearly as widely used. Google also allows you to specify a partial version of the script (meaning, you reference version 1.4 to get the latest version of the 1.4 script). However, because this could serve up different scripts, Google does not instruct the browser to cache the script for a long time using this method. Thus, the main benefit of the CDN is lost if you don't reference a specific version of jQuery, It also hosts some other interesting scripts, though that shouldn't strongly affect your decision to use it or not.
  • In DNN 5.0, the DotNetNuke.Framework.jQuery class was introduced to handle requesting jQuery on the page. In DNN 5.2.3, DNN started switching the protocol of a hosted jQuery script from http to https if it was used on a secure page. This works for the Google CDN, but not necessarily for CDNs. In DNN 5.4.2, the reference to jQuery was moved higher in the page, to cause less conflict with scripts that depend on it.
  • ASP.NET AJAX is guaranteed to be on the page since DNN 5 (via a ScriptManager control). This enabled UpdatePanels, ASP.NET AJAX Control Toolkit controls (which have been deprecated), as well as just the JavaScript libraries themselves. The main place you might run into needing to use ASP.NET AJAX is when interacting with Telerik controls via the $find method.
  • The main difficulty with JavaScript is that it is very easy for one person's code to interfere with another's, via naming collisions. Be careful about your scripts, make sure that you write your scripts inside of a function (providing a scope for any variables you create), consider writing your scripts in separate files, to ensure modularity.
  • Run your scripts through JSLint (jslint.com) to catch errors that are easy to slip up on. It is very strict, to help you be careful. Read JavaScript: The Good Parts to get a better understanding of some of the issues it raises. Look at examples of how to write jQuery plugins.,
  • Including JavaScript in a <script> tag in your .ascx control is easy, but it also makes it hard to reuse and maintain your code. It's also duplicated for each instance of your module on the page. Using the ClientScriptManager (via Page.ClientScript) manage your script references make it something you don't have to think much about. However, it doesn't handle script order dependencies. If you have multiple scripts that are dependent, consider (1) combining (and minifying) them, (2) using jQuery.getScript to load them dynamically, (3) sending ClientScriptManager.RegisterStartupScript multiple script tags to register at once. Widgets are a way for non-technical end-users to embed JavaScript in content (i.e. HTML module or similar) via an HTML construct, instead of JavaScript. Something to consider... Telerik controls require the name of a function in order to handle client-side events, so this is a case where you can't easily hide your script from other modules, or use a separate script. There are workarounds, but they're not as simple, and not the sort that Telerik gives many examples for.
  • The biggest way that you can avoid inconsistencies in your scripts is to always use jQuery when dealing with the DOM. Even when you think something is simple, it's probably not quite as simple are you expect it to be (at least in IE 6, or some other, obscure browser). Jquery's purpose is to handle those inconsistencies, so let it.
  • If you're interested in an excellent platform for DNN Q&A, consider committing to being a part of the DotNetNuke Stack Exchange proposal. I honestly believe it will revolutionize how we help each other and get helped when developing, integrating, and maintaining DNN sites.

Transcript

  • 1.
      Writing JavaScript In Your DotNetNuke ® Site
      Brian Dukes, Engage Software
  • 2.  
  • 3.
      Brian Dukes
      Engage Software since 2006 Chief Software Architect in charge of Module Development Microsoft Certified Professional Developer
  • 4.
      Agenda
        - jQuery   - ASP.NET AJAX   - JavaScript Safety   - Including JavaScript
  • 5.
      jQuery - included?
      Core   - IconBar   - Skin Widgets   - Telerik ( Telerik.Web.CommonScripts.$ ) Modules  - Console   - Dashboard   - Sitemap settings   - Blog includes its own version   - 3rd Party
  • 6.
      jQuery - options
      Debug Hosted   - Google CDN    - jQuery UI    - SWFObject    - WebFont Loader    - Use a specific version   - Microsoft CDN    -  jQuery Validation
  • 7.
      jQuery - versions
      /Resources/Shared/scripts/jquery/jquery.min.js DNN 4.9.1 - 5.0.1   - jQuery 1.2.6 DNN 5.1.0 - 5.2.3  - jQuery 1.3.2 ( closest() , live() ) DNN 5.3.0 - present   - jQuery 1.4.2 5.0.0 - API 5.2.3 - SSL (kind of) 5.4.2 - jQuery reference is earlier in the <head>
  • 8.
      ASP.NET AJAX
      Guaranteed on the page starting in DNN 5.0 Use $find to interact with Telerik controls
  • 9.
      JavaScript Safety - naming
      Naming collissions   - keep exposed variable names to an absolute minimum   - don't expose overly generic variable names    - company.module instead of module   - keep scripts in separate files, create jQuery plugins   - don't use $ for jQuery   - use module pattern
      (function ($) {     $(function () {         // do stuff     }); }(jQuery));
  • 10.
      JavaScript Safety
      JSLint   - catches easy-to-miss issues   - accidental global variables   - Douglas Crockford's JavaScript: The Good Parts jQuery Plugins   - http://www.learningjquery.com/2007/10/a-plugin-development-pattern   - Engage: Tell-a-Friend
  • 11.
      How to Include JavaScript
      Inside <script> tag   - Duplicated for each instance of the module   - Less reusable   - Less maintainable ClientScriptManager   - RegisterStartupScript   - RegisterClientScript   - Script Ordering... Widgets   - http://www.kalyani.com/tag/widgets/ Telerik OnClient...
  • 12.
      Avoid Inconsistencies and Frustration
      jQuery
  • 13.
      Questions?
      Commit to DotNetNuke's Stack Exchange: http://bit.ly/dnn-se