Ajax Lesson

NOTE: This lesson uses jQuery as the interface for basic AJAX work. By no means is AJAX a product of jQuery and you do not need jQuery to utilize AJAX.

What Is Ajax

In 1999 Microsoft created a new update for IE5 that would dynamically update stories on particular Microsoft webpages. This technology was later adopted by the rest of the Browser collective. Jesse James Garrett, in 2005, coined the term AJAX which stood for Asycronous JavaScript And Xml. A year later it received its first W3C draft specification.
AJAX allowed webpages to continually request resources without the need to reload the entire webpage. This allowed users to stay on a webpage longer and interact with other various features of that page as the requests were made. The asynchronicity that this brought revolutionized the previous web era, where all dynamic changes required a complete trip to the server for a full refresh of the page with the new content based on the user's intent.

Using Ajax

Utilizing AJAX can be complicated even today as some versions of IE and other browsers still have a different mechanism to initiate the calls. Therefore it is recommended to use a library or application framework which comes with an AJAX service to make these requests.

Getting Started

We will need to install jQuery and place it in our HTML page so that we can then write some code to make this all come together.

bower install jquery --save

index.html

    
        
    

    

Hello World!

No Items in data


    
    

js/app.TS

$('#data')
    .on('click', function(event: JQueryEventObject){
        $.ajax({
            accepts: 'text/json',
            method: 'Get',
            url: 'data/words.json'
        })
        .done(function(data){
            let words = data;
            let $elm = $('#result');

            // Clear html content
            $elm.html('');

            words.forEach(function(word){
                $elm.append(`
${word}
`);
            });
        });
    });

The path for the Url is to a resource file containing an array of strings. This could easily be a service in NodeJS or WebAPI. It could be a Twitter feed that you are pulling, though you would need some additional parameters to get it working.
The simplicity of AJAX allows for many online experiences that we take for granted today. Real-time web applications take full advantage of the power of AJAX.

Package Manager Best Practices

Bower

Use Bower for libraries that will be part of your deployed application. This would be things like the angular library, bootstrap and jquery.
These are all installed using the –save flag to make sure that your resources are defined as required for your project.

NPM

Use NPM for libraries that will be running in your development environment. Typescript Types, development tools and the like are things you should be using NPM for.
These are all installed using the –save-dev flag to make sure the NPM file represents your resources accordingly.

NuGet

Use NuGet to pull assembly only references for your dotnet application. This package manager is built into Visual Studio and is part of the build and development experience for dotnet applications.

JavaScript Module Loaders

Typescript supports most of the popular module systems for JavaScript.

• CommonJS
• AMD
• UMD
• SystemJS
• ES2015

These provide a similar functional process of asycronously loading your JS files without the need to create literal SCRIPT tags to bring the files in. The benefits here are listed thoughout posts all over the internet. Some of the benefits that fit a more scientific representation over the opinionations that are widespread:

• Prevents unneeded files from loading into your applications/webpages
• Creates a self encapsulating JavaScript loading process that unblocks your application(s) execution
• Creates more maintainable code.

Using Typescript allows for configuration of any of these systems and all you need to do is attach the appropriate entry point into the JavaScript resources.
Starting out you need to configure your TSCONFIG.JSON file. Modify the compilerOptions node by adding the module property and adding the specific Module Loader you plan to use.

{
 ...,
    "compilerOptions": {
        "module": "amd",
    },
    ...
}

Next you need to bring in the proper Module Loader package via Bower or NPM. It is recommended to use Bower.

bower install --save requirejs

{
  ...,
  "dependencies": {
    "requirejs": "X.X.X"
  }
}

Once you have the package installed you will need to add the appropriate SCRIPT tag to your HTML file to bring it in and initiate the Module Loader.
Note: requirejs leverages the data-main attribute to point to your JavaScript Module files entrypoint. In this example the entrypoint is a file named module.js in the js folder, relative to the file.

Now the remaining work is left to your application files.

js/modules.ts

import * as utilities from './utilities';

// use external function
utilities.doSomething();

// use external class
let beast = new utilities.Animal();

beast.makeSound();

js/utilities.ts

// this function is exported
export function doSomething() {

  console.log('do something');

};

// this class is exported
export class Animal {
  makeSound() {
    console.log('grrrrrr');
  }
}

// this class is not exported
class Secret {
  saySecret() {
    console.log('secret');
  }
}

Should I check in my dependencies?

I was asked this week if it was better to check in dependency files such as jQuery and AngularJS into your git repo or to use a CDN. This has no one correct answer, however, there are things you should consider because of what it says about you as a developer.

AngularJS Filter - Format Guid

Working on a project I came to need a formatting filter that would handle presenting GUID in the standard formats. I started by finding a way to validate and harvest the data from the GUID so that I would be able to format it as needed.

Parse methods and what you need to know

We all need to parse one data type into another now and again. Parsing can cause your application to fail unexpectedly if you do it wrong. When parsing, you need to be aware what trouble you may get into.

What you should know about "javascript:"

Several years ago I posted on the ASP.NET forums a conversation piece. I received much feedback with the presentation of a topic that, even then, was an artifact feature of HTML interpretations. The anchor tag over the decades has been abused beyond what should be normal use. This humble tag had been the hook for many actions that a user may take upon a page.

Generated Image URLs and Broken Links

I had a task at a job that I recently held which was to render a list of images into a table with some metadata attached to them. However, there was a small catch. These image URLs that were being provided were generated and the image was not guaranteed to be at the URL that was created. So I had to find a way to render an image unavailable place holder or render the image. Here is the solution I came up with.

Test Driven Development

Recently I have been asked by several people what my take on Test Driven Development (TDD) is. While this seems to be the hot topic this year as I am looking for work, I still have my reservations about TDD patterns as they are accepted today.

Saving handsontable data

What prompted me to use handsontable

I was working on replacing an old Excel web control with a more user friendly and needed a JavaScript library that provided the functionality that I needed. After investigating several libraries I decided that handsontable provided me the best solution.