Javascript on Minko Gechev's blog

Dynamic imports solve all the problems, right?

Sat, 11 May 2019 00:00:00 +0000

Since Angular version 8, we support dynamic imports in loadChildren in the route declaration. In this article, I want to give more information about why dynamic imports could be tricky to handle from tooling perspective and why you should be careful with them.

As engineers, we often have the perception that dynamic == good. With statically typed languages, such as TypeScript, this has shifted over the years. Because of compile-time checking, more folks started appreciating what tooling can give us if we provide statically analyzable information at build time.

Introducing Guess.js - a toolkit for enabling data-driven user-experiences on the Web

Wed, 09 May 2018 00:00:00 +0000

About two months ago I published my initial research^[1] on data-driven bundling. A few weeks after that, I had the opportunity to present my work on RenderConf in Oxford, UK in my talk “Teach Your Bundler Users’ Habits”^[2].

The original goal of the article was to show how data can help in improving the user-perceived page load performance by using predictive analytics^[3]. The artifacts from the article were executable node modules which can be used for predictive pre-fetching & data-driven clustering of JavaScript chunks.

Machine Learning-Driven Bundling. The Future of JavaScript Tooling.

Sun, 18 Mar 2018 00:00:00 +0000

In this article, I’ll introduce the early implementation of a few tools which based on techniques from the machine learning allow us to perform data-driven chunk clustering and pre-fetching for single-page applications. The purpose is to provide a zero-configuration mechanism which based on data from Google Analytics for the users’ behavior performs the most optimal build. We’re also going to introduce a webpack plugin which works with Angular CLI and Create React App.

JavaScript Decorators for Declarative and Readable Code

Mon, 29 Jan 2018 00:00:00 +0000

Decorators in JavaScript are now in stage 2. They allow us to alter the definition of a class, method, or a property. There are already a few neat libraries which provide decorators and make our life easier by allowing us to write more declarative code with better performance characteristics.

In this blog post I’ll share a few decorators which I’m using on a daily basis. We’ll take a look at:

How to write more efficient React components with @autobind
How to cache results of computations using @memo
Improving separation of concerns and cohesion with aspect.js’s @beforeMethod and @afterMethod
Developing more decoupled code using Angular’s dependency injection with injection-js

Autobind

Autobind is a decorator which allows given method to be automatically bound to a class instance. For example:

Ahead-of-Time Compilation in Angular

Sun, 14 Aug 2016 00:00:00 +0000

Recently I added Ahead-of-Time (AoT) compilation support to angular-seed and got a lot of questions about the new feature. In order to answer most of them, we will start from the beginning by explaining the following topics:

Why we need compilation in Angular?
What needs to be compiled?
How it gets compiled?
When the compilation takes place? Just-in-Time (JiT) vs Ahead-of-Time (AoT).
What we get from AoT?
How the AoT compilation works?
Do we loose anything from using AoT vs JiT?

Why we need compilation in Angular?

The short answer of this question is - We need compilation for achieving higher level of efficiency of our Angular applications. By efficiency I mostly mean performance improvements but also energy and sometimes bandwidth consumption.

Using Stripe with Angular (Deprecated)

Tue, 05 Jul 2016 00:00:00 +0000

The content in this post uses deprecated APIs

To learn about the latest version of the Stripe APIs check out their documentation page.

Stripe offer a set of APIs which allow businesses and individuals to easily accept and manage payments online. In a typical scenario you want your users to pay for a service that you’re offering using Stripe as a mediator.

Implementing the Missing "resolve" Feature of the Angular 2 Router

Sat, 21 May 2016 00:00:00 +0000

For the last a couple of months I’m working on an Angular 2 based PWA. The more complex the application gets, the more I appreciate that our choice was Angular! For routing we’re using the initial Angular 2 router that is now deprecated. For sure we will migrate to the newest one once it gets stable but until then we have some problems to solve.

One of the features that I miss most in both the new and the newest Angular 2 routes is the resolve functionality which the AngularJS 1.x router and the ui-router offer. In short, this functionality allows your application to load data on navigation events and render the routing component once the data has been successfully downloaded.

Scalable Single-Page Application Architecture

Sun, 10 Apr 2016 00:00:00 +0000

In order to have better understanding of the following blog post you should be familiar with the fundamentals of the object-oriented and functional programming. I also strongly encourage you to explore the redux pattern.

A couple of months ago I started working on the first version of a Silicon Valley-based startup. The project is a single-page application with quite dynamic business requirements. As in most modern single-page applications we have a fat client which encapsulates decent amount of business logic and state.

