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.

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
2. The ExtJS Framwork Thursday, June 7, 2012
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
4. What it Is A full-stack Javascript framework Complete with widgets, MVC & event handling Large Thursday, June 7, 2012
5. What it Isn’t Easy to learn Bug free Lightweight Thursday, June 7, 2012
6. Key Parts Controllers Views Models Stores (of MVC) Thursday, June 7, 2012
7. In the Box Event handling Auto-loading (lazy) Generated DOM Theming via CSS/LESS Thursday, June 7, 2012
8. Widgets Toolbar Menus Date/color Pickers Multiple Layout Types Data Grids Charting Form Handling Data Tree ...among others. Thursday, June 7, 2012
9. Widgets - Toolbar/Menu Can be used either as a generic container or as a true “toolbar” Thursday, June 7, 2012
10. Widgets - Pickers Opens popup for “picker” element, built-in are color & date. Thursday, June 7, 2012
11. Widgets - Data Grid Most used widget type, provides much more than just row display. Thursday, June 7, 2012
12. Widgets - Charting Types of Graphs: - Bar - Line - Pie - Gauge - Radar - Scatter - Series Thursday, June 7, 2012
13. Widgets - Tree Thursday, June 7, 2012
14. Widgets - Forms Thursday, June 7, 2012
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
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
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
18. Controllers init() control() refs getter/setters Common Methods/Properties Thursday, June 7, 2012
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
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
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
22. Models fields validations (and validate) belongsTo/hasMany/associations proxy Common Methods/Properties Thursday, June 7, 2012
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
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
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
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
27. The Zend Framework Thursday, June 7, 2012
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
29. 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
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
31. 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
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
33. Example - View <html> <head> <title>My Application</title> </head> <body> <?php echo $this->output; ?> </body> </html> Thursday, June 7, 2012
34. Zend + Ext JS Thursday, June 7, 2012
35. ZF Controller Ext Controller ZF View Ext Store Ext View ZF Model Ext Model ZF Data Source Thursday, June 7, 2012
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
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
38. Example Time! Thursday, June 7, 2012
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
40. To the Cloud...er Code! Thursday, June 7, 2012
41. Chris Cornutt @enygma @phpdeveloper / @phpquickfix https://joind.in/6220 Thanks! Thursday, June 7, 2012