Java mais ágil que nunca no desenvolvimento Web Apache Wicket + MongoDB + Scala
Quem sou eu? twitter: @brunoborges www.brunoborges.com [email_address]
Desenvolvimento Web é ágil? Para a galera dessas tecnologias, sim
Para os  web designers ....  não!
Designers vs Developers
Tipo do Projeto “Pixel Perfect” Aplicação do jeito que o cliente desenhou Um Web Designer Ou uma equipe exclusiva de designers Prototipação Cliente envolvido no processo Alterações no protótipo refletir na aplicação
O que ajuda o designer?
Isso ajuda também... e MUITO PREVIEW NO BROWSER
Fazemos isso? public class LoginAction    extends ActionSupport {   public void login() {   Connection c = getConnection();   Statement st = c.createStatement();   ResultSet rs = st.executeQuery(“SELECT * FROM USUARIO WHERE ID = “+usuario);   setAutenticado(rs.hasNext());   } } Struts Consulta JDBC ??? NÃO
Separação de Camadas
Interface do Usuário Esta camada também pode ser quebrada em subcamadas Uma para o web designer
Outra para o web developer
É preciso uma melhor marcação HTML < html  xmlns=&quot;http://www.w3.org/1999/xhtml&quot;> <head><title></title></head> < body > < form > <span>Nome:</span> <input type=&quot;text&quot; /> <input type=&quot;submit&quot; value=&quot;Submit&quot; /> </ form > </ body > </ html > Isto é o que o  Web Designer faz Isto é o que o  usuário do site recebe
E se... Pudéssemos ter uma tecnologia que não altera  (quase nada)  o que o Web Designer fez?
< html  xmlns=&quot;http://www.w3.org/1999/xhtml&quot;> <head><title></title></head> < body > < form > <span>Nome:</span> <input type=&quot;text&quot; /> <input type=&quot;submit&quot; value=&quot;Submit&quot; /> </ form > </ body > </ html >
< html  xmlns=&quot;http://www.w3.org/1999/xhtml&quot;> <head><title></title></head> < body > < form  wicket:id=&quot;form&quot; > <span>Nome:</span> <input  wicket:id=&quot;nome&quot;  type=&quot;text&quot; /> <input type=&quot;submit&quot; value=&quot;Submit&quot; /> </ form > </ body > </ html >
Tipos de Marcação XHTML Imperativa   (JSF, Struts, SpringMVC, Play!, Ruby on Rails, PHP, Python ...) <form action=”salvar”>   <input type=”text” name=”nome” />   <input type=”submit” value=”Salvar” /> </form> < s:form  action=”salvar”>   < s:input  property=”nome” />   < s:submit  value=”Salvar” /> </ s:form > O ser humano não nasceu para fazer isso … :-( E nenhum navegador  nasceu para  renderizar isso …
Tipos de Marcação XHTML Declarativa   (Wicket, Tapestry e poucos outros) <form action=”salvar”>   <input type=”text” name=”nome” />   <input type=”submit” value=”Salvar” /> </form> <form  wicket:id=”form” >   <input type=”text”  wicket:id=”nome”  />   <input type=”submit”  wicket:id=”salvar”  /> </form> Bom para o  Web Designer e navegador!
Apache Wicket
Apache Wicket Framework Web
HTML puro Não utiliza  Taglibs Java puro Desenvolvimento similar ao Swing Orientado a Componentes
Java + HTML <span  wicket:id = ” msg ” > msg de sistema </span> + new  Label( “ msg ” , “ We Develop ”); = <span> We Develop </span>
HTML protótipo /MyHomePage.html <html>   <head><title>Apache Wicket</title></head>   <body>   <span>msg dinamica</span>   <form>   Nome: <input type=”text” /> Email: <input type=”text” />   <input type=”submit” value=”Enviar” />   </form>   </body> </html>
Marcação não intrusiva /MyHomePage.html <html>   <head><title>Apache Wicket</title></head>   <body>   <span  wicket:id=” msg ” >msg dinamica</span>   <form  wicket:id=” form ” >   Nome: <input type=”text”  wicket:id=” nome ”  /> Email: <input type=”text”  wicket:id=” email ”  />   <input type=”submit” value=”Enviar” />   </form>   </body> </html>
Toda a lógica da UI: em Java /MyHomePage.java public class  MyHomePage  extends  WebPage  {   public HomePage() {   add(new  Label ( “msg” ,  “We Develop!” ));     Form form = new Form(“ form ”) {   public void onSubmit() {   servico.salvar(getModelObject());   }   };   form.add(new TextField(“ nome ”));   form.add(new TextField(“ email ”));   add(form);   } } Puro Java e  Orientação a Objetos.  Sem mágica
O mínimo de configuração <filter>   <filter-name>wicket.app</filter-name>   <filter-class>   org.apache.wicket.protocol.http.WicketFilter   </filter-class>   <init-param>   <param-name>applicationClassName</param-name>   <param-value>code.MyApplication</param-value>   </init-param> </filter> /MyApplication.java package code; public class  MyApplication  extends  WebApplication  {   public Class< MyHomePage > getHomePage() {   return  MyHomePage .class;   } }
Extensível Gmap2 gmap = new Gmap2(“map”); page.add(gmap); <div wicket:id=”map”>   Google Maps </div>
Ajax Suporte nativo
Diversos componentes prontos Alguns com “ Fallback ” Inclusão dinâmica de CSS e JavaScript
Console independente de navegador, para debug
Ajax // HTML < span  wicket:id=”counter”>contagem</span> < a href =”#” wicket:id=”counterLink”>   incrementar </ a > // JAVA int  counter  = 0; Label  counterLabel  = new Label(“ counter ”); add(counterLabel); add(new  AjaxLink(“counterLink”)  {   public vond onClick(AjaxRequestTarget target) {   counter++ ;   counterLabel .setModelObject( counter );   target.addComponent( counterLabel );   } });
Scala
Scala Linguagem Orientada a Objetos E no fundo, é Java Linguagem funcional
Estaticamente tipada
É extensível Permite facilmente desenvolver DSLs var foo = 8 foo = “bar” Type mismatch;  found: String(“bar”) required: Int
Scala: antes, em Java /MyHomePage.java public class  MyHomePage  extends  WebPage  {   public HomePage() {   add(new  Label ( “msg” ,  “We Develop!” ));     Form form = new Form(“ form ”) {   public void onSubmit() {   servico.salvar(getModelObject());   }   };   form.add(new TextField(“ nome ”));   form.add(new TextField(“ email ”));   add(form);   } }
Scala: depois, em Scala /MyHomePage.scala class  MyHomePage  extends  WebPage  {   add(new  Label ( “msg” ,  “We Develop!” ))     object  form  extends  Form(“ form ”) {   add(new TextField(“ nome ”))   add(new TextField(“ email ”)) override def  onSubmit() = {   servico.salvar(getModelObject())   }   }   add(form) }
Scala: Uma DSL para Wicket /MyHomePage.scala class  MyHomePage  extends  WebPage  with DSLWicket  {   label( “msg” ,  “We Develop!” ))     object  form  extends  Form(“ form ”)  with DSLWicket  {   textField[String](“ nome ”))   textField[String](“ email ”))   override def  onSubmit() = {   servico.salvar(getModelObject())   }   }   add(form) }
Scala: Funções São representadas como valores também, como objetos val  func = () ⇒ {   println(“functional programming”)   } def  chamaFuncao(paramFuncao: () ⇒ Unit) ={   paramFuncao() } chamaFuncao(func)
Scala: Construções inteligentes A linguagem é rica em construções inteligentes val  lista1a9 = 1  to  9  toList lista1a9 .foreach (i ⇒ print(i)) for (i ← lista1a9) {   print(i) } val strings = new Array[String](3) strings(0) = “Hello” strings(1) = “World” strings(3) = “!”
Scala: Construções inteligentes val  listaA = List(1, 2) val  listaB = List(3, 4) val  listaC = listaA :: listaB // listaC é uma nova List val  listaD = listaC :: 5 print(listaD) // saida: List(1,2,3,4,5)
Scala: Construções inteligentes val  map =  new  HashMap[Int, String] treasureMap += 1 -> &quot;Numero 1&quot; treasureMap += 2 -> &quot;Numero 2&quot; treasureMap += 3 -> &quot;Numero 3&quot; println(map(2))  // '2' é a  key , não o indice // saida: “Numero 2” val  romanos = Map(1 -> &quot;I&quot;, 2 -> &quot;II&quot;, 3 -> &quot;III&quot;, 4 -> &quot;IV&quot;, 5 -> &quot;V&quot;) println(romanNumeral(4)) // saida: “IV”
MongoDB
MongoDB Banco de dados NoSQL
Orientado a documentos BSON // representado no estilo JSON Auto-sharding  Escala automaticamente de forma horizontal Map/Reduce

