Web Apps on a Pedestal

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

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

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