Render Conf: How jQuery has influenced the web

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