zend framework mvc driven extjs

Zend Framework MVC driven ExtJS

Thorsten Suckow-Homberg, K&K GmbH

Sourc{ - SenchaDev ConferenceMay 5-7, 2011Croatia, Split

Who am I?

● Thorsten Suckow-Homberg● Born 1976, Aachen, Germany● Webdeveloper since 1999● Senior Software Developer for K&K GmbH,

Aachen ● Focus on planning, architecture and

deployment of web based software

Who am I?

… oh, and UI programming, of course: Author of:● conjoon – http://www.conjoon.org● Ext.ux.Livegrid – http://www.ext-livegrid.com● various other open source ExtJS extensions/

components● Numerous bug reports, rants and proposals over at

the sencha forums :) (MindPatterns)

This talk will show you...

● … how you should plan your directory layout in larger projects



● … what is application context - and how to use it to your advantage




● … how to use Ext.Direct with existing ZF backend code




● … how to use Ext.Direct with existing ZF backend code

● In short: ...why Zend Framework could become the framework of your choice when combining Ext and PHP

The Basics

Directory Layout

The Basics – Directory Layout● Top level should be a

directory named after your project (obviously)

● ...containing three child directories:

The Basics – Directory Layout

build-tools● Real tools, like:

● yuicompressor● phing● ant


build-tools● Real tools, like:

● yuicompressor● phing● ant

● (XML-)build scripts● code sanity● tests● deployment● etc... in short: Continuous

Integration[1]!


vendor● All the third party libs

you're using in your code● ExtJS ● ZendFramework● etc.


vendor● All the third party libs

you're using in your code● ExtJS ● ZendFramework● etc.

Note:● files from separate repository vendor branch will be

merged into this directory● Best case: developers will not touch the vendor directory● Read [2] for more infos on how to use vendor branches


src


src● Everything you're actually

coding


src● Everything you're actually

coding:● overrides ● extensions ● backend code● code that might refer to

vendor code● … in short: all

application-specific code your team writes


corelib


corelib● js – your client libraries

(ExtJS, own implementations)


corelib● js – your client libraries

(ExtJS, own implementations)

● php – your backend code (including tests)


datastore● data storage

definition/structure goes here


datastore● data storage

definition/structure goes here

Note:● build scripts can refer to the structure file when deploying

an application


www● one step more towards

a „callable“ application


application


application● ZF specific „frontend“

code (controllers, templates)


application● ZF specific „frontend“

code (controllers, templates)

● and:– Meta-Information

files for your application

– caching directories– etc.


htdocs


htdocs● Finally! The document

root for your application● the only „public“ folder


htdocs● Finally! The document

root for your application● the only „public“ folder

Note:● Build-process focuses on this folder

The Basics – Directory Layout„This layout gets way too complex!“

Don't go berserk!

There's a solution to all of it!


„How do I get the resources from vendor into my src folder where – obviously - running code will resist?“

„Do I need to run a build process every time a line of code changed?“

The Basics – Directory Layoutworking copy (development): /var/www/your_project/vendor/ext-ux-util-messagebus/var/www/your_project/src/www/htdocs/index.php


<?php if ($isDeployment) { ?> <script type="text/javascript" src="/js/ext-ux-util-messagebus/src/messagebus.js"></script><?php } else { ?> <script type="text/javascript" src="/vendor/ext-ux-util-messagebus/src/messagebus.js"></script><?php } ?>

index.phtml

working copy (development): /var/www/your_project/vendor/ext-ux-util-messagebus/var/www/your_project/src/www/htdocs/index.php



index.phtml

# Alias for Ext.ux.util.MessageBusAlias /js/ext-ux-util-messagebus "/htdocs/your_project/vendor/ext-ux-util-messagebus/src"<Directory "/htdocs/your_project/vendor/ext-ux-util-messagebus/src">Order allow,denyAllow from all</Directory>

apache.conf




index.phtml

# Alias for Ext.ux.util.MessageBusAlias /js/ext-ux-util-messagebus "/htdocs/your_project/vendor/ext-ux-util-messagebus/src"<Directory "/htdocs/your_project/vendor/ext-ux-util-messagebus/src">Order allow,denyAllow from all</Directory>

apache.conf

<script type="text/javascript" src="/js/ext-ux-util-messagebus/src/messagebus.js"></script>

index.phtml



Virtual# Alias for Ext.ux.util.MessageBusAlias /js/ext-ux-util-messagebusDevelopment:



Virtual

Build process

