Asynchronous Module Definition

Object JavaScript – Better JavaScript Using TypeScript

December 23, 2014

TypeScript is a language for application-scale JavaScript development. TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. Any browser. Any host. Any OS. Open Source.

TypeScript is a superset of JavaScript that combines type checking and static analysis, explicit interfaces, and best practices into a single language and compiler. By building on JavaScript, TypeScript keeps you close to the runtime you’re targeting while adding only the syntactic sugar necessary to support large applications and large teams.

TypeScript starts from the syntax and semantics that JavaScript developers know today. With TypeScript, you can use existing JavaScript code, incorporate popular JavaScript libraries, and be called from other JavaScript code.

TypeScript compiles to clean, simple JavaScript code which runs on any browser, in Node.js, or in any other ES3-compatible environment.

The latest version of TypeScript includes of new features in the language, compiler and associated tools. And it comes in the box as part of Visual Studio 2013 and Visual Studio 2015.

Continue reading “Object JavaScript – Better JavaScript Using TypeScript”

Object JavaScript – ECMAScript 6 Code Preview

December 17, 2014

ECMAScript 6 specification and implementation is underway and promises to bring many of the features that you’ve learned about in the posts on Object JavaScript.

This post gives you an idea of what the code looks like in ECMAScript 6. This post doesn’t cover ever feature. But you will learn about how ECMAScript 6 relates to:

Scope
Arrow Functions and Lexical this
Default Function Parameters
Classes
Inheritance
Modules
for-of
Arrow functions
Promises

I won’t come close to covering all the features. But you can get an idea of how ECMAScript 6 works to support the idea of Object JavaScript. Look to the references and to the specification for information about: Parameter handling, multiple return values, collections, destructuring, rest parameters & spread operator, iterators, array comprehension, and more.

Special thanks to Axel Rauschmayer for many of the snippets.

Continue reading “Object JavaScript – ECMAScript 6 Code Preview”

Object JavaScript – ECMAScript 6 Futures Overview

December 15, 2014

ECMAScript 6 specification and implementation is underway and promises to bring many of the features that you’ve learned about in the posts on Object JavaScript . ECMAScript is the foundation of JavaScript. ECMAScript has gone through several versions. The current browsers support ECMA Script 5. . The discussions today are revolving improvements beyond versions past 5, which are code-named, ECMAScript Harmony.

The ES6 compatibility table is very useful, as it tells us the ES6 features that are supported in the current browser. It also gives us a handy link to the specifications for each of the features listed. You will find that the current versions of browsers are implementing these features as fast as they can. The table shows that some subset of the feature exists, so as we say, “your mileage may vary”. That said, it is coming.

I don’t have any particular insider information, but wanted to share what I am learning as I explore ECMAScript 6 and what it means to the way that code is written today. In my search I found two great articles that I am pulling information from:

Use ECMAScript 6 Today
Slide Deck: ECMAScript 6: what’s next for JavaScript? (August 2014)

My value add is to provide context for the previous posts and show how your code in the future could look like to implement many of the same features. And this topic is fluid so again, “your mileage may vary”. My intent is to give you can idea of what is coming and how soon to help you decide how deeply you want to invest in the current technologies. That said, one of the goals in ECMAScript 6 is to not break anything you are doing now.

Continue reading “Object JavaScript – ECMAScript 6 Futures Overview”

Snippet – Fixing Errors When Using jQuery, Sammy, RequireJS

May 27, 2014

While I was trying out Sammy.js with Require.js I kept getting several errors, among them:

