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

Building your Webapp Muscles with Lift

Building your Webapp Muscles with Lift

Matt Farmer

May 06, 2015
Tweet

More Decks by Matt Farmer

Other Decks in Programming

Transcript

  1. Building your Web
    Application Muscles with Lift Matt Farmer

    May 6th, 2015

    View Slide

  2. Sorry, I was sick.

    View Slide

  3. Tonight’s Demonstration
    • A site for submitting and voting on puns.
    • URL: http://punerator.frmr.me
    • Source: https://github.com/farmdawgnation/punerator

    View Slide

  4. Lift is a bit different.

    View Slide

  5. The Seven Things
    1. Lazy Loading
    2. Parallel Page Rendering
    3. Comet and AJAX
    4. Wiring
    5. Designer-friendly Templates
    6. Wizard
    7. Security

    View Slide

  6. The Seven Things
    1. Lazy Loading
    2. Parallel Page Rendering
    3. Comet and AJAX
    4. Wiring
    5. Designer-friendly Templates
    6. Wizard
    7. Security

    View Slide

  7. Designer-friendly Templates

    View Slide

  8. View Slide

  9. Lift is not an MVC framework.

    View Slide

  10. Lift is not an MVC framework.
    No, I’m not insane.

    View Slide

  11. Lift is not an MVC framework.
    No, I’m not insane.
    Well, maybe a little but not completely.

    View Slide

  12. View First

    View Slide

  13. MVC vs. View First

    View Slide

  14. MVC vs. View First
    Typical MVC Framework
    User Framework Controller View

    View Slide

  15. MVC vs. View First
    Typical MVC Framework
    User Framework Controller View
    Lift
    User Framework View Snippet
    Snippet
    Snippet

    View Slide

  16. View First
    Snippet (NodeSeq) => NodeSeq

    View Slide

  17. View First
    Snippet (NodeSeq) => NodeSeq
    CSS Transforms

    View Slide

  18. View First
    Snippet (NodeSeq) => NodeSeq
    CSS Transforms

    View Slide

  19. View First
    Snippet (NodeSeq) => NodeSeq
    CSS Transforms

    View Slide

  20. View First
    Snippet (NodeSeq) => NodeSeq
    CSS Transforms Magic

    View Slide

  21. View First
    Snippet (NodeSeq) => NodeSeq
    CSS Transforms Magic
    DSL (Domain Specific Language)

    View Slide

  22. View First
    Snippet (NodeSeq) => NodeSeq
    CSS Transforms Magic
    DSL (Domain Specific Language)
    “.date *” #> invoice.date

    View Slide

  23. View First
    Snippet (NodeSeq) => NodeSeq
    CSS Transforms Magic
    DSL (Domain Specific Language)
    “.date *” #> invoice.date
    CSS Selector

    View Slide

  24. View First
    Snippet (NodeSeq) => NodeSeq
    CSS Transforms Magic
    DSL (Domain Specific Language)
    “.date *” #> invoice.date
    CSS Selector Content

    View Slide

  25. View first

    View Slide

  26. View first
    • Lift templates are just HTML.

    View Slide

  27. View first
    • Lift templates are just HTML.
    • Lift finds things to change using CSS selectors.

    View Slide

  28. View first
    • Lift templates are just HTML.
    • Lift finds things to change using CSS selectors.
    • Any designer who understands HTML and CSS can
    make changes relatively safely.

    View Slide

  29. Let’s see some code.

    View Slide

  30. View Slide

  31. Push to the Browser

    View Slide

  32. COMETS!

    View Slide

  33. Why not WebSockets?
    https://groups.google.com/d/msg/liftweb/
    1fa3rolbnvI/enV5CFm2Rd4J

    View Slide

  34. Push to the Browser

    View Slide

  35. Push to the Browser
    • What if we could represent the page a user’s browser is
    viewing as an actor?

    View Slide

  36. Push to the Browser
    • What if we could represent the page a user’s browser is
    viewing as an actor?
    CometActor

    View Slide

  37. Actors, but for pages
    Browser CometActor

    View Slide

  38. Actors, but for pages
    Browser CometActor

    View Slide

  39. Actors, but for pages
    Browser CometActor
    Render HTML.

    View Slide

  40. Actors, but for pages
    Browser CometActor
    Render HTML.
    Push JavaScript.

    View Slide

  41. Actors, but for pages
    Browser CometActor
    Render HTML.
    Push JavaScript.
    Session

    View Slide

  42. Actors, but for pages
    Browser CometActor
    Render HTML.
    Push JavaScript.
    Session
    SessionVar

    View Slide

  43. Actors, but for pages
    Browser CometActor
    Render HTML.
    Push JavaScript.
    Session
    SessionVar
    LiftActor
    Snippets

    View Slide

  44. Lift handles the magic

    View Slide

  45. Lift handles the magic
    • Loading the relevant client side bits.

    View Slide

  46. Lift handles the magic
    • Loading the relevant client side bits.
    • Detecting when a CometActor isn’t needed.

    View Slide

  47. Lift handles the magic
    • Loading the relevant client side bits.
    • Detecting when a CometActor isn’t needed.
    • Handling connectivity issues.

    View Slide

  48. Let’s see some code.

    View Slide

  49. View Slide

  50. Further reading
    • The Lift Website http://liftweb.net
    • Lift Template Projects https://github.com/lift/lift_26_sbt
    • The mailing list http://groups.google.com/group/liftweb
    • The Seven Things: http://seventhings.liftweb.net
    • The Lift Cookbook: http://cookbook.liftweb.net

    View Slide

  51. Thank you.
    @farmdawgnation / farmdawgnation.com
    [email protected]

    View Slide

  52. Creative Commons Attributions
    • “Big Weight” https://www.flickr.com/photos/ennuidesign/
    2715836520
    • “Are your eyeballs running?” https://flic.kr/p/4HbQj2
    • “Comet Panstarrs March 2nd 2013” https://flic.kr/p/
    dZdD7k

    View Slide