New Speaking Engagement – Øredev 2013
I got notifications a few weeks ago that I have been chosen to speak at Øredev 2013 conference. The conference will take place in November 4-8 at Malmö, Sweden. This is going to be my first time in Sweden and I’m very excited. In the conference I’ll have the following session:
Building End to End Web App Using TypeScript
Creating cross-platform, application scale, JavaScript that runs in any browser or in any host is very hard. TypeScript is a programming language that changes that situation. In this session you will get to know the TypeScript language and we will build a client oriented web application using the language.
See you there!
A New Meetup in Town – Front-End.IL
In the last couple of months I have considered opening a new Meetup for Front-End Development (FED). Today I announce this new Meetup – Front-End.IL.
Every month at the 15th we will gather on Sela Group’s roof for networking and front-end development sessions. The first Meetups are scheduled to 15th of July and 15th of August and you can find their details in the Meetup website.
If you want to speak in the Meetup I encourage you to contact me.
See you there!
Advanced Windows Store App Development Using HTML5 and JavaScript Microsoft Official Course
Today we got the announcement that another Microsoft Official Course (MOC) that I co-authored was released. The course is “Course 20482A: Advanced Windows Store App Development Using HTML5 and JavaScript” and you can find its syllabus here.
About The Course
“In this course the students will learn the more advanced programming skills and techniques that they can use to optimize their Windows Store app and differentiate their app from other apps in the Windows Store. These advanced skills and techniques include a combination of both design and development skills. The students will also learn about supporting the apps that they have published to the Windows Store.”
It was a very interesting journey to write yet another MOC for Microsoft (this time I was less involved than in the previous MOCs). Congratulation to the main course authors: Noam Kfir and Shai Raiten.
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:
- Working with Client-Side HTML5 Storage Technologies
- OData - Oh Yeah
- Not Just a Designer: Code First and Entity Framework
You can find the slide decks and demos in this link.
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
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
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
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
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
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
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
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
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
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
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.
Suggested Solution
Lets change the previous code sample and avoid the problem:
function addDiv(parentElement, text) { var element = document.createElement('div'); element.textContent = text;
parentElement.appendChild(element);
}
Putting the appendChild function at the end solves the problem and might trigger only one reflow. All the changes to the div are being done in memory and not on a DOM element.
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.
More Posts
Next page »