Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Agile Applications with ExtJS & Zend Framework

Agile Applications with ExtJS & Zend Framework

ExtJS is an enterprise-level Javascript framework, the Zend Framework is one of the most powerful and flexible PHP frameworks to date - its a match made in heaven. I'll introduce you to these two technologies and how to combine them into an easy to maintain, agile application that can move as fast as your project needs. I'll show you how to build a sample application including a frontend MVC, REST backend and unit testing the result.

Chris Cornutt

June 07, 2012

More Decks by Chris Cornutt

Other Decks in Technology


  1. Agile Applications with ExtJS & Zend Framework Chris Cornutt -

    Dutch PHP Conference 2012 https://github.com/enygma/Agile-ExtJS-ZF Thursday, June 7, 2012
  2. “Ext JS 4 is a pure JavaScript application framework that

    works everywhere from IE6 to Chrome 11. It enables you to create the best cross- platform applications using nothing but a browser, and has a phenomenal API.” - sencha.com Thursday, June 7, 2012
  3. What it Is A full-stack Javascript framework Complete with widgets,

    MVC & event handling Large Thursday, June 7, 2012
  4. Widgets Toolbar Menus Date/color Pickers Multiple Layout Types Data Grids

    Charting Form Handling Data Tree ...among others. Thursday, June 7, 2012
  5. Widgets - Toolbar/Menu Can be used either as a generic

    container or as a true “toolbar” Thursday, June 7, 2012
  6. Widgets - Data Grid Most used widget type, provides much

    more than just row display. Thursday, June 7, 2012
  7. Widgets - Charting Types of Graphs: - Bar - Line

    - Pie - Gauge - Radar - Scatter - Series Thursday, June 7, 2012
  8. Layout Types Absolute Accordion Anchor Border Card Column Fit Table

    Vbox Hbox Absolutely positioned elements Panels that slide in and out Items are “anchored” to the parent ‘s sides Regions are assigned and filled (N/S/E/W) Tab panel or Wizard using “card” panels Columns of elements Elements fit to the size of the parent Rows and cells Items aligned vertically Items aligned horizontally Thursday, June 7, 2012
  9. Controllers Extends “Ext.app.Controller” Loads for models, views and stores init()

    Handles actions “Controllers are the glue that binds an application together. All they really do is listen for events (usually from views) and take some action.” Thursday, June 7, 2012
  10. Example - Controller Ext.define(‘example.controller.Index’, { extend: ‘Ext.app.Controller’, models: [ ‘User’

    ], stores: [ ‘index.User’ ], views: [ ‘Userlist’ ], init: function() { console.log(‘Init controller!’); } }); Thursday, June 7, 2012
  11. Example - Controller Ext.define(‘example.controller.Index’, { extend: ‘Ext.app.Controller’, refs: [ {

    ref: ‘list’, selector: ‘grid’ } ], models: [ ‘User’ ], stores: [ ‘index.User’ ], views: [ ‘Userlist’ ], init: function() { console.log(‘Init controller!’); this.control({ ‘button’: { click: this.refreshGrid } }); }, refreshGrid: function() { this.getList().store.load(); } }); Thursday, June 7, 2012
  12. Model Extends “Ext.data.Model” Defines fields and their types Can have

    methods of its own Setting validations “A Model represents some object that your application manages. For example, one might define a Model for Users, Products, Cars, or any other real-world object that we want to model in the system. Models are registered via the model manager, and are used by stores, which are in turn used by many of the data-bound components in Ext.” Thursday, June 7, 2012
  13. Example - Model Ext.define(‘example.model.Message’, { extend: ‘Ext.data.Model’, fields: [ {

    name: ‘message’, type: ‘string’ }, { name: ‘username’, type: ‘string’ }, { name: ‘id’, type: ‘int’ } ] initComponent: function() { console.log(‘Init Message model!’); this.callParent(arguments); } }); Thursday, June 7, 2012
  14. Store Extends “Ext.data.Store” Client-side data resource Data set locally or

    through a Proxy AutoLoad/AutoSync “The Store class encapsulates a client side cache of Model objects. Stores load data via a Proxy, and also provide functions for sorting, filtering and querying the model instances contained within it.” Thursday, June 7, 2012
  15. Example - Store Ext.define(‘example.store.User’, { extend: ‘Ext.data.Store’, model: ‘example.model.User’, initComponent:

    function() { console.log(‘Init User store!’); this.callParent(arguments); } }); Thursday, June 7, 2012
  16. Views Extends whatever panel/widget type you need Can be aliased

    initComponent Nested views/widgets “The View uses an Ext.XTemplate as its internal templating mechanism, and is bound to an Ext.data.Store so that as the data in the store changes the view is automatically updated to reflect the changes. The view also provides built-in behavior for many common events that can occur for its contained items including click, doubleclick, mouseover, mouseout, etc. as well as a built-in selection model.” Thursday, June 7, 2012
  17. Example - View Ext.define(‘example.view.index.Buttons’, { extend: ‘Ext.Panel’, alias: ‘widget.buttonpanel’, items:

    [ { xtype: ‘button’, text: ‘Click Me!’, handler: function() { } } ], initComponent: function() { console.log(‘Init User store!’); this.callParent(arguments); } }); Thursday, June 7, 2012
  18. Controllers Types: Front, Action, Router_Rewrite, Dispatcher_Standard Augmented by “action helpers”

    init(), preDispatch() methods run first Accessors for request, parameters, arguments “The Zend_Controller system is designed to be lightweight, modular, and extensible. It is a minimalist design to permit flexibility and some freedom to users while providing enough structure so that systems built around Zend_Controller share some common conventions and similar code layout.” Thursday, June 7, 2012
  19. Example - Controller <?php class ExampleController extends Zend_Controller_Action { public

    function init() { // called at controller object create } public function indexAction() { // called when request is “/example/index” } } ?> Thursday, June 7, 2012
  20. Model Open ended for your interface Can use things like

    Zend_Db_Table ...or Doctrine Relationships (_dependentTables, _referenceMap) “The model captures the domain logic of the application — those actions a user might want to request — with a strong separation from the way that the user requests them and sees the results.” Thursday, June 7, 2012
  21. Example - Model <?php class Application_Model_Chatmessage extends Zend_Db_Table_Abstract { protected

    $_name = ‘chat_messages’; public function init() { // called when object is created } public function getLatest($limit=10) { // get 10 latest chat messages } } ?> Thursday, June 7, 2012
  22. View “View helpers” Partials Work with template engines (like Twig)

    “Views define exactly what is presented to the user. Usually controllers pass data to each view to render in some format. Views will often collect data from the user, as well. This is where you're likely to find HTML markup in your MVC applications.” Thursday, June 7, 2012
  23. Example - View <html> <head> <title>My Application</title> </head> <body> <?php

    echo $this->output; ?> </body> </html> Thursday, June 7, 2012
  24. ZF Controller Ext Controller ZF View Ext Store Ext View

    ZF Model Ext Model ZF Data Source Thursday, June 7, 2012
  25. The usual stuff is easy... Custom plugins (like a RowExpander)

    HTML5 Features (File drag, local storage, form fields) Still need Javascript knowledge In Ext JS... Thursday, June 7, 2012
  26. Can be over-complicated Very flexible (both good and bad?) Don’t

    expect a “do it all for me” framework Single-page versus Multiple Pages? In Zend Framework... Thursday, June 7, 2012
  27. Creating a basic application Setting up a Model and Store

    Widget Examples Working with Layouts Grids & Database Backend Simple User System Unit Testing with Jasmine Advanced App - Real-time Chat Thursday, June 7, 2012