RFC - simplify UI package?

[rxaviers]

Welcome to the jQuery UI 1.11 download package:

.
├── css
│   └── ui-lightness
│       ├── images
│       │   └── ...
│       ├── jquery-ui-1.11.0.custom.css
│       └── jquery-ui-1.11.0.custom.min.css
├── development-bundle
│   ├── AUTHORS.txt
│   ├── demos
│   │   └── ...
│   ├── docs
│   │   └── ...
│   ├── external
│   │   └── ...
│   ├── Gruntfile.js
│   ├── jquery.js
│   ├── MIT-LICENSE.txt
│   ├── package.json
│   ├── README.md
│   ├── themes
│   │   ├── base
│   │   │   ├── accordion.css
│   │   │   ├── all.css
│   │   │   ├── autocomplete.css
│   │   │   ├── base.css
│   │   │   ├── button.css
│   │   │   ├── core.css
│   │   │   ├── datepicker.css
│   │   │   ├── dialog.css
│   │   │   ├── draggable.css
│   │   │   ├── images
│   │   │   │   └── ...
│   │   │   ├── jquery-ui.css
│   │   │   ├── menu.css
│   │   │   ├── minified
│   │   │   │   ├── accordion.min.css
│   │   │   │   ├── autocomplete.min.css
│   │   │   │   ├── button.min.css
│   │   │   │   ├── core.min.css
│   │   │   │   ├── datepicker.min.css
│   │   │   │   ├── dialog.min.css
│   │   │   │   ├── draggable.min.css
│   │   │   │   ├── images
│   │   │   │   │   └── ...
│   │   │   │   ├── jquery-ui.min.css
│   │   │   │   ├── menu.min.css
│   │   │   │   ├── progressbar.min.css
│   │   │   │   ├── resizable.min.css
│   │   │   │   ├── selectable.min.css
│   │   │   │   ├── selectmenu.min.css
│   │   │   │   ├── slider.min.css
│   │   │   │   ├── sortable.min.css
│   │   │   │   ├── spinner.min.css
│   │   │   │   ├── tabs.min.css
│   │   │   │   ├── theme.min.css
│   │   │   │   └── tooltip.min.css
│   │   │   ├── progressbar.css
│   │   │   ├── resizable.css
│   │   │   ├── selectable.css
│   │   │   ├── selectmenu.css
│   │   │   ├── slider.css
│   │   │   ├── sortable.css
│   │   │   ├── spinner.css
│   │   │   ├── tabs.css
│   │   │   ├── theme.css
│   │   │   └── tooltip.css
│   │   └── ui-lightness
│   │       ├── accordion.css
│   │       ├── all.css
│   │       ├── autocomplete.css
│   │       ├── base.css
│   │       ├── button.css
│   │       ├── core.css
│   │       ├── datepicker.css
│   │       ├── dialog.css
│   │       ├── draggable.css
│   │       ├── images
│   │       │   └── ...
│   │       ├── jquery-ui.css
│   │       ├── menu.css
│   │       ├── minified
│   │       │   ├── accordion.min.css
│   │       │   ├── autocomplete.min.css
│   │       │   ├── button.min.css
│   │       │   ├── core.min.css
│   │       │   ├── datepicker.min.css
│   │       │   ├── dialog.min.css
│   │       │   ├── draggable.min.css
│   │       │   ├── images
│   │       │   │   └── ...
│   │       │   ├── jquery-ui.min.css
│   │       │   ├── menu.min.css
│   │       │   ├── progressbar.min.css
│   │       │   ├── resizable.min.css
│   │       │   ├── selectable.min.css
│   │       │   ├── selectmenu.min.css
│   │       │   ├── slider.min.css
│   │       │   ├── sortable.min.css
│   │       │   ├── spinner.min.css
│   │       │   ├── tabs.min.css
│   │       │   ├── theme.min.css
│   │       │   └── tooltip.min.css
│   │       ├── progressbar.css
│   │       ├── resizable.css
│   │       ├── selectable.css
│   │       ├── selectmenu.css
│   │       ├── slider.css
│   │       ├── sortable.css
│   │       ├── spinner.css
│   │       ├── tabs.css
│   │       ├── theme.css
│   │       └── tooltip.css
│   ├── ui
│   │   ├── accordion.js
│   │   ├── autocomplete.js
│   │   ├── button.js
│   │   ├── core.js
│   │   ├── datepicker.js
│   │   ├── dialog.js
│   │   ├── draggable.js
│   │   ├── droppable.js
│   │   ├── effect-blind.js
│   │   ├── effect-bounce.js
│   │   ├── effect-clip.js
│   │   ├── effect-drop.js
│   │   ├── effect-explode.js
│   │   ├── effect-fade.js
│   │   ├── effect-fold.js
│   │   ├── effect-highlight.js
│   │   ├── effect.js
│   │   ├── effect-puff.js
│   │   ├── effect-pulsate.js
│   │   ├── effect-scale.js
│   │   ├── effect-shake.js
│   │   ├── effect-size.js
│   │   ├── effect-slide.js
│   │   ├── effect-transfer.js
│   │   ├── i18n
│   │   │   ├── datepicker-*.js
│   │   │   └── jquery-ui-i18n.js
│   │   ├── jquery-ui.custom.js
│   │   ├── menu.js
│   │   ├── minified
│   │   │   ├── accordion.min.js
│   │   │   ├── autocomplete.min.js
│   │   │   ├── button.min.js
│   │   │   ├── core.min.js
│   │   │   ├── datepicker.min.js
│   │   │   ├── dialog.min.js
│   │   │   ├── draggable.min.js
│   │   │   ├── droppable.min.js
│   │   │   ├── effect-blind.min.js
│   │   │   ├── effect-bounce.min.js
│   │   │   ├── effect-clip.min.js
│   │   │   ├── effect-drop.min.js
│   │   │   ├── effect-explode.min.js
│   │   │   ├── effect-fade.min.js
│   │   │   ├── effect-fold.min.js
│   │   │   ├── effect-highlight.min.js
│   │   │   ├── effect.min.js
│   │   │   ├── effect-puff.min.js
│   │   │   ├── effect-pulsate.min.js
│   │   │   ├── effect-scale.min.js
│   │   │   ├── effect-shake.min.js
│   │   │   ├── effect-size.min.js
│   │   │   ├── effect-slide.min.js
│   │   │   ├── effect-transfer.min.js
│   │   │   ├── i18n
│   │   │   │   ├── datepicker-*.min.js
│   │   │   │   └── jquery-ui-i18n.min.js
│   │   │   ├── jquery-ui.custom.min.js
│   │   │   ├── menu.min.js
│   │   │   ├── mouse.min.js
│   │   │   ├── position.min.js
│   │   │   ├── progressbar.min.js
│   │   │   ├── resizable.min.js
│   │   │   ├── selectable.min.js
│   │   │   ├── selectmenu.min.js
│   │   │   ├── slider.min.js
│   │   │   ├── sortable.min.js
│   │   │   ├── spinner.min.js
│   │   │   ├── tabs.min.js
│   │   │   ├── tooltip.min.js
│   │   │   └── widget.min.js
│   │   ├── mouse.js
│   │   ├── position.js
│   │   ├── progressbar.js
│   │   ├── resizable.js
│   │   ├── selectable.js
│   │   ├── selectmenu.js
│   │   ├── slider.js
│   │   ├── sortable.js
│   │   ├── spinner.js
│   │   ├── tabs.js
│   │   ├── tooltip.js
│   │   └── widget.js
│   └── ui.*.jquery.json
├── index.html
└── js
    ├── jquery.js
    ├── jquery-ui-1.11.0.custom.js
    └── jquery-ui-1.11.0.custom.min.js

