Opened 3 years ago

Closed 19 months ago

Last modified 19 months ago

#10119 closed feature (fixed)

All: Use AMD loader in demos and tests

Reported by: jzaefferer Owned by:
Priority: major Milestone: 1.12.0
Component: [meta] ui.dev Version: 1.11.1
Keywords: Cc:
Blocked by: Blocking:

Description

For discussion: If we were to use an AMD loader in our demos and tests, replacing the individual script elements (demos) our custom script loader (tests), we could also simplify the UMD wrappers in our source files: Instead of using the relatively complicated UMD wrappers, we'd use plain define calls to specify dependencies and the factory function, then extend that at build time to include the full UMD wrapper. The unique parts are the dependencies and accordingly the parameters of the factory function, so it should be reasonable to generate the rest.

This would simplify the source files, reduce maintenance of demos, replace our custom script loader in tests and make it more reasonable to split modules into smaller chunks that can be shared across widgets. Currently we have core collecting various shared functions, which could then be split into individual files that are defined as dependencies as needed.

Change History (58)

comment:1 Changed 3 years ago by rxaviers

As I remember, Scott wants source files to be consumable in UI (no build step in between). If we were ok with a build step, in the other hand, your solution makes sense. It's what Globalize does.

I'm copy&pasting a 2013/12/24 email I sent to the group about a kinda similar discussion.

---

The distinction between source vs. distributable files is much more salient when we talk about C (or other compiled languages), than when we talk about javascript (or other interpreted languages). Although, for larger projects, the distinction may arise. Because, they serve different purposes... In my vision, we have this:

Sources files: should be organized for easy development. Distributable files: should be organized for easy use.

Recently, I have been given the opportunity to refactor our Globalize project to use CLDR as database foundation. Anyway... I see Globalize in the middle of Core and UI/Mobile in a modularity aspect. I'd like to talk a little about its organization, which I cloned from Core, but instead of building one single distribution file, it builds n distribution-module files (similar to UI/Mobile, but perhaps not as granular as UI/Mobile).

Making source files as granular as possible help unit testing them. If every function is exposed as a single file, unit tests will access (and therefore test) every single function. This is not possible when such functions are not exposed eg. in bigger compositions (where some functions may serve as private functions). <- When we test that, we do functional (not unit) tests.

Globalize's distribution files are built into: dist/globalize.js dist/globalize/date.js dist/globalize/number.js dist/globalize/...

Those files are UMD wrapped. All source excessive/overhead wrappers are cut off (like Core, or modernizr does). Then, those distributables files are functional tested. Those files are the ones user should use. We (developers) have the freedom to compose them the way we want.

I am not stating this should be a solution for UI / Mobile. Because, different projects have different needs and purposes. But, maybe it can be used as another reference for evaluation.

--- For reference the above email was sent as an reply for Gabriel and Scott. The original subject was: "Repo files vs. downloadable".

comment:2 Changed 3 years ago by jzaefferer

As I remember, Scott wants source files to be consumable in UI (no build step in between).

That's why I'm suggesting this together with a change in how we files in demos and tests.

The structure in Globalize is still something I want the UI team to review together. Single function modules also have their drawbacks that we should discuss, like the long list of dependencies (and parameters) in some modules.

comment:3 Changed 3 years ago by scottgonzalez

I refuse to partake in any further discussion about module loaders and package managers, so I'm a +0 on this and all future discussions.

comment:4 Changed 3 years ago by scottgonzalez

  • Milestone changed from none to 1.11.2
  • Priority changed from minor to blocker
  • Status changed from new to open
  • Version changed from git to 1.11.1

We'll change demos and tests to use AMD via require.js, but leave the UMD wrappers in the source files. This will require updating the demo copying task in jqueryui.com as well.

comment:5 Changed 3 years ago by scottgonzalez

  • Milestone changed from 1.11.2 to 1.12.0

comment:6 Changed 3 years ago by scottgonzalez

  • Summary changed from All: Use AMD loader in demos and tests and simplify UMD to All: Use AMD loader in demos and tests

comment:7 Changed 2 years ago by jzaefferer

Rafael was updating spinner demos to use require.js as part of updating to Globalize 1.x. I've asked him to do the require.js update separately and create a PR for just one of the demos, then work on updating one of the unit tests. We can then use that to figure out and improve the details before updating everything else.

comment:9 Changed 2 years ago by jzaefferer

  • Priority changed from blocker to major

Same here, not a 1.12 blocker.

comment:10 Changed 23 months ago by Scott González

Tests: Change test infrastructure to use AMD and reduce boilerplate

Ref #10119 Ref gh-1528

  • Adds RequireJS and relies on AMD for loading dependencies.
  • Updates to grunt-contrib-qunit 0.6.0.
  • Convert domEqual() to a proper QUnit assertion.
  • Introduces two bootstrap files (JS and CSS) which use data- attributes to

reduce the amount of boilerplate needed in each test

Changeset: 7c896ddb8563e1f4fc655904614cf72d010e2ecb

comment:11 Changed 23 months ago by Scott González

Tests: Convert closeEnough() to a proper QUnit assertion

