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

Question

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)

Is there a better server side zen-coding parser I can use in my PHP code?
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)
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?
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:this@comment.com]{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:this@comment.com">

            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

Jani Hartikainen · Accepted Answer

Questions 1 and 2

A template engine sort of like the ZenCoding example would be Haml. The syntax is different, but it's similarily short and quite concise in general.

If you like using ZenCoding, you could consider simply using an editor with support for it. PhpStorm for example bundles a ZenCoding plugin by default. I'm sure others (such as Vim) have plugins for this purpose as well. However, this approach will only allow you to write it: Once you've written it, the editor will expand it to the actual HTML markup.

Question 3

I think a part of this problem is that they are inherently completely different things. The client-side scripting side of things, it's typically a user-interface only. Certain programming styles and approaches are used with the browser UI. However, on the server-side, you generally have data processing, and for data processing, other types of patterns work better.

I'm a bit doubtful whether the QueryPath thinger you're using is a particularily good choice... It seems to somewhat obscure the HTML markup itself, making it harder to see what the exact result of the operations would be.

For generation of HTML markup on the server-side, I would recommend using a template engine or simply using PHP-only templates.

One approach you could use is to completely throw away server-side markup generation. Of course this is not a good idea for everything, but for complex web apps (in style of Gmail or such), you can generate the entire markup using just JavaScript. On the server, you would only use JSON to return data. This way you don't have to deal with markup on the server and can keep using jQuery or whatever on the client for the entire thing.

Question 4

Again I'm a bit doubtful about this whole thing. If you don't understand what's going on under the hood, how can you produce good code? How can you understand or debug things correctly when they go wrong or don't work as expected?

Now I don't know if you're a PHP guru or not, but personally I would suggest that you learn how things work. You don't have to write everything from scratch to do that though. Choosing a framework is a good idea, and it will do exactly what you ask: It will do many things for you, so you don't have to worry as much about security or other things.

Personally I would recommend using the Zend Framework, since it provides a wide range of components, and you can only use the parts you want - you don't have to use the whole framework at once. However, it can be a bit complex at first especially if you're not very familiar with PHP and OOP concepts, so you might have better luck initially going with some other framework.

Luca Filosofi · Answer

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

IMHO you are overcomplicating the whole thing ;)
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.
the code is completely unredeable for everyone who don't know the 3 libs or whatever it is.
the speed of site-load will decrease enourmously compared to the semplicity of the vanilla HTML.
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:

security/performance
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:this@comment.com|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. ;)

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

Tags:

javascript

jquery

php

emmet

querypath

Billy Moon

2 Answers

Jani Hartikainen

Luca Filosofi

Recent Activity

Donate For Us

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

Tags:

javascript

jquery

php

emmet

querypath

Billy Moon

2 Answers

Jani Hartikainen

Luca Filosofi

Related questions

Recent Activity

Donate For Us