Turning an ascx user control into a redistributable custom control

This article applies to ASP.NET 2.0 and Visual Studio 2005.

Background

Since its early days, ASP.NET has always supported two different ways of authoring server controls:

1. Custom Controls: these are controls written from scratch exclusively using code.  Essentially, you write a class which extends Control (directly or indirectly), and you take care of everything.  You need to write logic to create child controls that you want to use, and you override the Render method to perform rendering.  Typically, you build this control into a redistributable assembly (i.e. a DLL), which can then be used by any ASP.NET applications, simply by placing the assembly in the 'bin' directory of the app (or in the Global Assembly Cache).
2. User Controls: these control are written using an ascx file, which looks much like an aspx page.  i.e. you can simply drag and drop the UI elements that you want to use into the design surface.  You don't need to worry about control creation, nor about overriding the Render method.

Looking at those two methods, they are very different, and each has a number of advantages and disadvantages.  I won't discuss them all, but will focus on those that are relevant to this article:

• Custom Controls require a lot of development expertise to be written, while User Controls are authored using an advanced designer, and are much more approachable.  For this reason, User Controls typically take a lot less time to write.
• Custom Controls can easily be redistributed without having to give away their sources.  On the other hand, User Controls are always used based on an ascx text file, making it less ideal for reuse across applications.

The goal of this article is to show how you can have the best of both world by turning an ascx user control into a redistributable custom control, by making use of ASP.NET 2.0's new precompilation features.

Brief outline of the steps

The basic steps to make this happen are as follows:

1. Write your User Control as you normally would, typically using the Visual Studio designer.
2. Test it using a simple page before trying to deploy it.
3. Deploy the app to precompile it.
4. Grab the user control's assembly produced by the deployment step, and you're essentially done: you have your Custom Control.
5. Finally, use your Custom Control in other apps the same way as you always use Custom Control's.

We will look at those steps in more detail in the rest of the article.

 

Step 1: Authoring the User Control

To author the User Control, it is best to start with an empty site (not web app!) that contains nothing other than the ascx.  While the authoring of the User Control uses 'standard' techniques, there are some restrictions that you need to be aware of in order for it to be successfully turned into a standalone Custom Control.

The main restriction is that the User Control needs to be self contained.  That is, it cannot be dependent on app global things like App_Code or global.asax.  The reason for this is that since the goal is to turn the UserControl into a standalone DLL, it would break in other apps if it relied on code that is not part of that DLL.

One exception to this rule is that the UserControl can be dependent on assemblies that live in the bin directory (or in the GAC).  You just have to make sure that the other assemblies are always available when you use your Custom Control in other apps.

Another tricky thing is the use of static resources, like images.  After you turn it into a Custom Control in a standalone assembly, it becomes hard for it to keep such references, and avoiding them simplifies deployment.  If you really must have such references, one option is to use absolute URL's if you can guarantee that the resource will always be available on a certain site.  Or you can look into machine wide resources (e.g. src="http://blogs.msdn.com/MyImages/welcome.jpg"), though you will then need to make sure the resources are installed on the server machine (e.g. as part of some setup).

Ok, so let's start and actually author the User Control.  Visual Studio 2005 gives you the choice to place the code in a separate file, or use inline code.  This is a matter of personal preference, and either one will work to create a Custom Control.  For this article, we will use inline code.  When you create the User Control (say MyTestUC.ascx), VS creates it with the a @control directive that looks like this:

<%@ Control Language="C#" ClassName="MyTestUC" %>