There are 51 directories, and 690 files.

Questions

1) Which JavaScript bundle to use?
a. js/jquery-ui-1.11.0.custom.js
b. development-bundle/ui/jquery-ui.custom.js

Both are identical.

2) Which Style bundle to use?
a. css/ui-lightness/jquery-ui-1.11.0.custom.css
b. development-bundle/themes/base/jquery-ui.css
c. development-bundle/themes/ui-lightness/jquery-ui.css

(a) and (c) are the structure + ui-lightness theme. (b) is the structure + base theme, ie. smoothness theme. Replace ui-lightness for custom-theme, no-theme, or a different named theme when appropriate.

3) What's the difference between development-bundle/themes/base/accordion.css and development-bundle/themes/ui-lightness/accordion.css?

None. The same is valid for every single component css between both directories.

4) If I select a different set of UI components, do I need to regenerate my theme style?

No. You use the same theme style <style-dir>/theme.css for any component set you choose.

5) Why isn't jquery.js with other third libraries in external?

Maybe, because jquery is the only unanimous dependency across every UI component? Note that Globalize and jquery.mousewheel.js are also dependencies of some components.

6) Why don't we expose i18n bundle in js?

User may use js/jquery-ui-1.11.0.custom.js to get UI bundle. But, user needs to reach development-bundle/ui/i18n/jquery-ui-i18n.js to get UI I18n bundle.

7) Why do we place docs inside development-bundles?

Could we place it in the package's root for easier access?

8) Community has other questions on #158

Goal / Solution

