Search code examples
phpjavascriptjqueryemmetquerypath

Combine jQuery and Zen-Coding php ports to emulate client side programming style on server side scripts

When I write client side code, I use HTML/CSS/JavaScript and lately jQuery to both speed up coding, and use improved methods to achieve the same goal.

In my text editor I use zen-coding to speed up the writing of code, and also to avoid errors. I was looking at zen-coding as a jQuery plugin for a while, but it has a fatal flaw, that you want the HTML to be written and sent to the client plain before any javascript kicks in.

Although we can use JavaScript servers (env.js or node.js) and therefore do a lot of development server side using JavaScript and jQuery, I am not comfortable moving over yet as it is an emerging technology, and has many differences and drawbacks (and also some major advantages).

I want to continue using PHP server side, but develop in the way I am most comfortable with, and familiar with which is client side JavaScript.

Therefore - I have been looking into QueryPath which is a PHP port of jQuery that aims to take the best and most relevant parts of jQuery and re-work it to suit the server environment.

That is all great, and I have now been looking at two PHP classes capable of parsing zen-coding which when combined acts as a great templating engine and also avoids errors in my code.

The problem I am having is that neither zen-coding parsers support anywhere near a full set of zen-coding features.

So finally my questions (sorry for the rather lengthy intro)

  1. Is there a better server side zen-coding parser I can use in my PHP code?
  2. Is there a good (very concise and full featured) alternative templating system to using zen-coding? (which I know is not originally designed for this task)
  3. Is there a better approach I should take to achieve my ultimate goal of narrowing the divide between the way I code client side and server side?
  4. Is there a PHP library that implements a load of utility functions that by using will enhance the security/performance of my code without me learning all the internal workings? (like jQuery does for javascript)

NB: I am looking more for functional equivalence than syntactic similarity - although both are a plus for me.

Here is some commented test code that should illuminate what I am trying to achieve:

<?php

    // first php based zen-coding parser
    // http://code.google.com/p/zen-php
    require_once 'ZenPHP/ZenPHP.php';
    // my own wrapper function
    function zp($abbr){ return ZenPHP::expand($abbr); }

    // second php based zen-coding parser
    // https://github.com/philipwalton/PW_Zen_Coder
    require_once 'PW_Zen_Coder/PW_Zen_Coder.php';
    $zc = new PW_Zen_Coder;
    // my own wrapper function
    function pwzc($abbr){ global $zc; return $zc->expand($abbr); }

    // php port of jQuery with a new server-side flavor
    // http://querypath.org/
    require_once 'QueryPath/QueryPath.php';

    // initialize query path with simple html document structure
    qp(zp('html>head+body'))

        // add a heading and paragraph to the body
        ->find('body')
        ->html(zp('h1{Zen Coding and jQuery - Server Side}+p{This has all been implemented as a php port of JavaScript libraries}'))

        // add a comments link to the paragraph
        ->find('p')
        ->append(pwzc('span.comments>a[href=mailto:[email protected]]{send a comment}'))

        // decide to use some jquery - so add it to the head
        ->find(':root head')
        ->append(zp('script[type=text/javascript][src=/jquery.js]'))

        // add an alert script to announce use of jQuery
        ->find(':root body')
        ->append(zp('script[type=text/javascript]{$(function(){ alert("just decided to use some jQuery") })}'))

        // send it to the browser!
        ->writeHTML();

    /* This will output the following html

    <html>
    <head>
    <script type="text/javascript" src="/jquery.js"></script>
    </head>
    <body>
    <h1>
        Zen Coding and jQuery - Server Side
    </h1>
    <p>
        This has all been implemented as a php port of JavaScript libraries
    <span class="comments">
        <a href="mailto:[email protected]">

            send a comment
        </a>
    </span>
    </p>
    <script type="text/javascript">
        $(function(){ alert("just decided to use some jQuery") })
    </script>
    </body>
    </html>

    */
?>

Any help is much appreciated

Solution

  • first of all i want to say i have up-voted your answer because it is well explained and have some nice point to consider; then i want let you think about theese other point:

    GOTCHAS

    1. IMHO you are overcomplicating the whole thing ;)

    2. between the entire PHP code needed to generate the HTML and the outputted HTML itself there is very very low difference in term of lenght of writed-code.

    3. the code is completely unredeable for everyone who don't know the 3 libs or whatever it is.

    4. the speed of site-load will decrease enourmously compared to the semplicity of the vanilla HTML.

    5. what the real difference between:

    h1{Zen Coding and jQuery - Server Side}+p{This has all been implemented as a php port of JavaScript libraries}

    and

    <h1>Zen Coding and jQuery - Server Side</h1><p>This has all been implemented as a php port of JavaScript libraries</p>

    6.. as you know both zen-coding and queryPath are not intended to be used the way you are doing, at least not in a production scenario.

    7.. The fact that jQuery have a good documentation and it's usefull to use doesn't mean that can be used successfully from anyone. ( the mere copy/past is not considered a coding skill IMO )

    SOLUTION

    it is probably the best solution for you looking at some kind of PHP Templating Engine like smarty, this will suit your needs in various way:

    1. security/performance
    2. narrowing the divide between the way I code client side and server side

    an example would be: ( to be considered a very primitive example, smarty have more powerfull functionalities )

    <!-- index.tpl -->
<html>
  <head> {$scriptLink} 
  </head>
  <body> <h1> {$h1Text} </h1>
    <p> {$pText} 
      <span class="comments">
        <a href="{$aLink}"> {$aText} </a>
      </span>
    </p> {$scriptFunc} 
  </body>
</html>

        // index.php
    require('Smarty.class.php');
    $smarty = new Smarty;
    $smarty->assign("scriptLink", "<script type=\"text/javascript\" src=\"/jquery.js\"></script>");
    $smarty->assign("scriptFunc", "<script type=\"text/javascript\">$(function(){ alert(\"hello world\") });</script>");
    $smarty->assign("h1Text", "Zen Coding and jQuery - Server Side");
    $smarty->assign("pText", "This has all been implemented as a php port of JavaScript libraries");
    $smarty->assign("aText", "send a comment");
    $smarty->assign("aLink", "mailto:[email protected]|mailCheck");
    $smarty->display('index.tpl');

    NOTE: the use of mailCheck, yes you should also consider eventuality some kind of variable check. smarty can do it....

    hope this help. ;)