This is fine, except for one thing: we want the class to live within a namespace of our choice (instead of 'ASP', which is what's used by default).  To do this, we simply modify the ClassName attribute to include the namespace (this is a new feature in 2.0).  e.g.

<%@ Control Language="C#" ClassName="Acme.MyTestUC" %>

That's really the only 'special' thing you need to do.  Now you can go ahead and implement your User Control as you always would: add some server control, some client HTML, server script, client script, etc...

Step 2: Testing your User Control

Before trying to turn the User Control into a Custom Control, it is a good idea to test it in the source app using a simple page.  To do this, simply create a new Page in Visual Studio, go to design View, and drag and drop your User Control into it.

The two notable pieces of your page are the Register directive:

<%@ Register Src="MyTestUC.ascx" TagName="MyTestUC" TagPrefix="uc1" %>

and the User Control declaration:

        <uc1:MyTestUC ID="MyTestUC1" runat="server" />

Note that at this point, the Register directive uses the User Control syntax (Src/TagName/TagPrefix) and not the Custom Control syntax (TagPrefix/Namespace/Assembly).  This will change after we turn the User Control into a Custom Control.

Run your page (Ctrl-F5) and make sure the User Control works the way you want before moving to the next step.

Step 3: Use the Publish command to precompile the site

The next step is to use the new Publish command to precompile your site and turn your User Control into a potential Custom Control.  You'll find the command under Build / Publish Web Site.  In the Publish dialog, do the following:

• Pick a Target Location.  This is the location on your hard drive that your site will be precompiled to.
• Uncheck 'Allow this precompiled site to be updatable'.  In updatable mode, only the code behing file (if any) would get compiled, and the ascx would be left unprocessed.  This is useful in some scenarios, but is not what you want here since you want the resulting DLL to be self contained.
• Check 'Use fixed naming and single page assemblies'.  This will guarantee that your User Control will be compiled into a single assembly, which will have a name based on the ascx file.  If you don't check this, your User Control could be compiled together with other pages and User Controls (if you had some), and the assembly would get a random name that would be more difficult to work with.

Though it is entirely optional, note that the Publish Web Site dialog lets you strong name the generated assemblies.  This allows you to sign the assembly so that it cannot be tempered with.  Additionally, it allows you to place the assemblies in the Global Assembly Cache (GAC), which makes it easier to use machine wide.  More on this in Step 5.

Go ahead and complete the dialog, which will perform the precompilation.

Note: This same step can also be accomplished without using Visual Studio by using the new aspnet_compiler.exe command line tool.  The options it supports are basically the same as what you see in the Publish dialog.  So if you are more command line inclined, you might prefer that route.  e.g. you would invoke it using the command: 'aspnet_compiler -p c:\SourceApp -v myapp -fixednames c:\PrecompiledApp'.

Step 4: finding the resulting Custom Control

Now, using the Windows Explorer or a command line window, let's go to the directory you specified as the target so we can see what was generated.  You will see a number of files in there, but let's focus on the one that is relevant to our goal of turning the User Control into a Custom Control.

In the 'bin' directory, you will find a file named something like App_Web_MyTestUC.ascx.cdcab7d2.dll.  You are basically done, as this file is your User Control transformed into a Custom Control!  The only thing that's left to do is to actually use it.

Note: In case you're curious, the hex number within the file name (here 'cdcab7d2') is a hash code that represents the directory that the original file was in.  So all files at the root of your source app will use 'cdcab7d2', while files in other folders will use different numbers.  This is used to avoid naming conflicts in case you have files with the same name in different directories (which is very common for default.aspx!).

Step 5: Using your new Custom Control

Now that we have created our Custom Control, let's go ahead and use it in an app!  To do this, let's create a new Web application in Visual Studio.  We then need to make our Custom Control available to this application:

• In the solution explorer, right click on your application, and choose Add Reference.
• In the Add Reference dialog, choose the Browse tab.
• Navigate to the location of your Custom Control (App_Web_MyTestUC.ascx.cdcab7d2.dll) and select it.  It will be copied to the bin directory of your new app.

Note: as an alternative, you can choose to place the assembly in the GAC instead of the 'bin' directory.  In order to do this, you need to choose the Strong Name option in Step 3.  You then need to add your assembly in the <assemblies> section of web.config in the Web application that wants to use it (or in machine.config to make to globally usable).

Now let's create a test page that uses the Custom Control.  This is similar to Step 2, except that you are now dealing with a Custom Control instead of a User Control.

First, add a Register directive to your page.  It should look something like this:

<%@ Register TagPrefix="Acme" Namespace="Acme" Assembly="App_Web_mytestuc.ascx.cdcab7d2" %>

Note how we are using a different set of attributes compared to Step 2.  Recall that in Step 1, we made sure that the ClassName attribute included a namespace.  This is where it becomes useful, as Custom Control registration is namespace based.  Also, you need to specify the assembly name, which is why having a name that is easily recognizable is useful, as discussed in Step 3.

Now, let's declare a tag for the Custom Control.  e.g.

    <Acme:MyTestUC id="MyUC" runat="server" />

That's it, you can now run your app (Ctrl-F5), and you are using your new Custom Control!

This shows how to use your Custom Control declaratively, but note that it can also be used dynamically, just like any other control.  To do this, just create the control using 'new'.  Here is what the previous sample would look like using dynamic instantiation:

<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
    protected void Page_Load(object sender, EventArgs e) {
        Label1.Controls.Add(new Acme.MyTestUC());
    }</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Label ID="Label1" runat="server"></asp:Label></div>
    </form>
</body>
</html>

Note: instantiating your Custom Control dynamically as above is basically the equivalent of instantiating your original User Control using the LoadControl API.  Note that you can no longer use the standard LoadControl API after converting it to a Custom Control, since Custom Controls don't have a virtual path.  However, ASP.NET 2.0 has a new LoadControl override which takes a Type, and that you could use in this case.  The one reason I can think of that you might choose to call LoadControl instead of just using 'new' is to take advantage of fragment caching (aka partial caching).  If you use 'new', any OutputCache directive in your ascx will be ignored.

Conclusion

This article outlines how to turn a User Control into a Custom Control, in order to take advantage of the strength of each model.  While there are some limitations with this hybrid model (see Restrictions in Step 1), there are many scenarios for which it can be useful.

In the future, the ASP.NET team is looking at simplifying this scenario and make it more powerful with some new tools that are in the work.  For example, you would be able to take an entire application containing an App_Code directory and multiple User Control, and turn it all into a single assembly that can easily be dropped into the 'bin' directory of other apps.  Though it will allow some more powerful scenarios, note that the basic idea behind it is essentially the same as what is shown in this article.

Difference between MVC and 3-tier architecture

3-tier design

 MVC pattern

Meaning that:

1. In the 3-tier equivalent, communication between layers is bi-directional and always passes through the Middle tier

2. In the MVC equivalent the communication is in unidirectional; we could say that each "layer" is updated by the one at the left and, in turn, updates the one at the right –where "left" and "right" are merely illustrative

P.S. Client would be the View and Middle the Controller

ASP.NET MVC 3: CREATING A SIMPLE SIGN-UP FORM

In this article I'm going to demonstrate how to create a simple sign-up form using ASP.NET MVC 3. So basically in this demo you will learn the following:

How to insert data to the database with Entity Framework
How to validate the Form using Data Annotations
How to Authenticate users after sign up using FormsAuthentication

Note that before you continue reading this article be sure that you have the basic understanding about ASP.NET MVC in general. You can refer the following links below to learn more about ASP.NET MVC:

http://msdn.microsoft.com/en-us/library/dd381412%28VS.98%29.aspx
http://www.asp.net/mvc/whatisaspmvc


STEP 1. Adding a new ASP.NET MVC project

Let's go ahead and fire up Visual Studio 2010 and then select File -> New Project -> ASP.NET MVC 3 Web Application. See the screen shot below for more clearer view:



Now click OK and on the next form select Empty Template -> select Razor as the View engine and then click OK to generate the default files.

STEP 2: Setting up the Model

In this demo, I'm going to use Entity framework as our Data Access mechanism sothat we can program against the conceptual application model instead of progamming directly against  our database.

Add the following folders under the Models folder:

    DB
    ObjectManager
    ViewModel

The application structure would like something like below:



We will create our Entity Model (EDMX) in the DB folder. To do this right click on the "DB" folder and select Add -> New Item -> Data -> ADO.NET Entity Data Model. 



Noticed that I named the entity as "SampleModel" just for the purpose of this demo. You may want to name it to a more appropriate name based on your requirements but for this example let's just use "SampleModel". Now click Add to continue and on the next step select "Generate from database" and click Next. On the next step you can connect or browse to the database that you want to use in the application and test the connection string by clicking on the "Test Connection" button and if it succeeds then you can continue by clicking OK and then Next.

Note that in this example I created a simple database called "DeveloperReport.mdf" and added it into the application's App_Data folder and use it as our database. See the screen shot below:



On the next step we can add the table(s), views or stored procedures that we want to use in the application by selecting the checkbox. See below screenshot: 



Noticed that I've only selected the "SysUser" table. This is because we are going to use this table for doing insert and we don't need anything else. Now click on Finish button to generate the entity model for you. See the screenshot below: 



What happend there is that EF will automatically generates the Business object for you within the Entity Data Model(EDM) that we have just created and let you query against it.The EDM is the main gateway by which you retrieve objects from the database and resubmit changes.


STEP 3: Adding the ViewModel Class

Just to recap Entity Framework will generate the business objects and manage Data Access within the application. As a result, the class SysUser is automatically created by EF and it features all the fields in the database table as properties of the class.

I don't want to use this class direclty in the View so I decided to create a separate class that just holds the properties I need in the View. Now let's add a the UserView class by right-clicking on the "ViewModels" folder then select Add -> Class. Here's the code block for the "UserView.cs" class.

using System.ComponentModel.DataAnnotations;

namespace MVCDemo.Models.ViewModels {
    public class UserView {
        [Required]
        [Display(Name = "First Name")]
        public string FirstName { get; set; }

        [Required]
        [Display(Name = "Last Name")]
        public string LastName { get; set; }

        [Required]
        [Display(Name = "Contact Number")]
        public string ContactNumber { get; set; }

        [Required]
        [Display(Name = "Login ID")]
        public string LoginID { get; set; }

        [Required]
        [Display(Name = "Password")]
        public string Password { get; set; }
    }
}

Noticed that I added the Required and DisplayName attributes for each property in the UserView class. This attributes is called Data Annotations. Data annotations are attribute classes that live in the System.ComponentModel.DataAnnotations namespace that you can use to to decorate classes or properties to enforce pre-defined validation rules.

I'll use this validation technique because I want to keep a clear separation of concerns by using the MVC pattern and couple that with data annotations in the model, then your validation code becomes much simpler to write, maintain, and test.

For more information about Data Annotations then you can refer this link: http://msdn.microsoft.com/en-us/library/system.componentmodel.dataannotations.aspx. And of course you can find more examples about it by doing a simple search at google /bing 

STEP 4: Adding the UserManager Class

The next step that we are going to do is to create the User manager class that would handle the (CRUD operations) create,update,fetch and delete operations of a certain table. The purpose of this class is to separate the actual data opertions from our controller and to have a central class for handling insert,update,fetch and delete operations. But please note that in this example I'm only be doing the insert part in which a user can add new data from the View to the database. I'll talk about how to do update,fetch and delete with MVC in my next article. So this time we'll just focus on the insertion part first.

Now right click on the "Model" folder and add a new class by selecting Add -> Class and since we are going to manipulate the SysUser table then we will name the class as "UserManager". Here's the code block for the "UserManager.cs" class:

using System.Linq;
using MVCDemo.Models.DB;
using MVCDemo.Models.ViewModels;

namespace MVCDemo.Models.ObjectManager {
    public class UserManager {

        private DeveloperReportEntities dre = new DeveloperReportEntities();

        public void Add(UserView user) {
            DB.SysUser sysUser = new DB.SysUser();
            sysUser.SysUserLoginID = user.LoginID;
            sysUser.SysPassword = user.Password;
            sysUser.FirstName = user.FirstName;
            sysUser.LastName = user.LastName;
            sysUser.ContactNumber = user.LastName;

            dre.AddToSysUsers(sysUser);
            dre.SaveChanges();
        }

        public bool IsUserLoginIDExist(string userLogIn) {
            return (from o in dre.SysUsers where o.SysUserLoginID == userLogIn select o).Any();
        }
    }
}

STEP 4: Adding the Controllers

Since our model is already set then let's go ahead and add the "AccountController". To do this just right click on the "Controllers" folder and select Add -> Controller. Since our aim is to create a simple sign-up form then name the controller as "AccountController" and then click Add to generate the "AccountController" class for you.

Now here's the code block for the "AccountController":

using System.Web.Mvc;
using System.Web.Security;
using MVCDemo.Models.ViewModels;
using MVCDemo.Models.ObjectManager;

namespace MVCDemo.Controllers
{
    public class AccountController : Controller
    {
        // GET: /Account/SignUp
        public ActionResult SignUp() {
            return View("SignUp");
        }

        // POST: /Account/SignUp
        [HttpPost]
        public ActionResult SignUp(UserView user) {
            try {
                if (ModelState.IsValid) {
                    UserManager userManager = new UserManager();
                    if (!userManager.IsUserLoginIDExist(user.LoginID)) {
                        userManager.Add(user);
                        FormsAuthentication.SetAuthCookie(user.FirstName, false);
                        return RedirectToAction("Welcome", "Home");
                    }
                    else {
                        ModelState.AddModelError("", "LogID already taken");
                    }
                }
            }
            catch {
                return View(user);
            }

            return View(user);
        }
    }
}

The AccountController has two main methods. The first one is the "SignUp" which returns the "SignUp.cshtml" View. The second one also named as "SignUp" but it is decorated with the "[HttpPost]" attribute. This attribute specifies that the overload of the "SignUp" method can be invoked only for POST requests.

The second method is responsible for inserting new entry to the database and automatically authenticate the users using FormsAuthentication.SetAuthCookie() method. this method creates an authentication ticket for the supplied user name and adds it to the cookies collection of the response, or to the URL if you are using cookieless authentication. After authenticating, we then redirect the users to the Welcome.cshtml page.

Now add another Controller and name it as "HomeController". This controller would be our controller for our default page. We will create the "Index" and the "Welcome" View for this controller in the next step. Here's the code for the "HomeController" class:

using System.Web.Mvc;

namespace MVCDemo.Controllers
{
    public class HomeController : Controller
    {
        // GET: /Home/
        public ActionResult Index()
        {
            return View();
        }

        [Authorize]
        public ActionResult Welcome() {
            return View();
        }

    }
}

Noticed that we have two ActionResult method in the "HomeController". The "Index" method serve as our default redirect page and the "Welcome" method will be the page where we redirect the users after they have successfully registered. We also decorated it with the "[Authorize]" attribute so that this method will only be available for the logged-in users. 

STEP 5: Adding the Views

First let's add the following folders below under the "Views" folder:

    Home
    Account

Note: The reason for this is that the folder name should match the name of the Controllers you've created. So if you have HomeController then you should have a "Home" folder within your View.

Now under the "Home" folder add a new View. To do this just right click on the "Home" folder and select Add -> View. Name the view as "Index" and click Add to generate the Web Page (.cshtml). Here's the mark-up of the Index.cshtml:

@{
    ViewBag.Title = "Welcome";
}

<h2>Welcome</h2>

@Html.ActionLink("Click here to sign-up", "SignUp", "Account")

As you can see there's no fancy about the mark-up above except that it contains the ActionLink which redirect you to the "SignUp" view within the "Account" folder. Now add again another View under the "Home" folder and name the view as "Welcome". The reason why we add the Welcome.cshtml view is because we will redirect the user in this page after they successfully signed up and nothing more. Here's the mark-up of the Welcome.cshtml:

@{
    ViewBag.Title = "Welcome";
}

<h2>Hi <b>@Context.User.Identity.Name</b>! Welcome to my website!</h2>

Now under the "Account" folder add a new view and name it as "SignUp" and check the checkbox that says "create a strongly-typed views and in the Model class dropdownlist select "UserView" and then in the Scaffold template select "Create" and finally click Add to generate the Web Page for you. Take a look at the screen shot below for more clearer view of what I am talking about:





And here's the generated mark up of the SignUp.cshtml:

@model MVCDemo.Models.ViewModels.UserView

@{
    ViewBag.Title = "SignUp";
}

<h2>Sign-Up</h2>

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>UserView</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.FirstName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.FirstName)
            @Html.ValidationMessageFor(model => model.FirstName)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.LastName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.LastName)
            @Html.ValidationMessageFor(model => model.LastName)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.ContactNumber)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.ContactNumber)
            @Html.ValidationMessageFor(model => model.ContactNumber)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.LoginID)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.LoginID)
            @Html.ValidationMessageFor(model => model.LoginID)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Password)
        </div>
        <div class="editor-field">
            @Html.PasswordFor(model => model.Password)
            @Html.ValidationMessageFor(model => model.Password)
        </div>

        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}

