JavaScript Sexy com jQuery, Underscore e Backbone

  • 3,908 views
Uploaded on

Apresentação sobre um projeto bem estruturado em Client Side (browser). …

Apresentação sobre um projeto bem estruturado em Client Side (browser).

O Backbone é uma framework que se extende da biblioteca Underscore e é muito leve, se integrando com o jQuery e formando uma conjunto killer para aplicações robustas de frontend!

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
3,908
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
53
Comments
3
Likes
13

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. JavaScript Sexy comjQuery, Underscore & BackBone Leo Balter - Rio.JS
  • 2. jQueryA biblioteca que todos já conhecem mas parece que falta algo...
  • 3. jQuery
  • 4. jQuery• Manipulação de Dom• Ajax• Animações• Eventos• Faz tudo isso de forma simples e rápida
  • 5. Apenas uma biblioteca
  • 6. Inversão deControle
  • 7. Uma biblioteca não teminversão de controle!
  • 8. Uma biblioteca não teminversão de controle!
  • 9. Uma biblioteca não teminversão de controle!
  • 10. Uma biblioteca não teminversão de controle!
  • 11. Mas o jQuery...
  • 12. Mas o jQuery...• Não cria estrutura para suas aplicações JS (não é um framework)
  • 13. Mas o jQuery...• Não cria estrutura para suas aplicações JS (não é um framework)• Isso é ótimo para ‘scripts’ pequenos
  • 14. Mas o jQuery...• Não cria estrutura para suas aplicações JS (não é um framework)• Isso é ótimo para ‘scripts’ pequenos• A estrutura frontend pode precisar escalar e
  • 15. Mas o jQuery...• Não cria estrutura para suas aplicações JS (não é um framework)• Isso é ótimo para ‘scripts’ pequenos• A estrutura frontend pode precisar escalar e• “omg! uma sopa de seletores e callbacks???”
  • 16. O que o jQuery não faz
  • 17. O que o jQuery não faz• Estrutura do seu código JavaScript
  • 18. O que o jQuery não faz• Estrutura do seu código JavaScript• Sistema de templates (jQuery Template é um addon)
  • 19. O que o jQuery não faz• Estrutura do seu código JavaScript• Sistema de templates (jQuery Template é um addon)• CRUD
  • 20. O que o jQuery não faz• Estrutura do seu código JavaScript• Sistema de templates (jQuery Template é um addon)• CRUD• Estrutura de comunicação
  • 21. O que o jQuery não faz• Estrutura do seu código JavaScript• Sistema de templates (jQuery Template é um addon)• CRUD• Estrutura de comunicação• ... tudo que um framework deveria fazer...
  • 22. Underscore O seu cinto de utilidades JS
  • 23. Underscore ou _
  • 24. Underscore ou _• _ < 4KB
  • 25. Underscore ou _• _ < 4KB• Também não é um framework
  • 26. Underscore ou _• _ < 4KB• Também não é um framework• Trás ao JavaScript várias funcionalidades (60 métodos)
  • 27. Underscore ou _• _ < 4KB• Também não é um framework• Trás ao JavaScript várias funcionalidades (60 métodos)• Sem extender objetos nativos (vide Prototype.js) e sem aumentar o escopo global
  • 28. _ é flexível
  • 29. _ é flexível• Você pode utilizar ele com qualquer outra biblioteca JS
  • 30. _ é flexível• Você pode utilizar ele com qualquer outra biblioteca JS• Pode estilizar seu código em formas funcionais ou orientadas a objetos
  • 31. _ é flexível• Você pode utilizar ele com qualquer outra biblioteca JS• Pode estilizar seu código em formas funcionais ou orientadas a objetos• Pode criar corrente de métodos (ou não)
  • 32. O retorno é: [2, 4, 6]
  • 33. No modo OO podemosutilizar corrente de métodos com o .chain()
  • 34. Corrente(não é de email)
  • 35. Corrente(não é de email) O value encerra a corrente retornando o valor final
  • 36. Além do _.map
  • 37. Além do _.map• Coleções: _.each, _.select, _.reduce, _.detect, _.reject, _.sortBy, _.include, _.groupBy ...
  • 38. Além do _.map• Coleções: _.each, _.select, _.reduce, _.detect, _.reject, _.sortBy, _.include, _.groupBy ...• Utilitários de funções: _.bind, _.bindAll, _.delay, _.memoize, _.defer, _.once, _.after ...
  • 39. Além do _.map• Coleções: _.each, _.select, • Utilitários de objetos: _.reduce, _.detect, _.reject, _.keys, _.values, _.extend, _.sortBy, _.include, _.defaults, _.clone, _.tap ... _.groupBy ...• Utilitários de funções: _.bind, _.bindAll, _.delay, _.memoize, _.defer, _.once, _.after ...
  • 40. Além do _.map• Coleções: _.each, _.select, • Utilitários de objetos: _.reduce, _.detect, _.reject, _.keys, _.values, _.extend, _.sortBy, _.include, _.defaults, _.clone, _.tap ... _.groupBy ... • Tipos e valores: _.isEmpty,• Utilitários de funções: _.isFunction, _.isString, _.bind, _.bindAll, _.delay, _.isNaN, _.isRegExp ... _.memoize, _.defer, _.once, _.after ...
  • 41. Além do _.map• Coleções: _.each, _.select, • Utilitários de objetos: _.reduce, _.detect, _.reject, _.keys, _.values, _.extend, _.sortBy, _.include, _.defaults, _.clone, _.tap ... _.groupBy ... • Tipos e valores: _.isEmpty,• Utilitários de funções: _.isFunction, _.isString, _.bind, _.bindAll, _.delay, _.isNaN, _.isRegExp ... _.memoize, _.defer, _.once, _.after ... • Utilitários: _.times, _.template, _.noConflict...
  • 42. _.template
  • 43. Backbone.JS Além do Jardim de Infância
  • 44. Agora sim um Framework!
  • 45. Agora sim um Framework!• Estrutura MVC
  • 46. Agora sim um Framework!• Estrutura MVC• Backbone tem < 4KB!
  • 47. Agora sim um Framework!• Estrutura MVC• Backbone tem < 4KB!• RESTful CRUD
  • 48. Agora sim um Framework!• Estrutura MVC• Backbone tem < 4KB!• RESTful CRUD• Aplicativos em uma única página! (gmail fastfood)
  • 49. Agora sim um Framework!• Estrutura MVC• Backbone tem < 4KB!• RESTful CRUD• Aplicativos em uma única página! (gmail fastfood)• Requer Underscore.js e se integra com o jQuery (e JSON2)
  • 50. MVC do Backbone
  • 51. MVC do Backbone• Model
  • 52. MVC do Backbone• Model• View
  • 53. MVC do Backbone• Model• View• Router
  • 54. MVC do Backbone• Model• View• Router• Collections
  • 55. Backbone.Model
  • 56. Backbone.View
  • 57. Backbone.View
  • 58. Backbone.View
  • 59. Backbone.View
  • 60. Backbone.View
  • 61. Backbone.View
  • 62. Backbone.View
  • 63. Backbone.View
  • 64. Backbone.View
  • 65. Backbone.View
  • 66. Backbone.Router
  • 67. Backbone.Router
  • 68. Backbone.Router
  • 69. Backbone.Router
  • 70. Backbone.Router
  • 71. Backbone.Router
  • 72. Backbone.Router
  • 73. Backbone.Router
  • 74. Backbone.Router
  • 75. Backbone.Router
  • 76. Backbone.Collections
  • 77. Backbone.Collections
  • 78. Backbone.Collections
  • 79. Backbone.Collections
  • 80. Backbone.Collections
  • 81. Além da estrutura
  • 82. Backbone.events
  • 83. Backbone.events• Manipula eventos customizados anexados a um objeto
  • 84. Backbone.events• Manipula eventos customizados anexados a um objeto• “all” se aplica a qualquer evento (marcados com essa classe
  • 85. Backbone.events• Manipula eventos customizados anexados a um objeto• “all” se aplica a qualquer evento (marcados com essa classe
  • 86. Backbone.sync
  • 87. Backbone.sync• Classe para gravação e sincronismo com o servidor
  • 88. Backbone.sync• Classe para gravação e sincronismo com o servidor• Baseado nos modelos definidos
  • 89. Backbone.sync• Classe para gravação e sincronismo com o servidor• Baseado nos modelos definidos• CRUD pronto
  • 90. Backbone.sync• Classe para gravação e sincronismo com o servidor• Baseado nos modelos definidos• CRUD pronto• Envio e Recebimento com estrutura JSON por Ajax
  • 91. Backbone.sync• Classe para gravação e sincronismo com o servidor• Baseado nos modelos definidos• CRUD pronto• Envio e Recebimento com estrutura JSON por Ajax
  • 92. Exemplos:http://documentcloud.github.com/backbone/examples/todos/index.html ou apenas: http://minim.in/PG
  • 93. Vantagens de umJavascript Sexy
  • 94. • totalmente agnóstico em relação à linguagem do servidor (whatever como todo bom Frontend deve se comportar).
  • 95. • totalmente agnóstico em relação à linguagem do servidor (whatever como todo bom Frontend deve se comportar).• bem documentado
  • 96. • totalmente agnóstico em relação à linguagem do servidor (whatever como todo bom Frontend deve se comportar).• bem documentado• menos spaghetti code
  • 97. • totalmente agnóstico em relação à linguagem do servidor (whatever como todo bom Frontend deve se comportar).• bem documentado• menos spaghetti code• menor carga nos servidores sem montar um frontend pesadão
  • 98. Códigos• http://jquery.com• http://documentcloud.github.com/underscore/• http://documentcloud.github.com/backbone/#• https://github.com/douglascrockford/JSON-js
  • 99. Referências e Fontes• @documentcloud• http://backbonetutorials.com/• https://groups.google.com/forum/#!forum/ backbonejs• http://ryandotsmith.heroku.com/2010/10/a- backbone-js-demo-app-sinatra-backend.html
  • 100. Alguns Exemplos Utilizados aqui http://minim.in/PH
  • 101. Muito Obrigado! @leobalter leonardo.balter@gmail.com