# Alias for Ext.ux.util.MessageBusAlias /js/ext-ux-util-messagebusDevelopment:

...<target name="build_js"> <delete dir="./build/js/ext-ux-util-messagebus" /> <copy todir="./build/js/ext-ux-util-messagebus" includeemptydirs="true"> <fileset dir="./vendor/ext-ux-util-messagebus"> <exclude name="**/.svn" /> </fileset> </copy></target> ...

Build:



Virtual

Build process

# Alias for Ext.ux.util.MessageBusAlias /js/ext-ux-util-messagebusDevelopment:

...<target name="build_js"> <delete dir="./build/js/ext-ux-util-messagebus" /> <copy todir="./build/js/ext-ux-util-messagebus" includeemptydirs="true"> <fileset dir="./vendor/ext-ux-util-messagebus"> <exclude name="**/.svn" /> </fileset> </copy></target> ...

Build:

<script type="text/javascript" src="/js/ext-ux-util-messagebus/src/messagebus.js"></script>

index.phtml



Cons● will need some webserver configuration to get things

working● build-files depend on initial layout, changes mean

adjustment at several locations at once● needs documentation for your dev team ● users need to know how to set up their dev

environment when they check out „including sources“

The Basics – Directory LayoutPros

● No symlinks –> not f***ing up the repository● Code structured after purpose ● No need to run builds after you've changed one line of

code (except for tests, of course)● Clean approach towards build- and development-code● Makes build-definitions easy due to strictly defined

layout

Advice:● Use svn.ignore and template files! - it will help you and you're

coworkers to set up things on different machines

Context based data

What is a „context“?

Context based data

Application Server

Context based data

Application Server

Desktop PC

send/receive

Context based data

Application Server

Desktop PC Mobile

send/receivesend/receive

Context based data

Application Server

Desktop PC Mobile


Context „default“

Context based data

Application Server

Desktop PC Mobile


Context „default“ Context „mobile“

Context based data

Why do we need it?

Context based data● Different devices need different views● Content delivery optimizations● One domain serves all (www.senchadevcon.eu

vs. m.senchadevcon.eu)● Specific data format (send/receive) might not be

available on devices used by our users

http://www.senchadevcon.eu/

Context based data

What do we need?

Context based data

class Zend_Controller_Action_Helper_ContextSwitch

ContextSwitch.php

Context based data

class Zend_Controller_Action_Helper_ContextSwitch

● Action helper that will detect context based requests

● Capable of sending specially formatted responses based on detected context and configuration

● Available as a default action helper provided by Zend Framework

● For more informations on how to use action helper, see [3]

ContextSwitch.php

Context based data

How does it work?

Context based data - detectionWe can define a context based on (virtually) all data that's available during runtime!


For example:http://myproject.com/user/reception/get.user/format/json

url



url

module



url

controller



url

action



url

parameter/value pair



url

$_GET['format'] == 'json'



url


● Application is now in „json“ context – i.e., return all responses json formatted, since the client told us so!



url


● Application is now in „json“ context – i.e., return all responses json formatted, since the client told us so!

● In fact, this is a default option coming with the ContextSwitch action helper


Another example:

User Agent

...$userAgent = strtolower($_SERVER['HTTP_USER_AGENT']);

// request coming from ipad?if (strpos($userAgent, 'ipad') !== false) {

$this->currentContext = 'ipad';

// request coming from android?} else if (strpos($userAgent), 'android') !== false) { $this->currentContext = 'android';

}...

● Context set by detection, not manually enforced by parameters

Context based data

So what can it do for me?

Context based data● Detect devices/users (webbrowser, mobile, bots)

Context based data● Detect devices/users (webbrowser, mobile, bots)● One codebase for all devices: „Write once, run

anywhere“

Context based data● Detect devices/users (webbrowser, mobile, bots)● One codebase for all devices:„Write once, run

anywhere“ ● View variables will either be assigned to templates

(plain html mixed with PHP for example) or transformed to json (xml etc.) – automatically – no need to implement special logic as long as your client can handle the response

● Requesting different formats is often just a thing of switching a parameter at client site

● Makes even delivering views from the backend very easy!● Test a context by switching a parameter● Only views? No, different business logic depending on

the context, too!

Context based data - example

class User_ReceptionController extends Zend_Controller_Action() {

public function init() { // define the actions that should consider different contexts $this->_helper->contextSwitch() ->addActionContext('get.user', 'json') ->initContext(); } /** * This method will return user data to the client as requested. */ public function getUserAction() { ... $this->view->userName = 'Peter Griffin'; $this->view->userEmail = '[email protected]'; }

}

ReceptionController.php




}

