Object JavaScript – ECMAScript 6 Code Preview

imageECMAScript 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”

Single Page App – Separate UI from Model Using Publish, Subscribe Pattern using AmplifyJS

image8AmplifyJS is a set of components designed to solve common web application problems with a simplistic API. Amplify’s goal is to simplify all forms of data handling by providing a unified API for various data sources.

Your application may need more sophisticated control than is offered in Knockout, which provides for automatic updates in your view model. Knockout provides the observable pattern. But in the pattern described here Amplify’s publish/subscribe you do the publishing and the subscription.

In this post, you’ll learn the basics of how you can implement publish/subscribe pattern on the client using Amplify.

Continue reading “Single Page App – Separate UI from Model Using Publish, Subscribe Pattern using AmplifyJS”

Object JavaScript – Getting Started with Modules Using RequireJS

imageRequireJS 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”

Object JavaScript – Revealing Modular Pattern Into Asynchronous Modules

image6[1]Let’s put our revealing module pattern into asynchronous modules definition (AMD).

Asynchronous module definition (AMD) is a JavaScript API for defining modules such that the module and its dependencies can be asynchronously loaded. It is useful in improving the performance of websites by bypassing synchronous loading of modules along with the rest of the site content.

modular, we generally mean it’s composed of a set of highly decoupled, distinct pieces of functionality stored in modules. As you probably know, loose coupling facilitates easier maintainability of apps by removing dependencies where possible.

Loose coupling implies each component can operate or be tested independently of other components.

Tight coupling implies each component “knows” the details or inner workings of other components.

In just a few lines of code you can provide for architectural features above to improve from revealing module pattern to asynchornous module definition code. Here’s a look into why and how.

Continue reading “Object JavaScript – Revealing Modular Pattern Into Asynchronous Modules”

Object JavaScript – Inheritance Using Revealing Module Pattern

10063_580983808600819_401360548_nIn my last post, Understanding Prototypes, you learned that you can use prototypes to implement inheritance. In this post, I will agree with Javier Uria and Pedro Teixeira who posts on MetaDuck, who advocates a way to implement inheritance using the revealing module pattern.

Continue reading “Object JavaScript – Inheritance Using Revealing Module Pattern”

Object JavaScript – Scope, Self-Invoking Anonymous Function, Closures, Revealing Module Pattern

10063_580983808600819_401360548_nAs you learned in my post on Scope, Namespaces, “use strict”, all variables are accessible from the global scope except variables that are declared within a function using the var keyword. In this post, we add the idea of closures.

Closures are functions that retain a reference to their free variables.

And we show how you can use closures in building a robust revealing module pattern. Along the way, we explore some other patterns, such as the self-invoking anonymous function. And in the conclusion show how you can use the revealing module pattern to extend existing modules.

This post relies heavily on Joe Zim’s article JavaScript Closures and the Module Pattern, whose explanation dovetails with the revealing module pattern and asynchronous modules definition.

When you see Asynchronous Module Definition (AMD), you will see how asynchronous modules build on these concepts.

Continue reading “Object JavaScript – Scope, Self-Invoking Anonymous Function, Closures, Revealing Module Pattern”

Object JavaScript – Namespaces, Anonymous Module, Revealing Module Pattern

10063_580983808600819_401360548_nUsing globals give you the opportunity to have your code overwritten by any other JavaScript added to the page after yours. And that is an opportunity best to be avoided.

The work around is to use the revealing module pattern.

I am a huge fan of the revealing module pattern. It keeps your objects encapsulates and was easier to understand for me as a C# guy.

In this post, we will step through the various JavaScript patterns and ending up at how you can implement the revealing module pattern. You will see the JavaScript syntax to create objects and how the revealing module patterns uses scope to keep private data private and reveals the data you want public. And you can do this without mucking up your globals.

Continue reading “Object JavaScript – Namespaces, Anonymous Module, Revealing Module Pattern”