Willing to add bower file and use the UMD technique?

[howardroark]

First of all... thanks so much for making this!!!!!

Since learning about virtual dom I though it was such an ingenious idea for solving the problems you mention with replacing innerHTML as your state changes. The issue is that all the stuff out there requires a paradigm shift in terms of how I currently approach things. I just like the idea of templates more JSX. Then I found this!

When building browser apps I like to just use bower and browser "globals" vs trying to pack everything into an isolated context. I tend to feel the window object is a straight forward context for keeping your 3rd party modules. Also makes working with jQuery stuff a lot more simple. I still keep the core app in it's own isolated context and pass an API to the window... Maybe I'm stuck in the old school.

I was wondering if you would be up for adding a bower file to this project and set it up to use the "UMD" trick to offer core methods as "globals" as well as module exports.

Thanks!!!

[patrick-steele-idem]

Hey @howardroark, glad to see you are interested in morphdom.

I don't use bower, but I am not opposed to adding a bowser.json. I am, however, opposed to checking in a build artifact into the source code repo. I don't want the UMD wrapper to be part of the source code (it's ugly and adds unnecessary bloat), so we are using a build tool to add the UMD wrapper as a build step for those that want to use it. The generated UMD file is not being checked into the source repo, but it is being published as a build artifact as part of the package that gets published to npm.

You can easily add morphdom into your project if you are okay using a third-party CDN: https://npmcdn.com/morphdom@1.1.3/dist/morphdom-umd.min.js

Unminified: https://npmcdn.com/morphdom@1.1.3/dist/morphdom-umd.js

NOTE: The global variable name will be window.morphdom

FWIW, I think it is fair to say that bower is a dying technology and npm has "won". bower does not work when you need to publish build artifacts since it is pointing directly to the source code repository.

Also, globals are bad because they don't handle dependencies very well and ordering of globals starts to matter. Globals might be okay if a library has no dependencies, but as soon as libraries have dependencies then you really need to use a JavaScript module bundler such as Lasso.js, browserify or webpack. You might want to consider adding a JavaScript module bundler to your project sooner rather than later.

Sorry if that comes across inflexible, but hopefully you can get things working with the npm package or using the npm cdn.

Maybe you could use a bower post install script to generate a UMD wrapper in your app? We are using the following command to generate the UMD version:

node_modules/umd/bin/cli.js morphdom lib/index.js -c > dist/morphdom-umd.js

Let me know if you have any other questions or thoughts.

[howardroark]

I totally hear what you are saying! I am approaching this with a much more pragmatic thought process. If there is a process for supporting UMD that is all i really need to know :) It would be awesome if you added a bower file and dist folder for the build file to go... though i can always fork and do that if you want to keep this cleaner.

The biggest thing with bower for me is that it makes it simple to use libs with a lot of "assets" like bootstrap. There are also so many handy "jquery plugins" out there that have yet to move in any direction. It does suck that it needs a very specific config file. It really could just be entirely mapped to github and not need that.

While I would agree that the "core" web/node application community is moving that direction... I would say that the greater spectrum of web developers will take a lot longer to move in any direction. I think the community with very strong opinions are a relatively small group. Just like you mention there is still a lot of argument about browserify vs webpack and so on. I like to "sit back and watch" myself :P At this point a lot of the rhetoric sounds a bit like ideology... I'll wait until webpack or browserify are "uncool" before I know what to pick... hehe.

[patrick-steele-idem]

I understand the need to be pragmatic so I suppose I could bend a little for this project... I'll begrudgingly check in the dist files :) I'll let you send a PR to add the bower file.

Pick Lasso.js :) Unlike Webpack and browserify, It's a complete asset pipeline and JavaScript module bundler for Node.js :) It'll pull in JavaScript/CSS/images/fonts/etc. from npm packages and optimize them for you. Since npm packages are just tarball files, they can contain anything so there is no good reason to not use npm. While not nearly as popular as the other tools, we are using Lasso.js exclusively at eBay, and it has worked really well for us. We don't have to maintain complex build scripts and we are using npm to install and publish all packages. We haven't faced any of the limitations that you mentioned and our developers are able to use third party jquery plugins if needed. Lasso.js includes a pretty extensive of plugins and it is easy to add your own: https://github.com/lasso-js/lasso#available-plugins

[patrick-steele-idem]

@howardroark

Here you go: https://github.com/patrick-steele-idem/morphdom/commit/9da3309de9854ab2eae8751edc08aa061088b2d6

Please send PR to add the required bower file.

[howardroark]

Awesome... I'll do that now. You can blame it all on me!!!

I will check out lasso as well!