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
90
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
51
ember-cli - A ambiciosidade migrando para o workflow
viniciusalmeida
1
78
Por que o Rails detona
viniciusalmeida
1
160
Pragmatismo no JavaScript
viniciusalmeida
0
76
Repensando o uso do jQuery
viniciusalmeida
2
530
Uma breve introdução do GruntJS
viniciusalmeida
1
65
Other Decks in Programming
See All in Programming
Tauriでネイティブアプリを作りたい
tsucchinoko
0
370
Nurturing OpenJDK distribution: Eclipse Temurin Success History and plan
ivargrimstad
0
940
Outline View in SwiftUI
1024jp
1
330
A Journey of Contribution and Collaboration in Open Source
ivargrimstad
0
950
LLM生成文章の精度評価自動化とプロンプトチューニングの効率化について
layerx
PRO
2
190
タクシーアプリ『GO』のリアルタイムデータ分析基盤における機械学習サービスの活用
mot_techtalk
4
1.4k
Jakarta EE meets AI
ivargrimstad
0
110
2024/11/8 関西Kaggler会 2024 #3 / Kaggle Kernel で Gemma 2 × vLLM を動かす。
kohecchi
5
930
EMになってからチームの成果を最大化するために取り組んだこと/ Maximize team performance as EM
nashiusagi
0
100
Streams APIとTCPフロー制御 / Web Streams API and TCP flow control
tasshi
2
350
AI時代におけるSRE、 あるいはエンジニアの生存戦略
pyama86
6
1.2k
Flutterを言い訳にしない!アプリの使い心地改善テクニック5選🔥
kno3a87
1
190
Featured
See All Featured
Unsuck your backbone
ammeep
668
57k
Thoughts on Productivity
jonyablonski
67
4.3k
Side Projects
sachag
452
42k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
229
52k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
Writing Fast Ruby
sferik
627
61k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
93
16k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
329
21k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
Teambox: Starting and Learning
jrom
133
8.8k
[RailsConf 2023] Rails as a piece of cake
palkan
52
4.9k
Scaling GitHub
holman
458
140k
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