building enterprise apps with sencha extjs/touch & deftjs
DESCRIPTION
with Ryan Canulla Presented live on Nov 7-8, 2013 in Boston at FITC's Web Unleashed 2013 conference. 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 withSencha & DeftJSryan canulla | @ryancanulla
ryancanulla.com | @ryancanulla
Our Roadmap
Create workspace/apps
Configure deft and create login views
Add localization
Add viewController/businessService
Reorganize workspace & add unittesting
Add documentation
•••••
•
ryancanulla.com | @ryancanulla
Sencha CMD
Cross-platform
Command line tool
Provides automated tasks around the fulllife-cycle of your applications
•••
ryancanulla.com | @ryancanulla
Sencha CMD
Code generators
Application management
Web server
•••
ryancanulla.com | @ryancanulla
$ sencha generate [command]
workspace
app
•
•
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
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
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
•
•
•
ryancanulla.com | @ryancanulla
$ sencha web [options] [command]
--port, -p
start
stop
•
•
•
ryancanulla.com | @ryancanulla
Create workspace/apps withSencha CMD
ryancanulla.com | @ryancanulla
Integrating DeftJS
Add Deft to your app.json
"requires": [ "[email protected]" ]
Refresh & build your app
$ sencha app refresh$ sencha app build
•
•
ryancanulla.com | @ryancanulla
DeftJS Features
IoC Container
MVC with ViewControllers
Promises and Deferreds
•••
ryancanulla.com | @ryancanulla
IoC Container
Eager and lazy instantiation
Injects dependencies before the class constructor isexecuted
userService: ‘SampleApp.service.UserService’
inject[ ‘userService’ ]
••
••
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.)
•••••
ryancanulla.com | @ryancanulla
Promises and Deferreds
Provides an elegant way to deal with async calls
Register success, failure, cancellation orprogress callbacks
Allows chaining
Implements the CommonJS Promises/Aspecification
••
••
ryancanulla.com | @ryancanulla
Configure DeftJS IOC Containerand create a login view
https://github.com/ryancanulla/sencha-deft-sample/tree/step-one
ryancanulla.com | @ryancanulla
Add localization
https://github.com/ryancanulla/sencha-deft-sample/tree/step-two
ryancanulla.com | @ryancanulla
Architecture Overview
ryancanulla.com | @ryancanulla
Modular Directory Structure
Organized by functionality
Essential for large applications
module.js
Configure IOC container Define events Define constants
•••
---
ryancanulla.com | @ryancanulla
View Controllers
Configure view data
Listen for events
View: user interaction
Services, stores, models (data changes)
••
--
ryancanulla.com | @ryancanulla
Business Services
Business specific logic
Build the data to power your view
Available for injection
Fire events
••••
ryancanulla.com | @ryancanulla
Custom Proxy
ryancanulla.com | @ryancanulla
Add viewController/businessService
https://github.com/ryancanulla/sencha-deft-sample/tree/step-three
ryancanulla.com | @ryancanulla
Unit Testing
ryancanulla.com | @ryancanulla
Unit Testing
Jasmine
Karma Runner
••
ryancanulla.com | @ryancanulla
Reorganize workspace & add unittesting
https://github.com/ryancanulla/sencha-deft-sample/tree/step-four
ryancanulla.com | @ryancanulla
JSDuck Documentation
$ [sudo] gem install jsduck$ jsduck --config jsduck-conf.json
ryancanulla.com | @ryancanulla
Add documentation
https://github.com/ryancanulla/sencha-deft-sample/tree/step-five