jQuery:

Saptak Sengupta

@Saptak013

To Do Or Not To Do

Hi,

  • Open Source Contributor
  • Web Developer - Zomato
  • Mentor/Coach - RGSoC, GCI

@Saptak013

https://pixabay.com/p-2201004/

@Saptak013

What we gonna talk about

$('selector')
    .hide();

@Saptak013

@Saptak013

Few Things jQuery Does

  • DOM Manipulation
  • DOM Traversal
  • Event Handling
  • Animations
  • CSS modifications
  • Ajax

@Saptak013

Web Development Evolved

  • Best Practices changed
  • Websites now have become web applications

@Saptak013

Browsers Evolved

  • Browsers now can handle a lot of things primitively
  • querySelectors
  • No more confusing XMLHTTPRequest code

@Saptak013

And jQuery Impacted a lot

 

  • $('') -> querySelector
  • $.ajax() -> fetch
  • All browsers implemented similar APIs as jQuery

@Saptak013

@Saptak013

Why not just fix it?

  • Fixed some problems by removing bad APIs
  • jQuery Migrate plugin
  • Developers have to code responsibly

@Saptak013

Things to Avoid

  • Nonstandard selectors, especially positional selectors
 :first, :even, :eq(<N>), :lt(<N>), etc.

@Saptak013

Things to Avoid

  • Showing elements (.show()/.slideDown()/etc.) that are hidden by cascaded CSS styles as opposed to inline
  • Using position getters/setters for elements under transformed ancestors (jquery/jquery#3479) [Change in w3c standards]
p { display: none }

$( "<p>Hello</p>" ).show().appendTo( "body" );

@Saptak013

Things to Avoid

  • Avoids accessing properties such as client/offset/page/screen X/Y which may cause style recalculations or layout

  • Passing .trigger parameters to checkbox/radio clicks or focus/blur events (jquery/jquery#3751 and related)
  • Don't blindly trust the data you receive from a user or URL to prevent XSS holes.

@Saptak013

@Saptak013

depre-carnations

These functions have either lost some of their usefulness over time, are considered to be less favorable than available alternatives, or were intended for internal usage from the beginning.

we do not consider the deprecation of a method to mean that it will be removed; it means that we encourage the use of alternatives.

@Saptak013

Deprecations

  • jQuery.isWindow
  • jQuery.isNumeric
  • jQuery.camelCase
  • jQuery.isFunction

Internal Usage

@Saptak013

Deprecations

Event Aliases

Use

$( 'selector' ).on( 'click', function(){
    //do Something!!
} );

Instead of

$( 'selector' ).click( function(){
    //do Something!!
} );

@Saptak013

Deprecations

Event Aliases

Why?   -   Handles Event Delegation

Meaning .on() works on elements that are added to document later.

Also, .click() operates in a reverse order for the trigger scenario and hence is not preferred by the core team

@Saptak013

What's New?

  • jQuery Slim
  • The .addClass(), .removeClass(), and .toggleClass() methods now accept an array of classes.

@Saptak013

Roadmap

  • Use new DOM/ES features, if they improve performance.
  • Improve support for "Web Components" features like ShadowRoot.
  • Create a Web Download Builder
  • Standardize "invalid input" behavior

@Saptak013

References

  • https://blog.jquery.com/2018/01/19/jquery-3-3-0-a-fragrant-bouquet-of-deprecations-and-is-that-a-new-feature/
  • https://github.com/jquery/jquery/wiki/Roadmap
  • https://github.com/jquery/api.jquery.com/issues/972
  • https://github.com/jquery/jquery​
  • http://jquery.com/browser-support/​
  • https://contribute.jquery.org/​

@Saptak013

Thanks!

Twitter:                           @Saptak013

Almost Everywhere else:       saptaks

Slides ideas by @davemethvin

jQuery: To Do or Not To Do

By Saptak Sengupta

jQuery: To Do or Not To Do

  • 401
Loading comments...

More from Saptak Sengupta