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? <ul><li>Para a galera dessas tecnologias, sim
Para os  web designers ....  não! </li></ul>
Designers vs Developers
Tipo do Projeto <ul><li>“Pixel Perfect” </li><ul><li>Aplicação do jeito que o cliente desenhou </li></ul></ul><ul><li>Um W...
O que ajuda o designer?
Isso ajuda também... e MUITO PREVIEW NO BROWSER
Fazemos isso? <ul>public class LoginAction    extends ActionSupport {   public void login() {   Connection c = getConnecti...
Separação de Camadas
Interface do Usuário <ul><li>Esta camada também pode ser quebrada em subcamadas </li><ul><li>Uma para o web designer
Outra para o web developer </li></ul></ul>
É preciso uma melhor marcação HTML <ul>< html  xmlns=&quot;http://www.w3.org/1999/xhtml&quot;> <head><title></title></head...
E se... <ul>Pudéssemos ter uma tecnologia que não altera  (quase nada)  o que o Web Designer fez? </ul>
<ul>< html  xmlns=&quot;http://www.w3.org/1999/xhtml&quot;> <head><title></title></head> < body > < form > <span>Nome:</sp...
<ul>< html  xmlns=&quot;http://www.w3.org/1999/xhtml&quot;> <head><title></title></head> < body > < form  wicket:id=&quot;...
Tipos de Marcação XHTML Imperativa   (JSF, Struts, SpringMVC, Play!, Ruby on Rails, PHP, Python ...) <form action=”salvar”...
Tipos de Marcação XHTML Declarativa   (Wicket, Tapestry e poucos outros) <form action=”salvar”>   <input type=”text” name=...
Apache Wicket
Apache Wicket <ul><li>Framework Web
HTML puro </li><ul><li>Não utiliza  Taglibs </li></ul><li>Java puro </li><ul><li>Desenvolvimento similar ao Swing </li></u...
Java + HTML <ul><span  wicket:id = ” msg ” > msg de sistema </span> + new  Label( “ msg ” , “ We Develop ”); = <span> We D...
HTML protótipo <ul>/MyHomePage.html <html>   <head><title>Apache Wicket</title></head>   <body>   <span>msg dinamica</span...
Marcação não intrusiva <ul>/MyHomePage.html <html>   <head><title>Apache Wicket</title></head>   <body>   <span  wicket:id...
Toda a lógica da UI: em Java <ul>/MyHomePage.java public class  MyHomePage  extends  WebPage  {   public HomePage() {   ad...
O mínimo de configuração <ul><filter>   <filter-name>wicket.app</filter-name>   <filter-class>   org.apache.wicket.protoco...
Extensível Gmap2 gmap = new Gmap2(“map”); page.add(gmap); <div wicket:id=”map”>   Google Maps </div>
Ajax <ul><li>Suporte nativo
Diversos componentes prontos </li><ul><li>Alguns com “ Fallback ” </li></ul><li>Inclusão dinâmica de CSS e JavaScript
Console independente de navegador, para debug </li></ul>
Ajax <ul>// HTML < span  wicket:id=”counter”>contagem</span> < a href =”#” wicket:id=”counterLink”>   incrementar </ a > /...
Scala
Scala <ul><li>Linguagem Orientada a Objetos </li><ul><li>E no fundo, é Java </li></ul><li>Linguagem funcional
Estaticamente tipada
É extensível </li><ul><li>Permite facilmente desenvolver DSLs </li></ul></ul><ul>var foo = 8 foo = “bar” </ul><ul>Type mis...
Scala: antes, em Java <ul>/MyHomePage.java public class  MyHomePage  extends  WebPage  {   public HomePage() {   add(new  ...
Scala: depois, em Scala <ul>/MyHomePage.scala class  MyHomePage  extends  WebPage  {   add(new  Label ( “msg” ,  “We Devel...
Scala: Uma DSL para Wicket <ul>/MyHomePage.scala class  MyHomePage  extends  WebPage  with DSLWicket  {   label( “msg” ,  ...
Scala: Funções <ul><li>São representadas como valores também, como objetos val  func = () ⇒ {   println(“functional progra...
Scala: Construções inteligentes <ul><li>A linguagem é rica em construções inteligentes val  lista1a9 = 1  to  9  toList li...
Scala: Construções inteligentes <ul>val  listaA = List(1, 2) val  listaB = List(3, 4) val  listaC = listaA :: listaB // li...
Scala: Construções inteligentes <ul>val  map =  new  HashMap[Int, String] treasureMap += 1 -> &quot;Numero 1&quot; treasur...
MongoDB
MongoDB <ul><li>Banco de dados NoSQL
Orientado a documentos </li><ul><li>BSON // representado no estilo JSON </li></ul><li>Auto-sharding  </li><ul><li>Escala a...
Upcoming SlideShare
Loading in …5
×

Java mais ágil que nunca no desenvolvimento Web

2,440 views

Published on

Published in: Technology
  • Be the first to comment

Java mais ágil que nunca no desenvolvimento Web

  1. 1. Java mais ágil que nunca no desenvolvimento Web Apache Wicket + MongoDB + Scala
  2. 2. Quem sou eu? twitter: @brunoborges www.brunoborges.com [email_address]
  3. 3. Desenvolvimento Web é ágil? <ul><li>Para a galera dessas tecnologias, sim
  4. 4. Para os web designers .... não! </li></ul>
  5. 5. Designers vs Developers
  6. 6. Tipo do Projeto <ul><li>“Pixel Perfect” </li><ul><li>Aplicação do jeito que o cliente desenhou </li></ul></ul><ul><li>Um Web Designer </li><ul><li>Ou uma equipe exclusiva de designers </li></ul><li>Prototipação </li><ul><li>Cliente envolvido no processo </li></ul><li>Alterações no protótipo refletir na aplicação </li></ul>
  7. 7. O que ajuda o designer?
  8. 8. Isso ajuda também... e MUITO PREVIEW NO BROWSER
  9. 9. Fazemos isso? <ul>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()); } } </ul>Struts Consulta JDBC ??? NÃO
  10. 10. Separação de Camadas
  11. 11. Interface do Usuário <ul><li>Esta camada também pode ser quebrada em subcamadas </li><ul><li>Uma para o web designer
  12. 12. Outra para o web developer </li></ul></ul>
  13. 13. É preciso uma melhor marcação HTML <ul>< 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 > </ul>Isto é o que o Web Designer faz Isto é o que o usuário do site recebe
  14. 14. E se... <ul>Pudéssemos ter uma tecnologia que não altera (quase nada) o que o Web Designer fez? </ul>
  15. 15. <ul>< 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 > </ul>
  16. 16. <ul>< 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 > </ul>
  17. 17. 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 …
  18. 18. 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!
  19. 19. Apache Wicket
  20. 20. Apache Wicket <ul><li>Framework Web
  21. 21. HTML puro </li><ul><li>Não utiliza Taglibs </li></ul><li>Java puro </li><ul><li>Desenvolvimento similar ao Swing </li></ul><li>Orientado a Componentes </li></ul>
  22. 22. Java + HTML <ul><span wicket:id = ” msg ” > msg de sistema </span> + new Label( “ msg ” , “ We Develop ”); = <span> We Develop </span> </ul>
  23. 23. HTML protótipo <ul>/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> </ul>
  24. 24. Marcação não intrusiva <ul>/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> </ul>
  25. 25. Toda a lógica da UI: em Java <ul>/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); } } </ul>Puro Java e Orientação a Objetos. Sem mágica
  26. 26. O mínimo de configuração <ul><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; } } </ul>
  27. 27. Extensível Gmap2 gmap = new Gmap2(“map”); page.add(gmap); <div wicket:id=”map”> Google Maps </div>
  28. 28. Ajax <ul><li>Suporte nativo
  29. 29. Diversos componentes prontos </li><ul><li>Alguns com “ Fallback ” </li></ul><li>Inclusão dinâmica de CSS e JavaScript
  30. 30. Console independente de navegador, para debug </li></ul>
  31. 31. Ajax <ul>// 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 ); } }); </ul>
  32. 32. Scala
  33. 33. Scala <ul><li>Linguagem Orientada a Objetos </li><ul><li>E no fundo, é Java </li></ul><li>Linguagem funcional
  34. 34. Estaticamente tipada
  35. 35. É extensível </li><ul><li>Permite facilmente desenvolver DSLs </li></ul></ul><ul>var foo = 8 foo = “bar” </ul><ul>Type mismatch; found: String(“bar”) required: Int </ul>
  36. 36. Scala: antes, em Java <ul>/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); } } </ul>
  37. 37. Scala: depois, em Scala <ul>/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) } </ul>
  38. 38. Scala: Uma DSL para Wicket <ul>/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) } </ul>
  39. 39. Scala: Funções <ul><li>São representadas como valores também, como objetos val func = () ⇒ { println(“functional programming”) } def chamaFuncao(paramFuncao: () ⇒ Unit) ={ paramFuncao() } chamaFuncao(func) </li></ul>
  40. 40. Scala: Construções inteligentes <ul><li>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) = “!” </li></ul>
  41. 41. Scala: Construções inteligentes <ul>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) </ul>
  42. 42. Scala: Construções inteligentes <ul>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” </ul>
  43. 43. MongoDB
  44. 44. MongoDB <ul><li>Banco de dados NoSQL
  45. 45. Orientado a documentos </li><ul><li>BSON // representado no estilo JSON </li></ul><li>Auto-sharding </li><ul><li>Escala automaticamente de forma horizontal </li></ul><li>Map/Reduce
  46. 46. GridFS </li><ul><li>Armazenamento de arquivos de qualquer tamanho </li></ul><li>Operações Atômicas </li></ul>
  47. 47. MongoDB <ul><li>O que significa NoSQL? </li><ul><li>Não relacional
  48. 48. Foco em escalabilidade
  49. 49. Fácil modelagem e mudança de dados </li><ul><li>Não exige definição de tabelas ou schemas </li></ul><li>Sem sintaxe SQL </li><ul><li>mas tem gente construindo SQL para NoSQL </li></ul><li>Sem joins e sem transações complexas </li><ul><li>É o que permite escalabilidade horizontal </li></ul></ul></ul>
  50. 50. Principal Vantagem NÃO PRECISA MODELAGEM PRÉVIA Leia-se: diagramas de tabelas, joins, constraints e o escambal
  51. 51. MongoDB <ul><li>Quem utiliza? </li><ul><li>The New York Times
  52. 52. Business Insider
  53. 53. Foursquare
  54. 54. Sourceforge
  55. 55. Craigslist
  56. 56. Eletronic Arts </li></ul></ul>
  57. 57. MongoDB: como é por dentro? <ul>$ mongo dbTeste MongoDB shell version: 1.8.2 connecting to: dbTeste > db.colecao.find(); > db.colecao.save({foo: &quot;bar&quot;}); > db.colecao.save({bar: &quot;foo&quot;}); > db.colecao.find(); { &quot;_id&quot;: ObjectId(“4e4d11f9cc937416b0004469&quot;), &quot;foo&quot;: &quot;bar&quot; } {&quot;_id&quot;: ObjectId(&quot;4e4d128ecc937416b000446a&quot;), &quot;bar&quot;: &quot;foo&quot; } </ul>
  58. 58. MongoDB <ul><li>Driver Java
  59. 59. E um pacote para Scala </li><ul><li>Casbah
  60. 60. val newObj = MongoDBObject(&quot;foo&quot; -> &quot;bar&quot;,
  61. 61. &quot;x&quot; -> &quot;y&quot;,
  62. 62. &quot;pie&quot; -> 3.14,
  63. 63. &quot;spam&quot; -> &quot;eggs&quot;)
  64. 64. // newObj: com.mongodb.casbah.Imports.DBObject
  65. 65. // { &quot;foo&quot; : &quot;bar&quot; , &quot;x&quot; : &quot;y&quot; , &quot;pie&quot; : 3.14 , &quot;spam&quot; : &quot;eggs&quot;} </li></ul></ul>
  66. 66. Juntando os 3 Apache Wicket + Scala + MongoDB _________________ Projeto Gamboa www.gamboa-project.org
  67. 67. Obrigado Bruno Borges [email_address] www.cursodewicket.com

×