Upgrade to Pro — share decks privately, control downloads, hide ads and more …

A Less Complex Web with Ratchet & Jank

A Less Complex Web with Ratchet & Jank

Jay Hayes

May 10, 2017
Tweet

More Decks by Jay Hayes

Other Decks in Programming

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