Gil Fink's Blog

VSLive Chicago Sessions Slide Decks and Demos

Gil Fink — Wed, 15 May 2013 23:13:15 GMT

VSLive Chicago Sessions Slide Decks and Demos

Just finished delivering three sessions in VSLive Chicago. It was nice meeting all the attendees and talking about technologies that I like like HTML5, OData and Entity Framework. Here is a list of the sessions that I delivered:

You can find the slide decks and demos in this link.

VSLive Chicago Here I Come

Gil Fink — Sun, 12 May 2013 10:09:09 GMT

VSLive Chicago Here I Come

In about a few hours I’m starting a trip to Chicago to attend VSLive Chicago conference. It is going to be the second time I’m speaking in VSLive conference and I’m excited (the previous one had been in VSLive Redmond 2012). This time I’m having three back-to-back sessions at the same day (Wednesday). The session topics are:

Working with Client-Side HTML5 Storage Technologies
HTML is the markup language that every web developer uses in order to structure and present content in the Internet. HTML5 is the standard that is being shaped and developed currently. It extends and improves the last HTML4 standard and takes it to the next level with support for multimedia, communication, semantics and more. In this session we will deep dive into the new storage options that HTML5 brings and how to use them. The session will discuss Web Storage, IndexedDB and AppCache APIs.
OData - Oh Yeah
Open Data Protocol (OData) is a protocol for exposing and consuming data on the web. The OData ecosystem is a growing community of data producers and consumers using the Open Data Protocol to exchange data. This session will explain what the Open Data Protocol (OData) is and how to create OData feeds using WCF Data Services.
Not Just a Designer: Code First and Entity Framework
Entity Framework 4 brought many new opportunities for building complex data driven applications. Code First is an Entity Framework capability that provides a code-centric experience for interacting with models and databases. This session will cover several Entity Framework features such as Code First, DbContext API and Migrations.

If you are attending the conference and would like to meet me, you can ping me on the blog’s contact form.

See you there!

SDP13 Third Day Slide Decks and Demos

Gil Fink — Tue, 07 May 2013 13:48:40 GMT

SDP13 Third Day Slide Decks and Demos

Today I participated the Sela SDP13 conference second breakout sessions day. I delivered two sessions:

Creating Data Driven HTML5 Applications
Building Scalable JavaScript Apps

I want to thank all the people who came to hear both of my sessions. You can download the slide deck and demos of all my SDP13 breakout sessions from here. SDP is over for me as a speaker but the conference continues until the end of this week.

See you in the next SDP!

Embracing JavaScript with TypeScript Slide Deck and Demos

Gil Fink — Mon, 06 May 2013 13:30:28 GMT

Embracing JavaScript with TypeScript Slide Deck and Demos

Today I participated the Sela SDP13 conference first breakout sessions day. I delivered a session about the TypeScript language with the following agenda:

The Why
Introduction to TypeScript
Building a Simple App with TypeScript

I want to thank all the people who came to hear about the language. You can download the slide deck and demos from here.

Tomorrow I’m having 2 sessions:

Creating Data Driven HTML5 Applications
Building Scalable JavaScript Apps

See you there!

Sela Developer Practice 2013 is Around the Corner

Gil Fink — Thu, 02 May 2013 06:59:42 GMT

Sela Developer Practice 2013 is Around the Corner

Next week it is starting! The biggest developer conference Sela had so far.

Here are some interesting details about the conference:

We have 8 international speakers including Jesse Liberty, Shawn Wildermuth, and Udi Dahan and 28 local speakers
We have more then 70 sessions and workshops
14 of the workshops were sold out so we had to duplicate some of them
The session topics include a lot of interesting technologies like Node.js, PhoneGap, RavenDB, Hadoop, Solr, TypeScript, and more

Last and not least, if you are attending the conference drop by and say hi.
I’ll be happy to meet you there!

JavaScript Libraries are Not Your Front-End Architecture

Gil Fink — Wed, 24 Apr 2013 15:58:00 GMT

JavaScript Libraries are Not Your Front-End Architecture

This is not going to be a post about architecture but more about MHO. Lately, I’m asked to evaluate the architecture of small to big front-end solutions. There is big buzz around front-end development and it drives a lot of companies to build client-side solutions without considering how to build them. One of the misunderstandings I’m facing a lot is calling the existence of JavaScript libraries in the solution a solution architecture. Sorry to say that but

