jQuery: write less, do moreHugo Santos

http://netponto.org10ª Reunião Presencial - 15/05/2010

Hugo SantosConsultor, Agap2 ConsultingFreelancerMicrosoft Certified Professional Developer ASP.NET 3.5

Agenda

• Apresentação do jQuery• Aplicações do jQuery?• Vantagens• Integração jQuery & VS2010• Plugins• jQuery UI• jQuery Templating

Apresentação do jQuery

“jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.”

jquery.com

Apresentação do jQuery

Site oficialhttp://jquery.comCoreDocumentaçãoExemplosPluginsComunidades

Aplicações do jQuery?

As aplicações ricas com forte componente interactiva tem cativado as grandes organizações a adoptar o jQuery nas suas soluções

Vantagens

Resolução de incompatibilidades entre os browsersRedução de códigoMelhor performanceReutilização de códigoVasta galeria de pluginsComunidade activaApoio Microsoft

DEMO 1: Setup do ambiente de Desenvolvimento

demonstração

Integração VS2010 & jQuery– Suporte nativo no VS2010 para jQuery

• Web forms & MVC• Documentação• Intellisense• Code snipets

DEMO 2: Primeiros passos…

demonstração

Plugins– Ajax, Animação, Dados, Forms, Layout, Media, Validação,

Menus, UI, etc

Os meus preferidos:– Validation plugin - http://www.unwrongest.com/projects/valid8/

– TableSorter plugin - http://www.datatables.net/

– jQuery lightbox plugin - http://leandrovieira.com/projects/jquery/lightbox/

– highCharts - http://www.highcharts.com/

jQuery UI– Conjunto de widgets e tools que

aceleram o desenvolvimento e proporcionam uma interface fluida implementada em jQuery

– Theme builder permite customizar o aspecto dos controlos

– …ver também o jQuery Tools - http://flowplayer.org/tools/index.html

jQuery UIWidgets– Accordion– Autocomplete– Button– Datepicker– Dialog– Progressbar– Slider

jQuery UIInteracções– Draggable– Droppable– Resizable– Selectable– Sortable

DEMO 3: jQuery UI

demonstração

jQuery Templating

Templates HTML para suportar renderização orientada a objectos Javascript na criação de aplicações “data driven”– “Data bind” e render do HTML no cliente– Separação de layout VS código js–Mais fácil de manter

DEMO 4: jQuery templating

demonstração

Dúvidas?

ReferênciasjQuery Project

– http://www.jquery.org

jQuery: Write less, do more, Javascript Library– http://www.jquery.com

jQuery UI– http://www.jquery.ui

jQuery Templates and Data Linking (and Microsoft contributing to jQuery)– http://weblogs.asp.net/scottgu/archive/2010/05/07/jquery-templates-and-d

ata-linking-and-microsoft-contributing-to-jquery.aspx

Patrocinadores desta reunião

Paulo Morgado

Obrigado!

Hugo Santoshugo@hugosantos.comlinkedin.com/in/hfsantostwitter.com/h_fsantos