HTML to PDF in Java - Part 1

Reporting in web can assume multiple formats but the most popular is PDF.PDF report is more often designed as a snapshot of the web page.There are number of Commercial and open source libraries in java for PDF generation.In my coding experience,I came across 2 patterns.

Code Entire Report in Java

When?

If the report is a small i.e a page which contains very limited components.

Pros:
1.Reports can be extracted to a template but format supported is mostly PDF

Cons:
1.Since Code is in Java,changes can't be done on the fly.For every change in PDF code needs to be changed. 
2.Achieving the layout of the components is a herculean task.
3.Reports with huge dataset might take long time and result in timeout.
4.Memory utilization will also be high for large data set.


HTML to PDF in Java

When?

If the report is complex i.e SVG images, charts, tables with huge record set.

Pros:
1.Any Java template engine can be used as all we need is HTML/XHTML.
2.Layout of the report can be changed on the fly.
3.components styles are from the included CSS files. So components in PDF can be customized on the fly.
4.Generation of Reports for Huge data sets is possible.


Cons:
1.HTML/XHTML needs to be well formed and adhere to w3c standards.
2.SVG images are not supported by  the popular PDF rendering libraries.We have to use Apache PDFTranscoder to render the SVG.
3.It is slow for big HTML pages as every element has to be parsed and rendered.

Angular JS - Modules

Controller

The data and logic needed for a particular view is defined inside a controller.The variables and functions are defined in the scope of controller which can be accessed by the view.We can define nested controllers also.Controllers should not contain business logic.Controllers should not hold any data, but only provide references to data in their scopes.

There are 2 ways to create controller mapping,
1.using ng-controller module
2.using router service


Service

Service will handle the data storage and acts as DAO.Controllers can inject the reference to the actual service or mock service in unit testing.

Model

Model Objects are ordinary JavaScript data types and need not be dependant on framework.The models can be bound(i.e) synchronised to the views provided they are defined in the scope of the view.

Routes

Routes map url's with the controller and the template to be rendered.This feature simplifies the forward/backward linking of applications.

$routeProvider is used to define a mapping between a specific template URL and a controller by calling the when() function. The call to the otherwise() function defines a fallback mechanism that applies to all requests that do not match the predefined routes.

Angular JS - Basic Concepts

Model-View-View Model Pattern

AngularJS use extended version of the MVC pattern: the Model-View-ViewModel pattern, or MVVM for short.

Model layer --> application data and externally served via a REST API(Most Common Nowadays)
ViewModel   --> Proxy layer that converts business data into display data i.e data transformation
View --> Display layer i.e user interaction

Data Binding - Bi-Directional & Scope

Two way data binding is an integral part of Angular JS and based on scopes. A scope consists of the set of all variables and functions that are defined in a particular context(i.e) specific part of the DOM.AngularJS support two-way data binding only for variables or functions that are defined in a scope.The framework creates a root scope for an application. There can be multiple scopes defined and they can inherit from each other through prototypes and  form a hierarchy.

In Plain words,If Scope Y is inherited from Scope X, the context of Scope Y not only can you access the variables and functions defined in Y, but also the variables and functions defined in X and can be overridden.

IOC

Following the Spring IOC & Dependency Injection pattern, Angular JS brings those to client side.IOC - means your component need not worry about the dependencies instead the framework will resolve it. If you have no hard-coded dependencies anymore within an application component and have passed the responsibility of resolving dependencies to the environment, in the testing phase you can tell the framework to inject a mock object instead of an actual object.

End-to-End Testing

AngularJS has in built patterns for testing all its modules - Controllers,directives.Plus the IOC capability enhances the opportunity to provide mock implementation.

Online Javascript Editors

Javascript Code contributes to major chunk of Front End applications today.Running the application server and deploying the application is time consuming and Often not needed, for testing JavaScript/CSS changes.
A Standalone editor where we can test the HTML with Jacascript/CSS code will fit the need.Some of the online editors which i have personally used are

1.jsFiddle
2.plunker

jsFiddle:

JSFiddle allows me to quickly share an single example of some working code, mainly a jQuery snippet.
Put the HTML in the HTML area, the CSS in the CSS area, and the JavaScript in the JavaScript area
Press Run and see if the result is demonstrating the problem, adjust as needed to make the problem very clear.

Plunkr

