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
Chris 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 AVAILABLE
Lots…
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 ...
OTHER OPTIONS

Umpteen UI modules (carousels, selectors,
Modals), JSON processing, Dynamic forms,
Responsive, Masonry, Mod...
ADDING JS
drupal_add_js() - The path to your js code + some parameters.
These allow to pass settings, how JS is to be rend...
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 upg...
ADDING JS
wp_register_script( $name, $url,
$dependencies, $version,
$load_in_footer );
wp_enqueue_script()
wp_dequeue_scri...
OTHER OPTIONS

Umpteen UI modules (carousels, selectors,
Modals), JSON processing, Dynamic forms,
Responsive, Masonry, Mod...
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...
ADDING JS
$document =
JFactory::getDocument();
$document->addScript(‘script');
JHTML::script('sample.js',
'templates/custo...
OTHER OPTIONS

Umpteen UI modules (carousels, selectors,
Modals), JSON processing, Dynamic forms,
Responsive, Masonry, Mod...
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 ...
ADDING JS
{exp:jquery:script_tag}
plugin=
ui=
effect=
file=
ee()->cp->add_js_script(array('plugin' =>
'dataTables'));
ee()...
OTHER OPTIONS

Hmm…
MORE INFORMATION

ellislab.com/expressionengine/user-guide/modules/jque
SUMMARY

Each CMS handles and utilises JS in it’s specialised way.
THANKS!
Chris Ward
@chrischinch
chrischinchilla.com
JS, CMS, untangle the mess
JS, CMS, untangle the mess
JS, CMS, untangle the mess
JS, CMS, untangle the mess
JS, CMS, untangle the mess
JS, CMS, untangle the mess
Upcoming SlideShare
Loading in …5
×

0

Share

Download to read offline

JS, CMS, untangle the mess

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • 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

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

Views

Total views

3,353

On Slideshare

0

From embeds

0

Number of embeds

176

Actions

Downloads

2

Shares

0

Comments

0

Likes

0

×