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 (

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.


  • 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?


Filtered arrays outside ng-repeat loops

Ng-repeats are great, it’s very easy to filter through a collection:

But, as you type a query in the filter, notice that the number of the collection ‘friends’ remains 4 no matter how many friends are currently shown in the ng-repeat after $filter has done its job: Screen Shot 2015-07-23 at 2.16.26 PM So, how can you access friends  after it has been filtered? There might be cases when you need to know the amount of filtered elements, or you need to access the filtered collection outside the ng-repeat loop. Well, the solution is really easy and shows how AngularJS can do amazing thing with declarative syntax:

With only doing that we’re creating a new variable in our scope called  friendsAfterFilter. You can access $scope.friendsAfterFilter  in any other part of your application controllers, watchers, etc. Just remember the $scope  will be the same as your original collection:


Having a new collection in the scope and the variable assignment  friend in friendsAfterFilter = (friends | filter:search) means  friendsAfterFilter  will be re-evaluated in every $digest cycle. Please consider this impact when building your application.

Proper use of D3.js with Angular directives

D3.js is not only an eye-candy way to create data graphics, as a library proposes a very powerful concept: manipulate documents (read DOM) based on data. So instead of feeding a library with input data to draw a graph, D3.js creates a binding between your data source and the DOM, with all the dynamic benefits that this implies.

Although it’s something completely different, AngularJS also implements the same underlying philosophy with it’s all famous two-way data binding: have your models as plain JavaScript objects, and represent it directly modifying the DOM. continuously changing the view whenever the DOM changes, having only “one source of truth”.

Read More…

Simple solution for local Cross Origin Requests

If you’re working on a little front-end project and want to test it locally, you’d typically open it by pointing your local directory in the web browser, for instance entering file:///home/erick/mysuperproject/index.html in your URL bar. However, if your site is trying to load resources, even if they’re placed in your local directory, you might see warnings like this:

XMLHttpRequest cannot load  file:///home/erick/mysuperproject/mylibrary.js. Cross origin requests are only supported for HTTP. 

Chrome and other modern browsers have implemented security restrictions for Cross Origin Requests, which means that you cannot load anything through  file:/// , you need to use http:// protocol at all times, even locally -due Same Origin policies. Simple as that, you’d need to mount a webserver to run your project there.

Read More…

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…

5 AngularJS Power Features that are awesome in non-trivial webapps

I’ve been developing AngularJS webapps in production environments since June last year. My experience have been awesome, redefining my understanding of front-end development and in the process, turning myself into an adept of JavaScript. There are many JavaScript frameworks out there, and choosing the right one might be tricky, but the Internet has no lack of tutorials, reviews, comparison charts and even a handy To-Do app written in several frameworks. So I don’t think we need yet another blog posts listing AngularJS features. Rather, in this article I want to share a bit of my experience with AngularJS, and letting you know 5 very “angularish” features that have changed the way I program webapps in non-trivial, commercial, high-performance environments.

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…

Understanding AngularJS transclude in directives

One of my favorite features of AngularJS are directives. They’re extremely modular and reusable components to “enhance” HTML, a different approach to regular JavaScript or JQuery widgets. I’ll write later about directives, but for now I’ll talk only about the concept of transclusion. I believe the explanation given in the official documentation is kinda obscure, and since I think transclusion is actually very useful when writing your own AngularJS directives, I’ll share an answer I gave in StackOverflow about how to understand AngularJS transclude.

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…