Building your Webapp Muscles with Lift

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
    matt@frmr.me
    

    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