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:
- Arrow Functions and Lexical this
- Default Function Parameters
- Arrow functions
Special thanks to Axel Rauschmayer for many of the snippets.
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.
In the previous posts on promises Promises for Asynchronous Operations Using jQuery, you learned how you can build promises using jQuery Deferreds and Promises. And in External Templates Using Mustache, jQuery, you learned how to bring in an external template.
It is time to show a real life example of how this code comes together. And in doing so, we have the beginning for a Single Page App.
In this code example, you will see how to use jQuery Promises to:
- Load some JSON data
- Load a Mustache template
- Build your own deferred object for your own long-running function
Then when all three are accomplished, you’ll use the jQuery
$.when() function to render the data.
For this example, you will need to have jQuery and Mustache loaded in your Scripts folder. Continue reading “Single Page App – Asynchronous Sample Using jQuery Promise to Render JSON Using Mustache”
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.
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.
Q was designed to provide a robust way to provide you ways to write asynchronous code cleanly.
You can integrate the robustness of Q with jQuery promises.