Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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,470 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

×