Archive | javascript RSS for this section

CustomEvent to communicate web apps in the same page

Due the increasing number of front-end framework out there, you might find yourself in a situation where you need to communicate two or more web apps living in the same page, let’s say, an AngularJS application used mostly with directives that need some way to talk to the Menu controller, which happen to have been built in BackboneJS. A solution for this that I personally favor is the use of the CustomEvent API, mainly because it works great with these constrains:

  • Your current applications need to stay almost as they are, stand alone and independent of each other.
  • No need of a new centralized controller or structure.
  • No need to add an external library.

In the case where you require certain level of communication among your internal apps, mainly to notify changes in the UI or update shared models, CustomEvents offers you the following advantages:

  •  Very low coupling
  •  Preserve app independency
  •  Low impact on bandwith and CPU performance (i.e. a light-weight solution, not a megalosaurus air traffic control)

I came up with an idea to help us to get this, based on how DOM events work (http://bitovi.com/blog/2010/10/a-crash-course-in-how-dom-events-work.html)

Custom Events

It’s possible to create a custom Event object by using the class CustomEvent, putting inside it any data we want, via ‘detail’ property. As with any other DOMevent (click, mouseover, etc) it can be seamlessly listened by anybody who wants to do so.

 

And then, anybody within your same page can listen to “myPageEvent” in the following way:

 

Indeed, this is basically an Observer (Publish/Subscribe) pattern out-of-the-box in modern web browsers, where all webapps living in the same page are listening to a broadcast of custom events. With the great advantage this is very light-weight, supported by all modern browsers, we avoid any sort of application registry and feels completely natural with how JavaScript applications work.

Drawbacks:

  • There is indeed low security, so be aware when sending critical information. Everything it’s good for basically just UI interactions.
  • No < IE8 support. Fortunately there are polyfills for CustomEvents and we might want to include this polyfill to our own custom version of JQuery broacaster.

Naturally, this solution is not new nor groundbreaking, but still impress me how little is known and how complicated can get other alternatives. As a side note, Twitter built an entire framework based on this principle, called Flight, which you should check out.
Finally, the demo contains an AngularJS and a Backbone application, living in the same page and listening to Ui interactions from each other. If you see at the console, vanilla JavaScript is also listening to this events;

See a demo | Code

So, what do you guys think about it?

 

Front-end optimizations you can start doing right now

I would strongly suggest to any serious front-end developer to (really) learn JavaScript and understand the basics of DOM. Of course, some may argue that many JavaScript-specific hacks and tricks do not have much impact on performance as perceived by the final user, and I completely agree. That being said, in this article I’ll share some techniques that you can implement right now on your current code base to make it faster, and from now on, you should have them in mind whenever you write JavaScript for future projects.
Read More…

Fun time with implicit conversion of values

JavaScript is a loosely typed language, which means that you don’t need to explicitly declare the type of a variable, and even more, when the interpreter expects a defined type for a statement or argument, it will try to adapt or convert the provided value into the expected value. You can read more about this subject in JavaScript quirk 1: implicit conversion of values. But assuming you have understood the matter well, you’ll realize that the + operator only works with numeric or string values. Should other type will be provided to a + operator, JavaScript will try to convert it to either a string or numeric value. So, even in an apparently nonsense like number + object JavaScript will try to make its best to perform the operation in terms of strings or numbers:

Read More…

Learning FROM JQuery

When I look at CVs from some web development applicants they often claim  proficiency in JavaScript under the fact they have used JQuery. When those applicants face an interview, their apparent confidence in JavaScript falls apart just asking them how to make an AJAX request using plain JavaScript, how to traverse the DOM or basic questions about JavaScript and data structures in general such as the difference between objects and arrays.

While JQuery is an amazing library, there’s an enormous gap between knowing how to use JQuery and understand the depths of JavaScript and the front end stack in general. Before you claim expertice in JavaScript, you need to be comfortable with the language minutiae such as its data types, prototypical inheritance, closures, hoisting, etc. Also you should understand how the language works, including scope chains, execution context, activation object and many more. And since JavaScript is often used inside a web-browser, you need to understand the DOM API in order to create high-performance applications.

But fear not! Learning and mastering a matter is a really fun thing, and if you’re comfortable using JQuery, you can learn a lot from it. So I’d like to share some resources to master JavaScript and front-end development in general from JQuery source code:

Read More…

Ode to expressiveness

Reading /r/dailyprogrammer I found a typical programming problem, a change calculator: write a function that given certain amount of money, returns the minimal number of coins to change the money. The arbitrary values for those coins are 1, 5, 10 and 20 (this problem can be also be rendered in cents, but is pretty much the same). However, what most surprised me, it was compare the solutions provided by the users in JavaScript and Cobol:

Read More…

First class functions in JavaScript: how comes functions are objects in JS (part 1)

We often hear that JavaScript functions are first-class functions, meaning both functions and objects are treated by the language as the same thing. In practical terms, a function can be stored as a variable, inside an array or an object, as well as it can be passed as an argument or be returned by another function. That makes functions “first-class citizens” in JavaScript.

While this is understood by most JavaScript programmers, I believe the whole process of how this works is kinda obscure to most web developers and most of the time prefer to accept it as a statement of faith, so I’d briefly like to discuss how this works behind curtains, demonstrating and showing how (almost) everything in JS is an object.

In this first post, I’ll address one of the main reasons programmers do not fully grasp the fact that in JavaScript functions are objects too: its literal notation syntax.

Read More…