JavaScript libraries are not front-end architecture

Every JavaScript library deals with one or more aspects of your code like namespaces/modules/packages in your server-side app. Whether it is jQuery for DOM interaction, Backbone/Angular/Ember/Knockout for MV* and separation of concerns, require.js for AMD or any other JavaScript library, all those libraries solves some common problems.

Take a moment and ask yourself these question regarding your JavaScript apps:

Can your app scale?
If you remove one of the modules/features in your webpage is it going to break?
Do you have reusable components/features in your solution?
Are your app parts tightly coupled?
Are your modules/features testable?
What is happening when a module/feature is in error state?
And more

If you answered those questions that might imply that there is a front-end architecture in your solution. If you can’t answer those questions then you might have problems in your solution.

Building big and scalable JavaScript apps is a difficult task and shouldn’t be undertaken lightly. Using JavaScript libraries helps to make the task less complicated but it doesn’t imply that you have an architecture. I would like to hear your opinion about the subject.

Quick Tip – HTML5 classList Element Property

Gil Fink — Sun, 21 Apr 2013 06:44:28 GMT

Quick Tip – HTML5 classList Element Property

When we want to change the style or display of an HTML element most of the times we update it’s class name. The main way to change the class name is using the element’s className property. This raises a little problem. The className property is string based and can get a string value of one or more classes. When we want to toggle/update a class name and we have more than one class set to an element that means we will have to do string manipulation. String manipulations can be cumbersome and can affect the performance of the operation.

Not any more… HTML5 introduces the classList property for HTML elements and it can help to avoid the string manipulation problem.

The classList Property

Each HTML element holds a new classList property. The classList holds an instance of DOMTokenList, which is a new list type that includes a set of space separated tokens. The DOMTokenList has the following API:

length – a property for the length of the list.
item(index) – a function that returns the list item that exists in the given index.
contains(token) – a function that returns true if the list contains the given token. Else it returns false.
add(token) – a function to add a given new token to the list.
remove(token) – a function to remove a given token from the list.
toggle(token) – a function that adds the token to the list if it doesn’t exists. If the token exists it is being removed from the list.

The classList property is read-only and in order to manipulate it you must use the previous DOMTokenList API.

Here are some examples of using the classList property and the DOMTokenList API:

     // Adds a red class to a div element

    div.classList.add("red");

    // Removes a blue class from a div element

    div.classList.remove("blue");

    // If the visible class is set on the element it will be removed.

    // Else the visible class will be added to the div

    div.classList.toggle("visible");

    // Will output to the console 'true' if the visible class exists. 

    // Else it will output 'false'

    console.log(div.classList.contains("visible"));

classList Support in Browsers

As in all HTML5 new features, not all the browsers support the classList property. To see if you can use the classList property, you can visit the can I use website.

Summary

HTML5 classList property can help you avoid string manipulations on the className property. It is using a new list type, the DOMTokenList, in order to expose its functionality.

Quick Tip – JavaScript Statement Count Do Count

Gil Fink — Sat, 20 Apr 2013 13:09:30 GMT

Quick Tip – JavaScript Statement Count Do Count

One of the things that we as developers don’t seem to mind about is the amount of statements that we write in our code. In JavaScript, the number of statements might affect the speed of the operations we want to perform. It is our responsibility to find statements that should be combined in order to decrease the execution time. This post include some examples of places to decrease the amount of statements.

Variable Declarations

One of the places that developers don’t care about is declaring variables. Lets look at a code with variable declarations:

     var i = 0;

    var j = 0;

    var length = arr.length;

This code block shows the declaration of 3 variables in 3 different statements. This is a little expensive since we can declare all the variables in only one var statement:

    var i = 0,

        j = 0,

        length = arr.length;

This is micro optimization but in large scale JavaScript applications such optimizations can be much more crucial.

Arrays and Object Literals

Another place that you might be tempted to use a lot of statements is initialization of arrays or objects. Here is an example of wasting a lot of statements:

    var arr = new Array();

    arr[0] = 0;

    arr[1] = 1;

    var obj = new Object();

    obj.name = "name";

    obj.value = "value";