Should eventually replace with qunit-assert-close.

Ref #10119 Ref gh-1528

Changeset: 2e1c72fb59b3e41da15ebcd83640dbdf13a90d27

comment:12 Changed 23 months ago by Scott González

Accordion: Convert tests to new infrastructure

Ref #10119 Ref gh-1528

Changeset: e39ee9d6695cebd4ec138b1d5391c67c58d939a9

comment:13 Changed 23 months ago by Scott González

Autocomplete: Convert tests to new infrastructure

Ref #10119 Ref gh-1528

Changeset: aff3c32ee1f0b81ecea613057e95a40d8edc6b03

comment:14 Changed 23 months ago by Scott González

Button: Convert tests to new infrastructure

Ref #10119 Ref gh-1528

Changeset: f908a7793bf9e06f3e23d15028baf2e90e92baaa

comment:15 Changed 23 months ago by Scott González

Core: Convert tests to new infrastructure

Ref #10119 Ref gh-1528

Changeset: 9fb04e42a24263a88dc3adf1b9ce6a199309b24c

comment:16 Changed 23 months ago by Scott González

Draggable: Convert tests to new infrastructure

Ref #10119 Ref gh-1528

Changeset: fbc55446fbc397f7f176fd907fd5da5ff3d3abad

comment:17 Changed 23 months ago by Scott González

Effects: Convert tests to new infrastructure

Ref #10119 Ref gh-1528

Changeset: a0e3da0459e4fbbde99dfa5f41929fdc82dfde1e

comment:18 Changed 23 months ago by Scott González

Menu: Convert tests to new infrastructure

Ref #10119 Ref gh-1528

Changeset: f2ca8f92f0d9ab9c7bf2e202e7ff7778daeef85c

comment:19 Changed 23 months ago by Scott González

Position: Convert tests to new infrastructure

Ref #10119 Ref gh-1528

Changeset: 739f9b3f6382195b6976abeb71fc4b09f75cc4e5

comment:20 Changed 23 months ago by Scott González

Progressbar: Convert tests to new infrastructure

Ref #10119 Ref gh-1528

Changeset: df3e8c4deb07105eb8a387caf27d7a1f9ecdb02c

comment:21 Changed 23 months ago by Scott González

Resizable: Convert tests to new infrastructure

Ref #10119 Ref gh-1528

Changeset: 4e7407cd699bcb02cfdd6e28d463831e782233e7

comment:22 Changed 23 months ago by Scott González

Selectable: Convert tests to new infrastructure

Ref #10119 Ref gh-1528

Changeset: b8625346f6de6d7533493fc27b24d8acd45aa84c

comment:23 Changed 23 months ago by Scott González

Selectmenu: Convert tests to new infrastructure

Ref #10119 Ref gh-1528

Changeset: 3522fd9618d196beb235f3bd52f85c31f20c57b8

comment:24 Changed 23 months ago by Scott González

Slider: Convert tests to new infrastructure

Ref #10119 Ref gh-1528

Changeset: a856dd9b7e00982cbe4dc9a2dce8ca940728126d

comment:25 Changed 23 months ago by Scott González

Sortable: Convert tests to new infrastructure

Ref #10119 Ref gh-1528

Changeset: 31e36e6ae4e1552b9a79595695c13dce4f416d0b

comment:26 Changed 23 months ago by Scott González

Tabs: Convert tests to new infrastructure

Ref #10119 Ref gh-1528

Changeset: 94f5c15df97ca975f039788f6220650492d924be

comment:27 Changed 23 months ago by Scott González

Widget: Convert tests to new infrastructure

Ref #10119 Ref gh-1528

Changeset: 23a7a113ac61bb12ad6a3775553d5ac1426f82f6

comment:28 Changed 23 months ago by Scott González

Spinner: Convert tests to new infrastructure

Ref #10119 Ref gh-1528

Changeset: 8bda52c8d1d681f3afe5827f8eda10475377442f

comment:29 Changed 23 months ago by Scott González

Datepicker: Convert tests to new infrastructure

Ref #10119 Ref gh-1528

Changeset: 7d168ce6300a4b59f54c7b7f55c622a7a60ba222

comment:30 Changed 23 months ago by Scott González

Tests: Support $.uiBackCompat = false via data-no-back-compat

Ref #10119 Ref gh-1528

Changeset: 0714f55ad48c9d3dace29003677353f5e152a13a

comment:31 Changed 23 months ago by Scott González

Dialog: Convert tests to new infrastructure

Ref #10119 Ref gh-1528

Changeset: 7d4811206f8b64e9bd8eea168a77edf23629659b

comment:32 Changed 23 months ago by Scott González

Tooltip: Convert tests to new infrastructure

Ref #10119 Ref gh-1528

Changeset: a2da340e0d1b02d243c71b86382e5e624e7211d6

comment:33 Changed 23 months ago by Scott González

Droppable: Convert tests to new infrastructure

Ref #10119 Ref gh-1528

Changeset: 669e62d61b52a31efc7666bf95d0bfe2df2f839d

comment:34 Changed 23 months ago by Scott González

