Escape from Callback Hell

You probably heard about asynchronous code and that it is hard to work with. In this article I'll share simple approach that makes working with asynchronous code easier.

Let's take a look at sample case - we need to authenticate user on the remote service, get list of his comments and render it in HTML.

There are three asynchronous functions - authenticateUser, getComments(userId) and renderComments(user, comments).

var authenticateUser = function(login, password, cb){setTimeout(function(){
  var user = {id: '1', name: 'admin'}
  cb(null, user)
})}
var getComments = function(userId, cb){setTimeout(function(){
  var comments = [{text: 'some comment...'}]
  cb(null, comments)
})}
var renderComments = function(user, comments, cb){
  setTimeout(function(){
    var html = user.name + ' wrote ' + comments[0].text
    cb(null, html)
  })
}

Now let's write code that uses these functions and handles errors properly.

Read more...

Ruby on Rails vs Node.js

I wanted to see benchmark that more or less close to real life, not just measuring how fast it can stream data via http.

So I created application that query some text from remote HTTP service (service delays each request for 200ms) and render HTML page using that text.

It simulates how Web Framework performs when it needs to wait for response from DB or other services, how fast its templating engine is and also how fast it is itself.

And hit it with wrk -t2 -c100 -d10s http://localhost:3000 you can see results on the picture.

Benchmark Ruby on Rails vs. Node.js

3782 vs. 2914 hits, average response time is also very close.

Read more...

Create simple shop.

In this course we create Cart Widget that can be embedded into sites in order to allow its users to buy products and send orders to the site owner.

You'll learn how to:

  • Quickly prototype User Interface with Twitter Bootstrap.
  • Build REST API using NodeJS.
  • Use REST API in Browser with JavaScript.
  • Keep markup and code clean using Client Side Templates.
  • Simplify CSS styling using Browser live refresh.
  • Create dynamic Forms with JavaScript and validate it.
  • Instant reaction UI without blocking, waiting and progress.

Drawing UI

Shop and Cart

Continue...

Read more...

Learning JavaScript

Learning JavaScript is both interesting and hard at the same time. It's interesting because it's a nice and powerful language and hard because it has design flaws and unfixed bugs.

There are also adjacent technologies that usually confused with JavaScript, let's make it clear:

  • JavaScript - the language itself, also has official but less known name - ECMAScript.
  • HTML / XHTML - markup language for creating web pages (there's also CSS).
  • DOM (Document Object Model) - Browser JavaScript API for working with web pages.
  • AJAX, XHR - Browser JavaScript API to communicate with Server.

Most learning resources mix those technologies. It's ok if the goal is to quickly add some interaction to web page, but it makes it harder to learn more complex stuff.

Big advantage of JavaScript is that it's forgiving - it allows you to start without having good understanding of the language. But if you want to be efficient - you need to know the language itself. To learn how to use it efficiently read one of books below.

JavaScript: The Good Parts

Read more...

Rapid UI prototyping

There are two very nice frameworks for quickly creating UI. Both of them have lots of features, excellent documentation and active community.

Twitter Bootstrap has more components and the default theme looks more suitable for web application than a site.

Twitter Bootstrap

Read more...

Interesting toys for learning

Play Simple Canvas Game and investigate its source code. It's about two pages of JavaScript with detailed explanations.

Simple Canvas Game

Space Mahjong a simple Card Game (there's no dedicated repository for sources, but you can see it in the browser).

Read more...

Functional Mixins in JavaScript

Functional Mixins is a flexible way to share functionality between objects.

From my experience it's more powerful than Class or Prototype based Inheritance, Mixins and even complex machinery like Ruby Object Model. But I believe the biggest advantage of it isn't the power but the simplicity, it's so simple that I wonder why it's so rarely used.

In this example we create Game Unit and add some basic functionality to it (source).

Creating simple Model

Defining Model that have only two methods - set to set attributes, and initialize - a constructor supporting setting attributes.

Read more...

HTML5 Open Source Games

Simple open source games that are nice and playable.

Monk Story

DotA, video, play, sources, JavaScript & CraftyJS.

Monk Story

Eat them all

Tower Defense / RTS, play (it's not available online, you need to download and run it locally), video, sources, JavaScript & CraftyJS.

Read more...

Misunderstanding of JavaScript

JavaScript has one very unique feature it's the only language supported by Browsers. It means it's the only way to create applications that require zero-install and runs everywhere.

That feature had dramatic impact on the development of the language - it's the source of its strengths and weaknesses.

History

JavaScript has been created for couple of days as a quick prototype for Netscape browser, with design goals "something similar to Java and Visual Basic" (it always makes me smile when someone start talking about the "philosophy of JavaScript" - very deep philosophy indeed).

So Netscape added JavaScript to its browser and somehow Microsoft did the same (actually it created its own clone called JScript).

For a couple of years JavaScript lived small unnoticeable life and used mostly for adding simple visual effects on web pages and nobody really cared much about it.

Until the explosion of web and internet - when huge corporation suddenly realized how vital and important that part of technology is. And that's when interesting things started to happen.

Read more...