building enterprise apps with sencha & deftjs
DESCRIPTION
Learn how to build enterprise applications with Sencha & DeftJS. This session will discuss the build process and application architecture, as well as DeftJS integration — leave with all of the tools needed to begin writing scalable, maintainable and testable Sencha applications.TRANSCRIPT
Building Enterprise Apps with Sencha & DeftJSryan canulla | @ryancanulla
Thursday, November 7, 13
ryancanulla.com | @ryancanulla
Our Roadmap
•Create workspace/apps
•Configure deft and create login views
•Add localization
•Add viewController/businessService
•Reorganize workspace & add unit testing
•Add documentation
Thursday, November 7, 13
ryancanulla.com | @ryancanulla
Sencha CMD
•Cross-platform
•Command line tool
•Provides automated tasks around the full life-cycle of your applications
Thursday, November 7, 13
ryancanulla.com | @ryancanulla
Sencha CMD
•Code generators
•Application management
•Web server
Thursday, November 7, 13
ryancanulla.com | @ryancanulla
$ sencha generate [command]
• workspace
• app
Thursday, November 7, 13
ryancanulla.com | @ryancanulla
Workspace Overview
.sencha/ # Sencha-specific files workspace/ # Workspace-specific content sencha.cfg # Workspace config file plugin.xml # Workspace-level pluginpackages/ # Sencha Cmd packagesbuild/ # Where build output is placedweb/ # Applicationmobile/ # Application
Thursday, November 7, 13
ryancanulla.com | @ryancanulla
App Overview
.sencha/ # Sencha-specific files app/ # App-specific content sencha.cfg # App config file build-impl.xml # Standard app build script plugin.xml # App-level pluginindex.html # Entry point to your appapp.json # App configurationapp.js # Initialization logicapp/ # MVC structure
Thursday, November 7, 13
ryancanulla.com | @ryancanulla
$ sencha app [command]
•build - Executes the build process for an application
•refresh - Updates the application metadata file
•upgrade -Upgrade the application SDK
Thursday, November 7, 13
ryancanulla.com | @ryancanulla
$ sencha web [options] [command]
•--port, -p
•start
•stop
Thursday, November 7, 13
ryancanulla.com | @ryancanulla
Create workspace/apps with Sencha CMD
Thursday, November 7, 13
ryancanulla.com | @ryancanulla
Integrating DeftJS
•Add Deft to your app.json
"requires": [ "[email protected]" ]
•Refresh & build your app
$ sencha app refresh$ sencha app build
Thursday, November 7, 13
ryancanulla.com | @ryancanulla
DeftJS Features
• IoC Container
• MVC with ViewControllers
• Promises and Deferreds
Thursday, November 7, 13
ryancanulla.com | @ryancanulla
IoC Container
•Eager and lazy instantiation
•Injects dependencies before the class constructor is executed
•userService: ‘SampleApp.service.UserService’
•inject[ ‘userService’ ]
Thursday, November 7, 13
ryancanulla.com | @ryancanulla
MVC with ViewControllers
• Class annotation-driven
• Supports multiple view instances
• Integrates with destruction lifecycle
• Automatically cleans up listeners
• Control a view and delegate work to injected business service (service classes, Stores, etc.)
Thursday, November 7, 13
ryancanulla.com | @ryancanulla
Promises and Deferreds
•Provides an elegant way to deal with async calls
•Register success, failure, cancellation or progress callbacks
•Allows chaining
•Implements the CommonJS Promises/A specification
Thursday, November 7, 13
ryancanulla.com | @ryancanulla
Configure DeftJS IOC Container and create a login view
https://github.com/ryancanulla/sencha-deft-sample/tree/step-one
Thursday, November 7, 13
ryancanulla.com | @ryancanulla
Add localization
https://github.com/ryancanulla/sencha-deft-sample/tree/step-two
Thursday, November 7, 13
ryancanulla.com | @ryancanulla
Architecture Overview
Thursday, November 7, 13
ryancanulla.com | @ryancanulla
Modular Directory Structure
•Organized by functionality
•Essential for large applications
• module.js- Configure IOC container- Define events- Define constants
Thursday, November 7, 13
ryancanulla.com | @ryancanulla
View Controllers
•Configure view data
•Listen for events -View: user interaction-Services, stores, models (data changes)
Thursday, November 7, 13
ryancanulla.com | @ryancanulla
Business Services
•Business specific logic
•Build the data to power your view
•Available for injection
•Fire events
Thursday, November 7, 13
ryancanulla.com | @ryancanulla
Custom Proxy
Thursday, November 7, 13
ryancanulla.com | @ryancanulla
Add viewController/businessService
https://github.com/ryancanulla/sencha-deft-sample/tree/step-three
Thursday, November 7, 13
ryancanulla.com | @ryancanulla
Unit Testing
Thursday, November 7, 13
ryancanulla.com | @ryancanulla
Unit Testing
•Jasmine
•Karma Runner
Thursday, November 7, 13
ryancanulla.com | @ryancanulla
Reorganize workspace & add unit testing
https://github.com/ryancanulla/sencha-deft-sample/tree/step-four
Thursday, November 7, 13
ryancanulla.com | @ryancanulla
JSDuck Documentation
$ [sudo] gem install jsduck$ jsduck --config jsduck-conf.json
Thursday, November 7, 13
ryancanulla.com | @ryancanulla
Add documentation
https://github.com/ryancanulla/sencha-deft-sample/tree/step-five
Thursday, November 7, 13