$30 off During Our Annual Pro Sale. View Details »

Web Apps on a Pedestal

Web Apps on a Pedestal

Learn how to build web applications in Clojure using the Pedestal library.

http://github.com/rkneufeld/pedestal-workshop

Ryan Neufeld

April 17, 2014
Tweet

More Decks by Ryan Neufeld

Other Decks in Programming

Transcript

  1. Web Apps
    on a Pedestal

    View Slide

  2. @rkneufeld – rkn.io
    Ryan Neufeld

    View Slide

  3. View Slide

  4. View Slide

  5. Pedestal
    >
    Ring

    View Slide

  6. Nailed Down

    View Slide

  7. Flying Free

    View Slide

  8. Enter the workshop

    View Slide

  9. Todo-it

    View Slide

  10. Demo
    project-building time

    View Slide

  11. [“/hello” {:get hello-world}]
    !
    Handler map
    Path pattern
    Anatomy Lesson:
    Routes

    View Slide

  12. [“/hello” {:get hello-world}
    child-routes…]
    Anatomy Lesson:
    Children
    [“/“
    [“/hello” {:get hello-world}]]

    View Slide

  13. [[[“/“
    [“/hello” {:get hello-world}]]]]
    Why so nested?

    View Slide

  14. [[context routes…]]
    !
    “hello” route
    App name, port, host
    Anatomy Lesson:
    Context

    View Slide

  15. [[:public “example.com”
    routes…]
    [:api “api.example.com”
    routes…]]
    Anatomy Lesson:
    Contexts

    View Slide

  16. Demo
    project-building time
    part ii

    View Slide

  17. Exercise #1
    1. Install Leiningen (http:/
    /leiningen.org/#install)
    2. git clone https:/
    /github.com/rkneufeld/pedestal-workshop
    3. Checkout exercise-1
    4. Run the app w/ lein run
    5. Visit localhost:8080/hello
    6. Change “Hello, World!” to “Hello, !”*
    *You’ll need to restart the server

    View Slide

  18. Demo
    routes & interceptors

    View Slide

  19. No Handler is an Island

    View Slide

  20. It takes a village*
    *Of middleware and handlers
    OK, doesn’t have the same ring to it…
    Enter from left to right
    Leave from right to left

    View Slide

  21. Anatomy Lesson:
    Interceptors

    View Slide

  22. Anatomy Lesson:
    Interceptors

    View Slide

  23. Anatomy Lesson:
    Interceptors

    View Slide

  24. Routers are Interceptors

    View Slide

  25. Where they live
    (def service {::http/interceptors
    [… (router routes)]…}
    Before or after routing

    View Slide

  26. [[[“/” ^:interceptors […]
    [“/hello” {:get hello-world]
    [“/goodbye” …]]]
    Where they live
    Inside routes

    View Slide

  27. [[[“/“
    [“/hello” {:get hello-world]
    [“/goodbye” …]]]
    Where they live
    Inside routes
    *
    *
    *Attachment points
    *

    View Slide

  28. Demo
    routes & interceptors

    View Slide

  29. Exercise #2
    1. Checkout exercise-2
    2. Restart your server w/ lein run
    3. Visit localhost:8080/hello?name=
    4. Use the (or x y) form to provide "World" as a
    default name if none is provided.
    5. Bonus: Write a defon-response interceptor that
    changes :header’s "Server" key to something
    unique of your choosing.

    View Slide

  30. A little persistence

    View Slide

  31. A little persistence

    View Slide

  32. MVC*
    CRUD

    View Slide

  33. MVC*
    CRUD

    View Slide

  34. Demo
    A lil’ persistence

    View Slide

  35. Exercise #4
    1. Checkout exercise-4
    2. Launch a REPL w/ lein repl
    3. Require and enter todoit.todo.db
    • (require 'todoit.todo.db)
    • (in-ns 'todoit.todo.db)
    4. Create, Read, Update, then Destroy a TODO
    • Get a db value with (d/db conn)
    5. Bonus: Write a query completed-todos that ensures
    [?id :todo/completed? true]

    View Slide

  36. Demo
    Wiring up C & R

    View Slide

  37. Exercise #5
    1. Checkout exercise-5
    2. Try out /todos
    3. Implement and wire-up a create function in
    todo.clj
    Hint: Use let à la hello-world to extract [:form-params “title”]
    and [:form-params “description”]. Once you’ve created a TODO,
    redirect to (url-for :todos).

    View Slide

  38. New Paint Job

    View Slide

  39. Demo
    New Paint Job

    View Slide

  40. Hiccup
    [:tag {attributes} children]
    required optional optional
    .class #id
    optional

    View Slide

  41. Hiccup
    The Title
    !

    Great content

    !
    method=“post”>


    [:h1 “The Title”]
    !
    [:div.foo
    [:p “Great Content”]]
    !
    !
    [:form {:action “/todos”
    :method “post”}
    [:input {:name “title”}]

    View Slide

  42. Demo
    New Paint Job

    View Slide

  43. Exercise #6
    1. Checkout exercise-6
    2. Try out the new /todos
    3. Add a TODO without a title. Oops!
    4. Modify the TODO form’s title to be required
    (hint, the required attribute).

    View Slide

  44. Demo
    Update & Destroy

    View Slide

  45. Exercise #7
    1. Checkout exercise-7
    2. Try out toggling and deleting TODOs
    3. Create a delete-all action. You’ll need a:
    • Route,
    • Handler,
    • Model Action, and
    • Form

    View Slide

  46. Questions?
    bit.ly/pedestal-ws
    @rkneufeld
    Photo credits: https:/
    /flic.kr/p/bE6KtD, https:/
    /flic.kr/p/9p4utz
    pedestal.io

    View Slide