Can we simplify our package?

.
├── css (customization bundles)
├── js (customization bundles)
├── docs
└── development-bundle (shallow copy from source)

Can we make css and js the main entries of the customizations? I mean: user will find customizable bundles in there.

Can we simplify development-bundle as being a shallow copy of the source repository?

Can we move docs into the package's root?

[arschmitz]

What exactly will be in the docs directory? There are no docs in either the ui or mobile repos currently.

[rxaviers]

development-bundle/docs belongs to neither repos. It comes from api.jqueryui.com.

[fnagel]

A little simplification would be nice.

Do we really need to have the minified files in the development bundle dir? Either you use the minified, merged files (in js and css) or you building your own packed files from the non minified files.

[rxaviers]

I agree @fnagel, if we can make development-bundle a shallow copy from source, your suggestion will be included. If we can't, we could discuss having your suggestion at least.

[jzaefferer]

Do we need the version numbers in the files in the css and js folders? I'd prefer to get rid of them, since that makes it easier to copy over the files into a project. Assuming the reason for having those was the same for having the version in our copy of jquery.js, then we should be good to go with that change as well.

As for "shallow copy of the source repository": Would that include all widgets? Or still be filtered down to the selected ones?

We should have a useful readme file in the root, as suggested in #158.

As for the list of question that aren't answered yet by your suggested approach:

5. Why isn't jquery.js with other third libraries in external?

We could add it to the js folder, along with other external dependencies.

6. Why don't we expose i18n bundle in js?

Same here, the bundle should be in the js folder, if its component was selected.

[rxaviers]

Do we need the version numbers in the files in the css and js folders? I'd prefer to get rid of them, since that makes it easier to copy over the files into a project. Assuming the reason for having those was the same for having the version in our copy of jquery.js, then we should be good to go with that change as well.

👍

As for "shallow copy of the source repository": Would that include all widgets? Or still be filtered down to the selected ones?

I'm in favor of no special manipulation, but including all widgets as they are. I don't know why we include the development-bundles files in the download package. But, I assume it's there to give users the original source files, so they can run their own build scripts or do whatever customizations they want to on them. Following that line of thought, I assume including them as they are without filtering or without any manipulation makes no hurt. Actually, it makes it even more reliable.

5. Why isn't jquery.js with other third libraries in external?

We could add it to the js folder, along with other external dependencies.

It's already in the js folder. My question regards to development-bundle. On jQuery UI source (aka development-bundle), we have all dependencies (third libraries) under external except for jquery.js. Why? This is what I am asking... Changes to that should occur on https://github.com/jquery/jquery-ui/ not in Download Builder.

6. Why don't we expose i18n bundle in js?

Same here, the bundle should be in the js folder, if its component was selected.

👍

[scottgonzalez]

At this point, I'm actually in favor of reducing this down to just jquery.js, jquery-ui.js, jquery-ui.min.js, jquery-ui.css, jquery-ui.min.css, and theme images.

If you want individual files you can use Bower, clone the repo, or use GitHub releases.

If you want docs, use api.jqueryui.com. We should figure out a good offline docs solution separate from download builder and have it available for all API sites.

i18n bundles are kinda pointless; I don't think anybody would ever want to load all locales. i18n files won't be included in the repo in the future anyway, so dropping them now seems fine.

If you want third party plugins, you should go through the third party or a package manager like Bower.

[rxaviers]

Wonderful

On Monday, May 5, 2014, Scott González notifications@github.com wrote:

At this point, I'm actually in favor of reducing this down to just
jquery.js, jquery-ui.js, jquery-ui.min.js, jquery-ui.css,
jquery-ui.min.css, and theme images.

If you want individual files you can use Bower, clone the repo, or use
GitHub releases.

If you want docs, use api.jqueryui.com. We should figure out a good
offline docs solution separate from download builder and have it available
for all API sites.

i18n bundles are kinda pointless; I don't think anybody would ever want to
load all locales. i18n files won't be included in the repo in the future
anyway, so dropping them now seems fine.

If you want third party plugins, you should go through the third party or
a package manager like Bower.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/207#issuecomment-42203984
.

http://www.rafael.xavier.blog.br/+55 (16) 8138-1583, skype: rxaviers
http://rafael.xavier.blog.br

[arschmitz]

I'm in favor as well this is basically what mobile has right now

[rxaviers]

Could we implement this for 1.11?

[scottgonzalez]

I'm ok with that. I'd like to get another beta out this week. Do you think we could get the changes in time for that?

[rxaviers]

Yeap, I think so. Will keep you updated via IRC.

[jzaefferer]

Everything else is resolved now, so this would be the only thing holding up the next beta.