comparing module bundler for the browser

Show why you should use a package manager and the difference between browserify, component and duo
// EDIT
Realized that webpack is a really good solution, prefer webpack over component and duo!

Transcript

1. Frontend Package Managers Anton Wilhelm / @timaschew
2. Frontend Package Managers Anton Wilhelm / @timaschew
3. Agenda - Agony of choice - What do package managers do? - Why should you use a package manager? - How to write modularized applications - Application Manifest & how to load modules - How to compare all the Frontend Package Managers
4. agony of choice
5. agony of choice
6. 1. install dependencies ! 2. bundle your app for the browser What do package managers do?
7. - install dependencies - transitive dependencies - javascript - css - images, fonts What do package managers do?
8. - build your app for the browser - provide a module loader - bundle dependencies & your app code - make images, fonts available What do package managers do?
9. demo install & build an application
10. you don’t want to install all the dependencies (incl. transitive) by hand Why should you use a package manager?
12. TodoMVC - Vanilla JavaScript Example Why should you use a package manager?
13. <script src="bower_components/todomvc-common/base.js"></script>! <script src="js/helpers.js"></script>! <script src="js/store.js"></script>! <script src="js/model.js"></script>! <script src="js/template.js"></script>! <script src="js/view.js"></script>! <script src="js/controller.js"></script>! <script src="js/app.js"></script> /*global qs, qsa, $on, $parent, $live */! ! (function (window) { ! ………………………………………………………………………………………………………………………………………………………………………………………………! // Export to window ! window.app = window.app || {}; ! window.app.View = View; ! }(window));!
14. TodoMVC - Vanilla JavaScript Example - handling all the files in the right order - dependency management via window ! → it doesn’t scale with more dependencies
15. How to write modularized applications
16. dependencies
17. remote dependencies local dependencies
18. remote dependencies
19. registries / repositories npm ! ! GitHub ! ! Bitbucket
20. semantic versioning • X-Ranges 1.2.x 1.X 1.2.* * ! • Tilde Ranges ~1.2.3 ~1.2 ~1 ! • Caret Ranges ^1.2.3 ^0.2.5 ^0.0.4
21. .! !"# component/classes 1.2.1! $ %"" component/indexof 0.0.3! %"# component/reactive 1.2.0! !"" component/query 0.0.1! !"" component/emitter 1.1.1! !"# component/classes 1.1.1! $ %"" component/indexof 0.0.3! !"" component/event 0.1.0! !"" component/domify 1.2.1! !"# yields/carry 0.0.1! $ !"# component/classes 1.2.2! $ $ %"" component/indexof 0.0.3! $ !"" yields/merge-attrs 0.0.1! $ %"# yields/uniq 1.0.0! $ %"" component/indexof 0.0.1! %"" visionmedia/debug 0.7.4 why semantic versioning is important for the frontend
22. local dependencies
23. Why you should use local dependencies?
24. remote dependencies - avoid fragmentation - no need for private repos
25. - self-contained modules - easy to test - fast to build - transparent to refactor local dependencies
26. - define entry point(s) and lookup path in the root manifest - define local & remote dependencies in each module - avoid ../.. to get out of the local module how to achieve local dependencies
27. example application structure
28. real world example – DemocracyOS ./lib! !"" 404! !"" accepts! !"" admin! !"" admin-laws! !"" admin-laws-form! !"" admin-sidebar! !"" admin-tags! !"" admin-tags-form! !"" api! !"" auth! !"" autosubmit! !"" autovalidate! !"" balance! !"" body-classes! !"" boot! !"" browser-lock! !"" build! !"" citizen! !"" comment! !"" comments-edit! !"" comments-filter! !"" comments-replies! !"" comments-replies-edit! !"" comments-view! !"" layout! !"" logout! !"" mailer! !"" markdown! !"" models! !"" participants-view! !"" proposal! !"" proposal-article! !"" proposal-clauses! !"" proposal-options! !"" regexps! !"" render! !"" request! !"" rss! !"" settings! !"" settings-api! !"" settings-password! !"" settings-profile! !"" setup! !"" side-comments! !"" sidebar! !"" signin! !"" signin-api! !"" signup! !"" signup-api! !"" comments-view! !"" config! !"" content-lock! !"" db-api! !"" delegation! !"" facebook-card! !"" feedback! !"" fixtures! !"" flaticons! !"" forgot! !"" forgot-api! !"" form-view! !"" header! !"" help! !"" help-faq! !"" help-glossary! !"" help-markdown! !"" help-pp! !"" help-tos! !"" homepage! !"" is-mobile! !"" law! !"" law-api! !"" laws! !"" laws-filter! !"" snapper! !"" stateful! !"" stateful-view! !"" stats-api! !"" store! !"" tag! !"" tag-images! !"" tags! !"" title! !"" translations! !"" twitter-card! !"" user-badge! !"" utils! !"" validate! !"" validators! %"" view
29. component/todo application .! !"" index.html! !"" <manifest> (root manifest)! %"" lib! !"" boot! $ !"" <manifest>! $ !"" index.js! $ %"" style.css! !"" item! $ !"" <manifest>! $ %"" index.js! %"" item-presenter! !"" <manifest! !"" index.js! !"" style.css! %"" template.html
30. manifest formats - browserify component duo package.json component.json
31. package manager root manifest local manifest "dependencies": { "boot": "file:./lib/boot", } "dependencies": { "item": "file:../item", "item-presenter": "file:../item-presenter" } "locals": [ "boot" ], "paths": [ "lib" ] "locals": [ "item" "item-presenter" ] $ duo lib/boot/index.{js,css} manifest configuration
32. loading modules require('domify')! require('item')! require('./script') require('domify')! require('component-domify')! require('component require('item')! require('./script') require('component/domify' require(' require('component/domify:index.js') require('/lib/item')! require('./script') remote dependency local dependency relative file (within a module)
33. package manager local deps remote deps properties browserify implicit via .main (package.json) explicit (package.json) .main .dependencies component explicit (component.json) explicit (component.json) .main! .scripts! .styles .locals . duo implicit via command line implicit manifest formats
34. implicit - no update is needed if a new file was added or removed - need to touch the code to update and refactor remote dependencies explicit - central overview - faster build - orphan deps - boilerplate implicit vs. explicit
35. How to compare all the package managers?
36. http://webpack.github.io/docs/comparison.html How to compare all the package managers?
37. https://github.com/wilmoore/frontend-packagers How to compare all the package managers?
38. TodoFPM modernizr but for package managers TodoMVC but for modularized structure + compare all the Frontend Package Manager
39. TodoFPM - auto-generated feature matrix - semantic versioning - source maps - module loader - example app (Todo) - see which features are provided to write modular software - handling css, images and fonts compare all the Frontend Package Manager
40. That’s it! @timaschew ! Project: github.com/FrontendPackageManagers