Those examples can be shortened in number of statements by using initialization using brackets or literal objects:

    var arr = [0, 1];

    var obj = {

       name: "name",

       value: "value"

    };

Again this is micro optimization but any optimization count and limiting the number of statements means better performance.

Iterative Values

In loops we are using iterative values and increment/decrement them. Lets look at an example:

    var i = 0;

    while (i < 10) {

       doSomething(i);

       i++;

    }

The statements in the loop can be shortened using only one statement which will do the same thing because of the nature of increment operator:

    var i = 0;

    while (i < 10) {

       doSomething(i++);

    }

Returning Evaluated Boolean Value

From time to time I see developers use the following if statement example to make it more comprehensive:

    function checkSomething(value) {

        if (makeCheck(value)) {

           return true;

        }

        else {

           return false;

        }

    }

In the code we check if a value is evaluated to true and then returning true. This is wasteful. The previous code can be shortened to:

    function checkSomething(value) {

        return makeCheck(value);

    }

Pay attention that this is only an example of a pattern that I see people using which can be shortened.

Summary

The number of statements in your JavaScript code do count in your application performance. I know that all of the examples I showed are micro optimizations but in large scale JavaScript applications every micro optimization can help you create a faster application.

Quick Tip - Windows Store apps and StoreManifest

Gil Fink — Thu, 18 Apr 2013 07:24:16 GMT

Quick Tip - Windows Store apps and StoreManifest

Lately, a Windows Store app that I help to build was published to the Windows Store. Not a day passed and the customer contact us with a problem they are having. As it seems, the app exists in the Windows Store but it doesn’t appear in the store search results. After a quick investigation we learned that the customer license was OEM channel license and as such the app was deployed by default exclusively to the OEM channel and to public use.

Solving The Problem

In order to solve the problem we added a StoreManifest.xml file to the app root. One of the xml elements that you can use in StoreManifest.xml is the ExclusiveOptOut element. If ExclusiveOptOut element is set to true, it configures the app not to be exclusively distributed through the OEM channel in the Windows Store. Here is an example of StoreManifest.xml with the ExclusiveOptOut element:

     <?xml version="1.0" encoding="utf-8" ?>

    <StoreManifest

      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

      xsi:noNamespaceSchemaLocation="StoreManifest.xsd"

      xmlns="http://schemas.microsoft.com/appx/2010/StoreManifest">

      <ProductFeatures>

        <ExclusiveOptOut>true</ExclusiveOptOut>

      </ProductFeatures>

    </StoreManifest>

Conclusion

You should pay attention to your developer license and its restrictions. If you are OEM channel developer, you can distribute your app in the Windows Store. All you have to do is add a StoreManifest.xml file with ExclusiveOptOut element.

SDP13 Windows Store app is Available

Gil Fink — Wed, 10 Apr 2013 06:07:10 GMT

SDP13 Windows Store app is Available

SELA Developer Practice (SDP) is Sela Group’s annual conference. The next scheduled conference will occur between May 5-9, 2013. I’ve written about the conference in a previous post.

Yesterday, we launched a new companion Windows Store app for the conference. I had the pleasure of developing the app so if you find any bugs or have feature requests please don’t hesitate to contact me.

App Features

Browse through sessions and speakers
Browse through conference tracks
Explore speaker details
Explore session details
Send a register request
Add sessions or tutorials to favorites page
Search for sessions, speakers and tracks

A Glimpse at the app

Here are some screen shots taken from the app:

Enjoy!

Quick Tip – The JavaScript arguments Object

Gil Fink — Fri, 05 Apr 2013 13:18:57 GMT

Quick Tip – The JavaScript arguments Object

Yesterday I delivered a session about JavaScript and mentioned the arguments object. I was surprised that most of the attendees didn’t know the object so I decided to write this post.

The arguments Object

The arguments object is available inside every JavaScript function body. As its name implies, it stores the arguments that the function receives. For example, if a function is passed two arguments, you can use them by their name or using the following code:

     function foo(first, second) {

       console.log(arguments[0]); // will log the data of first 

       console.log(arguments[1]); // will log the data of second

    }

