SenchaCon 2015 - Visualizing Class Dependencies

Visualizing Class Dependencies

Stan BershadskiySenior Engineer, Modus Create

@stan229

[email protected]

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?

Well Structured

Best Practices Learn from the mistakes of others!

Extending through Inheritance

Dependency Management

Class Hierarchy

Sencha Cmd

How does Sencha Cmd play a role here?

Assembles Class “Sets” that cover dependencies and requirements Framework Workspace

Application

Finding DependenciesDependencies.json

src/Mask.js

Finding RequirementsBootsequence.json

Detailed RequirementsDependencies.json

src/Container.js

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?

Under The Hood

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

[email protected]