Beautiful java script
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Beautiful java script

on

  • 1,039 views

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

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

Statistics

Views

Total Views
1,039
Views on SlideShare
1,038
Embed Views
1

Actions

Likes
1
Downloads
6
Comments
0

1 Embed 1

http://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Beautiful java script Presentation Transcript

  • 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 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. MVC frameworkshttp://todomvc.com/ What we compared
  • 6. simple APIclient side templating with bindingcontrollerajax stubbingsee http://canjs.us/#why_canjs
  • 7. food-apphttps://github.com/ignite/food-app
  • 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. unit testing - jasmine
  • 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. SVG vs Canvas for graphsSVGhttp://g.raphaeljs.com/http://d3js.org/Canvas...
  • 12. Other stuffJSLint, JSHintUnderscore.jsCSS bootstraps
  • 13. use Module patternuse MVC frameworkunit test JavaScript (e.g Jasmine)use CSS bootstapuse JSHint, JSLint