You can also set the arguments using the arguments object. The following code will set the first argument to 1:

    function foo(first, second) {

       arguments[0] = 1;

       console.log(first); // will output 1

    }

Even though you might think that the arguments object is an array, it isn’t the case and non of JavaScript array functions exists in that object. The arguments object has only two properties:

length – the number of arguments received by the function
callee – the currently executing function

arguments Use Examples

So, you might think what is the big deal with the arguments object? The answer is the dynamic nature of JavaScript language. For example, here is a sum function that can receive any number of arguments:

    function sum() {

       var result = 0;

       for (var i = 0; i < arguments.length; i++) {

          result += arguments[i];

       }

       return result;

    }

    console.log(sum()); // will output 0

    console.log(sum(1)); // will output 1

    console.log(sum(1, 2)); // will output 3

    console.log(sum(1, 2, 3)); // will output 6

Another example can be declaring an API function that might get an argument to set some element’s value or else it returns the element’s value:

    function val(htmlElement) {

       if (arguments[1]) {

          htmlElement.value = arguments[1];  

       }

       else {

          return htmlElement.value;

       }

    }

    var elm = document.getElementById('elm'); 

    console.log(val(elm));

    val(elm, "Hello");

    console.log(val(elm));

If the webpage has a elm textbox the value of the textbox will be logged and then changed to “Hello”.

Summary

The arguments object stores the function passed arguments and is useful part of the JavaScript language. It is mainly used in API functions and can help in function overloading behavior.

Quick Tip – The Order Of JavaScript Operations Do Count

Gil Fink — Tue, 02 Apr 2013 05:26:17 GMT

Quick Tip – The Order Of JavaScript Operations Do Count

Continuing the quick JavaScript performance tips (tip1 and tip2) I wrote, here is another thing to consider when writing your JavaScript code. The order of your operations can decrease your performance. Sometimes all you have to do is think about what you are doing and then you might avoid pitfalls like in the next scenario.

The Scenario

Lets look at an example of adding a new div element to the Document Object Model (DOM):

function addDiv(parentElement, text) {  var element = document.createElement('div');  parentElement.appendChild(element);  element.textContent = text;}

The function will add a new div element to the parent element and then change its text. What’s the problem with that? We are doing a trivial thing. The problem is the order of the operations which can trigger two reflows, one for appending the child and the other for changing the text.

Summary

The order of operations do count when dealing with JavaScript and browsers. When you have a set of operations don’t write the code as is, test it and check that you are not falling into pitfalls like triggering reflows.

Quick Tip – Change CSS Classes and Not Element Styles

Gil Fink — Sun, 31 Mar 2013 12:55:25 GMT

Quick Tip – Change CSS Classes and Not Element Styles

A few days ago I wrote a quick tip to ensure only one reflow when you need to manipulate the Document Object Model (DOM). Continuing that post, here is another JavaScript mistake I’m seeing from time to time and a way to go around it.

The Scenario

You need to change some element’s style as a response to some event. Here is a simple function that contains the problem:

     function changeElementStyle(element) {

        element.style.color = '#fff';

        element.style.backgroundColor = '#000';

        element.style.width = "100px";

    }

If you read my previous post, you know that every single DOM manipulation including style changes can trigger a reflow. In the previous code we have three potential reflows.

Summary

When you are manipulating your DOM you should remember the Browser reflow process even if it is only simple style change. You can’t control when reflows occur but you can minimize their impact on your app performance.

Quick Tip – Too Much DOM Manipulations Can Hurt You

Gil Fink — Thu, 28 Mar 2013 14:07:31 GMT

Quick Tip – Too Much DOM Manipulations Can Hurt You

Lately, I had a few consulting sessions for customers about JavaScript performance. One of the things that repeated in all of the apps I saw was the misunderstanding of too much Document Object Model (DOM) manipulations implications on app performance. There are a lot of good articles about the subject and this post will only cover one method to increase JavaScript performance. The scenario is based on a code I saw at a customer.

DOM Manipulations and Reflows

When we build web apps, we use JavaScript to manipulate the DOM and to update the web pages we build. One of the things that we should be aware of is browser reflows. Reflow is a browser process which determines how the page should be displayed to the user. Every single DOM manipulation (for example changes in CSS or adding/updating/removing elements) can trigger a reflow. Reflows can take some time and affect the performance of your web page. A lot of reflows can decrease the app performance and make it sluggish and slow.