jQuery is not defined
Uncaught TypeError: Object function ( selector, context ) { // The jQuery object is actually just the init constructor ‘enhanced’ return new jQuery.fn.init( selector, context, rootjQuery ); } has no method ‘sammy’

Here’s a code sample that shows how you can get the two to work together.

Continue reading “Snippet – Fixing Errors When Using jQuery, Sammy, RequireJS”

Single Page Apps – Deep Dive into Loading Templates Using Sammy, Mustache, RequireJS

May 25, 2014

Sammy.js In this tutorial you will learn how Sammy renders a Mustache template and then load and interpolate the template. In addition, you will use Sammy and templates as Asynchronous Module Definition (AMD) modules.

The tutorial builds on the previous postings Getting Started with SammyJS – Routes, where you learned you can use Sammy to provide client side routing, and Loading JSON Using Sammy where you learned how to load JSON data using sammy.load().

This tutorial goes beyond the getting started with Sammy tutorial, JSON Store, provided in Sammy’s documentation. In this tutorial you will learn what happens behind the scenes with each of the important calls. The idea is to help you choose the right Sammy calls as your application gets more complex.

Continue reading “Single Page Apps – Deep Dive into Loading Templates Using Sammy, Mustache, RequireJS”

Single Page App – Loading, Caching LoDash or Underscore Templates Using RequireJS, AppCache

May 15, 2014

As you learned in the previous post, you learned how you can load templates inline in your app using RequireJS. The next step is to load and compile a template file. And for your offline app, learn how you can cache templates. Caching saves a round trip to the server, making your application incredibly responsive.

In this tutorial we will compile, load, and cache LoDash (or Underscore) templates and then use those templates to transform data in our single page app.

The technique uses RequireJS, so there is no more dynamic loading. Templates are bundled within your code which saves some HTTP requests.

Continue reading “Single Page App – Loading, Caching LoDash or Underscore Templates Using RequireJS, AppCache”

Single Page App – Using RequireJS Asynchronous Module Definition (AMD) Modules with jQuery, LoDash

May 12, 2014

In the previous post, you learned how you can use RequireJS in projects to define your own loading order, and how to build your own modules.

This tutorial go into depth on how to use RequireJS for AMD (Asynchronous Module Definition) modules. You will write we can write our own modules and load them with RequireJS.

In this tutorial you will build a small app that uses LoDash and jQuery. If you want to use Underscore, just substitute Underscore for the LoDash references.

Although you can use a bunch of <script> tags to load the libraries, your page is blocked during the load. And you could minify them and maintain the order in your own code. But with RequireJS, you include the RequireJS source and let it load the files.

Continue reading “Single Page App – Using RequireJS Asynchronous Module Definition (AMD) Modules with jQuery, LoDash”

Object JavaScript – Loading File Templates for Knockout Asynchronously Using koExternalTemplateEngine, Infuser

May 2, 2014

In the previous post, Using Infuser to Asynchronously Load Your Templates, we took a detour into Infuser and how it can be used to call template code. But what about calling Knockout templates?

You will probably want to put a template into a separate file so you can reuse it across various pages on your site.

koExternalTemplateEngine is a JavaScript library built on top of Infuser for you to load templates asynchronously from a remote resource. It currently supports both native and jquery templates.

And you’ll see how you can use Infuser to configure your Knockout Template Engine.

Continue reading “Object JavaScript – Loading File Templates for Knockout Asynchronously Using koExternalTemplateEngine, Infuser”

Object JavaScript – Using Q Promises Inside a RequireJS AMD Module

April 23, 2014

As you are thinking more about your Web page being an app, you look for ways to reduce the complexity by using modules. In earlier post Getting Started with Modules Using RequireJS , you learned how RequireJS provides a great way to think of your app in modules and to asynchronously load and run your app.

RequireJS helps your describe the dependencies of a module and make sure you load them before executing your script.

But what happens when your module is long running? You can certainly turn that portion into a module and the require the completion before continuing. But in my case, I want think about my AMD module as an object and then call long-running methods on that module after it has been loaded.

This snippet expands on Asynchronous JavaScript Promises Using Q and shows how you can use a promise inside your module that will have some long running asynchronous method.

When you make an asynchronous call, you can use a promise to handle both successful completion of the work and potential errors that may arise during execution. Upon the successful completion of one asynchronous call, you may want to pass the result to make another request.

The solution combines the promises of Q.js with the Asynchronous Module Definition (AMD) of Require.JS.

Continue reading “Object JavaScript – Using Q Promises Inside a RequireJS AMD Module”

Object JavaScript – Getting Started with Modules Using RequireJS

April 22, 2014

RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and NodeJS. Using a modular script loader like RequireJS will improve the speed and quality of your code.

When a project reaches a certain size, managing the script modules for a project starts to get tricky. You need to be sure to sequence the scripts in the right order, and you need to start seriously thinking about combining scripts together into a bundle for deployment, so that only one or a very small number of requests are made to load the scripts.

You may also want to load code on the fly, after page load.

RequireJS can help you manage the script modules, load them in the right order, and make it easy to combine the scripts later via the RequireJS optimizer without needing to change your markup. It also gives you an easy way to load scripts after the page has loaded, allowing you to spread out the download size over time.

Continue reading “Object JavaScript – Getting Started with Modules Using RequireJS”