JavaScript Beyond jQuery (Jfokus 2013)

  • 1,314 views
Uploaded on

A presentation on the programming language JavaScript. It covers types, object orientation, variables and scope, closures, the Crockford Module Pattern, loading and executing, imports and namespacing, …

A presentation on the programming language JavaScript. It covers types, object orientation, variables and scope, closures, the Crockford Module Pattern, loading and executing, imports and namespacing, and more. The language features are compared to Java throughout the slides.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,314
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
21
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. JavaScript Beyond jQuery John Wilander @johnwilander
  • 2. shouldilearnjavascript.com @johnwilander
  • 3. Part 1: Typing @johnwilander
  • 4. Java TypesPrimitive:byte, short, int, long, float, double,boolean, charThe rest is objects, so called reference typesJavaScript Primitive: string, number, boolean, function, undefined The rest is object @johnwilander
  • 5. Java TypesPrimitive:byte, short, int, long, float, double,boolean, charJavaScript Primitive: string, number, boolean, function, undefined @johnwilander
  • 6. Java TypesPrimitive:byte, short, int, long, float, double,boolean, charnot Strings are general objects, theyre a typeJavaScript Primitive: string, number, boolean, function, undefined @johnwilander
  • 7. Java TypesPrimitive:Only one typebyte, for numbers, i.e. long, float, double, short, int, no differenceboolean, char between integers or decimalsJavaScript Primitive: string, number, boolean, function, undefined @johnwilander
  • 8. Java TypesPrimitive:byte, short, int, long, float, double,boolean, char Functions are full objects with their own typeJavaScript Primitive: string, number, boolean, function, undefined @johnwilander
  • 9. Java TypesPrimitive:byte, short, int, long, float, double, JavaScriptsboolean, char version of uninitialized isJavaScript undefined Primitive: string, number, boolean, function, undefined @johnwilander
  • 10. Java Static vs Dynamic TypingStatic typing:String name; Variables have typesname = ”John”; Values have typesname = 34; Variables cannot change typeJavaScript Dynamic typing: var name; Variables have no types name = ”John”; Values have types name = 34; Variables change type dynamically @johnwilander
  • 11. Dynamic TypingJavaScript var name = ”John”; Variables have Values have types no types @johnwilander
  • 12. Strong vs Weak Typing @johnwilander
  • 13. Strong vs Weak Typing Strong !== good Weak !== bad @johnwilander
  • 14. Java Strong vs Weak Typingint intVar = 4; Pretty strong typing"" + intVar; Implicit type conversionintVar + 0.0; Implicit, widening type conv.intVar + (int)0.0; Explicit type conversionintVar + null; Not allowedJavaScript var dynVar = 4; Very weak typing dynVar + ""; Implicit type conversion dynVar + null; Implicit type conversion dynVar + []; Implicit type conversion dynVar + [0]; Implicit type conversion @johnwilander
  • 15. Type Safe ≈no type errors at runtime @johnwilander
  • 16. Johns Conclusion Java is a statically, strongly typed language with decent type safetyJavaScript is a dynamically, weakly typed language with decent type safety @johnwilander
  • 17. Object Orientation @johnwilander
  • 18. Java: Classes & Objects Object Class Object ExecutingSource Object code Class Singleton @johnwilander
  • 19. JavaScript: Functions, Object & Prototypes Object Prototype Object ExecutingSource Object code Function Function @johnwilander
  • 20. JavaScript: Functions, Object & Prototypes Object Prototype Object ExecutingSource Object code Function Anonymous closures Function Modules @johnwilander
  • 21. Keywords in JavaScript Statistics from: jQuery jQuery.Mobile Prototype Ext JS MooTools Backbone Underscore http://ariya.ofilabs.com/2012/03/most-popular-javascript-keywords.html @johnwilander
  • 22. Keywords in JavaScript Functions, functions, functions Seldom new Almost never classes as types @johnwilander
  • 23. Java: Extension by Inheritance Subclass extends Super class @johnwilander
  • 24. Java: Subtyping by Inheritance Super type extends Subtype @johnwilander
  • 25. Through inheritance Java classes get larger in terms of functions andsmaller in terms of type (more specific) @johnwilander
  • 26. In JavaScript extension and subtypingare separate things @johnwilander
  • 27. Why do we want to subtype?Because we think in terms of static typing and is-a-relations @johnwilander
  • 28. Static Typing and SubtypingJava public void doPurchase(Item item) Accepts Item or subtypes to Item @johnwilander
  • 29. Dynamic TypingJavaScript public void doPurchase(Item item) @johnwilander
  • 30. Dynamic TypingJavaScript public void doPurchase(Item item) @johnwilander
  • 31. Dynamic TypingJavaScript public void doPurchase(Item item) @johnwilander
  • 32. Dynamic TypingJavaScript public void doPurchase(Item item) @johnwilander
  • 33. Dynamic TypingJavaScript function doPurchase(item)__ Accepts anything ... or nothing @johnwilander
  • 34. Dynamic TypingJavaScript function doPurchase(item)__ Can return anything ... or nothing @johnwilander
  • 35. Part 2: To start aJavaScript program @johnwilander
  • 36. <html> JavaScript and Web<head> <script src=”js/main.js”></script> <script> var JW = {}; // More code </script></head><body> <button onclick="document.getElementById(field2).value=document.getElementById(field1).value">Copy text</button> <div> Some information </div> <script> JW.calcPrice = function(price, vat) { //… }; </script> <script src=”http://3rdparty.com/trackUsers.js”></script></body></html> @johnwilander
  • 37. JavaScript and Web<html><head> Script from file in <head> <script src=”js/main.js”></script> Synchronous loading and <script> var JW = {}; execution // More code </script></head><body> <button onclick="document.getElementById(field2).value=document.getElementById(field1).value">Copy text</button> <div> Some information </div> <script> JW.calcPrice = function(price, vat) { //… }; </script> <script src=”http://3rdparty.com/trackUsers.js”></script></body></html> @johnwilander
  • 38. <html> JavaScript and Web<head> <script src=”js/main.js”></script> Inlined script in <head> <script> var JW = {}; Synchronous execution // More code </script> before DOM is loaded</head><body> <button onclick="document.getElementById(field2).value=document.getElementById(field1).value">Copy text</button> <div> Some information </div> <script> JW.calcPrice = function(price, vat) { //… }; </script> <script src=”http://3rdparty.com/trackUsers.js”></script></body></html> @johnwilander
  • 39. <html> JavaScript and Web<head> <script src=”js/main.js”></script> <script> var JW = {}; // More code </script> Script directly in HTML,</head><body> executed on click event <button onclick="document.getElementById(field2).value=document.getElementById(field1).value">Copy text</button> <div> Some information </div> <script> JW.calcPrice = function(price, vat) { //… }; </script> <script src=”http://3rdparty.com/trackUsers.js”></script></body></html> @johnwilander
  • 40. <html> JavaScript and Web<head> <script src=”js/main.js”></script> <script> var JW = {}; // More code </script></head><body> <button onclick="document.getElementById(field2).value= Inlined script in <body>document.getElementById(field1).value">Copy text</button> <div> Some information Executed when the </div> <script> parser gets here JW.calcPrice = function(price, vat) { //… }; </script> <script src=”http://3rdparty.com/trackUsers.js”></script></body></html> @johnwilander
  • 41. <html> JavaScript and Web<head> <script src=”js/main.js”></script> <script> var JW = {}; // More code </script></head><body> <button onclick="document.getElementById(field2).value=document.getElementById(field1).value">Copy text</button> <div> Some information Script from file in <body> </div> <script> Loaded and executed synchronously JW.calcPrice = function(price, vat) { //… }; </script> <script src=”http://3rdparty.com/trackUsers.js”></script></body></html> @johnwilander
  • 42. Good Practice:1. All JavaScript on file.2. All statically loadedJavaScript in one block. @johnwilander
  • 43. Dynamic Loading(function(){ var oldFirstScript = document.getElementsByTagName(script)[0]; newScript = document.createElement(script), newScript.async = true; newScript.src = js/script.js; oldFirstScript.parentNode.insertBefore( newScript, oldFirstScript);}()); @johnwilander
  • 44. OK, thats loading.But I want to start. @johnwilander
  • 45. Java In the Beginningpublic static void main(String[] args)JavaScript (function(){}()); window.someGlobalFunction(); @johnwilander
  • 46. Self-Invoking FunctionsAnonymous, self-invoking with parameter(function(me) { // Code}(John));Anonymous, self-invoking without parameter(function() { // Code}()); @johnwilander
  • 47. Part 4: Variables @johnwilander
  • 48. JavaScript Scope var GLOB = {}; GLOB.func = function(array) { var local = …; … for (var i=0; i<array.length; i++){ … var temp = array[i]; } }; @johnwilander
  • 49. JavaScript Scope var GLOB = {}; GLOB.func = function(array) { var local = …, i, temp; … for (i=0; i<array.length; i++){ … temp = array[i]; } }; @johnwilander
  • 50. JavaScript Scope var GLOB = {}; GLOB.func = function(array) { var local = …, i, temp; … for (i=0; There are only two variable scopes: i<array.length; i++){ … Global or local function scope. temp = array[i]; } All local variables are hoisted to }; the top of the function. @johnwilander
  • 51. JavaScript Closure (function(array) { var i, temp; … for (i=0; i<array.length; i++){ … temp = array[i]; } }([1, 2, 3])); @johnwilander
  • 52. JavaScript Closure (function(array) { var i, temp; … for (i=0; i<array.length; i++){ … temp =Aarray[i]; its scope and its closure keeps } context during its life span. }([1, 2, 3])); A reference ending up inside the closure (array above) will keep its value inside the closure. @johnwilander
  • 53. JavaScript Closure Pitfall for(i=0; i<pages.length; i++) { var page = pages[i]; pageElement.load(page.url, function() { launchForm(page.form); }); } @johnwilander
  • 54. JavaScript Closure Pitfall for(i=0; i<pages.length; i++) { var page = pages[i]; pageElement.load(page.url, function() { launchForm(page.form); }); Callback function since } pageElement.load() is asynchronous @johnwilander
  • 55. JavaScript Closure Pitfall for(i=0; i<pages.length; i++) { var page = pages[i]; pageElement.load(page.url, function() { page is hoisted and thus gets launchForm(page.form); }); a new value for each iteration } @johnwilander
  • 56. JavaScript Closure Pitfall var page; for(i=0; i<pages.length; i++) { page = pages[i]; pageElement.load(page.url, page is hoisted and thus gets function() { launchForm(page.form);iteration a new value for each }); } @johnwilander
  • 57. JavaScript Closure Pitfall var page; for(i=0; i<pages.length; i++) { page = pages[i]; pageElement.load(page.url, function() { launchForm(page.form); }); When the callback is run page } will refer to pages[pages.length-1] or at least another value than intended. @johnwilander
  • 58. JavaScript Closure Pitfall var page; for(i=0; i<pages.length; i++) { page = pages[i]; pageElement.load(page.url, function() { launchForm(page.form); }); } @johnwilander
  • 59. Making Use of ClosuresJavaScript var page; for(i=0; i<pages.length; i++) { page = pages[i]; (function(page) { pageElement.load(page.url, function() { launchForm(page.form); } }); })(page); } @johnwilander
  • 60. Making Use of ClosuresJavaScript var page; for(i=0; i<pages.length; i++) { page = pages[i]; (function(page) { pageElement.load(page.url, function() { launchForm(page.form); } We bind page to a new closure }); })(page); so that the callback refers } correctly @johnwilander
  • 61. With self-invoking functions, scope, and closures we are ready for the most important design pattern:Part 5: The Crockford Module or Module Pattern @johnwilander
  • 62. JavaScript JW.cache = (function(){}()); @johnwilander
  • 63. JavaScript JW.cache = (function(){ return {}; }()); @johnwilander
  • 64. JavaScript JW.cache = (function(){ return { getPatient: function(personnummer) { } }; }()); @johnwilander
  • 65. JavaScript JW.cache = (function(){ var cache = {}; return { getPatient: function(personnummer) { } }; }()); @johnwilander
  • 66. JavaScript JW.cache = (function(){ var cache = {}; return { getPatient: function(personnummer) { var res=cache[personnummer]; // Check if fresh // Return } }; }()); @johnwilander
  • 67. JavaScript JW.cache = (function(){ var cache = {}; return { getPatient: function(personnummer) { var res=cache[personnummer]; if(_isValid(res)) { return res.patient; } else { // Handle cache miss } } }; }()); @johnwilander
  • 68. JavaScript JW.cache = (function(){ var cache = {}, _isValid = function(res) { } return { getPatient: function(personnummer) { var res=cache[personnummer]; if(_isValid(res)) { return res.patient; } else { // Handle cache miss } } @johnwilander
  • 69. JavaScript JW.cache = (function(){ var cache = {}, _isValid(res) { return !res ? false : (Date.now() - res.timestamp) <= 60000; // One minute } return { getPatient: function(personnummer) { var res=cache[personnummer]; if(_isValid(res)) { return res.patient; } else { // Handle cache miss @johnwilander
  • 70. JavaScript JW.cache = (function(){ var cache = {}, _isValid(res) { return !res ? false : (Date.now() - res.timestamp) <= 60000; // One minute } return { We can have (closure) private variables and functions getPatient: function(personnummer) { var res=cache[personnummer]; if(_isValid(res)) { return res.patient; } else { // Handle cache miss @johnwilander
  • 71. JavaScript Crockford = (function(initParam) { var privVar1, privVar2, _privFunc1 = function() { }, _privFunc2 = function() { }; return { pubVar1: ”value”, pubFunc1: function() { } }; }(initParam)); @johnwilander
  • 72. Part 6:Named Parameters @johnwilander
  • 73. Java Method Signaturespublic void execPurchase(int, String,String, boolean, User)JavaScript function execPurchase(price, item, discountCode, wantsSpam, user) @johnwilander
  • 74. Java Method Signaturesbuilder = new Purchase.Builder();Purchase purchase = builder.setPrice(9900) .setItem(”cap”).wantsSpam(false) .setUser(user).build();JavaScript function execPurchase(purchase) { purchase.price … purchase.item … purchase.wantsSpam … purchase.user … @johnwilander
  • 75. Part 7: Asynchronous Module Definition(AMD) with require.js @johnwilander
  • 76. Concatenate and minify @johnwilander
  • 77. Concatenate and minifyYou may want to separatethird party code to be ableto cache it harder. @johnwilander
  • 78. Concatenate and minifyThe goal is to mimimize thenumber of HTTP requests andthe size of data over the wire. @johnwilander
  • 79. Tools for Concatenation and Minification• Google Closure Compiler• UglifyJS• require.js Concatenates and minifies with Closure Compiler or UglifyJS @johnwilander
  • 80. require.js – import andnamespace in JavaScript @johnwilander
  • 81. require([ "backbone", "underscore", "models/CartModel", "text!templates/CartItem.html"], function (Backbone, _, CartModel, cartItemTemplate) { // Code dependent on Backbone etc}); @johnwilander
  • 82. paths : { jquery : "vendor/jquery.min", backbone : "../components/backbone/backbone-min", underscore : "../components/underscore/underscore" } main.jsrequire([ "backbone", "underscore", "models/CartModel", "text!templates/CartItem.html"], function (Backbone, _, CartModel, cartItemTemplate) { // Code dependent on Backbone etc}); @johnwilander
  • 83. File system, like Java packagesrequire([ "backbone", "underscore", "models/CartModel", "text!templates/CartItem.html"], function (Backbone, _, CartModel, cartItemTemplate) { // Code dependent on Backbone etc}); @johnwilander
  • 84. require([ "backbone", Local name, like "underscore", dependency injection "models/CartModel", "text!templates/CartItem.html"], function (Backbone, _, CartModel, cartItemTemplate) { var model = new CartModel();}); @johnwilander
  • 85. Define new modules define([ "backbone", "underscore", "models/CartModel", "text!templates/CartItem.html"], function (Backbone, _, CartModel, cartItemTemplate) { var CartItemView = …; … return CartItemView; }); @johnwilander
  • 86. CartItemView.js @johnwilander
  • 87. index.html without require.js or the like<head> <script src="js/lib/jquery-1.9.0.min.js"></script> <script src="js/lib/jquery-encoder-0.1.0.js"></script> <script src="js/base.js"></script> <script src="js/JW/util/util.js"></script> <script src="js/JW/personnummer/Personnummer.js"></script> <script src="js/JW/patient/Patient.js"></script> … <script src="js/JW/cache/cache.js"></script> <script src="js/JW/proxy/proxy.js"></script> <script src="js/JW/gui/gui.js"></script></head> … manually, in the right order. @johnwilander
  • 88. index.html with require.js<head> <script data-main="scripts/main" src="scripts/require.js" > </script></head> @johnwilander
  • 89. index.html with require.js<head> <script data-main="scripts/main" src="scripts/require.js" > </script></head> require.config({ … paths : { jquery : "vendor/jquery.min", backbone : "../components/backbone/backbone-min", underscore : "../components/underscore/underscore" } }); require(["app"], function (App) { App.start(); }); main.js @johnwilander
  • 90. ReferenceDocumentation Always developer.mozilla.org Never www.w3schools.com Why? w3fools.com @johnwilander
  • 91. The Stream http://javascriptweekly.com/ @javascript_news@BrendanEich @littlecalculist@addy_osmani @addyosmani @paul_irish @badass_js @rwaldron @slicknet @kangax @unscriptable @sthlmjs @johnwilander
  • 92. dojo-release-1.8.3.zip 11 Mb ext-4.1.1a-gpl.zip 45,7 Mb ext-all.js 1 Mb yui_3.8.1.zip 28,1 Mb @joakimkemeny & @johnwilander
  • 93. SimplifiedDom api Templates & shimsWidgets MVC @joakimkemeny & @johnwilander
  • 94. underscoreModernizr jQuery Simplified Dom api Templates & shims Widgets MVC @joakimkemeny & @johnwilander
  • 95. Handlebars MustachSimplifiedDom api Templates & shimsWidgets MVC @joakimkemeny & @johnwilander
  • 96. SimplifiedDom api Templates & shims Ember Backbone angularWidgets MVC @joakimkemeny & @johnwilander
  • 97. SimplifiedDom api Templates & shimsWidgets MVC Spine @joakimkemeny & @johnwilander
  • 98. Simplified Dom api Templates & shims Widgets MVCBootstrapjQuery UI @joakimkemeny & @johnwilander
  • 99. Simplified Dom api Templates & shimsExt JSDojoYUI Widgets MVC @joakimkemeny & @johnwilander
  • 100. All-in-one frameworks arebest suited for newlywritten single-purposeapplications withoutmashup behavior. @joakimkemeny & @johnwilander
  • 101. Micro frameworks arebetter if you need tointegrate legacy code, somenifty CMS product, or if youhave logic/content fromthird parties.Micro frameworks dont”take over” you application. @joakimkemeny & @johnwilander