1. #1
    Sencha User
    Join Date
    Sep 2011
    Posts
    13
    Vote Rating
    4
    thefugal is on a distinguished road

      2  

    Default Sencha Touch plugin authoring best practices?

    Sencha Touch plugin authoring best practices?


    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.

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,347
    Vote Rating
    846
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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:

    Code:
    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/
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Mar 2007
    Location
    Portland, OR
    Posts
    6
    Vote Rating
    0
    ggranum is on a distinguished road

      0  

    Default


    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,

  4. #4
    Sencha User
    Join Date
    Jun 2011
    Location
    Canada
    Posts
    27
    Vote Rating
    0
    so.phis.ti.kat is on a distinguished road

      0  

    Default What am I missing?

    What am I missing?


    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
    Code:
    /touch/src --> sencha-touch
    /app --> my app
    /ux --> my plugin(s) holder
    My Loader looks like this:
    HTML Code:
    Ext.Loader.setPath({
       'Ext': 'touch/src',
       'MyApp': 'app',
       'Ux': 'ux'
    });
    My extension/plugin looks like this:
    HTML Code:
    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.
    -- Marlon Valenzuela Web Developer www.marlonvalenzuela.net

  5. #5
    Sencha User
    Join Date
    Jun 2011
    Location
    Canada
    Posts
    27
    Vote Rating
    0
    so.phis.ti.kat is on a distinguished road

      0  

    Default


    False alarm, after taking a break and reviewing the files one more time, the path to my extension was incorrect inside my view.
    -- Marlon Valenzuela Web Developer www.marlonvalenzuela.net