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

ES6 Module Conventions with $, _ and Backbone libraries #3881

Closed
msiconolfi opened this Issue Dec 9, 2015 · 3 comments

Comments

Projects
None yet
4 participants
@msiconolfi
Copy link

msiconolfi commented Dec 9, 2015

I am in the process of refactoring my code Backbone codebase to leverage new the ES6 features. One of the features I am most excited about is the Module system introduced in ES6. I am still playing around with different bundlers to be able to load it into current browsers that don't support ES6 yet.

Just curious to see how people are using Backbone in conjunction with ES6 Modules?

I have seen two approaches with regards to Underscore, jQuery, and Backbone libraries:

Assuming the following html file:

<!-- index.html -->
<script src="underscore.js"></script>
<script src="jquery.js"></script>
<script src="backbone.js"></script>
<script src="one.js"></script>
<script src="two.js"></script>
<script src="main.js"></script>

Load the libraries onto the global window object and access them via the window object.
This seems like the traditional way of declaring library dependencies. It doesn't require adding boilerplate imports in all of your custom Backbone files/modules.

// File: one.js
// access Backbone via the global object
export default OneView = Backbone.View.extend({
  el: '.one'
});
// File: two.js
// access Backbone via the global object
export default TwoView = Backbone.View.extend({
  el: '.one'
});
// File: main.js
import OneView from './one.js';
import TwoView from './two.js';

// access backbone via global
var m = new Backbone.Model();
var v1 = new OneView();
var v2 = new TwoView();

Explicitly import the libraries for each new module you create
This is very explicit but each individual file is very clear about what it is dependent on. If you unit test a file in isolation, all of it's dependencies are stated and should be more self-contained. It feels kind of bloated though to include all those imports in each custom Backbone file. This type of format will also play nicely with browserify/webpack and other bundlers. It also feels like how other languages module systems work.

// File: one.js
import $ from 'jquery';
import _ from 'underscore';
import Backbone from 'backbone';

export default OneView = Backbone.View.extend({
  el: '.one'
});
// File: two.js
import $ from 'jquery';
import _ from 'underscore';
import Backbone from 'backbone';

export default TwoView = Backbone.View.extend({
  el: '.one'
});
// File: main.js
import $ from 'jquery';
import _ from 'underscore';
import Backbone from 'backbone';

import OneView from './one.js';
import TwoView from './two.js';

// access backbone via global
var m = new Backbone.Model();
var v1 = new OneView();
var v2 = new TwoView();

I could probably combine the jquery, underscore and backbone imports into one helper module that exports all three so that it would only be one export:
export {$, _, Backbone} from './BackboneHelper';

Curious to see if anyone else has found some useful conventions or wanted to discuss the tradeoffs they've experienced between the two methods.

@mr47

This comment has been minimized.

Copy link

mr47 commented Dec 9, 2015

I think second is better. It's more cleaner for future reader. He know where and what we are using.

For backbone more important things to be clear.

Bad idea is webpack define plugin.

@akre54 akre54 added the question label Dec 9, 2015

@akre54

This comment has been minimized.

Copy link
Collaborator

akre54 commented Dec 9, 2015

This is really a question for StackOverflow or the mailing list, but personally I prefer the import everything way. It's much more explicit and easier to refactor.

@akre54 akre54 closed this Dec 9, 2015

@jridgewell

This comment has been minimized.

Copy link
Collaborator

jridgewell commented Dec 9, 2015

Explicitly import the libraries for each new module you create

👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.