Lift talk

40
Lift Framework Winston

description

Winston@Fliptop Shares the basics of the amazing scala web framework: lift at JUG and Scala Taiwan.

Transcript of Lift talk

Page 1: Lift talk

Lift Framework!

Winston!

Page 2: Lift talk

Topics!

2!

•  Coding  Monk/Winston  •  View  First  v.s.  MVC  

•  Version  Assump9ons  &  Configura9ons  

•  Template  –  snippet  &  value  binding  

•  Javascript  from  LiE  

•  Ajax  &  Coment  

•  Fast  &  Easy  API  •  My  Love  &  Pain  with  LiE  

Page 3: Lift talk

Slide and Sample Project!

3!

•  hMp://engineering.fliptop.com/2012/08/25/  

Page 4: Lift talk

Coding Monk/Winston!

4!

•  Love  wine/Learning  Whiskey  •  Love  scala/java,  python,  liE,  django  •  Struts  -­‐>  Struts  2  -­‐>  Spring  -­‐>  django  -­‐>  rails  -­‐>  liE  

•  Wish  List:  big  data/data  mining/machine  learning,  the  architecture  and  algorithm  

•  Having  a  lot  of  fun  at  fliptop  

Page 5: Lift talk

The problem with MVC!

5!

•  MVC  Architecture  Graph  •  Because  complex  HTML  pages  rarely  contain  a  dominant  piece  of  logic...  a  single  controller...  but  contain  many  different  components.    

•  We  end  up  pu]ng  a  lot  of  logic  into  a  single  controller  and  view.    

Page 6: Lift talk

The problem with MVC!

6!

Page 7: Lift talk

A Giant Controller!

7!

Page 8: Lift talk

Lift!

8!

•  you  define  the  collec9on  of  components  to  be  rendered  in  the  resul9ng  HTML  page  in  the  view.  

•  Simple  and  Clear  

Page 9: Lift talk

Lift!

9!

Page 10: Lift talk

Lift!

10!

Page 11: Lift talk

Assumptions!

11!

•  Use  maven  to  set  up  LiE  •  Use  XHTML  liE,  not  HTML5  liE  

•  HTML5  StyleSnippet:  

•  XHTML  Style  Snippet:  

Page 12: Lift talk

Start Up a lift project!

12!

mvn  archetype:generate  \    -­‐DarchetypeGroupId=net.liEweb  \  

 -­‐DarchetypeAr9factId=liE-­‐archetype-­‐basic_2.8.1  \  

 -­‐DarchetypeVersion=2.3  \  

 -­‐DarchetypeRepository=hMp://scala-­‐tools.org/repo-­‐releases  \  

 -­‐DremoteRepositories=hMp://scala-­‐tools.org/repo-­‐releases  \  

 -­‐DgroupId=com.fliptop.liE  \    -­‐Dar9factId=fliptop_rocks  \  

 -­‐Dversion=1.0  

Page 13: Lift talk

Project Structure!

13!

Page 14: Lift talk

Run it!!

14!

•  mvn  jeMy:run  •  hMp://localhost:8080  

