1. The document discusses using advanced JavaScript techniques with the eZ Publish content management system, including using frameworks like Backbone.js and jQuery. 2. It provides tips for optimizing JavaScript and CSS performance on eZ Publish pages. 3. The document demonstrates how to make AJAX calls from eZ Publish templates to dynamically load content, send data to the server, and output the response on the page.

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