Tuesday, December 13, 2016

React JS Kickstart using npm and Webpack

What is React JS?

React JS is an not another javascript framework but its just a library to create user interfaces. React JS is "V" in MVC pattern. React JS is used in building components and not the templates. React JS uses virtual DOM making it faster compared to other javascript libraries.
React along with JSX makes it easier and faster developement.

What is JSX?

JSX stands for Javascript XML. JSX is not an template language its an XML based syntax sugar for Javascript.

What is npm?

npm stands for Node Package Manager and it makes it easy for the javascript developer to share and reuse the code. 
npm is bundled with Node JS and you can download the same from here

What is Webpack?

Webpack is an bundler for modules (The main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.)

 npm install webpack --save-dev

What is browserify?

Browserify will recursively analyze all the require() calls in your app in order to build a bundle you can serve up to the browser in a single <script> tag


FreeMarker Template Language (FTL)

Introduction to FTL

Freemarker template Language is an engine built using Java language. You can use FTL to generate any kind of files for example - you can generate HTML, Javascripts, Java (yes you can generate java programs as well), PDF etc., (sky is the limit here).
There are multiple template engines available in the market. This blog doesn't give any comparison of the template languages, rather it focuses mainly on the FTL.

How does FTL work?

Its simple, the below diagram is an self explanatory of how the FTL works.

How do I implement a Hello World example?

Step 1 : Download the latest freemarker jar here
Step 2 : Create java project and add this jar in the build path
Step 3 : Write a template file
Step 4 : Write Java program to process the template file

<!-- HelloWorld.ftl -->
<html>
 <h1>${welcomeMsg}</h1>
</html>
// Java Program
public class FreemarkerHelloWorld {

 public static void main(String[] args) {
  Configuration config = new Configuration(Configuration.VERSION_2_3_25);
  try {
   config.setDirectoryForTemplateLoading(new File("./src/templates/"));
   Template template = config.getTemplate("HelloWorld.ftl");
   Writer file = new FileWriter(new File("HelloWorld.html"));
   Map<String, String> model = new HashMap<String, String>();
   model.put("welcomeMsg", "Hello World !!");
   template.process(model, file);
   file.flush();
   file.close();
   System.out.println("File generated");
  } catch (Exception e) {
   // Handling the exceptions generically. Should be handled as per the
   // actual exceptions
   e.printStackTrace();
  }

 }
}
on executing the above code html file gets generated as below. Bingo !!!!

<html>
 <h1>Hello World !!</h1>
</html>

Well, How do I display list of data?

Its simple again, we need to enhance our model to hold list data. Let's take an example and see how we can do this.

<!-- ListDemo.ftl -->
<html>
 <h1> ${welcomeMsg} </h1>
 <body>
  <p>Names are : </p>
  <ul>  
   <#list names as name>
    <li>${name}</li>
   </#list>
  </ul>
 </body>
</html>
public class FreemarkerListDemo {
 public static void main(String[] args) {
  Configuration config = new Configuration(Configuration.VERSION_2_3_25);
  try {
   config.setDirectoryForTemplateLoading(new File("./src/templates/"));
   Template template = config.getTemplate("ListDemo.ftl");
   Writer file = new FileWriter(new File("ListDemo.html"));
   Map<String, Object> model = new HashMap<String, Object>();
   model.put("welcomeMsg", "Hello World !!");
   List<String> names = new ArrayList<>();
   names.add("Steve");
   names.add("John");
   names.add("Adam");
   model.put("names", names);
   template.process(model, file);
   file.flush();
   file.close();
   System.out.println("File generated");
  } catch (Exception e) {
   // Handling the exceptions generically. Should be handled as per the
   // actual exceptions
   e.printStackTrace();
  }

 }
}
Generated File :

<!-- ListDemo.ftl -->
<html>
 <h1> Hello World !! </h1>
 <body>
  <p>Names are : </p>
  <ul>  
    <li>Steve</li>
    <li>John</li>
    <li>Adam</li>
  </ul>
 </body>
</html>

Can I conditionally display data?

Yes, off-course. The below example displays name which contains Adam in it.

<!-- ListDemoWithConditions.ftl -->
<html>
 <h1> ${welcomeMsg} </h1>
 <body>
  <p>Names are : </p>
  <ul>  
   <#list names as name>
    <!-- Check if name contains Adam-->
    <#if name?contains("Adam")>
     <li>${name}</li>
    </#if>
   </#list>
  </ul>
 </body>
</html>

Thursday, October 11, 2012

Migrating Dojo 1.6 to 1.7 or higher

Prerequisites : You must be familiar with Dojo 1.6 or older versions of Dojo

Whats new in Dojo 1.7?


Dojo 1.7 provides substantial improvements for building desktop and mobile apps using open web technologies. 

Here i list out few major improvements that were made to Dojo 1.7 :
  • AMD (Asynchronous Module Definition) makes use of require() and define() methods to load and define the module(s) asynchronously unlike in Dojo 1.6 which used dojo.require() and dojo.provide() to load and define the module(s) which was synchronous.