Static Code Analysis of Angular 2 and TypeScript Projects

Mon, 29 Feb 2016 00:00:00 +0000

So far, most of the blog posts I’ve written are tutorials; they explain how we can use given technologies, architectures, algorithm etc. For instance:

The code for the current research could be found here and here.

The current post is about an exciting project I am working on in my spare time. A few days ago I explained my motivation behind the “Community-drive Style Guide” for Angular 2 that we’re working on. I also mentioned that I am planning to build a configurable static-code analyzer, which makes sure given project follows best practices and contains “correct” Angular 2 code. I called this project ng2lint.

Enforcing Best Practices with Static Code Analysis of Angular 2 Projects

Thu, 18 Feb 2016 00:00:00 +0000

About two weeks ago I published the initial draft of a Community-driven Angular 2 Style Guide. It was based on:

Patterns I noticed in the Angular 2 source code while contributing to the framework.
Suggestions by Miško Hevery during his technical review of my book “Switching to Angular 2”.
My own development experience with Angular 2.
AngularJS 1.x common practices which could be applied to Angular 2 applications keeping the transition process smoother.

ViewChildren and ContentChildren in Angular

Sat, 23 Jan 2016 00:00:00 +0000

In this article I’m going to explain the difference between the concepts of view children and content children in Angular. We will take a look at how we can pass access these two different kinds of children from their parent component. Along the content we are also going to mention what the difference between the properties providers and viewProviders of the @Component decorator is.

You can find the source code of the current article at my GitHub account. So lets our journey begin!

Dynamically Configuring the Angular's Router

Wed, 30 Dec 2015 00:00:00 +0000

Warning: This version of the Angular 2 router is now deprecated! This means that soon the used below APIs will no longer be available.

A couple of months ago I wrote “Lazy Loading of Route Components in Angular 2”, where I explained how we can take advantage of the AsyncRoutes and the virtual proxy pattern in Angular 2.

This way we can incrementally load the entire application by only requesting the resources required for the individual views. As result we will decrease the initial load time, which will dramatically improve the user’s experience.

Angular 2 Hot Loader

Mon, 26 Oct 2015 00:00:00 +0000

A couple of months ago I watched a few talks from ReactEurope. I was truly impressed by a few of them and especially by the one by Dan Abramov on redux and his hot loader. The tool he shown helps you do something similar to live-reload with one big difference. When you change the code of any of the components in your react application, the new version of the component is send to the application itself where all its instances are patched so the changes you did to be visible. This way the new, changed implementation of the component is rendered on the screen with all the attached functionality to it. In contrast to live-reload, your application does not need to be refreshed when you make a change in your code. This way the current state of the application (selected page/view, fields of your models/store) can be preserved across updates. Although this looks amazingly awesome, the idea and the implementation behind the hot loading is quite clear, especially after Dan’s talk. We will take a look at the basic idea in the implementation below.

Lazy Loading of Route Components in Angular 2

Wed, 30 Sep 2015 00:00:00 +0000

Warning: This version of the Angular 2 router is now deprecated! This means that soon the used below APIs will no longer be available.

For the examples in the content below I’ve used the angular2-seed project. The code for the article could be found at my GitHub account.

This blog post is mostly about performance and more accurately - lazy loading. Before we get started lets make a quick recap of what problem we’re about to solve.

Aspect-Oriented Programming in JavaScript

Wed, 29 Jul 2015 00:00:00 +0000

Note: The following blog post is based on the library aspect.js, which can be found here.

The object-oriented programming paradigm is powerful. We design an OO system by decomposition of the problem domain, following guiding principles concerning the decomposition and the communication between the different modules. The process is structured; it involves logical thinking, understanding of the domain and eventual predictions for the future evolution of the system. Often we’re trying to keep our code DRY (not always), highly coherent and loosely coupled. However, in some cases this is just impossible. There are some code snippets we’re just blindly copying and pasting all around our code base.

Flux in Depth. Store and Network Communication.

Sat, 18 Jul 2015 00:00:00 +0000

This is the second, and probably be the last, blog post of the series “Flux in Depth”. In the first post we did a quick overview of flux, took a look at the stateless, pure components, immutable data structures and component communication. This time, we’re going to introduce the store and how we can communicate with services through the network via HTTP, WebSocket or WebRTC. Since the flux architecture doesn’t define a way of communication with external services, here you can find my way of dealing with network communication. If you have any suggestions or opinions, do not hesitate to leave a comment.

Using JSX with TypeScript

