Advanced	
  Javascript	
  
with
About	
  me	
  
O David Hohl from Austria
O since 1998 PHP Web Developer
O since 2011 in Berlin/Germany
O since 2007 eZ Pu...
Jobs	
  
O 8 years Senior Shop Developer at Reichl and

Partner emarketing in Linz/Austria
eZ Partner

O 2.5 years UX Proj...
Why	
  this	
  Workshop?	
  
O to share experiences from Javascript to

eZ Publish
O to work with cool JS frameworks like
...
Install	
  ezajax	
  
O  copy ezajax to

/var/www/ezpublish/ezpublish_legacy/
extension
O edit settings/override/site.ini....
Ways	
  for	
  Including	
  
O  design.ini
O directly about your template
O Use ezscript_require from ezjscore
{ezscript_r...
My	
  personal	
  Hell	
  
O lets open this url
O http://ezpublish.ezsc/eng/_js/load/badstuff
My	
  personal	
  Heaven	
  
O lets open this url
O http://ezpublish.ezsc/eng/_js/load/

example_1
jQuery – debug our code
My	
  Paradise	
  
O Backbone.js and Underscore
O Head.js
O jQuery
O Lets code with HTML5 Data Attributes
Performance	
  
O How optimize JS/CSS on my eZ Page?
-  ezjscore (one BIG FILE)
-  CDN (Akamai, AWS) (more files external)...
A	
  Fine	
  Way	
  
O lets talk about head.js
O include JS and CSS Files
O get better browser information
O build easy re...
Head.js	
  
O lets open this url
O http://ezpublish.ezsc/eng/_js/load/

example_2
ezjscore	
  
O  minified JS Files
O  minified CSS Files
O Includes CSS and JS Files in your template
Ajax	
  
with
1

• Collect data

2

• Send to the server

3

• Collect eZ data

4

• Send data back to the client

5

• Output data in t...
Why	
  do	
  you	
  use	
  Ajax?	
  
O to optimize your performance?
O to find ways to avoid cache problems?
O A cheap way...
Structure	
  
O  think about the structure before sending it to

the server
O  POST or GET ?

O  parameter like:
O Type = ...
Tipps	
  
O  use data attributes
O  or use HTML5 Database
O  easy basic structure
O  write your own class for sending and ...
Send	
  Data	
  
O  write a module (eZ 4) or controller (eZ 5)
O  use this module for every request
O  use actions to defi...
Send	
  Data	
  „back“	
  
O  use HTML only for short content
O  always use a JSON Object
O  use the same structure all th...
Show	
  Data	
  on	
  the	
  Browser	
  
O  Template Engine for Javascript?
O  try backbone.js with underscore.js
O  rende...
Ajax	
  Events	
  
O lets open this url
O http://ezpublish.ezsc/eng/_js/load/

example_3
Extend	
  your	
  old	
  Code	
  
O  Write simple JS Classes in your project
O  Extend your code! It‘s very easy with jQue...
Parsley,	
  Backbone	
  
and	
  jQuery	
  
with
Let‘s	
  try	
  
O  include the files with head.js

plugin/ezajax_controller.js
parsley.js
plugin/example_4.js
O  set full...
Cheat	
  
INCLUDE FILES
<br class="ez_summer_camp hide" data-files="plugin/
ezajax_controller.js;parsley.js;plugin/example...
Thank	
  you!	
  
@fishme_2010
www.fishme.de
www.silversolutions.de
Upcoming SlideShare
Loading in …5
×

Advanced javascript with eZ Publish

1,360 views
1,117 views

Published 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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,360
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Advanced javascript with eZ Publish

  1. 1. Advanced  Javascript   with
  2. 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. 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. 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. 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. 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. 7. My  personal  Hell   O lets open this url O http://ezpublish.ezsc/eng/_js/load/badstuff
  8. 8. My  personal  Heaven   O lets open this url O http://ezpublish.ezsc/eng/_js/load/ example_1 jQuery – debug our code
  9. 9. My  Paradise   O Backbone.js and Underscore O Head.js O jQuery O Lets code with HTML5 Data Attributes
  10. 10. Performance   O How optimize JS/CSS on my eZ Page? -  ezjscore (one BIG FILE) -  CDN (Akamai, AWS) (more files external) -  Other solutions?
  11. 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. 12. Head.js   O lets open this url O http://ezpublish.ezsc/eng/_js/load/ example_2
  13. 13. ezjscore   O  minified JS Files O  minified CSS Files O Includes CSS and JS Files in your template
  14. 14. Ajax   with
  15. 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. 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. 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. 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. 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. 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. 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. 22. Ajax  Events   O lets open this url O http://ezpublish.ezsc/eng/_js/load/ example_3
  23. 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. 24. Parsley,  Backbone   and  jQuery   with
  25. 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. 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. 27. Thank  you!   @fishme_2010 www.fishme.de www.silversolutions.de

×