<div>
    @Html.ActionLink("Return to Home page","Index", "Home")
</div>

The mark-up above is a strongly-type view. This strongly typed approach enables better compile-time checking of your code and richer IntelliSense in the Visual Studio editor. By including a @model statement at the top of the view template file, you can specify the type of object that the view expects. In this case it uses the MVCDemo.Models.ViewModels.UserView.

The View structure would like something like below: 

STEP : Running the Application

Running the page will give you the following outputs:

On initial load:



After clicking on the Sign-Up link:



Sample screen shot that shows the validation



Completing the form



After successfully registered

What is jQuery?

Today I got a question from one of my colleague who is a fresher and doesn't know what is jQuery. So he came to me and asked me what is jQuery and why should we use jQuery? So I have explain it to him and thought of writing a post as well about what is jQuery and why one should use it?

What is jQuery?

jQuery is a library written on top of the JavaScript. So it is a JavaScript library. jQuery is amazing library for the JavaScript programmers, which makes web development a piece of cake. jQuery helps the programmers to keep code simple and concise. The biggest advantage of jQuery is that jQuery library is designed to keep the things very simple and reusable. Motto is jQuery library is "Writing Javascript code should be fun."

jQuery library simplifies the interaction process or access process of traversing in HTML document. It provides methods to make animations, add ajax interaction to the page, provides an easy way to apply CSS to any items and provides an easy mechanism for binding and unbinding events. Length JavaScript code can easily replaced by few lines of code in jQuery.

