Tweet
Tweet

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

Embrace native JavaScript (the anti-plugins talk) Vlad Zelinschi Frontend engineer at Yonder @vladzelinschi

Slide 3

Slide 3 text

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?

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

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)

Slide 6

Slide 6 text

AHA! Plugins… • Developers love them • I see plugins included everywhere • It does have an impact on the application’s architecture and performance

Slide 7

Slide 7 text

Drawbacks • Missing synergy • Sometimes you are using only a subset of the functionality. Custom build ? • Dependency (jQuery mostly) • Performance overhead (requests, file size, etc.)

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Plugins are helpful • Progressive enhancement (with extended browser support) • Development speed • Abstracted implementation - API

Slide 10

Slide 10 text

When should we use / discard plugins?

Slide 11

Slide 11 text

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)

Slide 12

Slide 12 text

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)

Slide 13

Slide 13 text

Discard plugins when… • Long dependency chain (jQuery, Underscore) • Huge file size, no custom build • Number of requests start to pile up

Slide 14

Slide 14 text

jQuery time…

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

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.”

Slide 17

Slide 17 text

But…do we really need jQuery?

Slide 18

Slide 18 text

DOM manipulation • querySelector, querySelectorAll (IE 8+) • dataset (or go for getAttribute) (IE 10 stable) • classList (IE 10+)

Slide 19

Slide 19 text

var addClass = function(el, classToAdd) { if (el.classList) { el.classList.add(classToAdd); } else { if (el.className.indexOf(classToAdd) === -1) { el.className += ' ' + classToAdd; } } };

Slide 20

Slide 20 text

Event handling • addEventListener (IE 9+) • removeEventListener (IE 9+) • Register and trigger you own events

Slide 21

Slide 21 text

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); };

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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)

Slide 24

Slide 24 text

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?

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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)

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

Wrap-up… • Including plugins involves technical debt • More plugins = increased cost of upgrade

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

Q&A anyone?

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

Thank you! Vlad Zelinschi Frontend engineer at Yonder @vladzelinschi