Java mais ágil que nunca no desenvolvimento Web

  • 1.
    Java mais ágilque nunca no desenvolvimento Web Apache Wicket + MongoDB + Scala
  • 2.
    Quem sou eu?twitter: @brunoborges www.brunoborges.com [email_address]
  • 3.
    Desenvolvimento Web éágil? Para a galera dessas tecnologias, sim
  • 4.
    Para os web designers .... não!
  • 5.
  • 6.
    Tipo do Projeto“Pixel Perfect” Aplicação do jeito que o cliente desenhou Um Web Designer Ou uma equipe exclusiva de designers Prototipação Cliente envolvido no processo Alterações no protótipo refletir na aplicação
  • 7.
    O que ajudao designer?
  • 8.
    Isso ajuda também...e MUITO PREVIEW NO BROWSER
  • 9.
    Fazemos isso? publicclass LoginAction extends ActionSupport { public void login() { Connection c = getConnection(); Statement st = c.createStatement(); ResultSet rs = st.executeQuery(“SELECT * FROM USUARIO WHERE ID = “+usuario); setAutenticado(rs.hasNext()); } } Struts Consulta JDBC ??? NÃO
  • 10.
  • 11.
    Interface do UsuárioEsta camada também pode ser quebrada em subcamadas Uma para o web designer
  • 12.
    Outra para oweb developer
  • 13.
    É preciso umamelhor marcação HTML < html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;> <head><title></title></head> < body > < form > <span>Nome:</span> <input type=&quot;text&quot; /> <input type=&quot;submit&quot; value=&quot;Submit&quot; /> </ form > </ body > </ html > Isto é o que o Web Designer faz Isto é o que o usuário do site recebe
  • 14.
    E se... Pudéssemoster uma tecnologia que não altera (quase nada) o que o Web Designer fez?
  • 15.
    < html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;> <head><title></title></head> < body > < form > <span>Nome:</span> <input type=&quot;text&quot; /> <input type=&quot;submit&quot; value=&quot;Submit&quot; /> </ form > </ body > </ html >
  • 16.
    < html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;> <head><title></title></head> < body > < form wicket:id=&quot;form&quot; > <span>Nome:</span> <input wicket:id=&quot;nome&quot; type=&quot;text&quot; /> <input type=&quot;submit&quot; value=&quot;Submit&quot; /> </ form > </ body > </ html >
  • 17.
    Tipos de MarcaçãoXHTML Imperativa (JSF, Struts, SpringMVC, Play!, Ruby on Rails, PHP, Python ...) <form action=”salvar”> <input type=”text” name=”nome” /> <input type=”submit” value=”Salvar” /> </form> < s:form action=”salvar”> < s:input property=”nome” /> < s:submit value=”Salvar” /> </ s:form > O ser humano não nasceu para fazer isso … :-( E nenhum navegador nasceu para renderizar isso …
  • 18.
    Tipos de MarcaçãoXHTML Declarativa (Wicket, Tapestry e poucos outros) <form action=”salvar”> <input type=”text” name=”nome” /> <input type=”submit” value=”Salvar” /> </form> <form wicket:id=”form” > <input type=”text” wicket:id=”nome” /> <input type=”submit” wicket:id=”salvar” /> </form> Bom para o Web Designer e navegador!
  • 19.
  • 20.
  • 21.
    HTML puro Nãoutiliza Taglibs Java puro Desenvolvimento similar ao Swing Orientado a Componentes
  • 22.
    Java + HTML<span wicket:id = ” msg ” > msg de sistema </span> + new Label( “ msg ” , “ We Develop ”); = <span> We Develop </span>
  • 23.
    HTML protótipo /MyHomePage.html<html> <head><title>Apache Wicket</title></head> <body> <span>msg dinamica</span> <form> Nome: <input type=”text” /> Email: <input type=”text” /> <input type=”submit” value=”Enviar” /> </form> </body> </html>
  • 24.
    Marcação não intrusiva/MyHomePage.html <html> <head><title>Apache Wicket</title></head> <body> <span wicket:id=” msg ” >msg dinamica</span> <form wicket:id=” form ” > Nome: <input type=”text” wicket:id=” nome ” /> Email: <input type=”text” wicket:id=” email ” /> <input type=”submit” value=”Enviar” /> </form> </body> </html>
  • 25.
    Toda a lógicada UI: em Java /MyHomePage.java public class MyHomePage extends WebPage { public HomePage() { add(new Label ( “msg” , “We Develop!” )); Form form = new Form(“ form ”) { public void onSubmit() { servico.salvar(getModelObject()); } }; form.add(new TextField(“ nome ”)); form.add(new TextField(“ email ”)); add(form); } } Puro Java e Orientação a Objetos. Sem mágica
  • 26.
    O mínimo deconfiguração <filter> <filter-name>wicket.app</filter-name> <filter-class> org.apache.wicket.protocol.http.WicketFilter </filter-class> <init-param> <param-name>applicationClassName</param-name> <param-value>code.MyApplication</param-value> </init-param> </filter> /MyApplication.java package code; public class MyApplication extends WebApplication { public Class< MyHomePage > getHomePage() { return MyHomePage .class; } }
  • 27.
    Extensível Gmap2 gmap= new Gmap2(“map”); page.add(gmap); <div wicket:id=”map”> Google Maps </div>
  • 28.
  • 29.
    Diversos componentes prontosAlguns com “ Fallback ” Inclusão dinâmica de CSS e JavaScript
  • 30.
    Console independente denavegador, para debug
  • 31.
    Ajax // HTML< span wicket:id=”counter”>contagem</span> < a href =”#” wicket:id=”counterLink”> incrementar </ a > // JAVA int counter = 0; Label counterLabel = new Label(“ counter ”); add(counterLabel); add(new AjaxLink(“counterLink”) { public vond onClick(AjaxRequestTarget target) { counter++ ; counterLabel .setModelObject( counter ); target.addComponent( counterLabel ); } });
  • 32.
  • 33.
    Scala Linguagem Orientadaa Objetos E no fundo, é Java Linguagem funcional
  • 34.
  • 35.
    É extensível Permitefacilmente desenvolver DSLs var foo = 8 foo = “bar” Type mismatch; found: String(“bar”) required: Int
  • 36.
    Scala: antes, emJava /MyHomePage.java public class MyHomePage extends WebPage { public HomePage() { add(new Label ( “msg” , “We Develop!” )); Form form = new Form(“ form ”) { public void onSubmit() { servico.salvar(getModelObject()); } }; form.add(new TextField(“ nome ”)); form.add(new TextField(“ email ”)); add(form); } }
  • 37.
    Scala: depois, emScala /MyHomePage.scala class MyHomePage extends WebPage { add(new Label ( “msg” , “We Develop!” )) object form extends Form(“ form ”) { add(new TextField(“ nome ”)) add(new TextField(“ email ”)) override def onSubmit() = { servico.salvar(getModelObject()) } } add(form) }
  • 38.
    Scala: Uma DSLpara Wicket /MyHomePage.scala class MyHomePage extends WebPage with DSLWicket { label( “msg” , “We Develop!” )) object form extends Form(“ form ”) with DSLWicket { textField[String](“ nome ”)) textField[String](“ email ”)) override def onSubmit() = { servico.salvar(getModelObject()) } } add(form) }
  • 39.
    Scala: Funções Sãorepresentadas como valores também, como objetos val func = () ⇒ { println(“functional programming”) } def chamaFuncao(paramFuncao: () ⇒ Unit) ={ paramFuncao() } chamaFuncao(func)
  • 40.
    Scala: Construções inteligentesA linguagem é rica em construções inteligentes val lista1a9 = 1 to 9 toList lista1a9 .foreach (i ⇒ print(i)) for (i ← lista1a9) { print(i) } val strings = new Array[String](3) strings(0) = “Hello” strings(1) = “World” strings(3) = “!”
  • 41.
    Scala: Construções inteligentesval listaA = List(1, 2) val listaB = List(3, 4) val listaC = listaA :: listaB // listaC é uma nova List val listaD = listaC :: 5 print(listaD) // saida: List(1,2,3,4,5)
  • 42.
    Scala: Construções inteligentesval map = new HashMap[Int, String] treasureMap += 1 -> &quot;Numero 1&quot; treasureMap += 2 -> &quot;Numero 2&quot; treasureMap += 3 -> &quot;Numero 3&quot; println(map(2)) // '2' é a key , não o indice // saida: “Numero 2” val romanos = Map(1 -> &quot;I&quot;, 2 -> &quot;II&quot;, 3 -> &quot;III&quot;, 4 -> &quot;IV&quot;, 5 -> &quot;V&quot;) println(romanNumeral(4)) // saida: “IV”
  • 43.
  • 44.
    MongoDB Banco dedados NoSQL
  • 45.
    Orientado a documentosBSON // representado no estilo JSON Auto-sharding Escala automaticamente de forma horizontal Map/Reduce