-
Notifications
You must be signed in to change notification settings - Fork 486
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
Conversation
@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/). |
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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"
There was a problem hiding this comment.
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
@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/>. | ||
|
There was a problem hiding this comment.
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.
@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 |
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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.
│ ├── core.js | ||
│ ├── datepicker.js | ||
│ ├── dialog.js | ||
│ ├── ... |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
s/├/└─/ :p
More good catches @rxaviers. Changes made. |
│ ├── dialog.js | ||
│ └── ... | ||
│ ├── jquery.js | ||
│ └── require.js |
There was a problem hiding this comment.
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
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
:p
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? |
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.
Yeah |
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. |
That makes sense. I'll change "closes gh-186" to "ref-186" when this ends up landing. |
@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. |
+1 very cool @tjvantoll, I made one minor comment only. |
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. |
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. |
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? |
Closes gh-186