Sun, 05 Jul 2015 00:00:00 +0000

JavaScript is a weird language although, we love it the way it is. However, I’ve had quite a painful experience working on big JavaScript projects. It was painful in the same way it gets painful working on huge Ruby, Python, PHP projects.

Once you have code base above 10-15k lines of code and you decide to do some refactoring…well it gets messy. Although grep and sed are powerful tools for text manipulation, when you start replacing code with them, you’re missing the semantics (or the context) of the snippets you substitute.

Flux in Depth. Overview and Components.

Fri, 15 May 2015 00:00:00 +0000

This is the first blog post of the series “Flux in Depth”. Is this “yet the another flux tutorial”? What I have seen so far, while researching flux, were mostly “how-to” tutorials (usually with todo applications), which describe the main components of given flux application and the data flow between them. This is definitely useful for getting a high-level overview of how everything works but in reality there are plenty of other things, which should be taken under consideration. In this series of posts I will try to wire theory with practice and state my own solutions of problem I face on daily basis. Since these solutions might not be perfect, I’d really appreciate giving your opinion in the comments section below.

Even Faster AngularJS Data Structures

Mon, 20 Apr 2015 00:00:00 +0000

This is the last post of the series “Boost the Performance of an AngularJS Application Using Immutable Data”. I strongly recommend you to take a look at the previous two parts before continue reading this content. You can find them at:

Introduction

Before about a month ago, I decided to experiment using immutable data structures in an AngularJS application. The goal behind my decision was quite simple - optimization of the $digest loop. How immutability could help? Immutable data cannot change after being created. The execution of each operation, which changes the immutable collection (add, delete, set) will create of a new data structure but will leave the initial data unchanged. This way we know that a watched expression, which evaluation results a collection, have changed if and only if its current reference differs from the previous one. This speeds up the change detection of the expression from O(n) to O(1), i.e. instead of watching collection with $watchCollection(expr, fn), we can afford $watch(expr, fn, false), instead.

Boost the Performance of an AngularJS Application Using Immutable Data - Part 2

Sat, 11 Apr 2015 00:00:00 +0000

A few weeks ago I posted the article “Boost the Performance of an AngularJS Application Using Immutable Data”. It shows how to speedup your AngularJS application when having a lot of bindings to big data collections. The idea behind the optimization is quite simple - create a new collection when the data changes. This way you can reduce the watchers execution from O(n) to O(1).

In the post I did simple profiling using the built-in Date but it didn’t give enough information in exactly which cases it is more suitable to use immutable data and when you should bet on the standard collections. It also didn’t include any information about the garbage collection, although we know that using immutable collections will eventually lead to highly intensive memory management. All the code for the benchmarks and the charts generation is available in my GitHub account.

Angular2 - First Impressions

Mon, 06 Apr 2015 00:00:00 +0000

On 18th of September 2014 was pushed the initial commit of version 2.0 of the AngularJS framework. A few weeks ago the core team at Google, published AngularJS’ 2.0 website and gave a couple of talks on ng-conf about their new router, change detection, templating, etc. I’m passionate about AngularJS since its early versions so I decided give it a try using the quick start. In the meantime I and also created an angular2-seed project for my test, dummy projects. In order to have a better understanding of what is going on (and handle the lack of documentation) I dug inside their source code. I had great time doing this, what I saw was one of the most well written and smartest pieces of software I’ve ever read. Soon I’m planning to expand my paper “AngularJS in Patterns” with design patterns used inside Angular2.

Build Your own Simplified AngularJS in 200 Lines of JavaScript

Mon, 09 Mar 2015 00:00:00 +0000

My practice proved that there are two good/easy ways to learn a new technology:

Re-implement it by your own
See how the concepts you already know fit in it

In some cases the first approach is too big overhead. For instance, if you want to understand how the kernel works it is far too complex and slow to re-implement it. It might work to implement a light version of it (a model), which abstracts components that are not interesting for your learning purposes.

Persistent State of ReactJS Component

Thu, 05 Mar 2015 00:00:00 +0000

ReactJS is a framework, by facebook, which adds some well known concepts into the UI development. Each UI could be represented as a state machine but when the state of this state machine could be changed from a lot of places everything gets quite messy, complex and buggy. Given view may be rendered differently with the same model passed as parameter if it depends on some global data. A properly implemented ReactJS component, will be rendered the same way when the same “input parameters” are passed to it. This is based on the well known idea of the pure functions (to be more precise the idea is similar but not the same, because each component may have its own state, which can change).

Boost the Performance of an AngularJS Application Using Immutable Data

