1. CASSIS

    Tantek Çelik tantek.com • @t

  2. 2008

  3. Bulletproof AJAX

    bookcover of Bulletproof AJAX

  4. more responsive =
    better UX

  5. href="#"
    breaks the web

  6. href="?p=jeremy"
    + Unobtrusive JavaScript

  7. "Hijax"
    Unobtrusive AJAX

  8. writing code twice:
    JavaScript & PHP

  9. DRY principle
    (Don't Repeat Yourself)

  10. tired of rewriting
    in different languages

  11. can we pick a winner?

  12. has JavaScript (JS) won?
    (yet)

  13. most # of programmers

  14. most # of companies optimizing it

  15. JS on client & server
    = write logic once

  16. JS subset that works
    on client & server?

  17. CASSIS conceived

  18. avoid unintentionally enabling SkyNet

    SkyNet monitoring screen

  19. JS on the server
    not supported by default

  20. check out Node.js
    on web host or install?

  21. otherwise,
    all web hosts run PHP

  22. intersection of JS & PHP?

  23. 2009

  24. falsy values research

  25. false 0 "0" "00"

  26. falsy value testing

    tweet of falsy value tests 

  27. function js() { 
  return ("00"==false); 
}

  28. runtime switching good
    need: parsetime switch

  29. 2001
    voice-family:"\"}\"";

  30. 2002
    Semantic Scripting

  31. principle of separation of script and markup

  32. hypertext script docs
    external JS with HTML

  33. 
<!-- /*--> 
 markup ... 
<!--*/ //-->
 script
//<!--
/*--> 
 more markup 
<!--*/ //-->

  34. but for JS and PHP files

  35. back to 2009

  36. CASSIS v0 code

    tweet of CASSIS v0 code 

  37. 
<!-- <?php // -->

/* cassis.js v0 file */
/* both JS and PHP   */

// ?> -->


  38. <!-- HTML include -->
<script src="cassis.js"></script>

  39. /* PHP include */
ob_start(); 
include 'cassis.js'; 
ob_end_clean();

  40. challenge:
    variable names

  41. PHP variables
    must start with $

  42. jQuery popularized
    $ in JS

  43. CASSIS convention:
    $ variables e.g. $x

  44. challenge: string concat
    'a'+'b' vs 'a'.'b'

  45. common function instead

  46. 
function strcat($s1, $s2) {
  if (js()) { 
    return $s1 + $s2; 
  }
  else { 
    return $s1 . $s2; 
  }
}

  47. challenge: PHP-only code
    date_default_timezone_set("UTC");

  48. need: PHP-only block

  49. 
<!-- <?php // -->



  /* cassis.js v0 file */
  /* both JS and PHP   */

// ?> -->


  50. 
/* <!-- <?php // -->
  echo 'PHP only';
// */

  /* cassis.js v0 file */
  /* both JS and PHP   */

// ?> -->

  51. challenge: JS-only code
    e.g. PHP function equivalents 

  52. 
function strlen(s) {
  return s.length;
}

function ord(s) {
  return s.charCodeAt(0);
}

  53. need JS and/or PHP

  54. comment inverter
    /*/

  55. stateless comment closer
    /**/ 

  56. 
/* <!-- <?php // -->
  echo 'PHP only';

// */

  /* both JS and PHP */
// ?> -->


  57. 
/* <!-- <?php // -->
  echo 'PHP only';
/*/
  alert("JS only");
/**/
  /* both JS and PHP */
// ?> -->

  58. 2011

  59. open sourced CASSIS:
    github.com/tantek/cassis

  60. challenge:
    variable scope 

  61. 
function strcat($s1, $s2) {
  if (js()) { 
    return $s1 + $s2; 
  }
  else { 
    return $s1 . $s2; 
  }
}

  62. strcat vs operators:
    any number of strings 

  63. 
$s1 + $s2 + $s3 + ... // JS
$s1 . $s2 . $s3 . ... // PHP
strcat($s1, $s2, $s3, ...);

  64. CASSIS v0 strcat

    
function strcat() {
  $r = "";
  $a = js() ? arguments : func_get_args();
  for ($i=count($a)-1; $i>=0; $i-=1) {
    $r = js() ? $a[$i] + $r : $a[$i] . $r;
  }
  return $r;
}

  65. block scope in PHP
    globals in JS :(

  66. want:
    function scope PHP&JS

  67. CASSIS v0 strcat

    
function strcat() {

  $r = "";
  $a = js() ? arguments : func_get_args();
  for ($i=count($a)-1; $i>=0; $i-=1) {
    $r = js() ? $a[$i] + $r : $a[$i] . $r;
  }
  return $r;
}

  68. CASSIS strcat with var

    
function strcat() {
  var $a, $i, $r; 
  $r = "";
  $a = js() ? arguments : func_get_args();
  for ($i=count($a)-1; $i>=0; $i-=1) {
    $r = js() ? $a[$i] + $r : $a[$i] . $r;
  }
  return $r;
}

  69. CASSIS strcat with var

    
function strcat() {
  var $a, $i, $r; // PHP syntax error :( 
  $r = "";
  $a = js() ? arguments : func_get_args();
  for ($i=count($a)-1; $i>=0; $i-=1) {
    $r = js() ? $a[$i] + $r : $a[$i] . $r;
  }
  return $r;
}

  70. need:
    hide "var" from PHP

  71. 
// ?> <!--  
/* JS only code */
// --> <?php

  72. CASSIS strcat with var

    
function strcat() {
  var $a, $i, $r;
  $r = "";
  $a = js() ? arguments : func_get_args();
  for ($i=count($a)-1; $i>=0; $i-=1) {
    $r = js() ? $a[$i] + $r : $a[$i] . $r;
  }
  return $r;
}

  73. CASSIS strcat with JS-only var

    
function strcat() { // ?> <!--  
  var $a, $i, $r;   // --> <?php 
  $r = "";
  $a = js() ? arguments : func_get_args();
  for ($i=count($a)-1; $i>=0; $i-=1) {
    $r = js() ? $a[$i] + $r : $a[$i] . $r;
  }
  return $r;
}

  74. CASSIS v0.1 strcat

    
function strcat() { /// ?> <!--   ///
  var $a, $i, $r;   /// --> <?php ///
  $r = ""; $i = 0;
  $a = js() ? arguments : func_get_args();
  for ($i=count($a)-1; $i>=0; $i-=1) {
    $r = js() ? $a[$i] + $r : $a[$i] . $r;
  }
  return $r;
}

  75. CASSIS function scope variables

  76. good: no globals!
    can we do better?

  77. JavaScript: The Good Parts

    bookcover of JavaScript: The Good Parts

  78. JSLint & JSHint

  79. CASSIS functions now
    pass JSLint* & JSHint

  80. Releasing Today:
    CASSIS v0.1a

  81. What's CASSIS good for?

  82. I'm using CASSIS:

  83. Get Started With CASSIS

  84. Get Started With CASSIS

  85. Writing CASSIS code

  86. Writing new CASSIS core functions

  87. Contribute to CASSIS

  88. JS: present and future
    of web programming

  89. Until JS is ubiquitous,
    CASSIS is a step forward.

  90. Thank you.

    Tantek Çelik

    tantek.com • @t

    cassisjs.org • @cassisjs