x-tag: Moving away from jQuery

How to adapt jQuery functionality with x-tag

David Lorenz | info@activenode.de | https://github.com/activenode | @activenode_dev

web enthusiast | full-stack developer

x-tag Presentation Part 2 (find Part 1 here)

#javascript #webcomponents #webdevbbq

Outline of this presentation

The fuq is x-tag?
Why not jQuery?
Short look at IE9+ functionality
How to jQuery with x-tag
A view from x-tag at riot.js, React and Angular (open discussion)

Recapitulation:

x-tag allows component based development (WebComponents)
x-tag is 20kb gzipped including all required polyfills to work in IE9+
Allows observing object data inside a component => No need of manually updating components / no manual triggering
x-tag does not act as a wrapper. It acts on DOM-Level. Accessing your DOM allows accessing your x-tag functionality.

code sample below

Custom Element: Fiddle

Extended Native Element: Fiddle

Attribute Observer: Fiddle

Accessor Validation: Fiddle

Mixins: Fiddle

Welcome to jQuery

Need to open a bottle? I'll grab a tank.

Jackhammer missing? Better use a plugin.

jQuery has no specific responsibility

It is not a framework improving architecture
it is a collection of helpers for anything and everything
It was invented when it was actually hard to achieve several things like offset() cross-browser.

IE9+ functionality

Arrays: filter(), map(), forEach()

getComputedStyle(elem, null)

elem.getBoundingClientRect()

JSON.parse()

querySelector() for all CSS3 selectors

Canvas

Small set of tools

with huge effects.

CROSS-BROWSER

But jQuery can do...

animate(..) / fadeIn(..)

For enhancing animations and transitions: CSS3 Anim/Transitions on IE10+

Native and complex but dispensable animations with domElem.animate(..)

(not supported in IE11/Edge and Safari 9.1/9.3 right now)

But jQuery can do...

animate(..) / fadeIn(..)

Indispensable Animations for IE9+ :

VelocityJS - much faster and smoother than jQuery 2.x right now

NO DEPENDENCIES - GZIP'd 12.34kb!


Velocity(
 document.getElementById("dummy"), 
 { opacity: 0.5 }, 
 { 
   duration: 1000, 
   loop: true, 
   progress: (elements, complete, remaining, start, tweenValue)=>{} 
 }
);

But jQuery can do...

$('x-my-element').first().children('.some-children')

//go, go, go
xtag.queryChildren(
  document.querySelector('x-my-element'), 
  '.some-children'
)

too complicated? prototype your DOM Elements

Element.prototype._children = function(sel){
    return xtag.queryChildren(this, sel);
};

//or much better, overwriting the children property
Object.defineProperty(
 Element.prototype, 
 'children', 
 {
   value: function(){return xtag.queryChildren(this, sel)}
 }
);

But jQuery can do...

$('.test').on('click', ()=>{alert('clicked')});

xtag.addEvent(myElement, 'tap', function(event){
  alert('myElement was just tapped ' + this);
});

xtag.addEvent(myElement, 'tap:delegate(div > img)', function(event){
  alert('my image inside div was just tapped ' + this);
});

xtag.addEvents(myElement, {
    'keyup:delegate(input)': function(){},
    tap: function(){}
});

BTW: Unified pointer events

But jQuery can do...

hasClass() / addClass()

Use classList and a Polyfill for IE (Gzip'd 1kb)

//hasClass
document.body.classList.contains('myclass')

//addClass
document.body.classList.add('myclass')

//removeClass
document.body.classList.remove('myclass')

But jQuery can do...

such $.ajax ; many wow

You shall not use old tools..

Use the future and polyfill it. Only that way you can keep up using native browser functionality.

https://github.com/github/fetch

fetch('/users.json')
  .then(function(response) {
    return response.json()
  }).then(function(json) {
    console.log('parsed json', json)
  }).catch(function(ex) {
    console.log('parsing failed', ex)
  })

But jQuery can do...

$.each()

We do not need to argue about each when forEach is natively supported in every browser!

x-tag always returns real arrays, no DOMCollection - so forEach is always available.

But jQuery can do...

$.css('transform',..) with prefixing

x-tag has built-in prefix detector. You just need to use it.

But jQuery can do...

$('<div><input /></div>') - Fragment creation

x-tag can do that too:

xtag.createFragment('<div><input /></div>')

Get into x-tag

some useful links

http://x-tag.github.io/docs
https://x-tag.readme.io/docs/
https://pascalprecht.github.io/2014/07/21/polymer-vs-x-tag-here-is-the-difference/
https://plainjs.com/javascript/

Open Conversation

x-tag!?, React, Angular, RiotJS