Javascript“the worlds most misunderstood language”
the big book
The good book
JavaScript !== Java
Global namespaceDon’t touch!
x = global;var x = global;// if not inside a functionfunction foo(){ x = global; // without var. var y = notglobal; // yea...
Creëer je eigen namespace
;var sancus = function(){ var x = notglobal;};
Patterns anybody?
Private variables
Priveledged variables
Public variables
Closures
Revealing module pattern‘christian heilman’
;var sancus = function(){}();// self invoking function :)
;var sancus = (function(){ // private variables var config = {  foo:bar,  html5:cool }, init = function(){  // doStuff }; ...
;var sancus = (function(){ var config = {  foo:bar,  html5:cool  // no trailing , }, init = function(){  // doStuff }; ret...
;var sancus = (function(){ var config = {  foo:bar,  html5:cool }, init = function(){  // doStuff }; // return init to glo...
;var sancus = (function(){ var config = {  foo:bar,  html5:cool }, init = function(){  // doStuff }; return{  init:init };...
// ; is just when someone else messed up...;var sancus = (function(){ var config = {  foo:bar,  html5:cool }, init = funct...
;var sancus = (function(){ var config = {  foo:bar,  html5:cool }, init = function(){  // doStuff }; return{  init:init };...
;var sancus = (function(){ var config = {  foo:bar,  html5:cool }, init = function(){  // doStuff }; return{  init:init };...
;var sancus = (function(){ var config = {  foo:bar,  html5:cool }, init = function(){  alert(config.foo);  // will work };...
Niet typesafe(of toch wel?)
var x = 5; // number           var y = ‘5’;// stringif ( x == y ){ // true}
var x = 5;  // numbervar y = ‘5’; // stringif ( x === y ){ // false}
Best practices
HTMLStructuur
<table>NOT FOR LAYOUT
<table> for tabular data
don’t code for presentation
code for content
tell a story
http://html5boilerplate.com/
Javascript is blocking
<a href=”#” onClick=”alert(‘hello world’);”>  inline alert</a>
<a   href=”#”   onClick=”doStuff();”>inline   alert</a><a   href=”#”   onClick=”doStuff();”>inline   alert</a><a   href=”#...
<!DOCTYPE HTML><html lang="nl"><head> <meta charset="UTF-8"> <title></title> <script src=”script.js”></script> <script src...
(Inline) scripts are blockingeverytime they are encountered.
<!DOCTYPE HTML><html lang="nl"><head> <meta charset="UTF-8"> <title></title></head><body> <!--  javascript at the bottom -...
CSS
CSSStyling
Start bigend small
base.css
beware of classisitus
Fontface
h1 {font-family:FrescoStdNormalRegular,arial;}
@font-face { font-family:FrescoStdNormalRegular; src: url(fonts/FrescoStd-Normal.eot); src: local(☺) url(fonts/FrescoStd-N...
http://www.fontsquirrel.com/
css2.1 and css3
e[att^=”val”]
http://www.456bereastreet.com/archive/200601/          css_3_selectors_explained/
JavaScriptgedrag
put javascript at the bottom
one exception
<script type="text/javascript"> document.documentElement.className +=  js-on;</script>
(css).js-on .foo { display:none;}.foo { // what does it look like without js?}
combine multiple scripts
<a id="_5" class="ui-lnkb" onclick="return WebUI.clicked(this,_5, event)" href="javascript: void(0);">  this link</a>
use unobtrusive javascript
$(‘a’).click(function(){ // do stuff});
Better:Event delegation
$("body").delegate("a", "click", function(){ // do stuff});
http://wnas.nl/hidden-advantage-of-event-delegation
Touch the dom as little as possible
Never ever mix
Never ever mix
Inline scriptsare   EVIL
Inline stylesare   EVIL
Never ever mix
Tips
Write small functions
var hideStuff = function(tar){ $(tar).addClass(conf.cn.hide);};
Beware of the semicolon insertion
var a = bvar c = d
// broken :(var a = bvar c = d
var a = b;var c = d;
// still worksvar a = b;var c = d;
Dynamically load scripts
if($.foo.length !== 0){ $.getScript(‘bar.js’,doStuff());}
Write for NO javascript
Use hijax, not ajax.
html is a pretty accessible medium...
node.js
Vragen?(of wil je voorbeelden)
Upcoming SlideShare
Loading in …5
×

Bestpractices nl

1,133 views
1,070 views

Published on

presentation on best practices for a couple of java developers

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,133
On SlideShare
0
From Embeds
0
Number of Embeds
90
Actions
Shares
0
Downloads
17
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • het beschermt je code en voorkomt dat anderen je code kapot kunnen maken...\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • deze functie wordt direct na het interpreteren aangeroepen. zie de laatste ()..\n
  • de zaken in de &amp;#x2018;object literal&amp;#x2019; config zijn niet beschikbaar buiten de sancus namespace.\n
  • \n
  • door de return is init weer global beschikbaar.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • show graph tables essent.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Percieved loading time\n
  • Percieved loading time\n
  • \n
  • \n
  • Percieved loading time\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Match any E elements, whose att atribute value begins with &amp;#x2018;val&amp;#x2019;\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • repaint and reflow\n
  • html and javascript\n
  • html and css\n
  • slecht onderhoudbaar en langzaam\n
  • slecht onderhoudbaar\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Bestpractices nl

    1. 1. Javascript“the worlds most misunderstood language”
    2. 2. the big book
    3. 3. The good book
    4. 4. JavaScript !== Java
    5. 5. Global namespaceDon’t touch!
    6. 6. x = global;var x = global;// if not inside a functionfunction foo(){ x = global; // without var. var y = notglobal; // yeah, var}
    7. 7. Creëer je eigen namespace
    8. 8. ;var sancus = function(){ var x = notglobal;};
    9. 9. Patterns anybody?
    10. 10. Private variables
    11. 11. Priveledged variables
    12. 12. Public variables
    13. 13. Closures
    14. 14. Revealing module pattern‘christian heilman’
    15. 15. ;var sancus = function(){}();// self invoking function :)
    16. 16. ;var sancus = (function(){ // private variables var config = { foo:bar, html5:cool }, init = function(){ // doStuff }; return{ init:init };}();
    17. 17. ;var sancus = (function(){ var config = { foo:bar, html5:cool // no trailing , }, init = function(){ // doStuff }; return{ init:init };}();
    18. 18. ;var sancus = (function(){ var config = { foo:bar, html5:cool }, init = function(){ // doStuff }; // return init to global namespace return{ init:init };}();
    19. 19. ;var sancus = (function(){ var config = { foo:bar, html5:cool }, init = function(){ // doStuff }; return{ init:init };}();sancus.init();// call init
    20. 20. // ; is just when someone else messed up...;var sancus = (function(){ var config = { foo:bar, html5:cool }, init = function(){ // doStuff }; return{ init:init };}();sancus.init();
    21. 21. ;var sancus = (function(){ var config = { foo:bar, html5:cool }, init = function(){ // doStuff }; return{ init:init };}();sancus.init();alert(config.foo);// won’t work
    22. 22. ;var sancus = (function(){ var config = { foo:bar, html5:cool }, init = function(){ // doStuff }; return{ init:init };}();sancus.init();alert(sancus.config.foo);// won’t work
    23. 23. ;var sancus = (function(){ var config = { foo:bar, html5:cool }, init = function(){ alert(config.foo); // will work }; return{ init:init };}();sancus.init();
    24. 24. Niet typesafe(of toch wel?)
    25. 25. var x = 5; // number var y = ‘5’;// stringif ( x == y ){ // true}
    26. 26. var x = 5; // numbervar y = ‘5’; // stringif ( x === y ){ // false}
    27. 27. Best practices
    28. 28. HTMLStructuur
    29. 29. <table>NOT FOR LAYOUT
    30. 30. <table> for tabular data
    31. 31. don’t code for presentation
    32. 32. code for content
    33. 33. tell a story
    34. 34. http://html5boilerplate.com/
    35. 35. Javascript is blocking
    36. 36. <a href=”#” onClick=”alert(‘hello world’);”> inline alert</a>
    37. 37. <a href=”#” onClick=”doStuff();”>inline alert</a><a href=”#” onClick=”doStuff();”>inline alert</a><a href=”#” onClick=”doStuff();”>inline alert</a><a href=”#” onClick=”doStuff();”>inline alert</a><a href=”#” onClick=”doStuff();”>inline alert</a><a href=”#” onClick=”doStuff();”>inline alert</a><a href=”#” onClick=”doStuff();”>inline alert</a><a href=”#” onClick=”doStuff();”>inline alert</a><a href=”#” onClick=”doStuff();”>inline alert</a><a href=”#” onClick=”doStuff();”>inline alert</a><a href=”#” onClick=”doStuff();”>inline alert</a><a href=”#” onClick=”doStuff();”>inline alert</a><a href=”#” onClick=”doStuff();”>inline alert</a><a href=”#” onClick=”doStuff();”>inline alert</a><a href=”#” onClick=”doStuff();”>inline alert</a><a href=”#” onClick=”doStuff();”>inline alert</a>
    38. 38. <!DOCTYPE HTML><html lang="nl"><head> <meta charset="UTF-8"> <title></title> <script src=”script.js”></script> <script src=”script2.js”></script> <script src=”script3.js”></script></head><body> foo</body></html>
    39. 39. (Inline) scripts are blockingeverytime they are encountered.
    40. 40. <!DOCTYPE HTML><html lang="nl"><head> <meta charset="UTF-8"> <title></title></head><body> <!-- javascript at the bottom --> <script src=”script.js”></script></body></html>
    41. 41. CSS
    42. 42. CSSStyling
    43. 43. Start bigend small
    44. 44. base.css
    45. 45. beware of classisitus
    46. 46. Fontface
    47. 47. h1 {font-family:FrescoStdNormalRegular,arial;}
    48. 48. @font-face { font-family:FrescoStdNormalRegular; src: url(fonts/FrescoStd-Normal.eot); src: local(☺) url(fonts/FrescoStd-Normal.woff) format(woff), url(fonts/FrescoStd-Normal.otf) format(opentype), url(fonts/FrescoStd-Normal.svg#FrescoStd-Normal)format(svg);}
    49. 49. http://www.fontsquirrel.com/
    50. 50. css2.1 and css3
    51. 51. e[att^=”val”]
    52. 52. http://www.456bereastreet.com/archive/200601/ css_3_selectors_explained/
    53. 53. JavaScriptgedrag
    54. 54. put javascript at the bottom
    55. 55. one exception
    56. 56. <script type="text/javascript"> document.documentElement.className += js-on;</script>
    57. 57. (css).js-on .foo { display:none;}.foo { // what does it look like without js?}
    58. 58. combine multiple scripts
    59. 59. <a id="_5" class="ui-lnkb" onclick="return WebUI.clicked(this,_5, event)" href="javascript: void(0);"> this link</a>
    60. 60. use unobtrusive javascript
    61. 61. $(‘a’).click(function(){ // do stuff});
    62. 62. Better:Event delegation
    63. 63. $("body").delegate("a", "click", function(){ // do stuff});
    64. 64. http://wnas.nl/hidden-advantage-of-event-delegation
    65. 65. Touch the dom as little as possible
    66. 66. Never ever mix
    67. 67. Never ever mix
    68. 68. Inline scriptsare EVIL
    69. 69. Inline stylesare EVIL
    70. 70. Never ever mix
    71. 71. Tips
    72. 72. Write small functions
    73. 73. var hideStuff = function(tar){ $(tar).addClass(conf.cn.hide);};
    74. 74. Beware of the semicolon insertion
    75. 75. var a = bvar c = d
    76. 76. // broken :(var a = bvar c = d
    77. 77. var a = b;var c = d;
    78. 78. // still worksvar a = b;var c = d;
    79. 79. Dynamically load scripts
    80. 80. if($.foo.length !== 0){ $.getScript(‘bar.js’,doStuff());}
    81. 81. Write for NO javascript
    82. 82. Use hijax, not ajax.
    83. 83. html is a pretty accessible medium...
    84. 84. node.js
    85. 85. Vragen?(of wil je voorbeelden)

    ×