Your SlideShare is downloading. ×
Advanced javascript with eZ Publish
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Advanced javascript with eZ Publish


Published on

Slides from the eZ Publish Summer Camp 2013, easy way Javascript implementation. Download the eZ Publish extension for the slides here:

Slides from the eZ Publish Summer Camp 2013, easy way Javascript implementation. Download the eZ Publish extension for the slides here:

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Advanced  Javascript   with
  • 2. About  me   O David Hohl from Austria O since 1998 PHP Web Developer O since 2011 in Berlin/Germany O since 2007 eZ Publish Developer O UX Project Manager and Consulter
  • 3. Jobs   O 8 years Senior Shop Developer at Reichl and Partner emarketing in Linz/Austria eZ Partner O 2.5 years UX Project Manager and Senior Developer at in Berlin/Germany eZ Partner
  • 4. Why  this  Workshop?   O to share experiences from Javascript to eZ Publish O to work with cool JS frameworks like Backbone and jQuery O to find better solutions for working with AJAX Calls O to think about plugins for your projects
  • 5. Install  ezajax   O  copy ezajax to /var/www/ezpublish/ezpublish_legacy/ extension O edit settings/override/site.ini.append.php O [ExtensionSettings] O ActiveExtensions[]=ezajax O ActiveExtensions[]=ezfind O ActiveExtensions[]=ezjscore
  • 6. Ways  for  Including   O  design.ini O directly about your template O Use ezscript_require from ezjscore {ezscript_require( array( ‘yourfile.js‘‚‘nextfile.js‘ ) )} O Do you think this is all?
  • 7. My  personal  Hell   O lets open this url O http://ezpublish.ezsc/eng/_js/load/badstuff
  • 8. My  personal  Heaven   O lets open this url O http://ezpublish.ezsc/eng/_js/load/ example_1 jQuery – debug our code
  • 9. My  Paradise   O Backbone.js and Underscore O Head.js O jQuery O Lets code with HTML5 Data Attributes
  • 10. Performance   O How optimize JS/CSS on my eZ Page? -  ezjscore (one BIG FILE) -  CDN (Akamai, AWS) (more files external) -  Other solutions?
  • 11. A  Fine  Way   O lets talk about head.js O include JS and CSS Files O get better browser information O build easy response design websites O use data-attributes
  • 12. Head.js   O lets open this url O http://ezpublish.ezsc/eng/_js/load/ example_2
  • 13. ezjscore   O  minified JS Files O  minified CSS Files O Includes CSS and JS Files in your template
  • 14. Ajax   with
  • 15. 1 • Collect data 2 • Send to the server 3 • Collect eZ data 4 • Send data back to the client 5 • Output data in the browser
  • 16. Why  do  you  use  Ajax?   O to optimize your performance? O to find ways to avoid cache problems? O A cheap way to send data to the server? O fight vs. Spam?
  • 17. Structure   O  think about the structure before sending it to the server O  POST or GET ? O  parameter like: O Type = article (GET) O Action = update (GET) O Id = 12 (POST) O Data = array (POST)
  • 18. Tipps   O  use data attributes O  or use HTML5 Database O  easy basic structure O  write your own class for sending and receiving O  try to use this class in every project – optimize your code all the time
  • 19. Send  Data   O  write a module (eZ 4) or controller (eZ 5) O  use this module for every request O  use actions to define what you want to get O  think about a dymamic model like ezajax (it‘s only a demo)
  • 20. Send  Data  „back“   O  use HTML only for short content O  always use a JSON Object O  use the same structure all the time O  Define on server side where you have to put the data, define your target container (like an ID, class or any other selector O  use head.js to load dynamic JS Files (depends on your action for callbacks)
  • 21. Show  Data  on  the  Browser   O  Template Engine for Javascript? O  try backbone.js with underscore.js O  render template about JSON O  What do you use?
  • 22. Ajax  Events   O lets open this url O http://ezpublish.ezsc/eng/_js/load/ example_3
  • 23. Extend  your  old  Code   O  Write simple JS Classes in your project O  Extend your code! It‘s very easy with jQuery or Backbone var yourClass { add : function() { // add item }; $.extend(yourClass, otherClass); // jQuery _.extend(yourClass, otherClass); // Backbone
  • 24. Parsley,  Backbone   and  jQuery   with
  • 25. Let‘s  try   O  include the files with head.js plugin/ezajax_controller.js parsley.js plugin/example_4.js O  set full name and email as required with datarequired=„true“ O  create a file ezajax/design/standard/templates/examples/ YOURFILE.tpl AND clear the cache O  add on the submit button data-ajaxtpl=“YOURFILE“ (without .tpl) O  go into the file ezajax/design/standard/javascript/plugin/ example_4.js and code the ajax call
  • 26. Cheat   INCLUDE FILES <br class="ez_summer_camp hide" data-files="plugin/ ezajax_controller.js;parsley.js;plugin/example_4.js"> AJAX CALL: self.ajax_template = $(this).attr('data-ajax-tpl'); self.ajax(0, {'form':$('#demo-form').serializeArray()}, function(response) { response = $.parseJSON(response); $('body').append(; }); OUTPUT AJAX TEMPLATE: <div class="alert alert-success"> <h4>Hello {$params.form.0.value}</h4> <p>We will send you now an eMail to <strong style="color:#000;">{$params.form.1.value}</strong></p> </div>
  • 27. Thank  you!   @fishme_2010