implement parent's init() methodto add action contexts...





}

...which happens here:





}

getUserAction() will now...





}

… return the response json-formatted ifthe get-Parameter „format“ was set to „json“





}We have just added an action

context to this action





}


We have just added an action context to this action




}

Call business logic...





}

And finally: Assign values to thecontroller's view


Context based data - exampleclass User_ReceptionController extends Zend_Controller_Action() { ... public function getUserAction() { ... $this->view->userName = 'Peter Griffin'; $this->view->userEmail = '[email protected]'; }

}ReceptionController.php

client.js

Ext.Ajax.request({ url : „/user/reception/get.user/format/json“, success : function(response) { console.log(response.responseText); }});


}ReceptionController.php

client.js


Module


}


client.js


Controller


}


client.js


Action


Note

● This illustration explains how a request gets processed by Zend Framework [6]

● We'll use it to show how ContextSwitch changes the ResponseObject based on the application's context


Request

Client invokes request


Request

Zend Framework routes to User_ReceptionController::getUserAction()

Router


Request

Any plugins defined? Signal a preDispatch to them!

Router preDispatch


Request

Any plugins defined? Signal a preDispatch to them!

Router preDispatch

public function preDispatch() { }

Zend_Controller_Action_Helper_Abstract


Request

Dispatch the action – getUserAction() gets processed!

Router preDispatch

Dispatch


Request Router preDispatch

Dispatch ActionController

public function getUserAction() { ... $this->view->userName = 'Peter Griffin'; $this->view->userEmail = '[email protected]'; } ReceptionController.php




postDispatch

Any plugins defined? Signal a postDispatch to them!




postDispatch

public function postDispatch() { $context = $this->getCurrentContext(); ... //$this->postJsonContext(); } ContextSwitch.php

Any plugins defined? Signal a postDispatch to them!




postDispatch

$response->setHeader('Content-Type', 'application/json');

actionsleft?

Response Object

ContextSwitch.php




postDispatch

$response->setHeader('Content-Type', 'application/json');

actionsleft?

Response Object

$response->setBody(Zend_Json::encode($view->getVars()));

ContextSwitch.php

ContextSwitch.php




postDispatch

actionsleft?

Response Object

send response




postDispatch

actionsleft?

Response Object

{'userName' : „Peter Griffin“, 'userEmail' : „[email protected]“}

send response

console

Context based data

AWESOME!

This makes coding a real blast!

Skeptikal Hippo

It makes sense when working with Ext 1.* and 2.*, but what about Ext.direct.*?

Ext.direct.*

What is Ext.direct.*?

Ext.direct.*

„Ext Direct is a platform and language agnostic technology to remote server-side methods to the

client-side.“[4]

Ext.direct.*● That new kid in class no one wants to play with


● Bugs


● Bugs● Clumsy


● Bugs● Clumsy● Implementation too complex


● Bugs● Clumsy● Implementation too complex● The bad thing:

– Sencha started to focus remote functionality in their library on Ext.direct.* with 3.*


● Bugs● Clumsy● Implementation too complex● The bad thing:

– Sencha started to focus remote functionality in their library on Ext.direct.* with 3.*

● The good thing:– Sencha eliminated almost all implementation issues

Ext.direct.* - advantages● Let's you call remote procedures directly from

client codeclass User_ReceptionController extends Zend_Controller_Action {

public function getUserAction() { ... }} ReceptionController.php




user.reception.getUser();client.js





module





controller





action

Ext.direct.* - advantages● Can stack remote procedure calls and send

them as one „batched request“class Groupware_AccountController extends Zend_Controller_Action {

public function getEmailAccountsAction(){ ... }

public function getFeedAccountsAction(){ ... }}

GroupwareController.php






groupware.account.getEmailAccounts();

client.js






groupware.account.getEmailAccounts();groupware.account.getFeedAccounts();

client.js

Firebug







client.jsPOST http://sourcedevcon/groupware/account/get.email.accountsPOST http://sourcedevcon/groupware/account/get.feed.accounts

Firebug







client.js

Firebug

POST http://sourcedevcon/groupware

POST http://sourcedevcon/groupware/account/get.email.accountsPOST http://sourcedevcon/groupware/account/get.feed.accounts

Firebug







client.js

Firebug

POST http://sourcedevcon/groupwareextDirectData[{"action":"account","method":"getEmailAccounts","data":null,"type":"rpc","tid":1},{"action":"account","method":"getFeedAccounts","data":null,"type":"rpc","tid":2}]

POST http://sourcedevcon/groupware/account/get.email.accountsPOST http://sourcedevcon/groupware/account/get.feed.accounts

Firebug

Ext.direct.*

Batched request – what gives?

Ext.direct.*● Can reduce serverload (1 request with n calls to

specific actions instead of n calls)


specific actions instead of n calls)● Reduces possibility of losing connections (http

allows for n concurrent connections to one domain at a time)