Mon, 02 Mar 2015 00:00:00 +0000

I have affinity to functional programming since my first year in college. During my initial contact with a purely functional programming language (Haskell in my case) I didn’t really understand all the advantages it provides, everything was reduced to just writing a cool recursive functions and solving algorithmic problems.

Later, when my code was used in production, I started appreciating things like high-order functions, closures, currying, etc. I even wrote a blog post on topic “Functional programming with JavaScript”.

Processing Binary Protocols with Client-Side JavaScript

Fri, 06 Feb 2015 00:00:00 +0000

Last couple of weeks I’m trying to build high-performance consumption of binary protocol through the browser. The protocol is running over TCP. In the perfect world I’d be talking with the remote TCP server, through TCP sockets, connecting directly from the client-side JavaScript and consuming the received binary data.

Because of limitations of the client-side API, JavaScript doesn’t has access to plain TCP sockets, there’s no full happiness. The second best option would be to use intermediate proxy, which:

Multi-User Video Conference with WebRTC

Fri, 26 Dec 2014 00:00:00 +0000

This is a tutorial for how to implement a multi-user video conference with WebRTC, AngularJS and Yeoman. It also includes a detailed explanation of how WebRTC works, how the peer to peer connections are being established and how the ICE (Interactive-Connectivity Establishment) framework is used for NAT traversal.

You can find deployed version of the project, we’re going to take a look at in this tutorial, at Heroku, the source code can be found at GitHub.

Asynchronous calls with ES6 generators

Sun, 21 Dec 2014 00:00:00 +0000

ES6 generators have landed in Chrome 39 Beta on 9th of October and are already available in the stable version. This means that brand new development practices are already applicable, although for supporting older browsers you might need to fallback to the traceroute compiler.

A cool module, which TJ developed, called co, is available for quite a while (his initial commit in the co repository was on 6th of June 2013).

A few months ago Jake Archibald wrote an article about the awesomeness of the async functions in ES7 and how we can “emulate” them using ES6’s generators, using his spawn function, which has subset of the features of co.

Binary Tree iterator with ES6 generators

Fri, 12 Sep 2014 19:07:34 +0000

ES6 specification is being clarified every passed day! One of the key features of the new version of the language are the generators. Generators (a.k.a. semicoroutines) will play quite important role after they are being officially released. They could be used to simplify the asynchronous control flow of any JavaScript program (look at co). Another important role is using them for creating iterators.

In this blog post we are going to take a look at how could be implemented iterator of binary search tree using the ES6 generators.

WebRTC chat with React.js

Wed, 03 Sep 2014 00:00:00 +0000

In this blog post I’m going to share how could be build WebRTC chat with React.js. Before we continue lets describe briefly what React.js and WebRTC are.

The application from this tutorial is available at GitHub.

React.js

React.js is reactive JavaScript framework, which helps you to build user interface. Facebook states that we can think of React as the “V” in MVC. React’s main aspect is the state. When the state of the application changes this automatically propagates through the application’s components. A React component is a self-contained module, which is composed by one or more other components. Usually the component depends on state, which is being provided by a parent component. May be the explanation seems quite abstract now, but during the tutorial the picture will get much more clear.

AngularJS in Patterns (Part 3)

Sat, 05 Jul 2014 00:00:00 +0000

This publication aims to provide a more theoretical overview of some of the AngularJS components in order to show you how the things you are already familiar with (like different Object-Oriented Design Patterns) fit in the picture.

Link to the first part of the series. Link to the second part of the series.

This is the last blog post of the series “AngularJS in Patterns”. You can find the original GitHub repository, which contains all the information at github.com/mgechev/angularjs-in-patterns. If you want to be aware of my up-coming work, you can follow me at github.com/mgechev.

AngularJS in Patterns (Part 2). Services.

Sun, 08 Jun 2014 00:00:00 +0000

This publication aims to provide a more theoretical overview of some of the AngularJS components in order to show you how the things you are already familiar with (like different Object-Oriented Design Patterns) fit in the picture.

Link to the first part of the series.

This blog post continues the series “AngularJS in Patterns”. You can find the original GitHub repository, which contains all the information at github.com/mgechev/angularjs-in-patterns. If you like my work you can follow me at github.com/mgechev.

AngularJS in Patterns (Part 1). Overview of AngularJS

Thu, 08 May 2014 00:00:00 +0000

In this series of blog posts I’m going to cover the paper I’m writing at GitHub.

