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

  1. The fuq is x-tag?
  2. Why not jQuery?
  3. Short look at IE9+ functionality
  4. How to jQuery with x-tag
  5. 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

xtag.js: Moving from JQuery to component based x-tag

By activenode

Made with Slides.com

xtag.js: Moving from JQuery to component based x-tag

This is Part 2 of the xtag presentation (http://activenode.github.io/p/x-tag/). tl;dr: How to move from JQuery to xtag.js. Nowadays everyone is using jQuery because it became some kind of standard tool that has to be included in every project no matter what. jQuery <= v2 is no high-level architectural framework but a collection of very helpful tools of which many became redundant by growing native support of technologies in browsers. xtag on the other hand provides actual additional value by allowing WebComponent based development with a lot of features that can make jQuery obsolete.

  • 1,315

More from activenode