Jazoon 2013 – STJS: Managing JavaScript application complexity

24. October, 2013

Jazoon 2013 badgeThe talk “STJS: Managing JavaScript application complexity” by Alexandru Craciun (LinkedIn) and Nicolas Piguet (LinkedIn) focused on one of the major pains with JavaScript: It’s easy to get started, you have can quickly build a useful app which then just as rapidly turns into a maintenance nightmare (slides).

They used ST-JS as a tool to reign the dragon.

In a nutshell, ST-JS is a tool that parses Java code and converts it into JavaScript.

What ST-JS isn’t: It’s not GWT (see the FAQ). The code can be edited in your IDE, it compiles but it doesn’t run directly. The Java code is just used to allow you to write type-safe code using all the amenities of a modern Java IDE to write JavaScript. But if you want, you can implement so parts – think about sharing POJOs between your Java code and the script in the browser.

This works by writing thin wrappers (usually just a bunch of Java interfaces) to simulate the API layer of a JavaScript framework like jQuery. This code is called a bridge, here is a list of already available ones. You can then write code using code-completion, JavaDoc popups and type safety. You can apply tools like PMD, FindBugs, SonarQube (formerly Sonar), dead code analysis, …

The tool will then convert this code into JavaScript. A standard JUnit runner can now execute it by opening a browser window or simulating one using env-js and Rhino.

The output of the tool is plain JavaScript. To run it, you just need to include stjs.js which you can serve statically from your server.

As I see it, this project has the following benefits over anything else I’ve seen so far:

  • Full support from your Java IDE – Code completion, refactoring, type/JavaDoc popups, jump-to-definition, …
  • You can split the JavaScript mess easily into classes and packages
  • Not intrusive, low complexity
  • Easy to build bridges to other JavaScript frameworks
  • Allows to share POJOs between Java and JavaScript

Learning JavaScript Design Patterns by Addy Osmani

6. September, 2013

Learning JavaScript Design Patterns” is a free eBook (also available in print via O’Reilly Media) by Addy Osmani which explains how to apply various design patterns to JavaScript.

It’s not only a great resource to improve your JavaScript skills or an easily understandable refresher of design patterns (if you didn’t understand the C/C++ or Java versions, this is the place to go!).

It also lists some of the latest patterns that you might have missed like the MVVM pattern.

Last but not least, it can serve as a test for huge HTML pages 😉

Logging From JavaScript

24. November, 2011

Logging is a recurring issue in JavaScript. There are a  couple of frameworks which support you. I’ve picked out two:

Some pros and cons:

log4javascript is very powerful. It contains lots of options, it has timers, several appenders (in page or using a popup window), the console supports tons of filters. If you know log4j, you’ll find almost everything replicated. If you need fewer options, there is even a lite version.

Despite the many options, log4javascript is still simple to set up and use (so it’s not like log4j in every respect). The default setup needs 3 lines of code (not counting the script element to load the framework).

There are two minor points: The console is pretty big and the in-page version can’t be moved.

Blackbird is a really small logging framework. No frills, just the basics. So no exception logging, for example. A profiling option is the most complex feature. In the world of the logging frameworks, it’s the iPhone: Nice look and only the useful features. The console is always in page, it sits in one of the four browser corners, it can be hidden and shown with F2.

My main complaint about Blackbird is that you can’t use the mouse to move the console. Also disabling the framework needs several lines of code. A single variable would have been more comfortable.


Raphaël – Impressive Vector Graphics Framework for JavaScript

2. November, 2011

If you need a framework for vector graphics, try Raphaël.

MIT License, impressive demos, readable source code.

HTML5 Boilerplate

18. August, 2011

There is a lot which you can do wrong when starting a new web site from scratch. The HTML5 Boilerplate project tries to help you there.

It contains a sane project layout, many useful JavaScript libraries, a default CSS that will make your page look the same on (almost) any device and smart CSS selectors that allow you to work around problems with browsers and devices which don’t behave well (small screen, IE6 bugs, no JavaScript enabled, you name it).

JavaScript Inheritance

17. August, 2011

Here is a comprehensive list of ways to support inheritance in JavaScript.

JSON Visualization

20. June, 2011

If you have some JSON (possibly broken) and need to know how the browser sees it: JSON Visualization