Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Nós precisamos falar sobre o jQuery
Search
Vinícius Almeida
September 19, 2015
Programming
0
94
Nós precisamos falar sobre o jQuery
Vinícius Almeida
September 19, 2015
Tweet
Share
More Decks by Vinícius Almeida
See All by Vinícius Almeida
Don't blame yoy tools
viniciusalmeida
0
53
ember-cli - A ambiciosidade migrando para o workflow
viniciusalmeida
1
81
Por que o Rails detona
viniciusalmeida
1
160
Pragmatismo no JavaScript
viniciusalmeida
0
79
Repensando o uso do jQuery
viniciusalmeida
2
550
Uma breve introdução do GruntJS
viniciusalmeida
1
69
Other Decks in Programming
See All in Programming
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
1
16k
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
160
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
0
150
Porting a visionOS App to Android XR
akkeylab
0
420
Hack Claude Code with Claude Code
choplin
3
1k
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
52
33k
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
630
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
520
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
170
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
11k
PipeCDのプラグイン化で目指すところ
warashi
1
270
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
290
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Why Our Code Smells
bkeepers
PRO
337
57k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Code Reviewing Like a Champion
maltzj
524
40k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
A better future with KSS
kneath
239
17k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Statistics for Hackers
jakevdp
799
220k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Balancing Empowerment & Direction
lara
1
420
Transcript
Nós precisamos falar sobre o jQuery @vimoding
Vinícius Almeida @vimoding
Consultor/Programador @vimoding
E fornecedor de mate @vimoding
A semelhança entre os títulos não é por acaso @vimoding
A principal definição para o filme é que ele é
difícil @vimoding
Eu defino da mesma forma a resistência descabida à jQuery
@vimoding
Isso não é sobre ficar na zona de conforto. É
sobre ter uma visão pragmática em relação ao assunto. @vimoding
@vimoding
A idéia é propor uma visão menos passional dos assuntos
vinculados ao frontend em geral. @vimoding
Vamos começar falando sobre alguns dos argumentos padrão @vimoding
1: Eu preciso de uma SPA e a jQuery não
foi feita pra isso. Logo, ela não vai me ajudar. @vimoding
Receber um HTML pronto do servidor e enviar dados utilizando
formulários nunca será uma má idéia. — Jean Carlo Emer. @vimoding
A relação entre alguns devs frontend e as SPAs @vimoding
A necessidade de uma interface rica é muito mais comum
do que uma SPA @vimoding
Alguns dos problemas que precisamos encarar nas SPAs estão muito
bem resolvidos no backend @vimoding
Botar os pés no chão é difícil. Eu sei. Mas
a falha de julgamento nessas situações são um prato cheio para over engineering @vimoding
2: A jQuery é muito pesada. Principalmente por conta do
suporte aos browsers antigos. @vimoding
Esse é o calcanhar de Aquiles da jQuery Mas a
versão 2 da biblioteca já indica um movimento @vimoding
Mas será que a biblioteca é tão grande assim? @vimoding
Quais são as opções no contexto de uma interface rica?
@vimoding
Ok, o approach para a sincronização com uma API precisa
contar com terceiros @vimoding
Veja bem, em nenhuma das situações o approach com jQuery
foi mais pesado do que os demais @vimoding
Ah, mas fora desse contexto a jQuery é enorme! @vimoding
Pois saiba que ainda temos alternativas Outras bibliotecas como a
Zepto provêem uma API “largamente compatível” com a do jQuery pesando apenas 25K @vimoding
Pense nisso. Talvez o tamanho não seja um argumento tão
forte assim. @vimoding
3: Dá pra fazer em Vanilla @vimoding
@vimoding
A API de acesso ao DOM de fato melhorou muito
tendo em vista um passado não muito distante @vimoding
Um desavisado depois de conhecer o querySelectorAll @vimoding
Nós precisamos entender como as abstrações são benéficas para o
nosso código @vimoding
@vimoding
@vimoding
@vimoding
We want to have as much time as we can
for the challenging tasks — Yehuda Katz @vimoding
Então, faz mesmo sentido investir tempo nisso? @vimoding
You need jQuery in many cases. Feel free to re-
create it if you can. But please stop advertising to not use it — Anselm Hannemann @vimoding
GOING FORWARD @vimoding
A jQuery foi amplamente aplicada durante anos Segundo a Wikipédia,
ela está presente em 77% dos 10 mil sites mais visitados do mundo @vimoding
O fato é que a forma de se escrever código
com jQuery é muito sólida @vimoding
O processo de desenvolvimento é documentado e de fácil acesso
@vimoding
E se mudássemos o nosso mind-set? plugin === component @vimoding
jQuery for Fun & Profit @vimoding
Mas cuidado com os gotchas O jQuery way pode não
corresponder ao nível desejado para a sua aplicação @vimoding
Forma padrão de se inicializar um plugin/componente $(document).ready(function() { $('#any-selector').hypotheticPlugin({
firstProperty: foo, anotherProperty: bar }); }); Essa é a pior das convenções do jQuery way @vimoding
Por que ele é ruim? $(document).ready(function(){ $('.some-selector').ninjaMask({mask: '99-9999999'}); }); @vimoding
Por que ele é ruim? $(document).ready(function(){ $('.some-selector').ninjaMask({mask: '99-9999999'}); $('.another-selector').ninjaMask({mask: '99/99/99'});
}); @vimoding
Por que ele é ruim? $(document).ready(function(){ $('.some-selector').ninjaMask({mask: '99-9999999'}); $('.another-selector').ninjaMask({mask: '99/99/99'});
… … … }); Cadê o DRY magrão? @vimoding
Componentes auto detectáveis Sistema onde os componentes a serem inicializados
são declarados no markup @vimoding
O markup Declarando tudo o que é necessário <div data-jquery-component="hypotheticComponent"
data-first-property="foo" data-second-property="bar"> </div> @vimoding
O código JS Utilizando o .data() com maestria $('[data-jquery-component]').each(function(_i, el)
{ var $currentElement = $(el); var options = $currentElement.data(); $currentElement[options.jqueryComponent](options); }); @vimoding
Aplicação real <input data-jquery-component="ninjaMask" data-mask="99-9999999"> <input data-jquery-component="ninjaMask" data-mask="99/99/99"> Sem nenhuma
linha de JS especializada ! @vimoding
Estender a API é fácil Isso é perfeitamente viável para
um desenvolvedor de qualquer nível @vimoding
@vimoding
Mas ainda tem mais… @vimoding
Lazy init de componentes Componentes/plugins inicializados apenas quando eles de
fato forem necessários na aplicação @vimoding
.one() e .is(':visible') ajudam nessa missão @vimoding
! O jQuery é a melhor opção na ampla maioria
dos casos ! Relembrando o disclaimer: Isso não tem a ver com ficar parado no tempo ou estagnado. É tudo uma questão de entendimento do contexto @vimoding
E é o contexto que deve motivar as decisões. E
não as tendências. @vimoding
Obrigado! ->
[email protected]
-> viniciusalmeida.github.io -> speakerdeck.com/viniciusalmeida -> twitter.com/vimoding @vimoding