Beautiful java script
1 like•1,126 views
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.
![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) {...}
}](https://image.slidesharecdn.com/beautifuljavascript-121031051856-phpapp01/85/Beautiful-java-script-2-320.jpg)
![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;
}](https://image.slidesharecdn.com/beautifuljavascript-121031051856-phpapp01/85/Beautiful-java-script-3-320.jpg)
Beautiful java script
- 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
- 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