RubyJS - Speaker Deck

Slide 1

Slide 1 text

Sebas'an Burkhard hasclass.com github.com/hasclass? twi:er.com/hasclass?

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

RubyJS alpha www.rubyjs.org

Slide 5

Slide 5 text

A port of Ruby core-‐lib to JS •  String, Regexp, MatchData •  Array, Enumerable, Enumerator •  Numeric (Integer/Fixnum, Float) •  Range •  Time, Hash coming soon

Slide 6

Slide 6 text

JS Methods Array jjjjjjjjjjjjj Enumerable Fixnum Float jjjj Integer Kernel Matchdata Numeric Range Regexp jj String jjjjjjjjjjjjj

Slide 7

Slide 7 text

RubyJS Methods Array jjjjjjjjjjjjj................................. ............................ Enumerable .............................................. Fixnum ........................... Float jjjj.............................. Integer .................... Kernel ... Matchdata ..................... Numeric ....................... Range ...................... Regexp jj...................... String jjjjjjjjjjjjj................................ ...........................

Slide 8

Slide 8 text

Ruby arr = %w(looks feels acts)   arr.map {|w| w.capitalize }  .join(", ")   .concat(" like Ruby")  .center(35, '-') '---Looks, Feels, Acts like Ruby---’

Slide 9

Slide 9 text

RubyJS arr = R.w('looks feels acts')    

Slide 10

Slide 10 text

Ruby arr = %w(looks feels acts)   arr.map {|w| w.capitalize } 

Slide 11

Slide 11 text

arr = R.w('looks feels acts')     arr.map((w) -> w.capitalize() ) 

Slide 12

Slide 12 text

RubyJS arr = R.w('looks feels acts')     arr.map((w) -> w.capitalize() )  .join(", ")   .concat(" like Ruby")  .center(35, '-')  '---Looks, Feels, Acts like Ruby---’

Slide 13

Slide 13 text

