Updating DOM during long running operation

יום שבת, מרץ 21, 2015

Suppose I need to implement a long running operation (longer than a few seconds) and during that operation display some user feedback Well, JavaScript is single threaded. This means that during operation execution the single thread is busy and cannot handle UI events like mouse move and mouse click. From end user perspective the UI is dead. Modern solution is to use Web Worker. As long as your algorithm is pure (only accesses JavaScript objects) then you are OK. However, if the algorithm needs to access DOM objects you cannot use web workers since they have no access to the DOM I agree that...

Angular 1.3 – Creating a controller

יום שישי, דצמבר 5, 2014

In one of my Angular projects I needed to control the way a controller is instantiated By default, the developer specifies the controller name inside the HTML or inside a route configuration and then Angular instantiates the controller. Suppose I want to the instantiate the controller my self and return it to Angular Well, this should be quite easy angular.module("MyApp").controller("HomeCtrl", function () {     function HomeCtrl() {         this.name = "Ori";     }     HomeCtrl.prototype.sayHello = function () {         alert(this.name);     }     return new HomeCtrl(); }); As you can see, I am not registering a JavaScript constructor but rather use anonymous function and then return a new controller object. Running this code under Angular 1.2 completes without any issue However, when switching to Angular 1.3 i noticed that all controllers instantiated this...

Building Single Page Application – Bundle Orderer

יום שישי, דצמבר 27, 2013

In my previous post I discussed a way to arrange scripts in a single page application. Short story: each application layer is associated with exactly one bundle. Assuming a vertical dependency between layers, we can just include the bundles in the right order and any time we add a new file to a layer that file is automatically added in the right position with respect to other files in other layers. For example, below is a common bundle configuration in my single page applications bundles.Add(new ScriptBundle("~/bundles/lib")     .IncludeDirectory("~/Scripts/Lib", "*.js", true)); bundles.Add(new ScriptBundle("~/bundles/server")     .IncludeDirectory("~/Scripts/Server", "*.js", true)); bundles.Add(new ScriptBundle("~/bundles/bl")     .IncludeDirectory("~/Scripts/BL", "*.js", true)); bundles.Add(new ScriptBundle("~/bundles/views")     .IncludeDirectory("~/Scripts/Views", "*.js", true)); bundles.Add(new ScriptBundle("~/bundles/app")     .IncludeDirectory("~/Scripts/App", "*.js", true)); Please note that each bundle is configured to include a specific directory. This means that when you add a...

Cleaning after Knockout

יום שלישי, ינואר 29, 2013

Using KnockoutJS is really fun. You set some data-bind attributes on your HTML and KnockoutJS does the magic of binding it to a JavaScript object (A.K.A, view model) An important fact that most of us are missing is that Knockout holds some internal data structure to manage its magic. Basically, every time you call ko.applyBindings a new management record is added to KO internal representation. This means that your view model is being held by some global data managed by KO. So in case you create and destroy HTML dynamically using JavaScript the view model is...