vlad zelinschi - embrace native javascript (the anti-plugins talk) - codecamp 10 may 2014
DESCRIPTION
Vlad Zelinschi - Embrace Native JavaScript (the anti-plugins talk) - Codecamp 10 may 2014TRANSCRIPT
![Page 1: Vlad Zelinschi - Embrace Native JavaScript (the anti-plugins talk) - Codecamp 10 may 2014](https://reader033.vdocuments.site/reader033/viewer/2022061207/547894bfb4af9ff3488b49a4/html5/thumbnails/1.jpg)
![Page 2: Vlad Zelinschi - Embrace Native JavaScript (the anti-plugins talk) - Codecamp 10 may 2014](https://reader033.vdocuments.site/reader033/viewer/2022061207/547894bfb4af9ff3488b49a4/html5/thumbnails/2.jpg)
Embrace native JavaScript
(the anti-plugins talk)
Vlad ZelinschiFront-end engineer at Yonder
@vladzelinschi
![Page 3: Vlad Zelinschi - Embrace Native JavaScript (the anti-plugins talk) - Codecamp 10 may 2014](https://reader033.vdocuments.site/reader033/viewer/2022061207/547894bfb4af9ff3488b49a4/html5/thumbnails/3.jpg)
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?
![Page 4: Vlad Zelinschi - Embrace Native JavaScript (the anti-plugins talk) - Codecamp 10 may 2014](https://reader033.vdocuments.site/reader033/viewer/2022061207/547894bfb4af9ff3488b49a4/html5/thumbnails/4.jpg)
![Page 5: Vlad Zelinschi - Embrace Native JavaScript (the anti-plugins talk) - Codecamp 10 may 2014](https://reader033.vdocuments.site/reader033/viewer/2022061207/547894bfb4af9ff3488b49a4/html5/thumbnails/5.jpg)
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)
![Page 6: Vlad Zelinschi - Embrace Native JavaScript (the anti-plugins talk) - Codecamp 10 may 2014](https://reader033.vdocuments.site/reader033/viewer/2022061207/547894bfb4af9ff3488b49a4/html5/thumbnails/6.jpg)
AHA! Plugins…
• Developers love them
• I see plugins included everywhere
• It does have an impact on the application’s architecture and performance
![Page 7: Vlad Zelinschi - Embrace Native JavaScript (the anti-plugins talk) - Codecamp 10 may 2014](https://reader033.vdocuments.site/reader033/viewer/2022061207/547894bfb4af9ff3488b49a4/html5/thumbnails/7.jpg)
Drawbacks
• Missing synergy
• Sometimes you are using only a subset of the functionality. Custom build ?
• Dependency (jQuery mostly)
• Performance overhead (requests, file size, etc.)
![Page 8: Vlad Zelinschi - Embrace Native JavaScript (the anti-plugins talk) - Codecamp 10 may 2014](https://reader033.vdocuments.site/reader033/viewer/2022061207/547894bfb4af9ff3488b49a4/html5/thumbnails/8.jpg)
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
![Page 9: Vlad Zelinschi - Embrace Native JavaScript (the anti-plugins talk) - Codecamp 10 may 2014](https://reader033.vdocuments.site/reader033/viewer/2022061207/547894bfb4af9ff3488b49a4/html5/thumbnails/9.jpg)
Plugins are helpful
• Progressive enhancement (with extended browser support)
• Development speed
• Abstracted implementation - API
![Page 10: Vlad Zelinschi - Embrace Native JavaScript (the anti-plugins talk) - Codecamp 10 may 2014](https://reader033.vdocuments.site/reader033/viewer/2022061207/547894bfb4af9ff3488b49a4/html5/thumbnails/10.jpg)
When should weuse / discard
plugins?
![Page 11: Vlad Zelinschi - Embrace Native JavaScript (the anti-plugins talk) - Codecamp 10 may 2014](https://reader033.vdocuments.site/reader033/viewer/2022061207/547894bfb4af9ff3488b49a4/html5/thumbnails/11.jpg)
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)
![Page 12: Vlad Zelinschi - Embrace Native JavaScript (the anti-plugins talk) - Codecamp 10 may 2014](https://reader033.vdocuments.site/reader033/viewer/2022061207/547894bfb4af9ff3488b49a4/html5/thumbnails/12.jpg)
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)
![Page 13: Vlad Zelinschi - Embrace Native JavaScript (the anti-plugins talk) - Codecamp 10 may 2014](https://reader033.vdocuments.site/reader033/viewer/2022061207/547894bfb4af9ff3488b49a4/html5/thumbnails/13.jpg)
Discard plugins when…
• Long dependency chain (jQuery, Underscore)
• Huge file size, no custom build
• Number of requests start to pile up
![Page 14: Vlad Zelinschi - Embrace Native JavaScript (the anti-plugins talk) - Codecamp 10 may 2014](https://reader033.vdocuments.site/reader033/viewer/2022061207/547894bfb4af9ff3488b49a4/html5/thumbnails/14.jpg)
jQuery time…
![Page 15: Vlad Zelinschi - Embrace Native JavaScript (the anti-plugins talk) - Codecamp 10 may 2014](https://reader033.vdocuments.site/reader033/viewer/2022061207/547894bfb4af9ff3488b49a4/html5/thumbnails/15.jpg)
![Page 16: Vlad Zelinschi - Embrace Native JavaScript (the anti-plugins talk) - Codecamp 10 may 2014](https://reader033.vdocuments.site/reader033/viewer/2022061207/547894bfb4af9ff3488b49a4/html5/thumbnails/16.jpg)
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.”
![Page 17: Vlad Zelinschi - Embrace Native JavaScript (the anti-plugins talk) - Codecamp 10 may 2014](https://reader033.vdocuments.site/reader033/viewer/2022061207/547894bfb4af9ff3488b49a4/html5/thumbnails/17.jpg)
But…do we really need jQuery?
![Page 18: Vlad Zelinschi - Embrace Native JavaScript (the anti-plugins talk) - Codecamp 10 may 2014](https://reader033.vdocuments.site/reader033/viewer/2022061207/547894bfb4af9ff3488b49a4/html5/thumbnails/18.jpg)
DOM manipulation
• querySelector, querySelectorAll (IE 8+)
• dataset (or go for getAttribute) (IE 10 stable)
• classList (IE 10+)
![Page 19: Vlad Zelinschi - Embrace Native JavaScript (the anti-plugins talk) - Codecamp 10 may 2014](https://reader033.vdocuments.site/reader033/viewer/2022061207/547894bfb4af9ff3488b49a4/html5/thumbnails/19.jpg)
var addClass = function(el, classToAdd) {
if (el.classList) {
el.classList.add(classToAdd);
}
else {
if (el.className.indexOf(classToAdd) === -1) {
el.className += ' ' + classToAdd;
}
}
};
![Page 20: Vlad Zelinschi - Embrace Native JavaScript (the anti-plugins talk) - Codecamp 10 may 2014](https://reader033.vdocuments.site/reader033/viewer/2022061207/547894bfb4af9ff3488b49a4/html5/thumbnails/20.jpg)
Event handling
• addEventListener (IE 9+)
• removeEventListener (IE 9+)
• Register and trigger you own events
![Page 21: Vlad Zelinschi - Embrace Native JavaScript (the anti-plugins talk) - Codecamp 10 may 2014](https://reader033.vdocuments.site/reader033/viewer/2022061207/547894bfb4af9ff3488b49a4/html5/thumbnails/21.jpg)
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);
};
![Page 22: Vlad Zelinschi - Embrace Native JavaScript (the anti-plugins talk) - Codecamp 10 may 2014](https://reader033.vdocuments.site/reader033/viewer/2022061207/547894bfb4af9ff3488b49a4/html5/thumbnails/22.jpg)
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
![Page 23: Vlad Zelinschi - Embrace Native JavaScript (the anti-plugins talk) - Codecamp 10 may 2014](https://reader033.vdocuments.site/reader033/viewer/2022061207/547894bfb4af9ff3488b49a4/html5/thumbnails/23.jpg)
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)
![Page 24: Vlad Zelinschi - Embrace Native JavaScript (the anti-plugins talk) - Codecamp 10 may 2014](https://reader033.vdocuments.site/reader033/viewer/2022061207/547894bfb4af9ff3488b49a4/html5/thumbnails/24.jpg)
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?
![Page 25: Vlad Zelinschi - Embrace Native JavaScript (the anti-plugins talk) - Codecamp 10 may 2014](https://reader033.vdocuments.site/reader033/viewer/2022061207/547894bfb4af9ff3488b49a4/html5/thumbnails/25.jpg)
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
![Page 26: Vlad Zelinschi - Embrace Native JavaScript (the anti-plugins talk) - Codecamp 10 may 2014](https://reader033.vdocuments.site/reader033/viewer/2022061207/547894bfb4af9ff3488b49a4/html5/thumbnails/26.jpg)
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)
![Page 27: Vlad Zelinschi - Embrace Native JavaScript (the anti-plugins talk) - Codecamp 10 may 2014](https://reader033.vdocuments.site/reader033/viewer/2022061207/547894bfb4af9ff3488b49a4/html5/thumbnails/27.jpg)
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
![Page 28: Vlad Zelinschi - Embrace Native JavaScript (the anti-plugins talk) - Codecamp 10 may 2014](https://reader033.vdocuments.site/reader033/viewer/2022061207/547894bfb4af9ff3488b49a4/html5/thumbnails/28.jpg)
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
![Page 29: Vlad Zelinschi - Embrace Native JavaScript (the anti-plugins talk) - Codecamp 10 may 2014](https://reader033.vdocuments.site/reader033/viewer/2022061207/547894bfb4af9ff3488b49a4/html5/thumbnails/29.jpg)
Wrap-up…
• Including plugins involves technical debt
• More plugins = increased cost of upgrade
![Page 30: Vlad Zelinschi - Embrace Native JavaScript (the anti-plugins talk) - Codecamp 10 may 2014](https://reader033.vdocuments.site/reader033/viewer/2022061207/547894bfb4af9ff3488b49a4/html5/thumbnails/30.jpg)
![Page 31: Vlad Zelinschi - Embrace Native JavaScript (the anti-plugins talk) - Codecamp 10 may 2014](https://reader033.vdocuments.site/reader033/viewer/2022061207/547894bfb4af9ff3488b49a4/html5/thumbnails/31.jpg)
Q&A anyone?
![Page 32: Vlad Zelinschi - Embrace Native JavaScript (the anti-plugins talk) - Codecamp 10 may 2014](https://reader033.vdocuments.site/reader033/viewer/2022061207/547894bfb4af9ff3488b49a4/html5/thumbnails/32.jpg)
![Page 33: Vlad Zelinschi - Embrace Native JavaScript (the anti-plugins talk) - Codecamp 10 may 2014](https://reader033.vdocuments.site/reader033/viewer/2022061207/547894bfb4af9ff3488b49a4/html5/thumbnails/33.jpg)
Thank you!
Vlad ZelinschiFront-end engineer at Yonder
@vladzelinschi