This document discusses how JavaScript code would look if Java was written in JavaScript. It provides examples of Java-like classes and methods written in JavaScript. It also discusses JavaScript design patterns like the Module pattern and MVC frameworks. Finally, it covers topics like unit testing JavaScript with Jasmine, SVG vs Canvas for graphs, and libraries like Underscore.js and CSS frameworks.

1. Beautiful JavaScript
Ürgo Ringo

2. If Java was written as JavaScript
public class MyApp {
public static void main(String[] args) {...}
public static void submit(HtmlForm nativeForm) {...}
public static void registerNewProductEventHandler() {...}
public static void newProduct(DomEvent event) {...}
public static void keyUp(HtmlInput input) {...}
public static void addInitialValueStorage(HtmlObject obj)
public static void handleFormChanged(HtmlRow row, DomEvent e)
public static void calculatePrices(DomEvent e) {...}
public static void hide(HtmlRow row) {...}
public static void select(HtmlRow row) {...}
public static void selectRow(HtmlRow row) {...}
public static void handleSelectViewEvent(DomEvent event) {...}
public static void selectView(String id) {...}
public static void showViewColumns(String viewId) {...}
public static void initColumnWidths(String viewId) {...}
public static void setViewLinkSelected(String viewId) {...}
public static boolean isEmpty(String str) {...}
public static String findCurrentView() {...}
public static boolean newProduct(DomEvent event) {...}
}

3. If Java was written as JavaScript (2)
public static void submit(HtmlForm nativeForm) {
String queryString = jQueryUtils.wrap(nativeForm).serialize();
JForm form = jQueryUtils.wrap(nativeForm);
Url url = form.attr("action");
String viewId = findCurrentView();
String oldId = form.attr("id");
jQueryUtils.post(url, queryString, (data) -> {
String id = form.find("input[name='id']").attr("value");
boolean isNew = isEmpty(id);
String newId = jQueryUtils.wrap(data).attr("id");
if (isNew) {
jQueryUtils.wrap("#" + oldId).replace(data);
registerNewProductEventHandler();
showViewColumns(viewId);
registerRowEventHandlers(newId);
}else{
String dataWithCorrectView = jQueryUtils.wrap(data).find("div").each({
if (jQueryUtils.wrap(nativeForm).attr("id").indexOf(viewId) > -1) {
jQueryUtils.wrap(nativeForm).removeClass("hidden");
}
});
jQueryUtils.wrap("#"+oldId).html(dataWithCorrectView);
registerRowEventHandlers(oldId);
}
jQueryUtils("#"+oldId).removeClass("div_table_row_selected");
}).error((data) -> {
if (oldId == "form-new"){
data.setResponseText(data.responseText.replace("form-", oldId));
}
jQueryUtils.wrap("#"+oldId).replace(data.getResponseText());
registerRowEventHandlers(oldId);
showViewColumns(viewId);
selectRow(jQueryUtils.wrap("#" + oldId));
});
return false;
}

4. module pattern
var myModule = (function () {
var myPrivateVar;
// A private counter variable
myPrivateVar = 0;
// A private function which logs any arguments
function myPrivateMethod(foo) {
console.log( foo );
};
return {
// A public variable
myPublicVar: "foo",
// A public function utilizing privates
myPublicFunction: function(bar) {
// Increment our private counter
myPrivateVar++;
// Call our private method using bar
myPrivateMethod(bar);
}
};
})();
http://addyosmani.com/resources/essentialjsdesignpatterns/book/#modulepatternjavascript

5. MVC frameworks
http://todomvc.com/
What we compared

6. simple API
client side templating with binding
controller
ajax stubbing
see http://canjs.us/#why_canjs

7. food-app
https://github.com/ignite/food-app

8. sample Model
foodApp.Meal = can.Model({
healthyLimit : {
carbs : 15,
fats : 20,
proteins : 50
}
}, {
proteins : function() {
var total = 0;
this.products.each(function(el) {
return total += el.proteins;
});
return total;
},
proteinsExceedHealthyLimit : function() {
return this.proteins() > foodApp.Meal.healthyLimit.proteins;
}
});

9. unit testing - jasmine

10. jasmine sample
describe("Meal", function() {
it("calculates macronutrients using added products", function() {
var meal = new foodApp.Meal();
meal.products.push(new foodApp.Product({
carbohydrates : 10,
proteins : 25,
fats : 30
}));
meal.products.push(new foodApp.Product({
carbohydrates : 10,
proteins : 25,
fats : 30
}));
expect(meal.carbohydrates()).toEqual(20);
expect(meal.proteins()).toEqual(50);
expect(meal.fats()).toEqual(60);
});
});

11. SVG vs Canvas for graphs
SVG
http://g.raphaeljs.com/
http://d3js.org/
Canvas
...

12. Other stuff
JSLint, JSHint
Underscore.js
CSS bootstraps

13. use Module pattern
use MVC framework
unit test JavaScript (e.g Jasmine)
use CSS bootstap
use JSHint, JSLint