Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

jQuery UI: Adding guide to using jQuery UI with AMD. #462

Closed
wants to merge 3 commits into from

Conversation

tjvantoll
Copy link
Member

Closes gh-186

@tjvantoll
Copy link
Member Author

@scottgonzalez @rxaviers Here's a draft of my jQuery UI + AMD guide. Let me know if you see any issues, or anything I'm not covering that I should be.

level: intermediate
---

As of jQuery UI 1.11, all of the library's source files specify their dependencies using AMD. This means that you manage your jQuery UI dependencies without using [Download Builder](http://jqueryui.com/download/), and load jQuery UI's source files asynchronously using an AMD loader such as [RequireJS](http://requirejs.org/).
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"library's source files specify their dependencies using AMD"

Is it more accurate to say they are UMD wrapped (we use return exports flavor, except we don't support CommonJS)? This is, AMD is optional. It falls back to using global vars in case AMD is not detected.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Or, "As of jQuery UI 1.11, all of the library's source files support using AMD"

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Or, "As of jQuery UI 1.11, all of the library's source files support using AMD"

+1

@rxaviers
Copy link
Member

@tjvantoll I left my comments inline. But, in general, I liked it a lot! Great job!

Perhaps @SlexAxton could also have insights.

We'll need to download three things to get up and running: jQuery core, jQuery UI, and an AMD loader.

While any AMD loader will work, we'll use RequireJS in this article, which you can download from <http://requirejs.org/docs/download.html>. If you don't have a version of jQuery core handy, you can get it from <http://jquery.com/download/>, and you can download jQuery UI directly from <http://jqueryui.com/>.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should add another article about using Bower and link to that from here.

@tjvantoll
Copy link
Member Author

@rxaviers @scottgonzalez Changes made. I should've addressed everything other than Bower, which we need an article created before we can link to it.

│   ├── app.js
│   ├── jquery.js
│   ├── require.js
│   └── jquery-ui
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This has been renamed. But, not re-ordered. Ignore my comment if re-order is not intended. I'm just pointing out.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

tree puts jquery-ui on top of jquery.js so I probably should too. Good catch.

@tjvantoll
Copy link
Member Author

@rxaviers Changes made in dedda9b.

│   ├── core.js
│   ├── datepicker.js
│   ├── dialog.js
│ ├── ...
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

s/├/└─/ :p

@tjvantoll
Copy link
Member Author

More good catches @rxaviers. Changes made.

│   ├── dialog.js
│   └── ...
│   ├── jquery.js
│   └── require.js
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

├── js
│   ├── app.js
│   ├── jquery-ui
│   │   ├── accordion.js
│   │   ├── autocomplete.js
│   │   ├── button.js
│   │   ├── core.js
│   │   ├── datepicker.js
│   │   ├── dialog.js
│   │   └── ...
│   ├── jquery.js
│   └── require.js
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

:p

@jzaefferer
Copy link
Member

This doesn't really close #186, since that tickets covers more than AMD, right?

Landing this will have to wait until 1.11 is available?

@tjvantoll
Copy link
Member Author

This doesn't really close #186, since that tickets covers more than AMD, right?

Although this doesn't cover all those environments, it sets up the mechanism to add articles for each. I don't know if there is a lot of value in keeping the issue with the big list of environments open. For most of those we'd have to reach out to others to produce that content. imo the only other environment that should have any priority is Bower.

Landing this will have to wait until 1.11 is available?

Yeah

@scottgonzalez
Copy link
Member

I'd like to keep #186 open until we land this and then reach out to the community for each of the other environments. Once we reach out, we can close it, even before any articles are written.

@tjvantoll
Copy link
Member Author

That makes sense. I'll change "closes gh-186" to "ref-186" when this ends up landing.

@tjvantoll
Copy link
Member Author

@scottgonzalez @rxaviers @jzaefferer I added a commit with a new article on Bower (ccb5938). It's written from a 1.11 perspective and will go out alongside the AMD article (which is why it's committed in the same branch). Feedback welcome and appreciated.

@rxaviers
Copy link
Member

+1 very cool @tjvantoll, I made one minor comment only.

@jzaefferer
Copy link
Member

This is looking good. I'd like to see an extra article or an extension to one of these showing the combination of AMD and bowe. That should include the necessary requirejs configuration, mapping "ui" to "bower_components/jquery-ui/ui" etc.

@tjvantoll
Copy link
Member Author

Yeah I can see value in a "Using jQuery With AMD and Bower" article that builds upon these. I'll add it to my list. If I don't get around to it by 1.11 I'll open a new issue.

@tjvantoll tjvantoll closed this in 2a21fbf Apr 25, 2014
tjvantoll added a commit that referenced this pull request Apr 25, 2014
arthurvr pushed a commit to arthurvr/learn.jquery.com that referenced this pull request Jan 4, 2015
arthurvr pushed a commit to arthurvr/learn.jquery.com that referenced this pull request Jan 4, 2015
@resident-uhlig
Copy link

The document says "download jQuery UI directly from http://jqueryui.com/" and lists all of jQuery UI's files within a jquery-ui directory. However every download I can find for the stable 1.11.x releases only offers the concatenated version.

I think the document should guide the user to where to get the single files. Or is this for a newer jQuery UI version?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
5 participants