{"action":"created","issue":{"url":"https://api.github.com/repos/zurb/foundation/issues/6197","labels_url":"https://api.github.com/repos/zurb/foundation/issues/6197/labels{/name}","comments_url":"https://api.github.com/repos/zurb/foundation/issues/6197/comments","events_url":"https://api.github.com/repos/zurb/foundation/issues/6197/events","html_url":"https://github.com/zurb/foundation/issues/6197","id":54470145,"number":6197,"title":"Foundation 6: JavaScript feedback","user":{"login":"gakimball","id":1142001,"avatar_url":"https://avatars.githubusercontent.com/u/1142001?v=3","gravatar_id":"","url":"https://api.github.com/users/gakimball","html_url":"https://github.com/gakimball","followers_url":"https://api.github.com/users/gakimball/followers","following_url":"https://api.github.com/users/gakimball/following{/other_user}","gists_url":"https://api.github.com/users/gakimball/gists{/gist_id}","starred_url":"https://api.github.com/users/gakimball/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/gakimball/subscriptions","organizations_url":"https://api.github.com/users/gakimball/orgs","repos_url":"https://api.github.com/users/gakimball/repos","events_url":"https://api.github.com/users/gakimball/events{/privacy}","received_events_url":"https://api.github.com/users/gakimball/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/zurb/foundation/labels/Foundation%206","name":"Foundation 6","color":"008cba"}],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":38,"created_at":"2015-01-15T16:29:26Z","updated_at":"2015-02-02T19:41:51Z","closed_at":null,"body":"The current JavaScript for Foundation 5 is about 18 months old, and for version 6 we're looking to rewrite it all from scratch. This will allow us to follow more recent best practices and generally modernize the codebase.\r\n\r\nHere are some requests we've gotten related to JavaScript:\r\n  - More modularity. Some folks have asked that we make it easier to use the individual plugins standalone, or wrap the components in a module system like RequireJS or CommonJS.\r\n  - Automatic plugin initialization. There's a problem right now with components added to the DOM dynamically, and components inside of components, not getting initialized properly. At the moment you have to manually run Foundation's reflow function (`$(document).foundation('reflow')`) to catch new plugins and initialize them. We'd like to find a way to streamline this process.\r\n  - Create a plugin directory, to increase discoverability of Foundation-specific plugins. Most likely we'd piggyback on Bower, not actually create our own registry.\r\n\r\n## Common API\r\n\r\nOne plan we already have for version 6 is to create a common API for certain components to tap into. While building Foundation for Apps, we realized most UI components are just different ways of opening and closing things, so we built a single API that can transmit `open`, `close`, and `toggle` commands to modals, panels, off-canvas, etc. We're going to take this same approach in Foundation for Sites, so:\r\n\r\n```html\r\n<a data-reveal-open=\"modal\">Open Modal</a>\r\n```\r\n\r\nBecomes:\r\n\r\n```html\r\n<a data-open=\"modal\">Open Modal</a>\r\n```\r\n\r\nWe're also interested in potentially porting the Motion UI library from Foundation for Apps, so that both frameworks have access to the same set of animations.\r\n\r\n## To jQuery or not?\r\n\r\nWe've had some internal discussion on if it's worth writing the new plugins in pure JavaScript instead of using jQuery. The main reason is the file size, but jQuery 2 is just 32kB gzipped these days. And to be sure, there will be plenty of cases where we have to work around cross-browser inconsistencies, at which point we could have just used a framework that handles those edge cases for us. You may recall we used Zepto for Foundation 4, but we had to drop it because it wasn't as performant as jQuery, by a\r\n\r\n## Plugin Structure\r\n\r\nReworking the plugins also gives us the chance to change the way they're accessed in JavaScript. Right now we put every plugin inside a `foundation()` function on the jQuery object, but there's a few other routes we could take as well.\r\n\r\n```js\r\n// Give every plugin its own function, although this could be a namespacing issue\r\n$(document).reveal();\r\n$(document).orbit();\r\n\r\n// Use a separate object instead\r\nvar modal = new Foundation.Modal();\r\nmodal.open();\r\n```\r\n\r\n**What we'd like to hear is how we could better structure our JavaScript.** If you have feedback on the features of the plugins, we have other discussion topics for that as well.\r\n\r\n**[View our other discussion topics for Foundation 6 here.](https://github.com/zurb/foundation/labels/Foundation%206)**"},"comment":{"url":"https://api.github.com/repos/zurb/foundation/issues/comments/72523137","html_url":"https://github.com/zurb/foundation/issues/6197#issuecomment-72523137","issue_url":"https://api.github.com/repos/zurb/foundation/issues/6197","id":72523137,"user":{"login":"michaelBenin","id":521971,"avatar_url":"https://avatars.githubusercontent.com/u/521971?v=3","gravatar_id":"","url":"https://api.github.com/users/michaelBenin","html_url":"https://github.com/michaelBenin","followers_url":"https://api.github.com/users/michaelBenin/followers","following_url":"https://api.github.com/users/michaelBenin/following{/other_user}","gists_url":"https://api.github.com/users/michaelBenin/gists{/gist_id}","starred_url":"https://api.github.com/users/michaelBenin/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/michaelBenin/subscriptions","organizations_url":"https://api.github.com/users/michaelBenin/orgs","repos_url":"https://api.github.com/users/michaelBenin/repos","events_url":"https://api.github.com/users/michaelBenin/events{/privacy}","received_events_url":"https://api.github.com/users/michaelBenin/received_events","type":"User","site_admin":false},"created_at":"2015-02-02T19:41:51Z","updated_at":"2015-02-02T19:41:51Z","body":"From my experience, I really enjoy working with jQuery plugins that do the following:\r\n\r\n- Ability to explicitly define what selector the plugin should be referring to, and return an instance of that for later reference to interact with it's api internally, an example is toggling topbar \r\n- Emit events as the plugin is used, before/after events with interaction, init/complete etc\r\n- Clean up their events with an off() method (used in SPAs)\r\n- Remove all events and any changed dom with a destroy() method\r\n- Have a reset method\r\n\r\nThere's more too I can update this, I'm sorry I'm at work. I want to help with all of this stuff. There should also be a full on test suite for each plugin with unit tests and utilizing some kind of acceptance/functional testing framework with Saucelabs to ensure no releases go out with broken functionality. "}}