Bundling and Compressing / Minifying Javascript and CSS files using Powershell Script

In ASP.Net MVC4, bundling and minification process for JS and CSS files is very simple. But in older version of project or open source project, you have to manually bundle and minify the Javascript and CSS files.
Here I am going to explain on how to do the above process using powershell script and Yahoo UI Compressor JAR file.

Why we need to BUNDLE the JS or CSS files?
If you are having multiple JS files in your project, multiple request sent to server to retrieve the files. If you have bundled the relative JS files into a single one, only one request sent to the server to retrieve the file.

Why we need to MINIFY the JS or CSS files?
Even if you have implemented the bundling of JS files, file size will be large and loading time will increase. If you have minified (removing unwanted space, lines and others) the JS files, file size reduced to small and less time take to load the JS file in browser.

And also, if you are using YSLOW for performance analysis, it will suggest you to do the bundling and minification.

Follow below steps to experiment the bundling and minification

1. Create two JS files (CustomerJS1.js, CustomJS2.js).

CustomJS1.js:

   1:  function showAlert1()

   2:  {

   3:      alert("testing combining and compression");

   4:  }

CustomJS2.js:
 

   1:  function showAlert2()

   2:  {

   3:      alert("testing combining and compression");

   4:  }

2. Make sure following software's installed in your system.

    a) Powershell
    b) Java JDK 7
    c) Download Yahoo UI Compressor JAR file


3. Use the below powershell script to create a bundled and minified file. please see the comments for each command of powershell to understand more on powershell script.

   1:   

   2:  #defining version

   3:  $version = "1.0";

   4:   

   5:  #creating new file. "-force" replaces new file if file already exists

   6:  New-Item "CustomJS-$version.js" -type file -force

   7:  New-Item "CustomJS-$version.min.js" -type file -force

   8:   

   9:  # Getting content from multiple custom JS files and put into a single version file.

  10:  # if your custom JS files and output files located in same directory, you have to exclude the output files. Otherwise you get access denied error.

  11:  Get-Content "Custom*.js" -Exclude "CustomJS-$version.js", "CustomJS-$version.min.js" | Add-Content "CustomJS-$version.js"

  12:   

  13:  #compressing JS files using Yahoo UI Compressor JAR file

  14:  java -jar yuicompressor-2.4.8pre.jar "CustomJS-$version.js" -o "CustomJS-$version.min.js"

4. After executing the above script in powershell, you can see the output of  bundled and minified files. Make sure YUI JAR file located in relative path while executing the powershell script.

CustomJS-1.0.js:

   1:  function showAlert1()

   2:  {

   3:      alert("testing combining and compression");

   4:  }

   5:  function showAlert2()

   6:  {

   7:      alert("testing combining and compression");

   8:  }

CustomJS-1.0.min.js:

   1:  function showAlert1(){alert("testing combining and compression")}function showAlert2(){alert("testing combining and compression")};

Powershell script for Bundling and Minification of CSS files :

   1:  #defining version

   2:  $version = "1.0";

   3:   

   4:  #creating new file. "-force" replaces new file if file already exists

   5:  New-Item "CustomCSS-$version.css" -type file -force

   6:  New-Item "CustomCSS-$version.min.css" -type file -force

   7:   

   8:  # Getting content from multiple custom CSS files and put into a single version file.

   9:  # if your custom CSS files and output files located in same directory, you have to exclude the output files. Otherwise you get access denied error.

  10:  Get-Content "Custom*.css" -Exclude "CustomCSS-$version.css", "CustomCSS-$version.min.css" | Add-Content "CustomCSS-$version.css"

  11:   

  12:  #compressing CSS files using Yahoo UI Compressor JAR file

  13:  java -jar ..\JAR\yuicompressor-2.4.8pre.jar "CustomCSS-$version.css" -o "CustomCSS-$version.min.css"

Windows Phone 8 - Application Life Cycle

Today, I am going to explain the application life cycle of Windows Phone 8 application. Like ASP.Net Application life cycle, Windows Phone 8 (WP8) also having application life cycle. It's more or else similar to Android Application life cycle.

Application Life Cycle Flow:

I have explained clearly in the above flow chart on WP8 Application Life Cycle. All the application events will occur in App.xaml file.

Not Running / Idle State:

After installing or closing the application, application is in not running state.

Launching Event and Running State:

When the user open the application, application launching event occurs and application reaches to Running State. 

Deactivating Event and Dormant State:

When user receives the phone call/ opened any other application, deactivating event will occur and reaches to Dormant State. In this state, user won't lose any unsaved date (if user entered something in text box, text will be there when the application backs to running state)

Dormant State and Activating Event:

When user the finishes the phone call or close the previously opened application, application activating event will occur from dormant state. In this case, user can see the entered data.

Tombstone State and Activating Event:

When user opening the multiple application which reaches the max. limit of 6 and opening the 7th application,  1st opened application will move to tombstone state which release all the memory used by 1st application and lose unsaved data. 

When user pressing back key continuously 6 times when they are in 7th application, application activating event  of 1st application will occur and move to Running state from tombstone state.

Closing Event and Not Running State:

When user closes the application, closing event will occur and application moves to Not running state.

As a best practice, user has to save the data while application deactivating event occurs itself if they don't want to lose any data. And also, if user wants to load application wide data, it should be done in Application Launch event.

Window Phone 8 App - Navigation

Today, I am going to explain how to do the navigation between pages and passing data between pages in Windows Phone 8 App. Before getting into application, please install following software's.

1. Visual Studio 2012
2. Windows Phone 8 SDK

Once you have installed the above software's, create the new project of Windows Phone 8 App from the project templates.

Navigation:
         To navigate from one page to another page(XAML), you have to use navigation service. See below code to navigate to Page1.xaml. If your file located in relative path, use Urikind as Relative.

     private void HyperlinkButton_Click_1(object sender, RoutedEventArgs e)  
     {  
       NavigationService.Navigate(new Uri("/Page1.xaml", UriKind.Relative));  
     }  

Go Back:

     To navigate to previous page, you have to use GoBack() method in navigation service.

     private void HyperlinkButton_Click_1(object sender, RoutedEventArgs e)  
     {  
       NavigationService.GoBack();  
     }  

Passing Data between Pages:
         To pass data between pages either you can use QueryString method or Application class. Here I am explaining QueryString method.

Source (Passing as QueryString):
      

     private void Button_Click_1(object sender, RoutedEventArgs e)  
     {  
       NavigationService.Navigate(new Uri("/Page1.xaml?name=" + txtName.Text, UriKind.Relative));  
     }  

Destination (Override the OnNavigatedTo method in PhoneApplicationPage Class):

      protected override void OnNavigatedTo(NavigationEventArgs e)  
     {  
            base.OnNavigatedTo(e);  
        string name = string.Empty;  
        if (NavigationContext.QueryString.TryGetValue("name", out name))  
          txtBox1.Text = name;  
     }  

Screenshots: