Embrace native 
JavaScript 
(the anti-plugins talk) 
Vlad Zelinschi 
Front-end engineer at Yonder 
@vladzelinschi
Disclaimer 
• Personal frustration 
• I’m not here to specifically hit the open-source 
plugins ecosystem with a hammer, a...
Plugins? Say what? 
• A bunch of code that does something for you, so 
you can easily relax and open Facebook 
• Abstracts...
AHA! Plugins… 
• Developers love them 
• I see plugins included everywhere 
• It does have an impact on the application’s ...
Drawbacks 
• Missing synergy 
• Sometimes you are using only a subset of the 
functionality. Custom build ? 
• Dependency ...
Alternatives 
• Uploader 
• Video/Audio 
Players 
• Drag & drop 
• DOM 
manipulation 
VS. 
• File API 
• Native video/audi...
Plugins are helpful 
• Progressive enhancement (with extended browser 
support) 
• Development speed 
• Abstracted impleme...
When should we 
use / discard 
plugins?
Use plugins when… 
• You’re abusing their entire (almost) API 
• The development effort to replicate the functionality 
is...
Discard plugins when… 
• The effort to implement it yourself is low (and you 
can use native modern JS APIs) 
• IE 9+ (IE ...
Discard plugins when… 
• Long dependency chain (jQuery, Underscore) 
• Huge file size, no custom build 
• Number of reques...
jQuery time…
jQuery truths… 
• Released january 2006 (8 years ago) 
• Most popular JavaScript library 
• “[…] makes things like HTML do...
But…do we really 
need jQuery?
DOM manipulation 
• querySelector, querySelectorAll (IE 8+) 
• dataset (or go for getAttribute) (IE 10 stable) 
• classLis...
var addClass = function(el, classToAdd) { 
if (el.classList) { 
el.classList.add(classToAdd); 
} 
else { 
if (el.className...
Event handling 
• addEventListener (IE 9+) 
• removeEventListener (IE 9+) 
• Register and trigger you own events
var _cE = window.CustomEvent || null; 
var triggerCustomEvent = function(el, evName, obj) { 
var ev; 
if (_cE) { 
ev = new...
Animations 
• CSS transitions (IE 10+) 
• CSS animations (IE 10+) 
• setTimeout vs. requestAnimationFrame (IE 10+) 
• rAF ...
AJAX 
• Better support (normalized implementations - even 
for older browsers) 
• CORS support 
• Events: abort, progress ...
Other things… 
• $.each and other Array enhancement plugins vs. 
native Array methods - filter, map, some, reverse, 
reduc...
When to use jQuery… 
• Refactoring is not an option (time, money) 
• Support older codebases (legacy code) - might be 
tie...
When to drop jQuery… 
• You’re building a small-sized app (no complexity 
needed) 
• In case of medium, large apps - chose...
When to drop jQuery… 
• Speed, performance, optimizations - native is 
always (more or less) faster, less code to download...
Wrap-up… 
• Always analyze your context 
• Research before you take the decision of importing 
a certain plugin / library ...
Wrap-up… 
• Including plugins involves technical debt 
• More plugins = increased cost of upgrade
Q&A anyone?
Thank you! 
Vlad Zelinschi 
Front-end engineer at Yonder 
@vladzelinschi
Vlad Zelinschi - Embrace Native JavaScript (the anti-plugins talk) - Codecamp 10 may 2014
Vlad Zelinschi - Embrace Native JavaScript (the anti-plugins talk) - Codecamp 10 may 2014
Vlad Zelinschi - Embrace Native JavaScript (the anti-plugins talk) - Codecamp 10 may 2014
Vlad Zelinschi - Embrace Native JavaScript (the anti-plugins talk) - Codecamp 10 may 2014
Vlad Zelinschi - Embrace Native JavaScript (the anti-plugins talk) - Codecamp 10 may 2014
Upcoming SlideShare
Loading in …5
×

Vlad Zelinschi - Embrace Native JavaScript (the anti-plugins talk) - Codecamp 10 may 2014

179
-1

Published on

Vlad Zelinschi - Embrace Native JavaScript (the anti-plugins talk) - Codecamp 10 may 2014

Published in: Software
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
179
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Vlad Zelinschi - Embrace Native JavaScript (the anti-plugins talk) - Codecamp 10 may 2014

  1. 1. Embrace native JavaScript (the anti-plugins talk) Vlad Zelinschi Front-end engineer at Yonder @vladzelinschi
  2. 2. Disclaimer • Personal frustration • I’m not here to specifically hit the open-source plugins ecosystem with a hammer, although it might seem like I do • “The anti-plugins talk” (bound to specific conditions) • Any black-belt jQuery fans in the room?
  3. 3. Plugins? Say what? • A bunch of code that does something for you, so you can easily relax and open Facebook • Abstracts away the implementation • Provides an API to work with • Improved development speed, tested & proven, stable, maintained & continuously improved (the happy scenario)
  4. 4. AHA! Plugins… • Developers love them • I see plugins included everywhere • It does have an impact on the application’s architecture and performance
  5. 5. Drawbacks • Missing synergy • Sometimes you are using only a subset of the functionality. Custom build ? • Dependency (jQuery mostly) • Performance overhead (requests, file size, etc.)
  6. 6. Alternatives • Uploader • Video/Audio Players • Drag & drop • DOM manipulation VS. • File API • Native video/audio tags • Native drag & drop • querySelector, querySelectorAll, etc. • History API, offline cache, storing capabilities, IndexDB, geolocation
  7. 7. Plugins are helpful • Progressive enhancement (with extended browser support) • Development speed • Abstracted implementation - API
  8. 8. When should we use / discard plugins?
  9. 9. Use plugins when… • You’re abusing their entire (almost) API • The development effort to replicate the functionality is out of the question • Browser support • Rapid prototyping (Twitter Bootstrap, Foundation)
  10. 10. Discard plugins when… • The effort to implement it yourself is low (and you can use native modern JS APIs) • IE 9+ (IE 8 also for some APIs) • You’re building custom functionality and looks (example: Twitter Flight)
  11. 11. Discard plugins when… • Long dependency chain (jQuery, Underscore) • Huge file size, no custom build • Number of requests start to pile up
  12. 12. jQuery time…
  13. 13. jQuery truths… • Released january 2006 (8 years ago) • Most popular JavaScript library • “[…] makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.”
  14. 14. But…do we really need jQuery?
  15. 15. DOM manipulation • querySelector, querySelectorAll (IE 8+) • dataset (or go for getAttribute) (IE 10 stable) • classList (IE 10+)
  16. 16. var addClass = function(el, classToAdd) { if (el.classList) { el.classList.add(classToAdd); } else { if (el.className.indexOf(classToAdd) === -1) { el.className += ' ' + classToAdd; } } };
  17. 17. Event handling • addEventListener (IE 9+) • removeEventListener (IE 9+) • Register and trigger you own events
  18. 18. var _cE = window.CustomEvent || null; var triggerCustomEvent = function(el, evName, obj) { var ev; if (_cE) { ev = new CustomEvent(evName, { detail: obj }); } else { ev = document.createEvent('CustomEvent'); ev.initCustomEvent(evName, true, true, obj); } el.dispatchEvent(ev); };
  19. 19. Animations • CSS transitions (IE 10+) • CSS animations (IE 10+) • setTimeout vs. requestAnimationFrame (IE 10+) • rAF is highly optimized and always a better choice when going for 60 fps
  20. 20. AJAX • Better support (normalized implementations - even for older browsers) • CORS support • Events: abort, progress for both upload and download • FormData API (fastest but it cannot be stringified)
  21. 21. Other things… • $.each and other Array enhancement plugins vs. native Array methods - filter, map, some, reverse, reduce, every, etc. • Templating engines - do you really need something else than what you have at your disposal?
  22. 22. When to use jQuery… • Refactoring is not an option (time, money) • Support older codebases (legacy code) - might be tied to a specific version • Developers common ground
  23. 23. When to drop jQuery… • You’re building a small-sized app (no complexity needed) • In case of medium, large apps - chose an MVC framework anyway • Browser support allows it (although newer versions of jQuery dropped legacy browsers)
  24. 24. When to drop jQuery… • Speed, performance, optimizations - native is always (more or less) faster, less code to download, fewer requests • DO NOT use jQuery with Angular - millions of kittens die every time you do that
  25. 25. Wrap-up… • Always analyze your context • Research before you take the decision of importing a certain plugin / library / framework • Never sacrifice performance - try to stay within the performance budget
  26. 26. Wrap-up… • Including plugins involves technical debt • More plugins = increased cost of upgrade
  27. 27. Q&A anyone?
  28. 28. Thank you! Vlad Zelinschi Front-end engineer at Yonder @vladzelinschi

×