•  You  now  got  ProtoUser  Module  (we  won’t  cover  today)  with  AddUserMenusAEer  set  up  for  you.  (More  on  ProtoUser:    hMp://blog.thegodcode.net/post/141132296/super-­‐quick-­‐start-­‐with-­‐liEs-­‐protouser)  

Page 15: Lift talk

Boot.scala!

15!

•  No  xml  configura9on!  Pure  code!!  

•  LiERules  •  DB,  Proper9es  and  Run  modes  

•  SiteMap:  – Menu  – Access  Control  

Page 16: Lift talk

Create a page!

16!

•  Set  up  a  path  in  Boot.scala  •  Create  an  HTML  page  in  webapp  or  a  view  class  in  class  folder.  

•  Fill  in  the  snippets  if  using  HTML  pages.  

•  Request  Rou9ng:  – Template  -­‐>  View  – We  are  using  Template,  not  view  

Page 17: Lift talk

Snippet 101!

17!

•  snippet101.html  <liE:surround  with="default"  at="content”>      <liE:SnippetExp.snipprt101/>  </liE:surround>  

•  SnippetExp.scala  class  SnippetExp  {      def  snipprt101:NodeSeq  =          <div>This  is  a  very  bad  prac9ce!!</div>  }  

Page 18: Lift talk

Bad Practice!

18!

•  A  lot  of  HTML  in  a  snippet  code  class  SnippetExp  {      def  thisIsBad:NodeSeq  =  {        val  goodCode  =  false        val  badCode  =  if(goodCode)  “not  at  all”        else  “bad  prac9ce,  HTML  in  snippet!!”        <div>{badCode}</div>      }  }  

Page 19: Lift talk

Complex Snippet: data binding!

19!

•  simple_form.html  <liE:surround  with="default"  at="content”>    <liE:SnippetExp.bindingExample  form="POST”>      <p>Do  Something  with  your  email:</p>      <p><entry:email/></p>      <p><entry:submit/></p>    </liE:SnippetExp.bindingExample>  </liE:surround>  

Page 20: Lift talk

A Simple Form Snippet!

20!

def  bindingExample(xhtml:NodeSeq):NodeSeq  =  {  

 var  email  =  ""  

 def  process  (){  

   print("The  email  is:  "  +  email)  

 }  

 bind("entry",  xhtml,  

   “email”  -­‐>  SHtml.text(email,  email  =  _,    "id”>"email"),  

     "submit"  -­‐>  SHtml.submit("search",  process))  

}  

Page 21: Lift talk

Recursive Binding!

21!

•  Rendering  a  list  or  a  table  •  recursive_binding.html  

<liE:SnippetExp.recursiveBinding>  

 <table>  

       <entry:lis9tem>  

         <tr>  

                   <td><item:name/></td><td><item:email/></td>  

         </tr>  

   </entry:lis9tem>  

 </table>  

</liE:SnippetExp.recursiveBinding>  

Page 22: Lift talk

Recursive Binding!

22!

def  recursiveBinding(xhtml:NodeSeq):NodeSeq  =  {  

 val  theList  =  new  ListBuffer[(String,  String)]  

 theList  +=  new  Tuple2("[email protected]",  "Robbie  Cheng")  

 theList  +=  new  Tuple2("[email protected]",  "Winston  Chen")    bind("entry",  xhtml,  "lis9tem"  -­‐>  theList.toList.flatMap(  

     item  =>  {  

       bind("item",  chooseTemplate("entry","lis9tem",  xhtml),    

         "email"  -­‐>  item._1,  

         "name"  -­‐>  item._2          )  

     }  

   )  

 )  

   }  

Page 23: Lift talk

Javascript Integration!

23!

•  Javascript  expressions  and  statements  •  Javascript  forms  

•  Ajax  •  Comet  (Long  pulling)  

Page 24: Lift talk

Javascript Expressions/Statements!

24!

•  The  magic  Call  func9on  <script>  

func9on  this_is_an_alert_triggered_by_liE_call(){  

 alert("This  is  an  alert  triggered  by  liE  call()!!")  }  

</script>  

<liE:JsSnippetExp.call>  <input  id="buMon"  type="buMon"  value="Click  me"  />  

</liE:JsSnippetExp.call>  

Snippet:  

def  call  =          "#buMon  [onclick]"  #>  JE.Call("this_is_an_alert_triggered_by_liE_call",  "").toJsCmd  

Page 25: Lift talk

Json Forms!

25!

•  Let’s  look  at  the  code  directly:  JsSnippetExp  

Page 26: Lift talk

Ajax!

26!

•  Template:  <liE:JsSnippetExp.ajaxBuMon>  

 <item:buMon/>  

</liE:JsSnippetExp.ajaxBuMon>  

<div  id="ajaxb"></div>  

•  Snippet:  def  updateText  =  SetHtml("ajaxb",  Text("Fliptop  is  a  great  company!!"))  

def  ajaxBuMon(xhtml:NodeSeq):NodeSeq  =  bind("item",  xhtml,  "buMon"  -­‐>  SHtml.ajaxBuMon(Text("Press  me"),  ()=>updateText))  

Page 27: Lift talk

Comet!

Ajax!

Page 28: Lift talk

Comet!

Comet!

Page 29: Lift talk

Comet!

29!

•  Lift: Long Pulling!•  Must put comets in comet folder.!•  Extend CometActor!•  Use tag: <lift:comet>  !

•  Letʼs look at the code: CometExp.scala!•  Reference:

exploring.liftweb.net/master/index-11.html!

Page 30: Lift talk

REST API So Easy!

30!

•  Use  RestHelper  to  write  up  the  code.  •  Configure  it  on  Boot.scala  

•  Let’s  look  at  Rest.scala  •  Here  you  go!!  It’s  that  easy.  •  Reference:  simply.liEweb.net/index-­‐Chapter-­‐11.html  

Page 31: Lift talk

Conclusions!

31!

•  LiE  tackles  Web  from  a  view-­‐first  perspec9ve.  •  LiE  gives  you  js/ajax/comet  for  free.  

•  LiE  also  gives  you  rest  API  for  free.  

•  All  feature  goes  to  backend,  designs  frontend.  •  No  more  plumbing  yourself.  

Page 32: Lift talk

Why I love Lift!

32!

•  Get  all  the  feature  done  at  backend  •  The  Snippet  logic  makes  much  more  sense  than  MVC  for  me.  (although  I  love  django  too)  

•  API  so  easy,  no  much  code  needed  

Page 33: Lift talk

Why I hate Lift!

33!

•  It’s  really  hard  to  get  HTML/XML  out  of  snippet  code.  

•  Learning  curve  is  s9ff  if  you  are  not  used  to  its  logic.  

•  Try  s9ck  to  the  latest  version.  •  Too  many  ways  to  write  it.  

Page 34: Lift talk

Free Books!

34!

•  Exploring  LiE:  exploring.liEweb.net  •  Simply  LiE:  simply.liEweb.net  

•  LiE  Cookbook:  cookbook.liEweb.net  

Page 35: Lift talk

References!

35!

•  David  Pollak  On  LiE  Framework  and  Scala  www.infoq.com/interviews/LiE-­‐Scala-­‐David-­‐Pollak  

•  Example  &  Demo  Site:  demo.liEweb.net  

•  Start  Up  Project  with  Maven:  www.assembla.com/wiki/show/liEweb/Using_Maven  

Page 36: Lift talk

Get to me!

36!

•  Email:  [email protected]  •  URLs:  – hMp://www.repfans.com/profile/33335/Winston%20Chen  

– hMp://careers.stackoverflow.com/wingchen  

Page 37: Lift talk

The last Q&A!

Winston!

Page 38: Lift talk

Model!

38!

•  Mapper  or  Record  

•  Take  a  look  at  here:  stackoverflow.com/ques9ons/6564332/when-­‐to-­‐use-­‐mapper-­‐or-­‐record-­‐in-­‐liE  

Page 39: Lift talk

Menu Configurations!

39!

•  stackoverflow.com/ques9ons/2175246/liEweb-­‐menu-­‐customiza9on  

Page 40: Lift talk

Thank you.!