The Customer’s Problem

In the customer scenario they needed to create a big DOM part according to some data they received from the server. The problem was that they made changes to the DOM for each element that they got. Since we are talking about adding and manipulating a lot of elements the performance of the app was really bad. The first thing I did was to open Chrome developer tools and to capture their app in the Timeline. What I saw was that a lot of app time was spent on rendering and painting. Then, I asked the developer to show me the code that create the DOM part and saw that he created the new DOM part using jQuery each function and appending the created elements straight into the DOM in each iteration. Here is a simple example of such operation without using jQuery each function:

     function addElements(element) {

        var div;

        for (var i = 0; i < 5; i++) {

            div = document.createElement('div');

            div.textContent = 'added';

            element.appendChild(div);

        }

    }

In the example, five div elements are added to a given element. In each iteration a reflow process might be triggered due to changes in the DOM and cause a decrease in the performance.

Summary

After fixing the problem we managed to decrease the performance of the app by ~50%. The app’s code is doing all the manipulations in memory and only in the end the change is appended to the DOM. Understanding what can cause performance problems can help you avoid those problems in the future.

Building Scalable JavaScript Apps – A New SDP13 Session

Gil Fink — Sun, 24 Mar 2013 13:37:55 GMT

Building Scalable JavaScript Apps – A New SDP13 Session

SELA Developer Practice (SDP) is Sela Group’s annual conference. The next scheduled conference will occur between May 5-9, 2013. I’ve written about SDP13 in a previous post.

Lately, we added a new session that your truly will be delivering called Building Scalable JavaScript Apps.
Here is its abstract: “Building and maintaining big and scalable JavaScript web apps is a hard task.
So how you build a big and scalable JavaScript app without being driven into madness?
Using and combining proven JavaScript patterns will do the trick.
In this session we will talk about the patterns behind some of the largest JavaScript apps and how to apply them in your own app.”

In closing, I encourage you to check out the list of sessions and speakers.
See you there!

Gil Fink's Blog

VSLive Chicago Sessions Slide Decks and Demos

VSLive Chicago Sessions Slide Decks and Demos

VSLive Chicago Here I Come

VSLive Chicago Here I Come

SDP13 Third Day Slide Decks and Demos

SDP13 Third Day Slide Decks and Demos

Embracing JavaScript with TypeScript Slide Deck and Demos

Embracing JavaScript with TypeScript Slide Deck and Demos

Sela Developer Practice 2013 is Around the Corner

Sela Developer Practice 2013 is Around the Corner

JavaScript Libraries are Not Your Front-End Architecture

JavaScript Libraries are Not Your Front-End Architecture

JavaScript libraries are not front-end architecture

Quick Tip – HTML5 classList Element Property

Quick Tip – HTML5 classList Element Property

The classList Property

classList Support in Browsers

Summary

Quick Tip – JavaScript Statement Count Do Count

Quick Tip – JavaScript Statement Count Do Count

Variable Declarations

Arrays and Object Literals

Iterative Values

Returning Evaluated Boolean Value

Summary

Quick Tip - Windows Store apps and StoreManifest

Quick Tip - Windows Store apps and StoreManifest

Solving The Problem

Conclusion

SDP13 Windows Store app is Available

SDP13 Windows Store app is Available

App Features

A Glimpse at the app

Quick Tip – The JavaScript arguments Object

Quick Tip – The JavaScript arguments Object

The arguments Object

arguments Use Examples

Summary

Quick Tip – The Order Of JavaScript Operations Do Count

Quick Tip – The Order Of JavaScript Operations Do Count

The Scenario

Suggested Solution

Summary

Quick Tip – Change CSS Classes and Not Element Styles

Quick Tip – Change CSS Classes and Not Element Styles

The Scenario

Suggested Solution

Summary

Quick Tip – Too Much DOM Manipulations Can Hurt You

Quick Tip – Too Much DOM Manipulations Can Hurt You

DOM Manipulations and Reflows

The Customer’s Problem

Suggested Solution

Summary

Building Scalable JavaScript Apps – A New SDP13 Session

Building Scalable JavaScript Apps – A New SDP13 Session