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.

Sign up for GitHub

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

Jump to bottom

Make Zepto available for download via Bower #949

Closed
wants to merge 1 commit into from
Closed

Make Zepto available for download via Bower #949

wants to merge 1 commit into from

Conversation

silvenon
Copy link
Contributor

This battle isn't over yet. You might not have zepto, but you have zeptojs pointing to this repo, which is enough for now. I find wgeting libraries very annoying, multiplied by the number of files. I know this library in particular is a bit different in the sense that you build it yourself, but it is annoying as well.

You don't need to add built files to version control, you can link up source files as an array and let the users worry about compression. The choice I had to make was which files to include in main. I decided to include all of them (rather than the default set). Users can deal with ignoring ones they don't need, going the other way around is more tricky. wiredep is a utility which is excellent for these situations. When set up, your process of installing components could look like this:

<!doctype html>
<html>
  <head>
  <!-- bower:css -->
  <!-- endbower -->
  </head>
  <body>
  <!-- bower:js -->
  <!-- endbower -->
  </body>
</html>
$ bower install --save zepto modernizr normalize-css
$ gulp wiredep # or whatever you're using
<!doctype html>
<html>
  <head>
  <!-- bower:css -->
  <link rel="stylesheet" href="bower_components/normalize-css/normalize.css" />
  <!-- endbower -->
  </head>
  <body>
  <!-- bower:js -->
  <script src="bower_components/zeptojs/src/zepto.js"></script>
  <script src="bower_components/zeptojs/src/event.js"></script>
  <script src="bower_components/zeptojs/src/ajax.js"></script>
  <script src="bower_components/zeptojs/src/form.js"></script>
  <script src="bower_components/zeptojs/src/ie.js"></script>
  <script src="bower_components/zeptojs/src/detect.js"></script>
  <script src="bower_components/zeptojs/src/fx.js"></script>
  <script src="bower_components/zeptojs/src/fx_methods.js"></script>
  <script src="bower_components/zeptojs/src/assets.js"></script>
  <script src="bower_components/zeptojs/src/data.js"></script>
  <script src="bower_components/zeptojs/src/deferred.js"></script>
  <script src="bower_components/zeptojs/src/callbacks.js"></script>
  <script src="bower_components/zeptojs/src/selector.js"></script>
  <script src="bower_components/zeptojs/src/touch.js"></script>
  <script src="bower_components/zeptojs/src/gesture.js"></script>
  <script src="bower_components/zeptojs/src/stack.js"></script>
  <script src="bower_components/zeptojs/src/ios3.js"></script>
  <!-- endbower -->
  </body>
</html>

Compare that to wget.

Now, if I want to exclude some Zepto files, I can configure wiredep to exclude them. Then I just run gulp wiredep and everything is updated.

(Sure, Bower is a bit clumsy, but it's getting there.)

@mislav
Copy link
Collaborator

mislav commented Apr 11, 2014

People who want to use Bower should use https://github.com/components/zepto which is registered as "zepto" package.

See #789 (comment)

Compare that to wget.

OK:

$ wget http://zeptojs.com/zepto.min.js -P public/

<script src="/zepto.min.js"></script>

@silvenon
Copy link
Contributor Author

I hope it's clear why using a package pointing to this repo is better than relying on someone else to keep theirs up-to-date.

I saw #789 already, 2 main points were that you don't want to support a package which forcefully took your package name, and you don't want to add build files to version control, right?

I don't see how you get Modernizr and Normalize.css from these actions. Also, this doesn't allow you to select only modules of Zepto you want. What I had in mind was something like this:

I want Zepto. Let's say I already have zepto repository cloned...

$ cd ~/Code/zepto
$ MODULES="zepto event data" ./make dist
$ cp dist/zepto.js ~/Code/my-project/assets/scripts/
$ cd ~/Code/my-project
<!-- ... -->
<script src="assets/scripts/zepto.js"></script>
<!-- ... -->

Blast. Now I want the form module.

$ cd ~/Code/zepto
$ MODULES="zepto event data form" ./make dist # I have to remember all the modules I already had
$ cp dist/zepto.js ~/Code/my-project/assets/scripts/
$ cd ~/Code/my-project

Now I want Modernizr. Naturally, I don't remember the exact URL by heart. I remember they don't have a built file in their repo so I'm going to their site to download to assets/scripts...

<!-- ... -->
<script src="assets/scripts/modernizr.js"></script>
<!-- ... -->

Now I want Normalize.css. Again, I don't know the URL, looking up on GitHub... clicking on normalize.css, right click on Raw, copy URL...

$ wget "https://github.com/necolas/normalize.css/raw/master/normalize.css" -P assets/styles
<link rel="stylesheet" href="assets/styles/normalize.css">

And this is only for components which have a single file. Imagine what a drag would importing something like OwlCarousel be.

This is process is clearly slower, that's why Bower exists.

@madrobby
Copy link
Owner

How often do you add or change JavaScript libraries in your project? IMO this is solving a "problem" that simply isn't one.

However the real issue here is for maintainers that all these loaders and library managers require us to keep our code updated, causing extra work and adding (largely untestable) cruft to the project only to maintain a feature that saves a few users of the project 3 seconds every 2 months.

@silvenon
Copy link
Contributor Author

Lately I do a lot of independent landing pages and demos, which means I start fresh many times. In these situations tools like Bower are very useful, because I don't have to leave the terminal. I might not update them very often, but I do install them often. Also, having Zepto split into source files makes it easier to see which module caused an error (although that's what source maps might do, I'm not on that train yet).

Having Zepto as a Bower component allows other packages to depend on it. Let's say I make a plugin called zepto-slider, which creates a range slider and depends on Zepto:

// bower.json
{
  // ...
  "dependencies": { "zepto": ">=1" }
  // ...
}

This allows me to not worry about Zepto at all, I just need to bower install --save zepto-slider, run gulp wiredep and the zepto-slider along with zepto will be included in my HTML in the correct order. The power of dependencies is especially visible in components like isotope which has a lot of dependencies, so if another component uses some of the dependencies from isotope, they will not be duplicated, they will be included only once, which can save some space in larger projects with a lot of components. Also, this can save quite a bit more than 3 seconds every 2 months.

You said that the main concern is keeping the code up-to-date. Didn't you mean bower.json? May I volunteer to keep it updated?

@madrobby
Copy link
Owner

Given that's it's only one file and that we don't use bower nor want to keep files for it updated and tested, I suggest you use your own fork of Zepto and pull in any upstream changes as necessary for you.

@madrobby madrobby closed this Apr 12, 2014
@silvenon
Copy link
Contributor Author

Shoot.

@mislav mislav mentioned this pull request Apr 22, 2014
Closed
@brunowego
Copy link

Bower is so popular, why not add support for it? Tools like wiredep uses bower to auto add libraries inside html.

To install zepto using bower, use this repo: https://github.com/components/zepto

bower install zepto --save

@silvenon
Copy link
Contributor Author

@brunowego this has been discussed gajillion times, you can search issues for explanations. Bower is kinda weak and retro anyway, better use a module loader like browserify. There's a link to my demo in that readme section.

@silvenon
Copy link
Contributor Author

Also, there is a Zepto component for Bower, apparently.

@brunowego
Copy link

Thanks @silvenon 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@silvenon @mislav @madrobby @brunowego