Beautiful JavaScript      Ürgo Ringo
If Java was written as JavaScript public class MyApp {     public   static   void main(String[] args) {...}     public   s...
If Java was written as JavaScript (2)public static void submit(HtmlForm nativeForm) {  String queryString = jQueryUtils.wr...
module patternvar myModule = (function () { var myPrivateVar; // A private counter variable myPrivateVar = 0; // A private...
MVC frameworkshttp://todomvc.com/             What we compared
simple APIclient side templating with bindingcontrollerajax stubbingsee http://canjs.us/#why_canjs
food-apphttps://github.com/ignite/food-app
sample ModelfoodApp.Meal = can.Model({     healthyLimit : {         carbs : 15,         fats : 20,         proteins : 50  ...
unit testing - jasmine
jasmine sampledescribe("Meal", function() {      it("calculates macronutrients using added products", function() {        ...
SVG vs Canvas for graphsSVGhttp://g.raphaeljs.com/http://d3js.org/Canvas...
Other stuffJSLint, JSHintUnderscore.jsCSS bootstraps
use Module patternuse MVC frameworkunit test JavaScript (e.g Jasmine)use CSS bootstapuse JSHint, JSLint
Upcoming SlideShare
Loading in...5
×

Beautiful java script

889

Published on

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
889
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
7
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Beautiful java script

  1. 1. Beautiful JavaScript Ürgo Ringo
  2. 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. 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. 4. module patternvar 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. 5. MVC frameworkshttp://todomvc.com/ What we compared
  6. 6. simple APIclient side templating with bindingcontrollerajax stubbingsee http://canjs.us/#why_canjs
  7. 7. food-apphttps://github.com/ignite/food-app
  8. 8. sample ModelfoodApp.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. 9. unit testing - jasmine
  10. 10. jasmine sampledescribe("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. 11. SVG vs Canvas for graphsSVGhttp://g.raphaeljs.com/http://d3js.org/Canvas...
  12. 12. Other stuffJSLint, JSHintUnderscore.jsCSS bootstraps
  13. 13. use Module patternuse MVC frameworkunit test JavaScript (e.g Jasmine)use CSS bootstapuse JSHint, JSLint
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×