It aims to provide a bit more theoretical overview of some of the AngularJS components in order to show you how the things you are already familiar with (like different Object-Oriented Design Patterns) fit in the picture.

Part one includes only a high level overview of AngularJS, enjoy it.

AngularJS overview

AngularJS is JavaScript framework developed by Google. It intends to provide a solid base for the development of CRUD Single-Page Applications (SPA). SPA is a web application, which once loaded, does not require a full page reload when the user performs any actions with it. This means that all application resources (data, templates, scripts, styles) should be loaded with the initial request or better – the information and resources should be loaded on demand. Since most of the CRUD applications have common characteristics and requirements, AngularJS intends to provide the optimal set of them out-of-the-box. A few important features of AngularJS are:

Singleton in JavaScript

Wed, 16 Apr 2014 00:00:00 +0000

Wikipedia describes the singleton design pattern as:

The singleton pattern is a design pattern that restricts the instantiation of a class to one object. This is useful when exactly one object is needed to coordinate actions across the system. The concept is sometimes generalized to systems that operate more efficiently when only one object exists, or that restrict the instantiation to a certain number of objects. The term comes from the mathematical concept of a singleton.

What I get from the JavaScript MV* frameworks

Wed, 12 Feb 2014 00:00:00 +0000

Why should I use JavaScript MVC, MVVM, MVP or simply MVW(hatever works for you)?

When I talk with people, who are beginners/intermediate in JavaScript I’m often asked this question. They are usually people who, until now, have used JavaScript only for making their website “fancier” – adding client-side form validation, creating carousel, checking whether a user already exists with simple Ajax request. When you start building something bigger (+10k lines of JavaScript) I truly believe that there are a few benefits from using such micro-architectural frameworks.

Remote Desktop Client with AngularJS and Yeoman

Sat, 08 Feb 2014 00:00:00 +0000

In this blog post I’m going to show you how to build a VNC client using AngularJS and Yeoman. The source code used in the post is available at my GitHub. Click here to see the final result.

It seems I have affinity to the remote desktop protocols, because this is my third project at GitHub, which implements one (VNC client on 200 lines of JavaScript, VNC client for Chrome DevTools and VNC client with AngularJS).

The magic of $resource (or simply a client-side Active Record)

Wed, 05 Feb 2014 00:00:00 +0000

At first sight AngularJS seems like a magical framework, which does some weird but awesome things like dependency injection, data binding only by setting a single property to the magical object named $scope and many other things.

If you look at the source code of Angular you’ll see a lot of smart and simple solutions for these magical problems. In this blog post I’ll describe the magic which stays behind $resource. I decided to write this blog post because of my recent experience in StackOverflow. One of the most misunderstood components of AngularJS was exactly the $resource service. $resource is two levels of abstraction above the XMLHttpRequest object (ok, may be three if we count $httpBackend). I’ve illustrated the usage of $resource through example which can be found at GitHub.

AngularAOP v0.1.0

Wed, 04 Dec 2013 00:00:00 +0000

In this blog post I’ll introduce you the new way of annotating services included in AngularAOP v0.1.0.

First, why we need a new way for annotation? In v0.0.1 the annotations were made in services’ bodies. It was something like this:

myApp.factory('AwesomeService', function (execute, d1, d2,...,dn) {
  var api = /* definition of our service api */
  return execute(Logger).onThrowOf(execute(Authorization).before(api, {
    methodPattern: /Special|getArticleById/,
    argsPatterns: [/^user$/, /^[Ii]d(_num)?$/]
  }));
});

This way of annotating services led to coupling between the services and the API of the AngularAOP’s aspect factory service called execute. By this coupling we weren’t able to reuse our services in new projects which don’t use AngularAOP.

Advanced JavaScript at Sofia University

Thu, 24 Oct 2013 00:00:00 +0000

In this blog post I’ll tell few words about the course Advanced JavaScript which Georgi Penkov, Evgeni Kunev and me are leading this semester in Sofia University.

I was included as a lecturer in it after my project for Practical Programming with Perl (plainvm) which is created by Georgi Penkov. The idea behind the course is not to concentrate on the syntax of JavaScript but to introduce to the students different modern technologies. It is not concentrated only on the front-end development but there are also few planned lectures about Node.js. My role in this course is more as frontender than as Node.js ninja so I can tell few words about the front-end topics I plan to cover. The program for the course is a bit dynamical. Since we planned it a lot of things in the JavaScript world changed. The JavaScript landscape changes very fast so we should be able to response to these changes as quickly as possible.

AngularJS style guide

Sun, 06 Oct 2013 00:00:00 +0000

