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
Tweet

More Decks by Chris Cornutt

Other Decks in Technology

Transcript

  1. Agile
    Applications
    with ExtJS & Zend Framework
    Chris Cornutt - Dutch PHP Conference 2012
    https://github.com/enygma/Agile-ExtJS-ZF
    Thursday, June 7, 2012

    View Slide

  2. The ExtJS
    Framwork
    Thursday, June 7, 2012

    View Slide

  3. “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

    View Slide

  4. What it Is
    A full-stack Javascript framework
    Complete with widgets, MVC & event
    handling
    Large
    Thursday, June 7, 2012

    View Slide

  5. What it Isn’t
    Easy to learn
    Bug free
    Lightweight
    Thursday, June 7, 2012

    View Slide

  6. Key Parts
    Controllers
    Views
    Models
    Stores
    (of MVC)
    Thursday, June 7, 2012

    View Slide

  7. In the Box
    Event handling
    Auto-loading (lazy)
    Generated DOM
    Theming via CSS/LESS
    Thursday, June 7, 2012

    View Slide

  8. Widgets
    Toolbar
    Menus
    Date/color Pickers
    Multiple Layout Types
    Data Grids
    Charting
    Form Handling
    Data Tree
    ...among others.
    Thursday, June 7, 2012

    View Slide

  9. Widgets - Toolbar/Menu
    Can be used either as a generic container
    or as a true “toolbar”
    Thursday, June 7, 2012

    View Slide

  10. Widgets - Pickers
    Opens popup for “picker” element, built-in
    are color & date.
    Thursday, June 7, 2012

    View Slide

  11. Widgets - Data Grid
    Most used widget type, provides much
    more than just row display.
    Thursday, June 7, 2012

    View Slide

  12. Widgets - Charting
    Types of Graphs:
    - Bar
    - Line
    - Pie
    - Gauge
    - Radar
    - Scatter
    - Series
    Thursday, June 7, 2012

    View Slide

  13. Widgets - Tree
    Thursday, June 7, 2012

    View Slide

  14. Widgets - Forms
    Thursday, June 7, 2012

    View Slide

  15. 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

    View Slide

  16. 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

    View Slide

  17. 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

    View Slide

  18. Controllers
    init()
    control()
    refs
    getter/setters
    Common Methods/Properties
    Thursday, June 7, 2012

    View Slide

  19. 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

    View Slide

  20. 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

    View Slide

  21. 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

    View Slide

  22. Models
    fields
    validations (and validate)
    belongsTo/hasMany/associations
    proxy
    Common Methods/Properties
    Thursday, June 7, 2012

    View Slide

  23. 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

    View Slide

  24. 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

    View Slide

  25. 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

    View Slide

  26. 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

    View Slide

  27. The Zend
    Framework
    Thursday, June 7, 2012

    View Slide

  28. 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

    View Slide

  29. Example - Controller
    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

    View Slide

  30. 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

    View Slide

  31. Example - Model
    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

    View Slide

  32. 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

    View Slide

  33. Example - View


    My Application


    output; ?>


    Thursday, June 7, 2012

    View Slide

  34. Zend + Ext JS
    Thursday, June 7, 2012

    View Slide

  35. ZF Controller
    Ext Controller
    ZF View
    Ext Store
    Ext View
    ZF Model
    Ext Model
    ZF Data Source
    Thursday, June 7, 2012

    View Slide

  36. 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

    View Slide

  37. 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

    View Slide

  38. Example Time!
    Thursday, June 7, 2012

    View Slide

  39. 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

    View Slide

  40. To the Cloud...er
    Code!
    Thursday, June 7, 2012

    View Slide

  41. Chris Cornutt
    @enygma
    @phpdeveloper / @phpquickfix
    https://joind.in/6220
    Thanks!
    Thursday, June 7, 2012

    View Slide