Advanced javascript with eZ Publish

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 Publish Developer O UX Project Manager and Consulter

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

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

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

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?

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)

-  Other solutions?

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

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 the browser

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?

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)

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

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)

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)

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?

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 jQuery or

Backbone var yourClass { add : function() {

// add item };

$.extend(yourClass, otherClass); // jQuery _.extend(yourClass, otherClass); // Backbone

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 name and email as required with data-required=„true“

O  create a file ezajax/design/standard/templates/examples/YOURFILE.tpl AND clear the cache

O  add on the submit button data-ajax-tpl=“YOURFILE“ (without .tpl)

O  go into the file ezajax/design/standard/javascript/plugin/example_4.js and code the ajax call

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>

Thank  you!  @fishme_2010 www.fishme.de

www.silversolutions.de