Object JavaScript – Better JavaScript Using TypeScript

imageTypeScript 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

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”

Object JavaScript – ECMAScript 6 Futures Overview

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. 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:

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

Sammy.jsWhile 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

Sammy.jsIn 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”