Ruby arr = %w(looks feels acts)     arr.map {|w| w.capitalize }  .join(", ")   .concat(" like Ruby")  .center(35, '-’)   '---Looks, Feels, Acts like Ruby---’

Slide 14

Slide 14 text

arr = R.w('looks feels acts')   arr.map(function (w) {  return w.capitalize(); })  .join(", ")   .concat(" like Ruby")  .center(35, '-') + "!”

Slide 15

Slide 15 text

    arr = R.w('looks feels acts');    str = arr.map(function (w) {  return w.capitalize();   }).join(", ")   .concat(" like Ruby")  .center(35, '-');    alert(str); 

Slide 16

Slide 16 text

Example #2 How it works

Slide 17

Slide 17 text

str = "a" 

Slide 18

Slide 18 text

str = R("a”) #=> R.String 

Slide 19

Slide 19 text

str = R("a")  str.capitalize_bang() #=> nil or self

Slide 20

Slide 20 text

str = R("a")  str.capitalize_bang()   str.upto('C’) #=> R.Enumerator

Slide 21

Slide 21 text

str = R("a")  str.capitalize_bang()   str.upto('C').each_cons(2) #=> R.Enumerator

Slide 22

Slide 22 text

str = R("a")  str.capitalize_bang()   str.upto('C').each_cons 2, (a,b) ->   R.puts("#{a} to the #{b}")  # A to the B  # B to the C

Slide 23

Slide 23 text

str = R("a")  str.capitalize_bang()   str.upto('C').each_cons(2).to_a() #=> R.Array

Slide 24

Slide 24 text

str = R("a")  str.capitalize_bang()   str.upto('C').each_cons(2).map(->) #=> R.Enumerator

Slide 25

Slide 25 text

Internals

Slide 26

Slide 26 text

Wrapper class RubyJS.Fixnum extends R.Object @include RubyJS.Comparable    constructor: (@__native__) -> odd: ->  @__native__ % 2 != 0    next: ->  new R.Fixnum(@__native__ + 1)

Slide 27

Slide 27 text

100% JavaScript Source code in CoﬀeeScript

Slide 28

Slide 28 text

Compliant to Ruby Not just inspired

Slide 29

Slide 29 text

Plays well with others Use alongside backbone, jquery, …

Slide 30

Slide 30 text

Pragma'c No rocket-‐science

Slide 31

Slide 31 text

Slide 32

Slide 32 text

Chainable arr = R.w('looks feels acts') # %w[ ]   arr.map( (w) -> w.capitalize() )  .join(", ")   .concat(" like Ruby")  .center(35, '-')  '---Looks, Feels, Acts like Ruby---'

Slide 33

Slide 33 text

Enumerators arr.size().times -> puts “oy!” R( 5 ).upto(10) -> R( 5 ).upto(10).to_a()

Slide 34

Slide 34 text

Aliases # equals: ==  arr['==']('foo') arr.equals('foo’)    arr.each_with_index()  arr.eachWithIndex()

Slide 35

Slide 35 text

Special Variables   $~  R['$~']

Slide 36

Slide 36 text

97% Ruby compliance •  Rubyspec (1800 specs 5000 asser'ons) •  Ruby Features – Block arguments, duck-‐typing •  Keep it lean, skipped features: – Subclassing RubyJS classes, Tain'ng/trus'ng – Some Regexp func'onality, No NilClass, Boolean

Slide 37

Slide 37 text

How does it compare to •  CoﬀeeScript •  Underscore •  Lodash •  Jsclass •  Sugarjs •  PrototypeJS •  Components

Slide 38

Slide 38 text

“Now I realise your work is supposed to ﬁnish what PrototypeJS once started. Help Ruby developers in wri?ng JS – but in a cleaner way.” @nomadcoder, creator of netzke.org

Slide 39

Slide 39 text

Beneﬁts for JS developers

Slide 40

Slide 40 text

One dependency   <script src="/underscore-1.3.min.js"/>  <script src="/stringjs-0.9.9.js"/>  <script src="/momentjs-1.5.1.js"/>  <script src="/custom_functions.js"/>

Slide 41

Slide 41 text

One dependency   <script src="/underscore-1.3.min.js"/>  <script src="/stringjs-0.9.9.js"/>  <script src="/momentjs-1.5.1.js"/>  <script src="/custom_functions.js"/> <script src="/ruby.js">

Slide 42

Slide 42 text

One API _.map([], (w) -> )   _.chain(arr).(...).value()  S("foo").capitalize().s  moment().format('L') 

Slide 43

Slide 43 text

One API R( [1] ).map().to_native()   R( [2] ).map().reject().to_native()   R("foo").capitalize().to_native()   R(new Date(…)).strftime(“%y-%m-%d”)

Slide 44

Slide 44 text

One chain arr = ['looks', 'feels', 'acts']  str = _.map(arr, (w) -> S(w).capitalize().s ).join(', ’)  str += " not like Ruby”  S(str).pad(str, 35, '-').s

Slide 45

Slide 45 text

One chain arr = R.w('looks feels acts')   arr.map((w) -> w.capitalize() )  .join(", ")   .concat(" like Ruby")  .center(35, '-') 

Slide 46

Slide 46 text

One documenta'on

Slide 47

Slide 47 text

One documenta'on

Slide 48

Slide 48 text

One choice How much 'me have you spent switching libraries? Backbone, knockout, emberjs, angularjs, underscore, prototypejs, lodash, stringjs, jstring, sugarjs, components.

Slide 49

Slide 49 text

One choice Dual-‐license •  AGPL •  Commercial

Slide 50

Slide 50 text

One choice 190 USD / Dev

Slide 51

Slide 51 text

20 kbytes miniﬁed and gzipped

Slide 52

Slide 52 text

It scales As fast as the rest

Slide 53

Slide 53 text

Some other features

Slide 54

Slide 54 text

Destruc've Methods str = R("foo")  cap = str.capitalize()   cap # "Foo"  str # "foo"    str.capitalize_bang()  str # "Foo"

Slide 55

Slide 55 text

U'lity-‐belt or OO-‐style R("foo") # for 98% of cases R("foo").center(50).to_native() R("foo", -> @capitalize() ) # natives   str = new R.String("foo") # For speed  String.new("foo") # Ruby behaviour   R.$String(1) # Ruby: String(1) 

Slide 56

Slide 56 text

U'lity-‐belt or OO-‐style str = new R.String("foo")  titleize = (str) ->  str.capitalize_bang()  str.center_bang(50)   str    titleize(str)  " Foo "

Slide 57

Slide 57 text

Typecasted arguments num = R(76.123)  num.round( 1 )  num.round( new Number(2) )  num.round( R(1) )  # duck-typing  num.round( {to_int: -> R(1)} )

Slide 58

Slide 58 text

Enumerator/Enumerable fb = R([38,29,31,20,18,21,21]) fb.each_cons(2)  .map (x,y) -> (y / x - 1.0) * 100 # [-23.6, 6.8, ... ]   R(1).upto 5, (i) -> # ...  R(3).times (i) -> # ...

Slide 59

Slide 59 text

Ruby block arguments points = R( [ [1,-2] ] ) points.each (point) ->   # point: [1, -2]  points.each ( x,y ) ->   # x: 1, y: -2 Ruby style  points.each ([x,y]) ->   # x: 1, y: -2 CoffeeScript style

Slide 60

Slide 60 text

Ranges R.rng('a', 'az').each (s) ->   # a, b, ..., aa, ab, ... az    R.rng('a', 'az').to_a()  # ['a', 'b', ... 'az']

Slide 61

Slide 61 text

Parlez-‐vous JavaScript?

Slide 62

Slide 62 text

Parlez-‐vous JavaScript? I don’t wanna fucking parlez JavaScript

Slide 63

Slide 63 text

Web components are the future

Slide 64

Slide 64 text

Web components are the future If only I could use it now!

Slide 65

Slide 65 text

A vehicle of oppression

Slide 66

Slide 66 text

1 year later Fighting opression leads to depression

Slide 67

Slide 67 text

2 years later I wish I’d cut my hair by now.

Slide 68

Slide 68 text

Lessons Learned

Slide 69

Slide 69 text

just do it it always works out, somehow.

Slide 70

Slide 70 text

typeof typeof 1 # number  typeof true # boolean  typeof 'str' # string  typeof undefined # undefined  typeof anything_else # object   # fell in disgrace because of: typeof new Number(1) # object  typeof new String('f') # object

Slide 71

Slide 71 text

typeof === FAST

Slide 72

Slide 72 text

toString = Object.prototype.toString  numClass = '[object Number]’   isNumber = (obj) ->  toString.call(obj) == numClass   isNumberFast = (obj) -> # Return quick if number primitive  typeof obj == 'number' ||   toString.call(obj) == numClass

Slide 73

Slide 73 text

Benchmark isNumber( 1 ) isNumberFast( 1 ) isNumberFast( “foo” ) isNumberFaster( “foo” )

Slide 74

Slide 74 text

Benchmark

Slide 75

Slide 75 text

isNumberFaster = (obj) ->  typeof obj == 'number' ||   # Return quickly if other primitive  typeof obj != 'object' ||   toString.call(obj) == numClass 

Slide 76

Slide 76 text

_ = (value) ->  if value && value._wrapped  return value  # ... # Behind the scenes. value: 1 1._wrapped  # => new Number(1)._wrapped 

Slide 77

Slide 77 text

_ = (value) -> # Primitives are no wrapper objects if (typeof value == 'object' && value._wrapped)   return value  # ... 

Slide 78

Slide 78 text

30min Spend this on general Proj. Mgmt

Slide 79

Slide 79 text

Track progress Array ..............xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxx Enumerable .........xxxxxxxxxxxxxxxxxxxxxxxxxxxx Fixnum ........................... Float ..................................xxx Integer ..........xxxxxxxx Kernel ... Matchdata ..................... Numeric ....................... Range ...................xxx Regexp ..................xxxxxx String ................................ ....xxxxxxxxxxxxxxxxxxxxx

Slide 80

Slide 80 text

while/for instead of forEach, map

Slide 81

Slide 81 text

Purity idx = -1  len = arr.length  while ++idx < len  callback( arr[i] ) 

Slide 82

Slide 82 text

each idx = -1  while ++idx < arr.length  callback( arr[i] ) 

Slide 83

Slide 83 text

map idx = -1  ary = Array(arr.length) while ++idx < arr.length  ary[idx] = callback( arr[i] )  return ary