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

Like this? Share it with your network

Share

Advanced javascript with eZ Publish

on

  • 731 views

Slides from the eZ Publish Summer Camp 2013, easy way Javascript implementation. Download the eZ Publish extension for the slides here: http://www.fishme.de/downloads/ezajax.zip

Slides from the eZ Publish Summer Camp 2013, easy way Javascript implementation. Download the eZ Publish extension for the slides here: http://www.fishme.de/downloads/ezajax.zip

Statistics

Views

Total Views
731
Views on SlideShare
729
Embed Views
2

Actions

Likes
0
Downloads
2
Comments
0

1 Embed 2

https://twitter.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Advanced javascript with eZ Publish Presentation Transcript

  • 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 silver.solutions 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(response.data); }); 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 www.fishme.de www.silversolutions.de