Today I created a GitHub repository which contains a set of good practices and style guides for AngularJS application development.

Its main goal is to be community-driven and to concentrate all the best practices for AngularJS development in one place.

I’ve collected these guidelines mostly from my own experience and the source code of AngularJS. I guess there are missing things thats why I’ll try to fill the gaps in future. Also, if you find something which can be improved or included feel free to contribute.

Lazy prefetching of AngularJS partials

Tue, 01 Oct 2013 00:00:00 +0000

This blog post is concentrated about web performance. I’ll skip the well known stuff about combining images into sprites, inlining images, DNS pre-fetching, combining and minifying script files, gzipping and so on. There are plenty of articles and tools which will help you about these things. There are also excellent researches on these topics, few of the best I’ve read are these by Mobify, Web Performance Daybook Volume, High Performance Web Sites and Critical rendering path – Crash course on web performance and many others. I hope HTTP 2.0 will eliminate few of the dirty hacks we all make…
I’ll focus on the performance in the Single-Page Applications and especially template prefetching strategy we use in the web application of Brownie Points. I’ll give code samples with AngularJS but these methods can be also applied with Ember.js, Backbone.js (with little more pain) and other MV* frameworks, I guess.
To find the best approach for your app you should understand it very well and know all the relations between the different pages. One way to do this is by visualising all the relations using UML state machine diagram. It will show you how your pages are connected, triggering of which event will lead to page change (events), based on which conditions the pages will change (guards) and what is done during the transition (actions).
For illustrating the way this partials pre-fetching strategy works, I’ll use example with a web application which is web interface for revision control system.
So, we have the following pages:

VNC client on 200 lines of JavaScript

Fri, 30 Aug 2013 00:00:00 +0000

In this quick blog post I’ll show you how to create a simple VNC client in about 200 lines of JavaScript. For our goal we’re going to use only HTML5 and JavaScript (client and server side). The end result will be something like this:

So, let’s begin!

Our application will have very simple architecture – a proxy server written in Node.js and a client in HTML5 and JavaScript. The Node.js server will stay between the browser and the VNC server. We need it because the client-side JavaScript does not supports TCP sockets so we can’t connect directly to the VNC server. The HTML5 client will have a canvas on which we will draw the frames we receive from the server. For VNC server you can use the free version of RealVNC.

Aspect-Oriented Programming with AngularJS

Wed, 07 Aug 2013 00:00:00 +0000

In the following blog post I’ll write few words about what is Aspect-Oriented Programming, why I think it will be useful in AngularJS and I’m also going to give you a short tutorial for using a simple AOP framework I’ve developed.

First things first. What is AOP? As we all know OOP is awesome! It gives us many tools for making our development process simpler. Its core principles are Abstraction, Encapsulation, Inheritance and Polymorphism.

Practical programming with JavaScript

Wed, 24 Apr 2013 00:00:00 +0000

Before few months I was invited by Telerik Academy to make a talk about JavaScript. Last Monday Marian Kostadinov, Radoslav Georgiev and me made a whole seminar about the topic. I’m addicted to the Object-Oriented programming so I choose to talk about that. You can find my slides at https://blog.mgechev.com/slides/javascript-patterns and a video (in Bulgarian) below in the post:

It was quite exciting for me to speak about this topic in front of about 200 people. The most amazing thing was that all of them were listening and were interested about JavaScript. I hope that it was useful seminar and all of use learned something new.

Why I should use publish/subscribe in JavaScript

Wed, 24 Apr 2013 00:00:00 +0000

This post is inspired by my answer at StackOverflow.

So why we should use publish/subscribe? Why it is useful? Is it making our work harder or it makes our application better?

And the answer…

It’s all about loose coupling and single responsibility, which goes hand to hand with MV* (MVC/MVP/MVVM) patterns in JavaScript which are very modern in the last few years.

Loose coupling is an Object-oriented principle in which each component of the system knows it’s responsibility and don’t care about the other components (or at least tries to not care about them as much as possible). Loosing coupling is a good thing because you can easily reuse the different modules. You’re not coupled with the interfaces of other modules. Using publish/subscribe you’re only coupled with the publish/subscribe interface which is not a big deal – just two methods. So if you decide to reuse a module in different project you can just copy and paste it and it’ll probably work or at least you won’t need much effort to make it work.

JavaScript, the weird parts

Fri, 22 Feb 2013 00:00:00 +0000

