At WordCamp Norway I presented about why Javascript matters when developing for WordPress. The amount of Javascript grows and it's time that developers look more into Javascript. The focus is around the example I build for WordSesh to show what you can do with Javascript and Node.js

1. Why Javascript matters
WordCamp Norway - 2014

2. Who I am?
• Marko Heijnen - @markoheijnen
• Working at 1&1 Internet as their
WordPress specialist
• WordPress core contributor
• GlotPress core developer - @GlotPress
• Co-author of WP_Image_Editor

3. Agenda
• Why, we as PHP developers, should focus
more on the Javascript side
• Showing features of Javascript you didn’t
know
• Ending with an awesome example

4. WordPress has grown
• PHP - 69.1 %
• Javascript - 18.4 %
• CSS 12.5 %

5. Current libraries we use
•
•
•
•
jQuery
Backbone.js
MediaElement.js
TinyMCE
!
!
•
•
•
•
jQuery UI
Underscore.js
Plupload
zxcvbn

6. History
• WordPress 2.2 starts using jQuery
• 3.5 using Backbone/Underscore for the
media dialog
• 3.6
• MediaElements for audio/video control
• Heartbeat API
• Revisions started to use Backbone

7. Future
• 3.9 will add playlists for audio & video
• TinyMCE 4
• Image editor UI

8. The things you want to do
often, now requires
understanding of Javascript

9. Opening a new media dialog
// Create the media frame.
image_frame = wp.media.frames.formatImage = wp.media({
// Set the title of the modal.
title: $el.data('choose'),
// Tell the modal to show only images.
library: {
type: 'image'
},
// Customize the submit button.
button: {
// Set the text of the button.
text: $el.data('update')
}
});
image_frame.open();

10. Cool stuff you
have in Javascript

11. getUserMedia / WebRTC
for live streaming

12. http:/
/www.webrtc.org/demo
https:/
/apprtc.appspot.com

13. Using Javascript to build
almost native apps

14. Node.js

15. Node.js
• Javascript platform
• Uses an event-driven, non-blocking I/O
model
• Lightweight and efficient
• Ideal for real time application
• http://nodejs.org/

16. Running a webserver
with Node.js

17. var http = require('http');
http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end('Hello Worldn');
}).listen(1337, '127.0.0.1');

18. The awesome example
WordSesh needs NodeJS

19. WordSesh - Problems
• Needs to be refreshed every hour
• Has 15 minutes of silence
• Results in accidentally playing the previous
session

20. WordSesh - Idea
• NodeJS lets you push new sessions
• When the session is over, it will be
removed
• Be able to use YouTube files as wait music
• Create a hangout through WordPress

21. Control panel - two channels

22. Play a YouTube movie

23. wordsesh.wpcentral.io

24. Questions?
@markoheijnen
markoheijnen.com
wpcentral.io
wordsesh.wpcentral.io