specific actions instead of n calls)● Reduces possibility of losing connections (http

allows for n concurrent connections to one domain at a time)

This alone are tremendously important reasons for you to go ahead and make friendship with that new kid in class!

Ext.direct.* w/ Zend Framework

Unfortunately, not supported out of the box :(


… so let's find a solution.Let's sum up our goals:


● Switch client code to Ext.direct.* without having to change backend source code

● Add another tier of complexity and automatically create backend methods/client code. Tests, changing naming conventions etc. have to be added by hand then.

● Keep our backend testable, reusable and make sure it runs with any other client library/ implementation


What we need to do:


– Show requests sent by Ext.direct.* their way through Zend Framework to their module/controller/action

– Teach Zend Framework how to distinguish between old fashioned and merged requests

– Show Zend Framework how to disassemble 1 request into n requests

– Give Zend Framework a sandbox where it can work/play/you name it with a disamssembled request

– Collect sandboxed requests and merge them back into one response


Change Ext.direct.RemotingProvider URLs on the fly


Remember?The Ext.direct.RemotingProvider exposes access to server side methods on the client.By mapping those remote methods to the client, there is almost no need anymore to spray URLs around the source like crazy.It establishes a connection between the client and the backend by providing a programmer friendly interface.

Ext.direct.* w/ Zend FrameworkExt.direct.Manager.addProvider({ id : 'eu.sourcedevcon.provider', enableUrlEncode : 'extDirectData', url : './groupware', format : 'json', type : 'zend', actions : { account : [{ name : 'getFeedAccounts' }, { name : 'getEmailAccounts' }] }, namespace : 'eu.sourcedevcon.provider'}); client.js


URL


URL

„action“


URL

„action“

method


client.jseu.sourcedevcon.provider.account.getEmailAccounts();


client.js

eu.sourcedevcon.provider.account.getEmailAccounts();

namespace


client.js


action


client.js


method




Firebug




FirebugextDirectData{"action":"account","method":"getEmailAccounts","data":null,"type":"rpc","tid":1}




Firebug

extDirectData{"action":"account","method":"getEmailAccounts","data":null,"type":"rpc","tid":1}





/groupware

if (isset($_POST['extDirectData'])) { ... }

Firebug





/groupware


http://sourcedevcon/groupware/account/get.email.accounts

Firebug





/groupware


Http://sourcedevcon/groupware/account/get.email.accounts

Firebug

URL = module





/groupware



Firebug

action = controller

URL = module

http://sourcedevcon/groupware





/groupware



Firebug

action = controller

URL = module

method = action





/groupware



Firebug

action = controller

URL = module

method = action

URL

„action“

method

Ext.direct.* w/ Zend FrameworkExt.direct.Manager.addProvider({ id : 'eu.sourcedevcon.provider', enableUrlEncode : 'extDirectData', url : './groupware', format : 'json', type : 'zend', actions : { account : [{ name : 'getFeedAccounts' }, { name : 'getEmailAccounts' }] }, namespace : 'eu.sourcedevcon.provider'});

client.js

ZendProvider.js

Ext.define('eu.sourcedevcon.direct.ZendProvider', { alias : 'direct.zendprovider', extend : 'Ext.direct.RemotingProvider'

});


client.js

URL = module action = controller method = action


client.js

Ext.Ajax.on('beforerequest', function(conn, options) {

var trans = options.transaction;

if (trans && trans.provider && trans.provider.type == 'zend') { var controller = options.transaction.action; controller = controller.replace(/([a-z])([A-Z])/g, "$1.$2").toLowerCase(); var action = options.transaction.method; action = action.replace(/([a-z])([A-Z])/g, "$1.$2").toLowerCase(); var module = options.url; var url = module + (module.lastIndexOf('/') == module.length-1 ? '' : '/') + controller + '/' + action;

if (options.transaction.provider.format) { url += '/format/' + options.transaction.provider.format; } options.url = url; options.disableCaching = true;

}});



client.js





}});


