Skip to content
accelerando

Tag Archives: JavaScript

Developing a web application with Spring Boot, AngularJS and Java 8

20-Feb-14

And if you’re feeling
You’ve got everything you came for
If you got everything
And you don’t want no more

You’ve got to just
Keep on pushing
Keep on pushing
Push the sky away

“Push The Sky Away” by Nick Cave & The Bad Seeds.

This is gonna be a lengthy post about always learning new things and improving old ones.

This is gonna be the 1st post of a series about learning new things and creating a modern Java application from start. In the first part I’m gonna write about the idea, the tools and the project itself.

All posts

  1. Part 1: Boot your application with Spring Boot
  2. Part 2: Using Java 8 .now()
  3. Part 3: Messaging and Websockets with Spring 4
  4. Part 4: Spring Boot as a backend for AngularJS
  5. Bonus: Creating a JavaFX 8 frontend for a REST application

The idea and purpose of this thing

I had several reasons to create a project with well defined goals and requirements the way it should be.

The last weeks i had often discussions with current and possible future customers about the number or the price of my hours and i tried to tell them, that neither the price was too high or the number of estimated hours, especially the later, far from. I needed a reasonable sized and manageable project to prove this.

I also need to convince my colleges that near 100% test coverage and that database testing is possible and i also need to demonstrate that today a “one-guy-does-the-whole-stack” thing is nearly impossible if you don’t want to not sleep like me for about 2 weeks (or you’re just crazy about this stuff (also like me)).

And the most important reason for me is to learn something new, in this case learn about the new features in the upcoming release of Java 8.

Choosing the tools of the trade

Since 2010/11 i had real fun migration my daily picture project Daily Fratze from Ruby on Rails to Java, using the great Spring framework, so the first ingredient will be Spring but with it’s latest incarnation, Spring Boot: “Spring Boot favors convention over configuration and is designed to get you up and running as quickly as possible.”.

Certainly a new app will be written using Java 8. Just have a look at this post “Everything about Java 8″ if you need reasons.

I need a database and i’m still a huge fan of relational databases and so i need some JPA 2.1. To make my life easier, i chose Spring Data JPA together with a little embedded H2 Database.

And finally AngularJS. I’m a little bit old school, i like my html pages server generated but i wanted to know what all the cool kids are doing and learn something fresh. Also, i thought it would be useful in the goal of designing a nice api.

Putting it all together with: NetBeans. I’m an Eclipse user since about 2002 and it’s hard to teach an old dog new tricks, but Eclipse has no Java 8 support. The alternative, IntelliJ didn’t really click with my. It incredible slow on an 2012 iMac with 16Gb Ram, doesn’t feel right to me and has some things i really hate (for example, what’s with those xml files that are created for every maven dependency?) so i thought why not given NetBeans another try.

I remember NetBeans being slow (and ugly), but 7.4 just proved me wrong. It’s fast and snappy and as i mentioned, it’s Maven support just outstanding, namely: It just works. Just 2 additional config files in a Maven project and that’s it. All the pain i had to go through to make Eclipse m2e work with generated source file, assisted JPA classes and aspects: It just worked in NetBeans. Awesome.

The project

Simple, recreating my Ruby / Sinatra based biking application: biking.michael-simons.eu. The original application is a very condensed Ruby script, which worked very well, but it’s not very maintainable.

So goto biking.michael-simons.eu and have a look. The thing is live and runs on the Java 8 release candidate. The source code is available at GitHub.

I’d be more than happy about comments, recommendations and ideas.

How to fix jQuery UIs autocomplete width

02-May-13

I recently noticed that the combobox item on an jQuery UI autocomplete grows way beyond the textfield input which is kinda ugly.

This is how i fix it (that is, make it as width as the input item):

$.extend($.ui.autocomplete.prototype.options, {
	open: function(event, ui) {
		$(this).autocomplete("widget").css({
            "width": ($(this).width() + "px")
        });
    }
});

This code applies it to every autocomplete.

Add touch support to jQuery FancyBox 1.3.4

12-Dec-12

I’m using jQuery FancyBox on dailyfratze.de. I still use version 1.3.4 which is released under MIT and GPL license, if i remember correctly version 2 has not been always available under an open license but i’m maybe wrong. But nevertheless, version 2 also lacks touch support like 1.3.4 does.

This can be changed if you’re using Modernizr for detecting HTML5 and CSS3 features and also very small jQuery Touchwipe Plugin (there maybe more feature rich plugins but for the given goal, this is enough).

