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.

1. Building Enterprise Apps with
Sencha & DeftJS
ryan canulla | @ryancanulla
Thursday, November 7, 13

2. Our Roadmap
•
• Configure deft and create login views
Add localization
•
Add viewController/businessService
•
• Reorganize workspace & add unit testing
Add documentation
•
Create workspace/apps
ryancanulla.com | @ryancanulla
Thursday, November 7, 13

3. Sencha CMD
•
Command line tool
•
Provides automated tasks around the
•
Cross-platform
full life-cycle of your applications
ryancanulla.com | @ryancanulla
Thursday, November 7, 13

4. Sencha CMD
•
Application management
•
Web server
•
Code generators
ryancanulla.com | @ryancanulla
Thursday, November 7, 13

5. $ sencha generate [command]
•
app
•
workspace
ryancanulla.com | @ryancanulla
Thursday, November 7, 13

6. Workspace Overview
.sencha/
workspace/
sencha.cfg
plugin.xml
packages/
build/
web/
mobile/
#
#
#
#
#
#
#
#
Sencha-specific files
Workspace-specific content
Workspace config file
Workspace-level plugin
Sencha Cmd packages
Where build output is placed
Application
Application
ryancanulla.com | @ryancanulla
Thursday, November 7, 13

7. App Overview
.sencha/
app/
sencha.cfg
build-impl.xml
plugin.xml
index.html
app.json
app.js
app/
#
#
#
#
#
#
#
#
#
Sencha-specific files
App-specific content
App config file
Standard app build script
App-level plugin
Entry point to your app
App configuration
Initialization logic
MVC structure
ryancanulla.com | @ryancanulla
Thursday, November 7, 13

8. $ sencha app [command]
•
refresh
•
upgrade
•
build
- Executes the build process for an application
- Updates the application metadata file
-Upgrade the application SDK
ryancanulla.com | @ryancanulla
Thursday, November 7, 13

9. $ sencha web [options] [command]
•
start
•
stop
•
--port, -p
ryancanulla.com | @ryancanulla
Thursday, November 7, 13

10. Create workspace/apps with
Sencha CMD
ryancanulla.com | @ryancanulla
Thursday, November 7, 13

11. Integrating DeftJS
•
Add Deft to your app.json
"requires": [ "deft@0.9.0" ]
• Refresh & build your app
$ sencha app refresh
$ sencha app build
ryancanulla.com | @ryancanulla
Thursday, November 7, 13

12. DeftJS Features
•
MVC with ViewControllers
•
Promises and Deferreds
•
IoC Container
ryancanulla.com | @ryancanulla
Thursday, November 7, 13

13. IoC Container
•
Injects dependencies before the class
•
Eager and lazy instantiation
constructor is executed
•
inject[ ‘userService’ ]
•
userService: ‘SampleApp.service.UserService’
ryancanulla.com | @ryancanulla
Thursday, November 7, 13

14. MVC with ViewControllers
•
Supports multiple view instances
•
Integrates with destruction lifecycle
•
Automatically cleans up listeners
•
Control a view and delegate work to
•
Class annotation-driven
injected business service
(service classes, Stores, etc.)
ryancanulla.com | @ryancanulla
Thursday, November 7, 13

15. Promises and Deferreds
•
Provides an elegant way to deal with async
calls
•
Register success, failure, cancellation or
progress callbacks
•
Implements the CommonJS Promises/A
•
Allows chaining
specification
ryancanulla.com | @ryancanulla
Thursday, November 7, 13

16. Configure DeftJS IOC Container
and create a login view
https://github.com/ryancanulla/sencha-deft-sample/tree/step-one
ryancanulla.com | @ryancanulla
Thursday, November 7, 13

17. Add localization
https://github.com/ryancanulla/sencha-deft-sample/tree/step-two
ryancanulla.com | @ryancanulla
Thursday, November 7, 13

18. Architecture Overview
ryancanulla.com | @ryancanulla
Thursday, November 7, 13

19. Modular Directory Structure
•
Essential for large applications
•
module.js
•
Organized by functionality
- Configure IOC container
- Define events
- Define constants
ryancanulla.com | @ryancanulla
Thursday, November 7, 13

20. View Controllers
•
Listen for events
•
Configure view data
- View: user interaction
- Services, stores, models
(data changes)
ryancanulla.com | @ryancanulla
Thursday, November 7, 13

21. Business Services
•
Build the data to power your view
•
Available for injection
•
Fire events
•
Business specific logic
ryancanulla.com | @ryancanulla
Thursday, November 7, 13

22. Custom Proxy
ryancanulla.com | @ryancanulla
Thursday, November 7, 13

23. Add viewController/businessService
https://github.com/ryancanulla/sencha-deft-sample/tree/step-three
ryancanulla.com | @ryancanulla
Thursday, November 7, 13

24. Unit Testing
ryancanulla.com | @ryancanulla
Thursday, November 7, 13

25. Unit Testing
•
Karma Runner
•
Jasmine
ryancanulla.com | @ryancanulla
Thursday, November 7, 13

26. Reorganize workspace & add unit
testing
https://github.com/ryancanulla/sencha-deft-sample/tree/step-four
ryancanulla.com | @ryancanulla
Thursday, November 7, 13

27. JSDuck Documentation
$ [sudo] gem install jsduck
$ jsduck --config jsduck-conf.json
ryancanulla.com | @ryancanulla
Thursday, November 7, 13

28. Add documentation
https://github.com/ryancanulla/sencha-deft-sample/tree/step-five
ryancanulla.com | @ryancanulla
Thursday, November 7, 13