Why Javascript matters
WordCamp Norway - 2014
Who I am?
• Marko Heijnen - @markoheijnen	

• Working at 1&1 Internet as their
WordPress specialist	


• WordPress core co...
Agenda
• Why, we as PHP developers, should focus
more on the Javascript side	


• Showing features of Javascript you didn’...
WordPress has grown
• PHP - 69.1 %	

• Javascript - 18.4 %	

• CSS 12.5 %
Current libraries we use
•
•
•
•

jQuery	

Backbone.js	

MediaElement.js	

TinyMCE	

!
!

•
•
•
•

jQuery UI	

Underscore....
History
• WordPress 2.2 starts using jQuery	

• 3.5 using Backbone/Underscore for the
media dialog	


• 3.6	

• MediaEleme...
Future
• 3.9 will add playlists for audio & video	

• TinyMCE 4	

• Image editor UI
The things you want to do
often, now requires
understanding of Javascript
Opening a new media dialog
// Create the media frame.
image_frame = wp.media.frames.formatImage = wp.media({
// Set the ti...
Cool stuff you

have in Javascript
getUserMedia / WebRTC
for live streaming
http:/
/www.webrtc.org/demo
https:/
/apprtc.appspot.com
Using Javascript to build
almost native apps
Node.js
Node.js
• Javascript platform	

• Uses an event-driven, non-blocking I/O
model	


• Lightweight and efficient	

• Ideal for...
Running a webserver
with Node.js
var http = require('http');	

http.createServer(function (req, res) {	

res.writeHead(200, {'Content-Type': 'text/plain'})...
The awesome example
WordSesh needs NodeJS
WordSesh - Problems
• Needs to be refreshed every hour	

• Has 15 minutes of silence	

• Results in accidentally playing t...
WordSesh - Idea
• NodeJS lets you push new sessions	

• When the session is over, it will be
removed	


• Be able to use Y...
Control panel - two channels
Play a YouTube movie
wordsesh.wpcentral.io
Questions?
@markoheijnen	

 markoheijnen.com	

wpcentral.io	

 wordsesh.wpcentral.io
Upcoming SlideShare
Loading in …5
×

Why Javascript matters

1,805 views

Published on

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

Published in: Technology
1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total views
1,805
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
2
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

Why Javascript matters

  1. 1. Why Javascript matters WordCamp Norway - 2014
  2. 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. 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. 4. WordPress has grown • PHP - 69.1 % • Javascript - 18.4 % • CSS 12.5 %
  5. 5. Current libraries we use • • • • jQuery Backbone.js MediaElement.js TinyMCE ! ! • • • • jQuery UI Underscore.js Plupload zxcvbn
  6. 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. 7. Future • 3.9 will add playlists for audio & video • TinyMCE 4 • Image editor UI
  8. 8. The things you want to do often, now requires understanding of Javascript
  9. 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. 10. Cool stuff you
 have in Javascript
  11. 11. getUserMedia / WebRTC for live streaming
  12. 12. http:/ /www.webrtc.org/demo https:/ /apprtc.appspot.com
  13. 13. Using Javascript to build almost native apps
  14. 14. Node.js
  15. 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. 16. Running a webserver with Node.js
  17. 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. 18. The awesome example WordSesh needs NodeJS
  19. 19. WordSesh - Problems • Needs to be refreshed every hour • Has 15 minutes of silence • Results in accidentally playing the previous session
  20. 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. 21. Control panel - two channels
  22. 22. Play a YouTube movie
  23. 23. wordsesh.wpcentral.io
  24. 24. Questions? @markoheijnen markoheijnen.com wpcentral.io wordsesh.wpcentral.io

×