Successfully reported this slideshow.
Your SlideShare is downloading. ×

JS, CMS, untangle the mess

Ad

JS, CMS, UNTANGLE THE MESS
Chris Ward
@chrischinch

Ad

DISCLAIMERS
I’m more of a PHP guy

My JS use is fairly ‘traditional’
See, i’m even using Keynote!

Ad

WHY USE A CMS?
•

Ideal for a particular job

•

Existing systems

•

Familiarity

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Upcoming SlideShare
J query
J query
Loading in …3
×

Check these out next

1 of 30 Ad
1 of 30 Ad
Advertisement

More Related Content

Advertisement
Advertisement

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

Editor's Notes

  • A content management system, been around since the 90s
  • Umbraco, .netNuke, Movable Type - .net
    Drupal, Joomla, Wordpress - PHP
    Plone - Python
    Refinery - Ruby
    Alfresco - Java
    Expression Engine - PHP
    SiteCore - ASP
  • All PHP, two open source, two proprietary and ones I know the best.
    I wanted to add more proprietary options, but it’s really hard to find information.
  • Drupal, PHP CMS, popular with large, complex sites and is thus quite complex itself.
  • At the same time, module developers were starting to incorporate advanced effects libraries like Dojo, moo.fx, and prototype
  • In modules and themes, things can just be fudged in of course…
    Settings
    behaviours to be acted upon - This is so Drupal is also aware of what is going on / DOM changes and can react / cache properly
    theme - Adds ability for client side DOM elements to be properly styled
    locale - Translations
  • Even official docs mention adding into <head> / header.php…
    ‘Official’ way
    Name (required, string): The name of the script.
    URL (required, string):
    Dependencies (optional, array):
    Version (optional, string):
    Load in Footer (optional, boolean):
    There are specific enqueue functions for front / admin / login pages
  • Notice how this is exactly the same…
  • Mootools is deprecated
  • Joomla is more MVC based, so JS can be added in various front end locations, out of scope for this talk.
  • * Note quite ‘native’ plugins.
  • Into templates
    File to load something other than JQuery
    2nd - Modules
  • Not saying there aren’t any, but it’s not made very clear or easy to find.
  • Wordpress and Joomla quickly and for fairly one shot
    Drupal more complex allowing for more flexibility that may not be needed.

×