Why to use jQuery

A question came that when all the things can be achieved using JavaScript then why to go for jQuery? Well the answer is that The jQuery library is has many easy to use functions and methods to make rich applications. And believe me these functions are fairly easy to learn and even it is not difficult for designers or freshers to learn. Due to it's simplicity, jQuery is pretty easy to learn and easy to write. jQuery is a client side language so it can be easily used with ASP.NET,PHP,JSP and Servlets.

Features of jQuery

• Allows to access elements in the document: If one need to access the DOM tree without any JavaScript libarary, one has to write many lines of code. jQuery provides a selector mechanism to access any part of DOM.
• Easily apply CSS: As it’s known that CSS is the most powerful and mostly used for good appreance of any webpage. jQuery provides CSS Selectors which allows to change the CSS classes or individual style for any portion of the document. This can be done even after the page is rendered.
• Make Animation: For better user experience, animation can do the job for you. jQuery provides many methods to perform animations like show,hide, fade, wipe, start, stop etc. Doing all this with jQuery is fun as No huge lines of code, no complex logic.
• Ajax Interaction: In today’s world, Ajax is one of the most popular technology used in almost every website for better user experience. jQuery provides support for ajax also which allows to access server side event without refreshing the web page.
• API to change document’s content: jQuery provides API (Application Program Interface) which allows to change the content of the document. Changing Text, inserting images, ordering of list can be done with few keystrokes with jQuery API. Entire structure of HTML can be rewritten or extended.
• Event handling: Any technology is a failure if it cannot responsed to the user when any event takes place. Event handling is one the decent feature of jQuery. It quickly responsed to any event such as user clicking a button.

Where to download jQuery from

jQuery file can be downloaded from jQuery Official website http://www.jquery.com/

jQuery Versions

jQuery library comes in 2 forms:

• The uncompressed .js file is easy to read and modify, but it's around 190kb in size (at the time of writing).
• The minified .js file has all comments, whitespace, and other unnecessary characters removed from the file, squeezing the whole library into a mere 23kb. Although you can't easily read the code, this is the version you'll want to place on your site, as it's much quicker for visitors to download.