Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

JS, CMS, untangle the mess

3,191 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

JS, CMS, untangle the mess

  1. 1. JS, CMS, UNTANGLE THE MESS Chris Ward @chrischinch
  2. 2. DISCLAIMERS I’m more of a PHP guy My JS use is fairly ‘traditional’ See, i’m even using Keynote!
  3. 3. WHY USE A CMS? • Ideal for a particular job • Existing systems • Familiarity
  4. 4. THE PROBLEMS • Conflicts • Page weight • Non specificity
  5. 5. WHAT’S AVAILABLE Lots…
  6. 6. WE WILL FOCUS ON • Drupal • Wordpress • Joomla! • Expression Engine
  7. 7. 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)
  8. 8. OTHER OPTIONS Umpteen UI modules (carousels, selectors, Modals), JSON processing, Dynamic forms, Responsive, Masonry, Modernizr, AngularJS, Backbone, NodeJS and many many more…
  9. 9. 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': {} };
  10. 10. MORE INFORMATION drupal.org/node/121997
  11. 11. 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
  12. 12. ADDING JS wp_register_script( $name, $url, $dependencies, $version, $load_in_footer ); wp_enqueue_script() wp_dequeue_script() wp_localize_script()
  13. 13. OTHER OPTIONS Umpteen UI modules (carousels, selectors, Modals), JSON processing, Dynamic forms, Responsive, Masonry, Modernizr, AngularJS, Backbone, NodeJS and many many more…
  14. 14. MORE INFORMATION codex.wordpress.org/Using_Javascript
  15. 15. 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
  16. 16. ADDING JS $document = JFactory::getDocument(); $document->addScript(‘script'); JHTML::script('sample.js', 'templates/custom/js/');
  17. 17. OTHER OPTIONS Umpteen UI modules (carousels, selectors, Modals), JSON processing, Dynamic forms, Responsive, Masonry, Modernizr,* AngularJS*, Backbone, NodeJS and many many more…
  18. 18. MORE INFORMATION docs.joomla.org/Adding_JavaScript
  19. 19. 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
  20. 20. ADDING JS {exp:jquery:script_tag} plugin= ui= effect= file= ee()->cp->add_js_script(array('plugin' => 'dataTables')); ee()->javascript->output(); ee()->javascript->compile();
  21. 21. OTHER OPTIONS Hmm…
  22. 22. MORE INFORMATION ellislab.com/expressionengine/user-guide/modules/jque
  23. 23. SUMMARY Each CMS handles and utilises JS in it’s specialised way.
  24. 24. THANKS! Chris Ward @chrischinch chrischinchilla.com

×