My MelbJS Feb 2014 talk on how CMSs (Wordpress, Joomla, Drupal and Expression Engine) use JavaScript.

1. JS, CMS, UNTANGLE THE MESS
Chris Ward
@chrischinch

2. DISCLAIMERS
I’m more of a PHP guy
My JS use is fairly ‘traditional’
See, i’m even using Keynote!

3. WHY USE A CMS?
•
Ideal for a particular job
•
Existing systems
•
Familiarity

5. THE PROBLEMS
•
Conflicts
•
Page weight
•
Non specificity

6. WHAT’S AVAILABLE
Lots…

8. WE WILL FOCUS ON
•
Drupal
•
Wordpress
•
Joomla!
•
Expression Engine

10. DRUPAL JS OVERVIEW
•
Started with ‘generic’, settled on JQuery
•
Currently D7 ships with JQuery 1.4.2 / UI 1.8
•
Can easily (and often is) upgraded to latest
•
Used for UI enhancements, ajax DOM manipulation
etc…
•
All js is aggregated (if turned on)

11. OTHER OPTIONS
Umpteen UI modules (carousels, selectors,
Modals), JSON processing, Dynamic forms,
Responsive, Masonry, Modernizr, AngularJS,
Backbone, NodeJS and many many more…

12. ADDING JS
drupal_add_js() - The path to your js code + some parameters.
These allow to pass settings, how JS is to be rendered, where/when
it’s to be loaded
Four sets of arrays can be passed var Drupal = Drupal || { 'settings': {},
'behaviors': {}, 'themes': {}, 'locale': {} };

13. MORE INFORMATION
drupal.org/node/121997

15. WORDPRESS JS OVERVIEW
•
Currently ships with JQuery 1.11, Backbone,
TinyMCE and a few other scripts
•
Can easily be upgraded to latest
•
Used for UI enhancements, ajax DOM manipulation
etc…
•
Can be aggregated through plugins

16. ADDING JS
wp_register_script( $name, $url,
$dependencies, $version,
$load_in_footer );
wp_enqueue_script()
wp_dequeue_script()
wp_localize_script()

17. OTHER OPTIONS
Umpteen UI modules (carousels, selectors,
Modals), JSON processing, Dynamic forms,
Responsive, Masonry, Modernizr, AngularJS,
Backbone, NodeJS and many many more…

18. MORE INFORMATION
codex.wordpress.org/Using_Javascript

20. JOOMLA! JS OVERVIEW
•
Currently ships with JQuery 1.81, Bootstrap, JQuery
UI 1.8.23 and Mootools/Joomla JS
•
Can easily be upgraded to latest
•
Used for UI enhancements, ajax DOM manipulation
etc…
•
Can be aggregated through plugins

21. ADDING JS
$document =
JFactory::getDocument();
$document->addScript(‘script');
JHTML::script('sample.js',
'templates/custom/js/');

22. OTHER OPTIONS
Umpteen UI modules (carousels, selectors,
Modals), JSON processing, Dynamic forms,
Responsive, Masonry, Modernizr,* AngularJS*,
Backbone, NodeJS and many many more…

23. MORE INFORMATION
docs.joomla.org/Adding_JavaScript

25. EXPRESSION ENGINE JS
OVERVIEW
•
JQuery v1.6.2?
•
Can’t be upgraded
•
Used for UI enhancements, ajax DOM
manipulation etc…
•
Assume it has JS aggregation

26. ADDING JS
{exp:jquery:script_tag}
plugin=
ui=
effect=
file=
ee()->cp->add_js_script(array('plugin' =>
'dataTables'));
ee()->javascript->output();
ee()->javascript->compile();

27. OTHER OPTIONS
Hmm…

28. MORE INFORMATION
ellislab.com/expressionengine/user-guide/modules/jque

29. SUMMARY
Each CMS handles and utilises JS in it’s specialised way.

30. THANKS!
Chris Ward
@chrischinch
chrischinchilla.com