JS, CMS, UNTANGLE THE MESSChris Ward

@chrischinch

DISCLAIMERS

I’m more of a PHP guy

My JS use is fairly ‘traditional’

See, i’m even using Keynote!

WHY USE A CMS?

• Ideal for a particular job

• Existing systems

• Familiarity

THE PROBLEMS

• Conflicts

• Page weight

• Non specificity

WHAT’S AVAILABLELots…

WE WILL FOCUS ON

• Drupal

• Wordpress

• Joomla!

• Expression Engine

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)

OTHER OPTIONS

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

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': {} };

MORE INFORMATION

drupal.org/node/121997

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

ADDING JS

wp_register_script( $name, $url,

$dependencies, $version,

$load_in_footer );

wp_enqueue_script()

wp_dequeue_script()

wp_localize_script()

OTHER OPTIONS

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

MORE INFORMATION

codex.wordpress.org/Using_Javascript

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

ADDING JS

$document =

JFactory::getDocument();

$document->addScript(‘script');

JHTML::script('sample.js',

'templates/custom/js/');

OTHER OPTIONS

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

MORE INFORMATION

docs.joomla.org/Adding_JavaScript

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

ADDING JS

{exp:jquery:script_tag}

plugin=

ui=

effect=

file=

ee()->cp->add_js_script(array('plugin' =>

'dataTables'));

ee()->javascript->output();

ee()->javascript->compile();

OTHER OPTIONS

Hmm…

MORE INFORMATION

ellislab.com/expressionengine/user-guide/modules/jquery/index.html

SUMMARYEach CMS handles and utilises JS in it’s specialised

way.

THANKS!Chris Ward

@chrischinchchrischinchilla.com