Your SlideShare is downloading. ×
0
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

848

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
848
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×