Visualizing Class Dependencies
Stan BershadskiySenior Engineer, Modus Create
@stan229
stan@moduscreate.com
Agenda
• Understand Sencha Class System Dependency Management
• Explore the Sencha Dependency Visualizer
• Take a peak under the hood of the Dependency Visualizer
About Me
• Senior Engineer at Modus Create
• Started out with Sencha GWT & Ext 2
• Presented “DJing with Sencha Touch” at SenchaCon 2013
• Enjoy coding (sometimes)
Sencha Class SystemWhy should we care about dependencies?
Why is the Class System Awesome?
Best Practices Learn from the mistakes of others!
Extending through Inheritance
Dependency Management
How does Sencha Cmd play a role here?
Assembles Class “Sets” that cover dependencies and requirements Framework Workspace
Application
Finding DependenciesDependencies.json
Finding RequirementsBootsequence.json
Detailed RequirementsDependencies.json
Sencha Dependency Visualizer
Dependencies Tree
Locate Dependencies in Code
Requirements View
Beta Alert
Special Thanks
Jay Garcia Don Griffin Kevin Krohe
“DJing with Sencha Touch” - SenchaCon 2013
What can we accomplish?
Let’s Remove Some Unnecessary Dependencies
Let’s Gain Some Insight and Optimize Our App
Can I Use It In My App?
How Was The App Built?
Requirements Parsing
Further Reading & What’s Next
• Sencha Cmd Compiler Reference
• D3.js wiki• Requirements Source Code view
• Requirements Grid
• Edge case bug fixes :)
Conclusion
• Visualize an application’s structure by its class dependencies and requirements
• Leverage D3.js to render collapsible tree structure
Questions?@stan229
stan@moduscreate.com