Welcome to my new home!

itxmedia.azurewebsites.net is now the current home for both itanexmedia.com and itxmedia.net. Here you will find everything that you need to find from either site.

Ajax Lesson

5/23/2017

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



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

    5/23/2017

    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

    5/23/2017

    Typescript supports most of the popular module systems for JavaScript.
    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?

    5/23/2017

    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.

    Read more »