A Less Complex Web with Ratchet & Jank

https://conferences.oreilly.com/oscon/oscon-tx/public/schedule/detail/56904

Transcript

1. Ratchet+Jank
   live slides: bit.ly/2pV0PhP @iamvery
   ♥
   

   View Slide

2. @iamvery
   ♥
   This is a talk about
   the web.
   

   View Slide

3. View Slide

4. @iamvery
   ♥
   This is a talk about
   the web.
   

   View Slide

5. @iamvery
   ♥
   This is a talk about
   complexity.
   

   View Slide

6. View Slide

7. View Slide

8. View Slide

9. @iamvery
   ♥
   "
   

   View Slide

10. @iamvery
    ♥
    COMPLEXITY
    

    View Slide

11. @iamvery
    ♥
    git reset --hard 2004
    

    View Slide

12. @iamvery
    ♥
    Turbolinks
    

    View Slide

13. View
    

    View Slide

14. @iamvery
    ♥
    
    
    
    
    
    
    
    
    
    
    
    

    View Slide

15. @iamvery
    ♥
    …
    

    View Slide

16. @iamvery
    ♥
    
    
    
    
    {{ celestial_body.display }}
    
    

    View Slide

17. @iamvery
    ♥
    Logic-less
    

    View Slide

18. @iamvery
    ♥
    HTML
    

    View Slide

19. The Web
    Something I’m building
    Something you’re building
    

    View Slide

20. @iamvery
    ♥
    Plain HTML
    

    View Slide

21. @iamvery
    ♥
    
    The Post Title
    
    The post body.
    
    
    

    View Slide

22. @iamvery
    ♥
    %{
    posts: [
    %{title: "Interesting Facts”,
    body: "Cats are soft. Dogs are
    noisy."},
    %{title: "Bears",
    body: "Bears eat beets."},
    ]
    }
    

    View Slide

23. @iamvery
    ♥
    
    
    
    
    
    
    

    View Slide

24. @iamvery
    ♥
    
    
    
    
    

    View Slide

25. @iamvery
    ♥
    
    Interesting Facts
    
    Cats are soft. Dogs are noisy.
    
    
    
    Bears
    
    Bears eat beets.
    
    
    

    View Slide

26. @iamvery
    ♥
    Content
    

    View Slide

27. @iamvery
    ♥
    The 5 Forms of Data
    

    View Slide

28. @iamvery
    ♥
    1. Properties are mapped
    

    View Slide

29. @iamvery
    ♥
    %{property: “value”}
    

    View Slide

30. @iamvery
    ♥
    2. Tag content
    

    View Slide

31. @iamvery
    ♥
    “value”
    %{property: }
    

    View Slide

32. @iamvery
    ♥
    3. Tag attributes
    

    View Slide

33. @iamvery
    ♥
    [href: “http://…”]
    

    View Slide

34. @iamvery
    ♥
    4. Combined content
    

    View Slide

35. @iamvery
    ♥
    {“Click”, href: “http://…”}
    

    View Slide

36. @iamvery
    ♥
    5. Iteration
    

    View Slide

37. @iamvery
    ♥
    
    
    
    
    
    
    

    View Slide

38. @iamvery
    ♥
    %{items: [“first”, “second”]}
    

    View Slide

39. @iamvery
    ♥
    %{
    active_user: %{name: "Jay"},
    posts: [
    %{
    title: "Cats Facts",
    body: "Some cats are fuzzy.",
    comments: ["I like cats.", "I prefer dogs."],
    edit_link: {"Edit 'Cat Facts'", href: "http://example.com/posts/1"},
    },
    %{
    title: "Sleepy Dog",
    body: "Dogs sleep a lot.",
    comments: [],
    edit_link: {"Edit 'Sleepy Dog'", href: "http://example.com/posts/2"},
    },
    ],
    new_post: [disabled: true],
    }
    

    View Slide

40. @iamvery
    ♥
    Ratchet
    

    View Slide

41. @iamvery
    ♥
    “A set of
    pre-defined transformations
    used to
    bind content to
    elements”
    https://github.com/iamvery/ratchet
    

    View Slide

42. (Demo)
    

    View Slide

43. @iamvery
    ♥
    Caching
    

    View Slide

44. @iamvery
    ♥
    I Designers
    ❤
    

    View Slide

45. ERB EEX JSX %
    

    View Slide

46. @iamvery
    ♥
    “It’s a mystery to me why we
    can’t write plain HTML and CSS.”
    - Designer
    

    View Slide

47. Client
    

    View Slide

48. @iamvery
    ♥
    But…
    

    View Slide

49. Data Transform View
    

    View Slide

50. @iamvery
    ♥
    Jank
    

    View Slide

51. Controller
    Browser
    Model
    View
    Router
    JS
    DOM
    Jank
    Channel
    
    Hi
    

    View Slide

52. (Demo)
    

    View Slide

53. @iamvery
    ♥
    “Like Ratchet, but more Janky”
    https://github.com/iamvery/jank
    

    View Slide

54. Jay Hayes
    https://iamvery.com — @iamvery
    

    View Slide

55. View Slide

56. View Slide

57. View Slide

58. We develop.
    

    View Slide

59. We teach.
    

    View Slide

60. We write.
    

    View Slide

61. pakyow.org
    

    View Slide

62. @iamvery
    ♥
    HTML Templates
    

    View Slide

63. @iamvery
    ♥
    The web works.
    

    View Slide

64. @iamvery
    Questions?
    
    

    View Slide