ContextSwitch


client.js





}});




POST http://sourcedevcon/groupware/account/get.email.accounts/format/json



Ext.direct.* w/ Zend FrameworkPOST http://sourcedevcon/groupware/account/get.email.accounts/format/json


Note:● Teach your actions the „extDirectData“-POST parameter

Ext.direct.* w/ Zend FrameworkPOST http://sourcedevcon/groupware/account/get.email.accounts/format/json


Note:● Teach your actions the „extDirectData“-POST parameter● Your responses must return the „tid“ as received by the

request


Will do! Let me send a batched request now!


client.jseu.sourcedevcon.provider.account.getEmailAccounts();eu.sourcedevcon.provider.account.getFeedAccounts();




Firebug

extDirectData[{"action":"account","method":"getEmailAccounts","data":null,"type":"rpc","tid":1},{"action":"account","method":"getFeedAccounts","data":null,"type":"rpc","tid":2}]


. . . ?

Ext.direct.* w/ Zend FrameworkqueueTransaction: function(transaction){ var me = this, enableBuffer = me.enableBuffer; if (transaction.form) { me.sendFormRequest(transaction); return; } me.callBuffer.push(transaction); if (enableBuffer) { if (!me.callTask) { me.callTask = Ext.create('Ext.util.DelayedTask', me.combineAndSend, me); } me.callTask.delay(Ext.isNumber(enableBuffer) ? enableBuffer : 10); } else { me.combineAndSend(); } } RemotingProvider.js


add transaction to callBuffer Array



if batching is enabled, create a task




wait for 10ms for another transaction to be added




wait for 10ms for another transaction to be added

no more transactions coming in? Call combineAndSend


client.js





}});



client.js





}});


false


client.js



if (trans && trans.provider && trans.provider.type == 'zend') { var controller = options.transaction.action; controller = controller.replace(/([a-z])([A-Z])/g, "$1.$2").toLowerCase(); var action = options.transaction.method; ...


false


Firebug

extDirectData[{"action":"account","method":"getEmailAccounts","data":null,"type":"rpc","tid":1},{"action":"account","method":"getFeedAccounts","data":null,"type":"rpc","tid":2}]


...and now for something completely different.


Introducing

Sourcedevcon_Controller_Plugin_ExtRequest[5]


What is this Plugin?● „Plugin“ for Zend Framework's Front Controller ● Actually not a real plugin, but rather a mediator for

preDispatch/postDispatch Events● Capable of detecting batched requests● Capable of disassembling a batched request into

individual requests● Capable of creating a sandbox for each request,

and processing it


dispatchLoopStartup


dispatchLoopStartup

dispatchLoopShutdown


dispatchLoopStartup

dispatchLoopShutdown

preDispatch


postDispatch

ResponseObject

Ext.direct.* w/ Zend Framework$extDirect = new Sourcedevcon_Controller_Plugin_ExtRequest(array( 'extParameter' => 'extDirectData', 'additionalHeaders' => array('Content-Type' => 'application/json'), 'additionalParams' => array('format' => 'json'), 'action' => 'multi.request', 'controller' => 'ext', 'module' => 'default'));

$extDirect->registerPlugins();index.php



The POST parameter that holds a batched request



Additional headers for the response object



Additional parameters we add to each sandboxed request



The default module/controller/action before disassembling



Register the plugins at the Front Controller



PreDispatcher.php

public function dispatchLoopStartup() { $this->_parent->notifyDispatchLoopStartup();}



PreDispatcher.php


PostDispatcher.php

public function dispatchLoopShutdown() { $this->_parent->notifyDispatchLoopShutdown();}



PreDispatcher.php


PostDispatcher.php

public function dispatchLoopShutdown() { $this->_parent->notifyDispatchLoopShutdown();}

preDispatch postDispatchdispatch

Request_Http Response_Http

Thank you

Thank you!

... questions?

Resources[1]

http://en.wikipedia.org/wiki/Continuous_integration

[2] http://svnbook.red-bean.com/en/1.5/svn.advanced.vendorbr.html

[3] http://zendframework.com/manual/en/zend.controller.actionhelpers.html

[4] http://www.sencha.com/products/extjs/extdirect

[5] http://thorsten.suckow-homberg.de/sourcedevcon

[6] http://framework.zend.com/manual/en/zend.controller.basics.html

zend framework mvc driven extjs

Education