Reimagining Single-Page Applications

What is the difference between a web page and a web application? Though we tend to identify documents with reading and applications with interaction, most web-based applications are of the blended variety: Users can consume information and perform tasks in the same place. Regardless, the way we approach building web applications usually dispenses with some of the simple virtues of the readable web.

Tip: Make quick and easy Single Page apps without coding by using HTML5 Data Bindings and have easy history and state management by using the HTML5 Data Bindings State Management.

Making a Single Page App Without a Framework

The idea behind single page applications (SPA) is to create a smooth browsing experience like the one found in native desktop apps. All of the necessary code for the page is loaded only once and its content gets changed dynamically through JavaScript. If everything is done right the page shouldn’t ever reload, unless the user refreshes it manually.

Tip: Make quick and easy Single Page apps without coding by using HTML5 Data Bindings and have easy history and state management by using the HTML5 Data Bindings State Management.

Why AJAX Isn’t Enough

AJAX calls have moved user interaction on the Web a huge step forward: We no longer need to reload the page in response to each user input. Using AJAX, we can call specific procedures on the server and update the page based on the returned values, giving our applications fast interactivity. What AJAX calls do not cover are updates from the server, which are needed for the modern real-time and collaborative Web. This need for updates covers use cases ranging from a couple of users collaboratively editing a document to the notification of potentially millions of readers of a news website that a goal has been scored in a World Cup match.

Animating Without jQuery

There’s a false belief in the web development community that CSS animation is the only performant way to animate on the web. This myth has coerced many developers to abandon JavaScript-based animation altogether, thereby (1) forcing themselves to manage complex UI interaction within style sheets, (2) locking themselves out of supporting Internet Explorer 8 and 9, and (3) forgoing the beautiful motion design physics that are possible only with JavaScript.

Setting Up JSHint

Regardless of the language you're programming in, we always want to try to produce clean, concise, and correct code. This is a sign of a good programmer and it lets you know your apps are running properly. Linting helps with this by analyzing your code and highlighting common issues regarding syntax and coding conventions based on best practices.

Using CreateJs: PreloadJS, SoundJS, and TweenJS

In the first part of this series about using CreateJs, we had a look at EaselJs. In this second and last part, we will look at PreloadJs, SoundJs, and TweenJs. PreloadJS is a library that lets you manage and co-ordinate the loading of assets. PreloadJS makes it easy to preload your assets, like images, sounds, JS, data, and others. It uses XHR2 to provide real progress information when available or fall back to tag-loading and eased progress when it is not. It allows multiple queues, multiple connections, pausing queues, and a lot more.

Using CreateJS - EaselJS

In this tutorial we will be exploring the CreateJS suite of libraries. CreateJS is suite of JavaScript libraries and tools for building rich, interactive experiences with HTML5. The CreateJS suite is divided into four libraries - EaselJS - Makes working with HTML5 canvas easy; TweenJS - For tweening HTML5 and JavaScript properties; SoundJS - Lets you easily work with HTML5 audio; and PreloadJS - Lets you manage and coordinate loading of assets.

Creating Brackets Extensions

A little while ago Raymond Camden wrote about the recent updates to the Brackets editor. Brackets is an open source project focused on web standards and built with web technologies. It has a narrow focus and therefore may not have a particular feature you’ve come to depend upon. Luckily, Brackets ships with a powerful extension API that lets you add any number of new features. In this article, he's going to discuss this API and demonstrate how you can build your own extensions.

JavaScript Tools of the Trade: JSBin

We’ve all been there. There are times when you simply want to throw some JavaScript code up and see how it works. Sure, you could go through the hassle of: setting up a dedicated directory, create a file with markup,Finding the latest version of your favorite libraries, downloading them and including them in your code, creating your stylesheet and configuring your webserver. That seems like an awful lot of work just do some simple code testing. Thankfully there are tools that make this type of work trivial. In this tutorial, Rey Bango would like to go over one of his favorite tools for interactive JavaScript testing, JSBin.

Writing A Better JavaScript Library For The DOM

At present, jQuery is the de facto library for working with the document object model (DOM). It can be used with popular client-side MV frameworks (such as Backbone), and it has a ton of plugins and a very large community. As developers’ interest in JavaScript increases by the minute, a lot of people are becoming curious about how native APIs really work and about when we can just use them instead of including an extra library.

Older articles