To say that JavaScript is becoming more and more popular is such a typical and boring way to start such an awesome post…Anyway, JavaScript is becoming more and more popular each day…There’s client-side JavaScript with awesome API, you can do whatever you wish with it – write 3D games, stream video and audio, process files…There’s also a server-side JavaScript which is also awesome (I guess awesome will be a common word for this post). JavaScript is exiting language with big expressiveness power. It is object-oriented with many functional elements. It has prototype-based inheritance but if you wish you can implement inheritance in at least three different ways, which have countless subtypes…

Functional programming with JavaScript

Mon, 21 Jan 2013 00:00:00 +0000

This article is about the functional concepts of JavaScript. Some of them are built-in the languages, others extra implemented but all of them are very common for purely functional languages like Haskell. First I want to tell what I mean with the term purely functional language. These languages are “safe”, they will not make side effect i.e. evaluating an expression won’t change something in the internal state and lead to different result of the same expression when called next time. It seems very strange and useless to “imperative” guys like me, but actually there’s a list of benefits:

plainvm

Fri, 11 Jan 2013 00:00:00 +0000

plainvm can take the virtualization into different level of usage. To prove this I’ll first ask few rhetorical questions and put their answers…Which is the programming language which everyone has interpreter for? Java? Actually no! Does iOS supports Java applets for example?! No! Everyone has a browser in his smartphone. Every browser (well may be I should exclude lynx, links…) has JavaScript interpreter. And what is the common thing between all modern devices (and actually the devices most wide spread) – the browser. Another problem is that you don’t have such a great resources onto your mobile devices to run Windows/Linux/Mac even with double boot (yeah we can argue here about Debian…probably). We can use remote desktop via VNC/RDP but we have to install extra software and we will have access to a single machine not a whole cluster (well actually we can…I agree we can switch through different sessions, we can also become crazy).

Looking for performance? Probably you should NOT use [].sort (V8)

Sat, 24 Nov 2012 00:00:00 +0000

A few days ago, I’ve created a GitHub repository. It’s main goal was to collect different algorithms with implementations in JavaScript. I started with basic ones – sorting (insertion, selection, bubble sort..). After that I implemented few “more advance” like marge, quick and heap sort. It was interesting to me how much slower my implementation will be compared to the default sort. It was so interesting because of:

JavaScript image scaling

Fri, 02 Nov 2012 00:00:00 +0000

I haven’t wrote here for a while so I decided to write about something more practical. Actually the idea for the post come from one my response in stackoverflow. The post is connected with pure client side image scaling. While you’re reading the example I hope that you’ll see how powerful is the HTML5 API and how with few lines of code you can do something which in other technologies is much more complex.
So firstly I’ll post the source code with the example in JSFiddle, after that I’m going to explain everything step by step.

Caching CSS with localStorage

Tue, 04 Sep 2012 00:00:00 +0000

Since HTML5 became wide supported the most popular aspects I hear about were it’s canvas, WebSockets and localStorage. I’ve got very close experience with the first two of the mentioned but the localStorage was somehow unknown for me since a month. I’ve researched the topic. Actually it’s quite interesting and useful as you might guess. Using localStorage you can save different kinds of data locally into key-value pairs. The data lives on your local machine until it’s deleted (cleared). The localStorage allows you to use more storage than cookies and have no expiration interval (the expiration completely depends on the user). As you might guess again the data stored into the localStorage is saved on the hard drive. May be you know that it’s very expensive to take data from the hard drive because of the mechanical movements required for buffering the data. The localStorage size depends on the implementation. In Chrome, Firefox, Opera and Safari you can use 5 MBs. Actually it’s enough for caching all the CSS and JavaScript of your webpage (I really hope so).

Self-invoking functions in JavaScript (or Immediately Invoked Function Expressions)

Wed, 29 Aug 2012 00:00:00 +0000

There are a lot of interesting things in the syntax of JavaScript, one of which is the definition of self-executing (self-invoking) functions. Here’s how we can defined such function:

(function () {
  // body of the function
}());

The anonymous function above will be invoked right after it has been defined. The benefit of self-invoking functions is that they enable us to execute code once without cluttering the global namespace (without declaring any globals). For example, if we have a web page in which we want to attach event listeners to DOM elements and other initialization work, self-invoking functions would be the best tool for the job!

HTML5 image editor

Wed, 25 Apr 2012 00:00:00 +0000

