Javascript All The Things!

A showcase of the new Javascript features and new Web technologies that are powered by Javascript.

Transcript

4. <table> <tr> <td colspan="3"></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td colspan="3"></td> </tr> </table>
6. <button id="my-button">Click Me!</button>
7. <button id="my-button">Click Me!</button> var button = document.getElementById('my-button');
8. <button id="my-button">Click Me!</button> var button = document.getElementById('my-button'); button.addEventListener('click', function() { // ... });
14. var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState === xhr.DONE && xhr.status === 200) { // ... } }; xhr.open('GET', url); xhr.send();
17. $('#my-button').on('click', function() { // ... }); $.ajax({ url: '/url', method: 'GET', success: function(response) { // ... } });
20. ¯\_(ツ)_/¯
22. Javascript
23. ES6
24. ES2015
25. const name = 'Javascript!'; let description = 'Super Awesome!'; /* const & let */
26. // before var add = function(a, b) { return a + b; }; /* arrow functions */ // ES2015 var add = (a, b) => a + b;
27. class Dog { constructor(name) { this.name = name; } bark() { console.log('Im barking!'); } } /* classes */
28. function add(a, b=10 ) { return a + b; } /* default parameters */
29. // before var temp = a; b = a; a = b; /* array destructuring */ // ES2015 [ a, b ] = [ b, a ]
30. http://es6-features.org
31. 92% 96% ES2015 Compatibility
32. ES2016
33. ES2016 ES2017
34. // before Math.pow(x, 2) /* exponentiation operator */ // ES2016 a ** 2
35. /* Array.prototype.includes */ // ES2016 var array = [ 1, 2, 3 ]; var found = array.includes(4); // before var array = [ 1, 2, 3 ]; var found = array.indexOf(4) > -1;
36. Client-Side Javascript
37. Games!
39. Canvas API
41. + +
42. WebGL
43. arodic.github.io/p/jellyfish
44. www.ro.me/tech
45. Gamepad API
46. Web Audio API
47. oscillator gain filter
48. www.ro.me/tech soundslice.com/scores/auld-lang-syne
49. www.ro.me/tech soundslice.com/scores/auld-lang-syne
50. Web Components
51. Web Components Shadow DOM Custom Elements HTML Imports <template> element
53. <div class="calendar-widget"> <h1 class="month-name">January</h1> <table> <tr>...</tr> <tr>...</tr> <tr>...</tr> </table> </div>
54. <div class="calendar-widget"> <h1 class="month-name">January</h1> <table> <tr>...</tr> <tr>...</tr> <tr>...</tr> </table> </div>
55. <div class="calendar-widget"> <h1 class="month-name">January</h1> <table> <tr>...</tr> <tr>...</tr> <tr>...</tr> </table> </div> <div class="calendar-widget"> <h1 class="month-name">February</h1> <table> <tr>...</tr> <tr>...</tr> <tr>...</tr> </table> </div> <!-- plus 10 more -->
56. <!-- calendar-widget.html --> <template> <div class="calendar-widget"> <h1 class="month-name">January</h1> <table> <tr>...</tr> <tr>...</tr> <tr>...</tr> </table> </div> </template> document.registerElement('calendar-widget');
57. <link rel="import" href="calendar-widget.html"> <calendar-widget month="Jan"></calendar-widget> <calendar-widget month="Feb"></calendar-widget> <calendar-widget month="Mar"></calendar-widget> <calendar-widget month="Apr"></calendar-widget> <calendar-widget month="May"></calendar-widget> <calendar-widget month="Jun"></calendar-widget> <calendar-widget month="Jul"></calendar-widget> <calendar-widget month="Aug"></calendar-widget> <calendar-widget month="Sep"></calendar-widget> <calendar-widget month="Oct"></calendar-widget> <calendar-widget month="Nov"></calendar-widget> <calendar-widget month="Dec"></calendar-widget>
58. Web
59. WebRTC real-time communications
60. www.ro.me/tech opentokrtc.com
61. Torrents!
62. Torrents! within our browsers
63. WebTorrent https://webtorrent.io
64. https://webtorrent.io
66. WebVR
68. https://aframe.io
69. <a-scene> <a-box position="1 0 0" color="red"></a-box> <a-sky color="blue"></a-sky> </a-scene>
70. <a-scene> <a-box position="1 0 0" color="red"></a-box> <a-sky color="blue"></a-sky> </a-scene>
71. <a-scene> <a-box position="1 0 0" color="blue"></a-box> </a-scene>
72. Server-Side Javascript
75. node package manager
77. 326,216 packages (modulecounts.com)
80. Desktop Applications
83. + =
87. Mobile
88. Progressive Web Applications
89. Service Worker
90. Add to homescreen Works offline Push notifications Background sync
92. ES2015 Canvas API WebGL Gamepad API Web Audio Web Components Shadow DOM Custom Elements HTML Imports <template> element WebRTC WebTorrent WebVR A-Frame NodeJS npm Electron nw.js Progressive Web Apps Service Worker
94. Javascript All The Things! Arnelle Balane @arnellebalane
95. Image Credits Warrior Image: http://static.wixstatic.com/media/1de769_67c5fe61512b06473ecbdf1438c19886.jpg_512 jQuery Logo: https://upload.wikimedia.org/wikipedia/en/thumb/9/9e/JQuery_logo.svg/1280px-JQuery_logo.svg.png Mindblown Meme: http://i3.kym-cdn.com/photos/images/newsfeed/000/288/648/776.gif Kids These Days Meme: https://memecrunch.com/meme/11SOT/kids-these-days/image.jpg?w=553&c=1 Google Chrome Logo: https://cdn0.iconfinder.com/data/icons/jfk/512/chrome-512.png NodeJS Logo: https://nodejs.org/static/images/logos/nodejs-new-pantone-black.png Dead Flash: http://img.talkandroid.com/uploads/2012/08/flash-dead.png
96. Image Credits Mario Spritesheet: http://orig12.deviantart.net/c4a9/f/2013/179/1/7/super_mario_land_2___custom_sprite_sheet_by_thewolfbun ny-d6arkqe.png Mario gif: https://giphy.com/gifs/mario-q23bgMHRWh3rO Speaker Icon: https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/256/speaker.png Calendar Icon: http://www.freeiconspng.com/uploads/calendar-icon-png-4.png Arteezy Shirt Image: http://teamsecret.gg/wp-content/uploads/2016/03/secret_new_back_Arteezy_grande.png Express Logo: https://camo.githubusercontent.com/fc61dcbdb7a6e49d3adecc12194b24ab20dfa25b/68747470733a2f2f692e 636c6f756475702e636f6d2f7a6659366c4c376546612d3330303078333030302e706e67
97. Trails Logo: https://camo.githubusercontent.com/90c49e514910f77b41043f227e285b9d9b6e02c2/687474703a2f2f692e69 6d6775722e636f6d2f7a6654324e45762e706e67 Hapi Logo: https://camo.githubusercontent.com/16f4a37b7e2086b6e44dcb0cdfaf9e41f5738278/68747470733a2f2f72617 72e6769746875622e636f6d2f686170696a732f686170692f6d61737465722f696d616765732f686170692e706e6 7 Sails Logo: http://sailsjs.org/images/logos/sails-logo_ltBg_ltBlue.png Koa Logo: https://camo.githubusercontent.com/674563115c4e0d4e5d99440b916952ad795c498e/68747470733a2f2f646 c2e64726f70626f7875736572636f6e74656e742e636f6d2f752f363339363931332f6b6f612f6c6f676f2e706e67 Derp Meme: http://i0.kym-cdn.com/entries/icons/original/000/006/423/ragecomic.png Image Credits
98. npm logo: https://upload.wikimedia.org/wikipedia/commons/thumb/d/db/Npm-logo.svg/2000px-Npm-logo.svg.png Terminal Logo: http://cdn1.macworld.co.uk/cmsdata/features/3608274/Terminalicon2_thumb800.png Electron Logo: http://electron.atom.io/images/electron-logo.svg nw.js Logo: http://html5.by/wp-content/uploads/2015/05/nw1.png add to homescreen: https://developers.google.com/web/fundamentals/engage-and-retain/app-install-banners/images/add-to-ho me-screen.gif push notification: https://developers.google.com/web/fundamentals/engage-and-retain/push-notifications/images/joe-asked-c ontextual.png Image Credits
99. Javascript Logo: http://3.bp.blogspot.com/-PTty3CfTGnA/TpZOEjTQ_WI/AAAAAAAAAeo/KeKt_D5X2xo/s1600/js.jpg Image Credits