Talking from own experience, I find that Plunkr allows me to describe a larger example of functional Angular.js code than JSFiddle.  It also gives me better feedback and real-time previews as I type. 


Plunkr allows creating an arbitrary number of files, while JSFiddle restrict you to one HTML + one CSS + one JS. Plunkr also allows downloading the project as a ZIP.

It's a way to support an angular project: plunkr is written entirely in AngularJS!
   

Refresh the Browser Cache with Spring

Even in this ever evolving world of open source technologies, we often get into situation where we can't get simple things working.One such problem which developer face is 'Refreshing the browser cache to reload the JS and CSS'.It looks horrible when your website loads the new data without your UI changes and you have to convince your client to hit F5 in the browser.Sad thing is each browser has its own way of reloading the cache and as a poor developer, you have to find out that too!

Lets talk about the solution. As most of Java applications use Spring MVC for front end, we will dig into Spring to knock out this behavior.

In development environment, Straight forward. I can say to browser, don’t cache stuff.  But In an actual production system, you’ll want to be a little more specific about what you want cached and not cached.

So how do we control the browser?We have to spoof the location of the resource and trick the browser into thinking it’s a brand new file – obviously not cached. Spring handles it quite nicely and i would recommend it for hassle free implementation.

Spring resource mapping can be used like this,

<mvc:resources location="/app/js/, classpath:/js/" mapping="/app/js-5.4.3.2/**"/>

For all requests that come in that have the URL pattern /js followed by anything, look for the resource in folder named app/js in the web root or in a jar on the classpath.
Now, When a web browser requests a resource called /js-5.4.3.2/app.js will serve the app.js file from the same old location but since the browser doesn’t know that, it must download the app.js file regardless of whether or not a previous version was cached.

Now how can we make this mapping version dymanic. Spring SPEL comes into picture here.

<util:properties id='versionProperties' location='classpath:app.properties'/>

 <context:property-placeholder properties-ref="versionProperties"/>

 <mvc:resources location="/app/js/, classpath:/js/" mapping="/app/js-${app.label}/**"/>

Since your app label will change every time you migrate to production, the above code will instruct the browser to reload its cache.

Client Side Templates Comparision(Hadlebars vs. Hogan vs. Mustache vs. jsRender vs Dust vs Underscore)

Why I started?

All the applications I worked were built on top of JSP and Portal.To gain rapid response time of Web and to meet the desire for front-end technologies, Freemarker replaced JSP stack.As a result, we support JSP/Freemarker applications.

It seemed like we had the best of both worlds for a while, but we gradually realized how difficult it had become to write reusable front-end features.Each tech stack used a different strategy to render pages. This made it very difficult to share UI code.

Why to Use Templating?

Migrating all of our apps onto a single tech stack would've been a very expensive and time consuming project. Instead, we began to explore a unified rendering layer : client-side templates.

It is both more maintainable and more developer friendly to extract the structure within a template of some sort and leave logic to JavaScript

Instead of using a JSP/Freemarker to assemble a page server side and send back HTML, I had the server send back just the dynamic data as JSON and have the page assembled in the browser using a static client-side template served from a CDN.

Moving the view logic to the browser meant that our different tech-stacks could share UI code:

Picking a templating technology

The open source community has created a huge number of client-side templating solutions. When i did my initial research, I came up with a list of 6 templating technologies.

Below are criteria I used for shortlisting

Size of the JavaScript - compressed
Speed of Execution across browsers
Cross browser compatibility
Active Updates to Project
Precompile Templates on Startup
Compatibility with Node.js
Can be used with Plain JavaScript and Other JS frameworks.
Faster in Mobile platform with Response Web design

The Candidates

Mustache
Hogan
jsRender
dust
template
underscore

The Test
To pick between the 6 templating options, I created sample code from each framework to render JSON data as HTML with static template.I chose jsperf.com to create the benchmark

The JavaScript snippets were run across the browsers to test the expected features.

Result

http://jsperf.com/hadlebars-vs-hogan-vs-mustache/49

Hogan came out as the best bet for our needs
It performed faster across all the browsers , particularly Mobile devices.
It is comparatively Slower than underscore.js in IE. But underscore’s performance in Mobile and modern browsers is not up to the mark.
Hogan has separate scanning, parsing and code generation phases.
Performance increased when the templates are precompiled.
Hogan is used by Twitter for 3 reasons - good performance, standalone template objects, and a parser API.