Materialize: Why this projet don't use $.widget ?

[DaedalusDev]

Hi !

I've a simple question to submit :
Why this projet don't use $.widget factory from jQuery ui ?

This component offer nice possibility for the development (stateful plugins, abstraction, stackabily...).

Are you ok if i start rewriting your project's plugins using this component ?

Thank you.

[DanielRuf]

Afaik Materialize does not use jQueryUI which is also very bloated and would be one more big dependency.

[DaedalusDev]

So you can use $.widget standalone...

[DanielRuf]

Sure but why more jQuery dependencies when you can do the same without?

Also some components do not use or rely on jQuery. Generally it is not needed and one target is to rewrite all components and just use plain vanilla JavvaScript / ES5/6.

[DaedalusDev]

Sure, you can do the same without, of course and seriously, i love your work. I use materializecss for all my jQuery applications and have perfect result.

But in my opinion, some pattern have been missed in the project.

Chaining

95% of your components use this "method call" function :

    if ( methods[methodOrOptions] ) {
      return methods[ methodOrOptions ].apply( this, Array.prototype.slice.call( arguments, 1 ));
    } else if ( typeof methodOrOptions === 'object' || ! methodOrOptions ) {
      // Default to "init"
      return methods.init.apply( this, arguments );
    } else {
      $.error( 'Method ' +  methodOrOptions + ' does not exist on jQuery.?????' );
    }

For a jQuery component, all method except getter must return the jQuery instance to offer chainability.

Statefull component

method

With your "method call" function, you have a serious problem. Your components haven't lifecycle.
( construct() => life.method() => ... => life.method() => destroy() )
Sometime, you try to get around the problem using ( $.addClass('initialized') => !$.hasClass('initialized') ) but it a simple polyfill.

events

Without the a scoped event system, you have boring code to write if you want a "widget.disable()/widget.enable()" method. You have to "register/unregister" all events at all widget call !

Defaults options and redundant code

Without using a factory, you have a ton of redundant code line like $.extend(defaults, options), your "method call"...

Stackabily

Customize your code without rewriting this is sometime very hard (modify render, modify comportment...)
With a factory like "$.widget", you can ealily extend a widget from another namespace and simply rewrite some render function. ex: $.widget('mycustom.tabs', $.materialize.tabs, {});
Plus, your autocomplete is poor in options. So i've create a widget who overwrite your with $.widget('material.autocomplete', $.ui.autocomplete, {});. I've simply rewrite some "classes" and "_method" of ui.autocomplete and have perfect results.

I really think you have serious interest to consider all these points. But it's your project, you are free to continue without this component.

Thank you for your good work.