Ovto: Frontend web framework for Rubyists

Transcript

1. Ovto: Frontend web framework for Rubyists Yutaka HARA (@yhara) RubyKaigi2019Fukuoka

   2019/04/19

2. http://yhara.github.io/ovto

3. Ovto is (1/3) Frontend web framework in Ruby Powered by

   Opal VirtualDOM + Single state (like react-redux)

4. Ovto is (2/3) 'Octo' is already taken everywhere

5. Ovto is (3/3) DEMO: http://rk2019.yhara.jp

6. Agenda(1/3) This talk does not cover: Difference with Angular, Vue,

   etc. How to use Ovto en: book/guides/tutorial.md ja: "Rubyist のためのフロントエンドフレームワークOvto" (Rubyist Magazine 0059)

7. Agenda(2/3) This talk covers: My thoughts on making Ovto Knowledge

   you need to use Ovto

8. Agenda(3/3) Part 1: Background Part 2: Design Part 3: Implementation

9. Today's goal Find the 2nd user

10. Myself @yhara (Yutaka HARA)

11. Ad: RubyDebugCheatSheet NaCl @ 2F

12. Past Kaigi Talks n-ways to distribute your Ruby apps (RubyKaigi2009)

    Road to Ruby Master (RubyKaigi2011) DIY Programming (SapporoRubyKaigi2012) Let's Make a Functional Language (RubyKaigi2015) Ruby, Opal and WebAssembly (RubyKaigi2017) Ovto: Frontend web framework for Rubyists (RubyKaigi2019)

13. My interest DIY Programming Language processor

14. Part 1. Why I made Ovto

15. DIY Programming Make software you need Ruby is very good

    for it Supports many areas Good for prototyping

16. My DIYs(1/3)

17. My DIYs(2/3)

18. My DIYs(3/3)

19. Web app is mobile app

20. Mobile app is hard Swift or Kotlin? Obj-C or Java?

    Evolves to quickly (at least so far)

21. Web tech is everywhere Mobile web Mobile app (PhogeGap, etc.)

    Desktop app (Electron, etc.)

22. But... How to make this kind of app?

23. jQuery is not enough(1/2) You specify 'where' and 'what' $(elem).append(item);

    $(elem).prepend(item); $(elem).remove(); $(item).insertBefore(elem); ...

24. jQuery is not enough(2/2)

25. Here comes VirtualDOM(1/6)

26. Here comes VirtualDOM(2/6)

27. Here comes VirtualDOM(3/6)

28. Here comes VirtualDOM(4/6)

29. Here comes VirtualDOM(5/6)

30. Here comes VirtualDOM(6/6) You write "What it should be" React

    calculates & applies the difference automatically

31. React and me 3 month exprerience of react-redux at work

32. react-redux Make React to be "Single State"

33. Single state (1/4)

34. Single state (2/4)

35. Single state (3/4)

36. Single state (4/4)

37. And then:

38. hyperapp

39. IDEA: Port hyperapp to Ruby

40. to Ruby? They say "You need to write JS to

    make an SPA" Actually it's not true
41. None

42. Opal (1/2)

43. Opal (2/2)

44. Why not JS? Ruby is my native tongue Minor but

    irritating difference No Array#==, etc.

45. Ovto

46. (Notices) Based on hyperapp v1 Not a 1-to-1 port Redesigned

    to be "Rubyish" API

47. hyperapp example

48. Ruby port?

49. The question is... What the sample program should look like?

50. In Ovto

51. Demo

52. Vision github: yhara/vision

53. Part 2. Design of Ovto

54. Ovto's design principle Make it fun. Programming is fun Remove

    what's not fun → WIN

55. Simplicity "There's too many things to learn :-(" Only have

    3 classes State, Actions, Component

56. Debuggability "unde ned method 'to_s' for nil:NilClass" Use Ovto::State instead

    of Hash If state were a Hash: state['pagee'] #=> nil Use keyword arguments

57. Scalability "It's too simple for big project :-(" State →

    Nesting Actions → Split into modules Component → o method supports sub component

58. Help you to design app "No idea how to make

    this feature" Design it in this order: State View Action

59. Part 3. Implementation of Ovto

60. Repository github: yhara/ovto Example codes: examples/* github: yhara/vision github: yhara/OvtoShow

61. Reading Ovto's source % wc -l lib/**/*.rb 58 lib/ovto.rb 10

    lib/ovto/actions.rb 85 lib/ovto/app.rb 198 lib/ovto/component.rb 53 lib/ovto/fetch.rb 394 lib/ovto/runtime.rb 72 lib/ovto/state.rb 3 lib/ovto/version.rb 35 lib/ovto/wired_actions.rb 908 total

62. runtime.rb(1/2)

63. runtime.rb(2/2)

64. wired_actions.rb(1/4)

65. wired_actions.rb(2/4)

66. wired_actions.rb(3/4)

67. wired_actions.rb(4/4)

68. Implementation of OvtoShow(1/2) https://medium.com/@dan_abramov/you-might-not-need-redux- be46360cf367

69. None

70. Implementation of OvtoShow(2/2) Send action via WebSocket

71. Contributing to Ovto Try it! Write posts to your blog,

    dev.to, Qiita, etc. Future plan Server-side rendering Router

72. Thank you!