JavaScript doesn't have to be ugly if it's written in proper style.

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