Advanced javascript with eZ Publish
-
Upload
david-hohl -
Category
Technology
-
view
855 -
download
4
description
Transcript of 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