Tests: Remove old test infrastructure

Ref #10119 Ref gh-1528

Changeset: 42566bdd037ac57cf7d6d7a5d059db2ba42518d9

comment:35 Changed 23 months ago by Scott González

Tests: Widget test helpers extend the main helper

Ref #10119 Ref gh-1528

Changeset: dc4b015a8b9acdb5bff2d5dd89737b3d8b64097f

comment:36 Changed 23 months ago by Scott González

Build: Upgrade to qunit-composite 1.1.0

Ref #10119 Closes gh-1528

Changeset: f499569bffae60a6a7161eb2e13ec409afb98450

comment:37 Changed 19 months ago by Alexander Schmitz

  • Resolution set to fixed
  • Status changed from open to closed

Demos: Add new infrastructure using a require.js bootstrap

Fixes #10119 Closes gh-1557

Changeset: 7336a5869ceb2bf27779b5f089277c365fc7d278

comment:38 Changed 19 months ago by Alexander Schmitz

Accordion: Use new demos infrastructure

Ref #10119

Changeset: 9ef415042598ad978414f832b7bf52f20c67cce1

comment:39 Changed 19 months ago by Alexander Schmitz

Datepicker: Use new demos infrastructure

Ref #10119

Changeset: 4c223432816409369e364893b3e890596d639c9c

comment:40 Changed 19 months ago by Alexander Schmitz

Datepicker: Update localization demo to use i18n files from ui folder

Ref #10119

Changeset: 9484718a00d68a36f5600c6c49365d134d1df79e

comment:41 Changed 19 months ago by Alexander Schmitz

Autocomplete: Update demos to use AMD

Ref #10119

Changeset: 0935c9af366bfc412db4cc2bea8b544d5588a7b2

comment:42 Changed 19 months ago by Alexander Schmitz

Dialog: Switch demos to use AMD

Ref #10119

Changeset: f18ec88ea8dab42c884004ab36a02874f716afe2

comment:43 Changed 19 months ago by Alexander Schmitz

Draggable: Update to demos to use AMD

Ref #10119

Changeset: 41b5b2d7a9def3298a205150d0a8428c86798dcd

comment:44 Changed 19 months ago by Alexander Schmitz

Droppable: Update demos to use AMD

Ref #10119

Changeset: 6acdd4a44447d4a4a002284b82c9e4e3e9df009b

comment:45 Changed 19 months ago by Alexander Schmitz

Effects: Update demos to use AMD

Ref #10119

Changeset: d13f81d88a18836844ea4dc0f4e572fe07dafbb0

comment:46 Changed 19 months ago by Alexander Schmitz

Menu: Update demos to use AMD

Ref #10119

Changeset: f5eb4eff60003497aecfe0cedd902bb084074560

comment:47 Changed 19 months ago by Alexander Schmitz

Position: Update demos to use AMD

Ref #10119

Changeset: febd120d75d2acb61906949dcd41ffd760585472

comment:48 Changed 19 months ago by Alexander Schmitz

Progressbar: Update demos to use AMD

Ref #10119

Changeset: df37d7d505edc429f4238f105e61ff3644a17b8b

comment:49 Changed 19 months ago by Alexander Schmitz

Resizable: Update demos to use AMD

Ref #10119

Changeset: 4ea6f8f0b42c630174de684767de54bd078a5578

comment:50 Changed 19 months ago by Alexander Schmitz

Selectable: Update demos to use AMD

Ref #10119

Changeset: 91ee61e78043581fcf5fbcfe105603b6279d3724

comment:51 Changed 19 months ago by Alexander Schmitz

Selectmenu: Update demos to use AMD

Ref #10119

Changeset: 0e8d871a264139d5156d924f0925033c483f0c1e

comment:52 Changed 19 months ago by Alexander Schmitz

Slider: Update demos to use AMD

Ref #10119

Changeset: 78364a2428d56c4867a65c9715f33bbde7459e18

comment:53 Changed 19 months ago by Alexander Schmitz

Sortable: Update demos to use AMD

Ref #10119

Changeset: 19328423fe0fae1381319911357dc9ad12c3d274

comment:54 Changed 19 months ago by Alexander Schmitz

Spinner: Update demos to use AMD

Ref #10119

Changeset: ebb8bbf16884cead816830711739181e27ff18de

comment:55 Changed 19 months ago by Alexander Schmitz

Sortable: Update demos to use AMD

Ref #10119

Changeset: 48f31d7dd0183cc79f8ed26a657c67dd82b48300

comment:56 Changed 19 months ago by Alexander Schmitz

Tabs: Update demos to use AMD

Ref #10119

Changeset: d1c0e381857c05d51e6495947aead908df45c634

comment:57 Changed 19 months ago by Alexander Schmitz

Tooltip: Update demos to use AMD

Ref #10119

Changeset: b60694ee309a72c44db5e46576f6019ae8c0638f

comment:58 Changed 19 months ago by Alexander Schmitz

Widget: Update demo to use AMD

Ref #10119

Changeset: 23f0064ecd265ad398f0b7e3140e06ab417493a1

Note: See TracTickets for help on using tickets.