Sencha Touch plugin authoring best practices?

[thefugal]

I am beginning to write my first Sencha Touch plugin, and have not been able to find any clear direction (from the official documentation, or from the community) about plugin authoring best practices. In particular, the issues I'd like clarity on are (with a particular emphasis on large, complex plugins):

• namespacing / class naming conventions,
• where extensions should live in the filesystem, and
• including extensions in projects.

To add color to the questions I am about to ask, a little background. I am writing a Sencha Touch 2 plugin to add easy support for authenticating and interacting with a particular API. Unlike a simple plugin for a fancy panel, this is going to require several classes sprinkled all throughout the class hierarchy (a proxy, a reader, a writer, some model tweaks, etc.). And in general, I'd like to echo the general sentiment expressed in this year-old (and unanswered) Ext forum thread: http://www.sencha.com/forum/showthre...best-practices


NAMING / CLASS NAMING CONVENTIONS

The community seems to be divided on this issue. Many plugins are Ext.ux.PluginName. Some are Ext.ux.touch.PluginName. Sometimes people have more classes, and append them: Ext.ux.touch.PluginName.data.proxy.PluginProxy. Some people namespace their plugins under their own brand: PluginCorp.PluginName. Some people sprinkle classes around without an umbrella namespace, like Ext.ux.data.proxy.PluginProxy and Ext.ux.data.writer.PluginWriter.

WHERE SHOULD THE PLUGIN LIVE IN THE FILESYSTEM

Again, no clear consensus. Some sources tell you to put it in sdk/ux and bank on the default class loader finding it like every other class. Some tell you to put it wherever you want, and use Ext.Loader to set the load path.

INCLUDING EXTENSIONS IN PROJECTS

Some people say to put the extension in sdk/ux and rely on the default class loader behavior to find things. Some tell you to put it elsewhere, then point Ext.Loader at it with a custom path. Some sources say to have a single file to include that Ext.require's all dependent files, some depend on the class loader to find each individual file.

After being pulled in many different directions, I don't have an answer, but I do have some thoughts, and some questions:

• Keeping extensions inside the sdk directory is going to make upgrading the sdk much harder than it needs to be. I don't want to have to move a bunch of classes or risk overwriting them when I upgrade, I just want to move a symlink and have it all just work.
• If it doesn't live inside sdk, you need to tell Ext.Loader to look elsewhere for a given namespace. This seems cumbersome in a multi-class plugin if you do not keep all the classes under an umbrella namespace, be it of the Ext.ux.PluginName.foo format, or of the PluginName.foo format.
• Ext.ux.PluginName.foo is more consistent, PluginName.foo is more concise, Ext.ux.foo is just collision-prone and (seemingly, to me) unnecessarilly limiting. Which is best?

It's entirely possible that there is a best practices page out there somewhere and I've simply been unable to find it (if so, please point me at it!). But it seems to me from my fruitless search, and from the wildly inconsistent practices employed in the few Sencha Touch 2 plugins that exist in the marketplace, that there isn't really consensus on the matter. Does anyone else feel this way? Has anybody figured it all out? I'd love to hear thoughts/answers/corrections. For a framework that is usually so organized and well-documented, this area feels scattered and fragmented. I would love plugin authoring to be more accessible and straightforward.

[mitchellsimoens]

The name of the plugin is totally up to you. We suggest the root namespace is UpperCamelCase and the class name be UpperCamelCase, the rest lower case just like all our classes are in the framework.

Samples:

Ext.ux.touch.grid.View
Ux.locale.Manager

I have shifted from using the Ext.ux namespace that is common to just using Ux.

You can put your plugins/extensions where ever as you can add paths to what you need. Integrating with a project you just add a path. The name must exactly match the file system structure.

So for Ext.ux.touch.grid.View I store in

~/Sites/ux/touch/grid/View.js

For Ux.locale.Manager:

~/Sites/ux/locale/Manager.js

In a project I add paths:

Ext.Loader.setPath({
    'Ext.ux' : '../ux',
    'Ux' : '../ux'
});

That will make Ext.ux and Ux namespaces resolve to the ux directory up one level which in my case is ~/Sites/ux/

[ggranum]

Thank you for the overview. Do you know if there is more information elsewhere? As the OP pointed out, there is very little structure and documentation around the concept of plugins, and plugins are a rather important tool for code reuse and sharing.

Things that aren't addressed here:

• A set of standard file locations, so that each plugin creator doesn't have to specify the install/reuse process for their particular plugin in explicit detail.
• treatment of custom CSS/SCSS
• base directory
• Namespaces that won't clash. 'Ux.*' is not appropriate for third-party plugins, for example.
• Does Sencha have design goals in mind for enhancing the plugin creation and (especially) use workflow?

Thanks,

[so.phis.ti.kat]

Hello Everyone,

I haven't been able to figure this out and this thread has been the closes piece of information that I need.

I am trying to load a plugin/extension and although the namespace and path are set and align with the folder/file structure, secha-touch.js is looking at the wrong path for it.

Here's a quick overview; my structure is

/touch/src --> sencha-touch
/app --> my app
/ux --> my plugin(s) holder

My Loader looks like this:

Ext.Loader.setPath({
   'Ext': 'touch/src',
   'MyApp': 'app',
   'Ux': 'ux'
});

My extension/plugin looks like this:

Ext.namespace('Ux');
Ext.define('Ux.htmlPanel', {
   extend: 'Ext.Panel'....
});

I have tried a couple of ways of defining and setting my paths but no matter what, when sencha try load my extension it is looking in the wrong path; Failed loading 'touch/src/htmlPanel.js',

Can anyone point out what I am dong wrong? I have been looking at this for far too long.

Thanks.

[so.phis.ti.kat]

False alarm, after taking a break and reviewing the files one more time, the path to my extension was incorrect inside my view.