As you see HTML5 is everywhere (of course I exclude IE…or just before version 10). Web site used for quick image composition or edition is something very useful for the “modern web person”. There are few such services. Most of them use Flash. Nothing against it but…it’s too heavy for me…unnecessarily heavy. For all that stuff you can use HTML5 canvas. I also found some HTML5 image editors but their functionality was very limited. There is a feature which is very important and you cant find it in any of them. It’s frequently used in Adobe Photoshop and that’s why I decided to implement editor with that functionality – multiple layers. With multiple layers you can do whatever you want. You can combine different images change their color balances, contrast, blur…etc. I’ve started this editor a few weeks ago and I’m almost ready with it’s base functionality (layers manipulations). It’s open source, of course. Distributed under the terms of the General Public License. As you may be noticed in my older blog posts I’m fan of jQuery. Of course my use of jQuery is limited because I’m looking for best performance. More detailed look at the editor can be made in it’s GitHub repository.

Carousel Gallery

Thu, 16 Feb 2012 00:00:00 +0000

And one post in English…For few days I’m developing one jQuery UI plugin. It’s picture gallery which I’ve seen in flash but not in JavaScript, that’s why I decided to fix this. The gallery is a set of rotating pictures and difference ways of handling the perspective. There’s nothing complicated in it just little analytic geometry. I haven’t used any canvases or SVG because I’ve wanted the biggest possible browser compatibility. Of course there’re are drawbacks from this. There are a lot of computations I don’t have hardware acceleration and it works slow in the old version of few browsers. Currently I’m developing webpage for the gallery. Here’s a screenshot of it:
If you’re interested in the project you can see it’s source or fork it at GitHub.

Color animation plugin for jQuery

Mon, 16 Jan 2012 00:00:00 +0000

Hi! I haven’t wrote since a long time but there’s so much code and so little time…It’s bad that the biggest part of the code is not open source but what can we do…Last few hours I developed a JavaScript plugin for color animation. Of course for few hours I cant make something with great quality so it’s a little bit unstable (I think) but it works and it’s also valid for the JSLint standards. It uses easy algorithm. I think of the RGB color representation as a three dimensional space with coordinates in the range [0, 255]. The user is sets object with specific color (doesn’t matter background, font…btw that’s still not fully tested) which is actually a point in this three dimensional space. The target is another point in the 3D space so I just move from the first to the second point. I spoke enough. Let’s look at the code:

Sound notification in web page

Tue, 01 Nov 2011 00:00:00 +0000

Few days ago I was creating a system in which it was necessary to implement a sound notification feature. Well it’s not very hard task but of course you have to be careful with the browser compatibility. At first my source was something like that:

playSound: function () {
	this.config.soundNotify.html('<embed src="' + this.config.soundFile + '.wav" hidden=true autostart=true loop=false>');
}

Actually in my Linux it was working pretty well (I tried it mainly in Chrome).
After that I decided to try it in a different environment (OS, browser…). Well I started the app in Google Chrome installed on Windows 7. It was working again :). After that…IE…and yes it wasn’t working (the browser asked me to start an add-on but this stinks…). Well IE has a tag for background sound. So I added:

Ajax without jQuery for beginners

Thu, 21 Jul 2011 00:00:00 +0000

Before years I was writing all the code by my own, without additional libraries (including jQuery). For beginner developer it’s a good strategy. When you use $.ajax it’s all that easy:

$.ajax({
  url: "any/url/for/the/request",
  type: "get",
  success: function(data){
    alert(data);
  }
});

But you can’t get the main idea.
Many developers don’t have an idea how to write this without a library. In their opinion AJAX without library a hard, near impossible task. Well the truth is that it’s not so hard…there are just some incompatibilities between the different browsers but you can deal with all of them in few lines of code. First for creating the HTTP request you have to create new XMLHttpRequest (for most browsers). Of course, in Internet Explorer you have to do something slightly different…In Internet Explorer under version 7 you have to create special kind of ActiveX Object which has different versions – MSXML2.XMLHttp.5.0, MSXML2.XMLHttp.4.0, MSXML2.XMLHttp.3.0, MSXML2.XMLHttp, Microsoft.XMLHttp. For our goals we want to use the newest version of the XMLHttp object. Here is a function which creates object which we can use for out request:

Blogger image resize

Sun, 17 Jul 2011 00:00:00 +0000

That’s my second post here and the first one which is going to have any sense. Today a friend of mine was fighting with Google’s blog system…He was posting some data with images in it. When he was setting width and height of images in the html editor they were being resized later after he post the article. When he tried to put any CSS restriction about picture’s width the effect was – picture flattened (because blogger was setting the picture height). I looked at the source for few minutes, stopped the JavaScript because I thought that it is the problem but there was no result…So I wrote a tiny script which deals with the problem. And here is it: