$30 off During Our Annual Pro Sale. View Details »

Render Conf: How jQuery has influenced the web

Render Conf: How jQuery has influenced the web

Jack Franklin

April 21, 2016
Tweet

More Decks by Jack Franklin

Other Decks in Technology

Transcript

  1. View Slide

  2. @Jack_Franklin
    pusher.com
    javascriptplayground.com

    View Slide

  3. Finally, I announced my second
    new release of the evening:
    jQuery: New Wave Javascript. In a
    nutshell, this code revolutionizes
    the way you can get Javascript to
    interact with HTML
    John Resig, Jan 16, 2006
    http://ejohn.org/blog/barcampnyc-wrap-up/

    View Slide

  4. http://genius.it/5088474/ejohn.org/files/jquery-original.html

    View Slide

  5. View Slide

  6. https://www.flickr.com/photos/donlunzo16/13108762695/

    View Slide

  7. IE 5: 5.5%
    IE 6: 60.3%
    IE 7: 0.2%
    FF : 25%
    Opera : 1.6%
    Netscape : 0.5%
    https://en.wikipedia.org/wiki/Usage_share_of_web_browsers#Net_Applications_.282004_Q4_to_present.29

    View Slide

  8. document.getElementById()
    document.getElementsByTagName()
    elem.addEventListener
    elem.attachEvent

    View Slide

  9. $()

    View Slide

  10. View Slide

  11. View Slide

  12. View Slide

  13. https://www.flickr.com/photos/city-amsterdam/12101703396

    View Slide

  14. https://www.flickr.com/photos/oatsy40/6715845075/

    View Slide

  15. Trust

    View Slide

  16. View Slide

  17. View Slide

  18. http://blog.jquery.com/2016/04/19/eslint-joins-the-jquery-foundation/

    View Slide

  19. https://www.flickr.com/photos/yuchinmchu/2716597655

    View Slide

  20. View Slide

  21. It bothered me that so few JavaScript libraries
    had documentation when I was making jQuery
    and I made a point to write online docs from the
    get-go. I’m glad I did!
    I’m frequently surprised by how few developers
    will put in the (marginal) extra effort to
    document their code. So many more people will
    be able to use and understand if you do!
    John Resig
    http://genius.it/ejohn.org/files/jquery-original.html

    View Slide

  22. https://www.flickr.com/photos/cogdog/20431040803

    View Slide

  23. View Slide

  24. $(…).on(‘click’, function() {
    });
    ????

    View Slide

  25. $(…).animate({

    opacity: 0.25

    });
    ????

    View Slide

  26. $.getJSON().then(function(data) {

    …

    });
    ????

    View Slide

  27. View Slide

  28. ancestors
    parents
    children
    siblings

    View Slide

  29. http://www.paulirish.com/2010/10-things-i-learned-from-the-jquery-source/

    View Slide

  30. jQuery is more than just a
    library

    View Slide

  31. It’s a learning tool

    View Slide

  32. from jQuery
    to JavaScript
    to CoffeeScript
    to Angular
    to React
    https://www.flickr.com/photos/masked-builder/4884525455

    View Slide

  33. View Slide

  34. View Slide

  35. View Slide

  36. View Slide

  37. View Slide

  38. This website still works, 4+ years
    after I last touched it…
    And we can all understand it.

    View Slide

  39. View Slide

  40. View Slide

  41. @N_Gular
    Wicked hype for Angular 2 and TypeScript !!111!!!
    @R_eact
    Use ES2018 with React today for awesome features
    @G_ulpulicious
    If you use Grunt you’re a bad person
    @Jack_Franklin
    I didn’t have breakfast this morning LOL

    View Slide

  42. Don’t let Hacker News fool you!

    View Slide

  43. http://youmightnotneedjquery.com/

    View Slide

  44. At the very least, make sure
    you know what jQuery is
    doing for you, and what it's
    not.
    youmightnotneedjquery.com

    View Slide

  45. https://docs.google.com/document/d/
    1LPaPA30bLUB_publLIMF0RlhdnPx_ePXm7oW02iiT6o/edit

    View Slide

  46. The great thing about an
    established library, like jQuery, is
    it’s hammered on by lots of
    talented people, transparently
    improved, and refined by the
    community.
    John-David Dalton, Paul Irish
    https://docs.google.com/document/d/1LPaPA30bLUB_publLIMF0RlhdnPx_ePXm7oW02iiT6o/edit

    View Slide

  47. You can check how many bugs
    jQuery is covering for you

    View Slide

  48. View Slide

  49. View Slide

  50. jQuery 2.2.3 has 99 cross browser
    edge cases / bugs that it deals with

    View Slide

  51. curl https://code.jquery.com/
    jquery-2.2.3.js | grep -n
    Support:

    View Slide

  52. View Slide

  53. And even if you argue that most of
    those bugs are edge case / won’t
    impact you…

    View Slide

  54. jQuery is often easier.

    View Slide

  55. $ = document.querySelectorAll

    View Slide

  56. If jQuery is “dying”, it’s the
    one with the sword.
    https://www.flickr.com/photos/albioneurope/8496569594

    View Slide

  57. document.querySelectorAll
    classList
    Promise

    View Slide

  58. Not every website you build will
    even need JavaScript

    View Slide

  59. Some might need a tiny bit, and
    you’ll decide it’s not worth adding
    jQuery just for a little piece of code

    View Slide

  60. Another website will be much more
    complex and require something
    like React / Angular

    View Slide

  61. Something else might only need
    the tip top latest browser support,
    and you’re happy writing vanilla JS

    View Slide

  62. But just sometimes you’ll need a little bit
    of a hand, or reliable X-Browser support,
    and jQuery is still a great option.

    View Slide

  63. View Slide

  64. Sara’s not the only one…

    View Slide

  65. View Slide

  66. View Slide

  67. jQuery is still keeping the barrier
    low for those new to the web

    View Slide

  68. jQuery is still providing a great API
    and X-Browser solution for those
    with projects that fit it

    View Slide

  69. jQuery is not a solution for every
    problem, and nor should it be.

    View Slide

  70. jQuery is still providing a great
    community that brings people
    together (like us)

    View Slide

  71. Thanks.
    @Jack_Franklin

    View Slide