RubyConfBR 2016: There is a Ruby in your Browser

Ruby is a multipurpose language, and is suitable to be used everywhere. In this talk I will show you a few ways you can use ruby that you probably don’t know, like running code in your browser and having the same code running in your server, to craft a perfect fast isomorphic application.

Transcript

1. View Slide

2. @brodock
   blog.gabrielmazetto.eti.br
   Gabriel Mazetto
   

   View Slide

3. There is a Ruby
   in your Browser
   

   View Slide

4. CREATE, COLLABORATE AND DEPLOY
   FROM IDEA TO PRODUCTION
   

   View Slide

5. We are going to talk a lot
   about languages today...
   

   View Slide

6. But first...
   Let's go back in time...
   

   View Slide

7. 1980 - 1988
   

   View Slide

8. Hypertext
   Real-time RPC
   Computer Networking
   CERN,
   John Poole's ICS
   

   View Slide

9. Tim Berners-Lee
   

   View Slide

10. March, 1989
    

    View Slide

11. Hypertext + TCP + DNS
    

    View Slide

12. World Wide Web
    

    View Slide

13. Dec, 1990
    

    View Slide

14. WorldWideWeb
    First 'navigator'
    

    View Slide

15. View Slide

16. 1991-1993
    

    View Slide

17. Spreading the web
    Outside europe
    

    View Slide

18. View Slide

19. NCSA
    Mosaic 0.5
    

    View Slide

20. View Slide

21. CERN Releases
    WorldWideWeb source code
    

    View Slide

22. View Slide

23. Netscape Navigator
    1.0
    

    View Slide

24. View Slide

25. Web needs to become
    More dynamic...
    

    View Slide

26. Netscape hired
    Brendan Eich
    

    View Slide

27. View Slide

28. To implement Scheme*
    In the browser
    

    View Slide

29. +
    

    View Slide

30. "Why the web needed 2
    programming languages?"
    Java, Scripting Language
    

    View Slide

31. View Slide

32. Requirement:
    Syntax similar to Java
    

    View Slide

33. Perl
    Python
    TCL
    Scheme
    

    View Slide

34. Prototype language in 10
    days...
    

    View Slide

35. "We aimed to provide a
    'glue language' for the
    web designers and
    part-time programmers"
    

    View Slide

36. View Slide

37. View Slide

38. Alan Cooper
    Created VBScript
    

    View Slide

39. Script language for the
    whole Windows
    ecosystem*
    

    View Slide

40. As we are talking about
    languages...
    

    View Slide

41. View Slide

42. Ruby was born...
    

    View Slide

43. "People want to express
    themselves when they
    program. They don't want
    to fight with the language"
    (2001, Matz)
    

    View Slide

44. "You can do everything in
    assembler, but no one
    wants to program in
    assembler anymore"
    (2003, Matz)
    

    View Slide

45. We <3 Ruby
    but...
    

    View Slide

46. "...no one wants to
    program in assembler
    anymore"
    Can avoid
    Javascript
    (2016, Elia Schito)
    

    View Slide

47. Why Javascript
    ? ? ?
    

    View Slide

48. How to organize
    your code
    In javascript
    

    View Slide

49. AMD CommonJS
    RequireJS *Harmony
    (ES6)
    Anonymous
    Closure Module Pattern
    Browserify
    jQuery plugin
    *DIY
    StealJS
    SystemJS
    

    View Slide

50. Everything in JS is
    time-sensitive*
    (and could be incompatible)
    

    View Slide

51. Frameworks, libraries
    Everything change from
    little time to time
    

    View Slide

52. Packaging
    and delivery
    

    View Slide

53. npm
    (gate)
    bower
    jspm volojs
    jamjs†
    spmjs† cpm†
    componentjs†
    

    View Slide

54. leftpad
    

    View Slide

55. Options are not but
    Noise and distraction
    

    View Slide

56. Why not stick with
    Ruby?
    

    View Slide

57. Decaf Browser:
    Webkit fork that runs
    Ruby (native)
    gh: timahoney/decaf
    

    View Slide

58. Not the best alternative
    As it's hard to convince
    every browser...
    

    View Slide

59. Why not write Ruby
    In JS?
    

    View Slide

60. View Slide

61. Opal is ~95% RubySpec
    ready
    

    View Slide

62. Ruby runtime
    +
    Transpiler
    

    View Slide

63. Native:
    Arrays, numbers,
    strings*, boolean,
    self -> this
    

    View Slide

64. # this
    puts "hello rubyconf"
    # becames:
    (function(Opal) {
    var self = Opal.top, $scope = Opal, nil = Opal.nil,
    $breaker = Opal.breaker, $slice = Opal.slice;
    Opal.add_stubs(['$puts']);
    return self.$puts("Hello RubyConfBr")
    })(Opal);
    

    View Slide

65. Packaging and
    Dependency
    

    View Slide

66. $ gem install opal-*
    # With rails, add to your Gemfile and:
    $ bundle install
    # In your code:
    require 'my-awesome-framework'
    

    View Slide

67. Sprockets
    Rails Integration:
    

    View Slide

68. Some libraries
    To get started...
    

    View Slide

69. opal-jquery
    

    View Slide

70. # Gemfile
    gem 'opal'
    gem 'opal-jquery'
    # Your code:
    Document.ready? do
    alert "document is ready to go!"
    end
    # ...
    Element.find('#header').on :click do
    puts "The header was clicked!"
    end
    

    View Slide

71. opal-rspec
    

    View Slide

72. # Gemfile
    gem 'opal'
    gem 'opal-rspec'
    # Your code:
    describe User do
    it "can be created with a name" do
    expect(User.new).to_not be_persisted
    end
    end
    

    View Slide

73. Frameworks
    

    View Slide

74. Inesita.rb
    

    View Slide

75. class Clock
    include Inesita::Component
    def initialize
    @time = Time.now
    end
    def render
    div class: 'clock' do
    text @time.strftime('%r')
    end
    end
    End
    $document.ready do
    Clock.new.mount_to($document['clock'])
    end
    

    View Slide

76. React.rb
    

    View Slide

77. class Nav < React::Component::Base
    def render
    div {"Our Nav Bar Goes Here including a login box"}
    end
    end
    

    View Slide

78. Perguntas?
    

    View Slide