Advanced javascript with eZ Publish

  • 660 views
Uploaded on

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
660
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
2
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

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