The change is pretty simple and the core of it is:

if(Modernizr.touch)
	content.touchwipe({
	     wipeLeft: function() { $.fancybox.next(); },
	     wipeRight: function() { $.fancybox.prev() },		     
	     min_move_x: 20,
	     min_move_y: 20,
	     preventDefaultEvents: true
	});

On wipe left show the next picture in a gallery, on wipe right the previous. There’s some more to disable the default click handlers, but i don’t want to bore you.

Here is a version of FancyBox already patched: jquery.fancybox-1.3.4.with_touch_support.js and here is a unified patch: jquery.fancybox-1.3.4.touch_support.patch.

Don’t forget to include modernizr with touch event support and jquery-touchwipe. To see how it works, visit dailyfratze.de and touch one of the the little magnifiers.

Optimizing web resources with wro4j, Spring and ehcache

18-Jan-12

I think that almost no website today can do without JavaScript. There are some incredible good JavaScript libraries like jQuery for which an enormous mass of plugins and extensions exits.

The downside of this is, that for example the JavaScript code of my daily picture project Daily Fratze is bigger than the whole startpage of my first “homepage” was.

With every problem there is a solution, namely JavaScript compressors and minifier. Those tools can compress the code by removing superfluous whitespaces, renaming variables and functions or even by optimizing the code.

So far i have used the YUI compressor maven mojo in my Spring based projects. This is a build time solution that compresses JavaScript and CSS files when creating a war file.

For me it had several disadvantages: I don’t see the effect of compressing when i develop my application and it could not concatenate multiple script files.

The later is important because every additional request a browser makes slows down the loading of a webpage. And manual hacking all JavaScript into one file? No way…

wro4j to the rescue:

Free and Open Source Java project which brings together almost all the modern web tools: JsHint, CssLint, JsMin, Google Closure compressor, YUI Compressor, UglifyJs, Dojo Shrinksafe, Css Variables Support, JSON Compression, Less, Sass, CoffeeScript and much more. In the same time, the aim is to keep it as simple as possible and as extensible as possible in order to be easily adapted to application specific needs.

My goal was to integrate wro4j with Spring and ehcache with a minimum number of additional configuration files.

If you’re interested in some of my ideas, read on:

More…

Server push, jquery atmosphere and the throbber of doom

03-Feb-11

I’m using the Atmosphere framework to implement server push (a.k.a. Comet) in a Spring 3 application.

Atmosphere includes a fine jQuery plugin to handle the client side code. The plugin works quite well and Jean-Francois, the author, has a good tutorial in his blog: Using Atmosphere’s JQuery Plug In to build applications supporting both Websocket and Comet.

The code works but causes webkit browsers (Chrome and Safari) to show the throbber (that little spinning thingy in tab or address bar). In iOS browsers that loading progress bar will not disappear.

I found some suggestions to get rid of the “throbber of doom” but none of them worked for me.

So here is my solution which is tested with jQuery 1.4.2 and jQuery.atmosphere 0.6.3:

<script>  	
	// See https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/bind
	if(!Function.prototype.bind) {
		Function.prototype.bind = function( obj ) {
			var slice = [].slice,
			args = slice.call(arguments, 1), 
			self = this, 
			nop = function () {}, 
			bound = function () {
				return self.apply( this instanceof nop ? this : ( obj || {} ), args.concat( slice.call(arguments) ) );    
			};
 
			nop.prototype = self.prototype;
			bound.prototype = new nop();
			return bound;
		};
	}
 
	var subscribe = function() {		 	
		$.atmosphere.subscribe(
			'/subscription/url',
			function(response) {				
				$('body').append(response.responseBody + '<br>');						
			},
			$.atmosphere.request = {								
				transport: 'websocket',
				fallbackTransport : 'long-polling'
			}
		);
	};
 
	$(window).load(function() {				
		setTimeout(subscribe.bind(document),500);
	});
</script>

The trick is: Wait for the whole page to be loaded (including all resources) by using $(window).load instead of $(document).ready. Then set a timeout to your subscription function. The timeout will change the execution context of the function to the global object (in most cases window). This needs to be corrected to the document for the atmosphere jQuery plugin to work. Here comes bind() to the rescue. This is a Javascript 1.8.5 function and it is not available in all browsers (see bind) and therefore added to the prototype.

So far i’ve tested this in Firefox 3.6, Chrome 8, Safari 5 and Internet Explorer 8 and had no problems.