A web “Component” is much more than just JavaScript.

One of the hotter debates in web development as of late revolves around the notion of packaging and sharing reusable components. There are many interesting and viable solutions being proposed and developed; however, many of them miss a critical detail...

A web “component” is much more than just JavaScript.

Transcript

1. A “Component” is much more than just JavaScript DenverJS (May 2, 2013) http://goo.gl/WHCm4 Wil Moore III @wilmoore Friday, May 3, 13
2. Full-Stack Web Application Craftsman, TDD and Devops Advocate. http://github.com/wilmoore Friday, May 3, 13
3. Old School JS == Namespaces OurCompany.Universal.System.Web.Controls.* codinghorror.com/blog/2005/01/a-modest-namespace-proposal.html Friday, May 3, 13
4. Perceived Protection (lies) var YourCo = window.YourCo || {}; YourCo.util = YourCo.util || {}; YourCo.util.Dom = YourCo.util.Dom || {}; Friday, May 3, 13
5. {Module,Script} Loaders Friday, May 3, 13
6. {Node,Common}JS Friday, May 3, 13
7. Tiny API Client Module Friday, May 3, 13
8. MEH CommonJS, I’m a front-end developer Friday, May 3, 13
9. Compare Package Managers: https://github.com/wilmoore/frontend-packagers Friday, May 3, 13
10. Missing the Point Friday, May 3, 13
11. “There have been many attempts to come up with some sort of client-side package manager, and some of them do it very well, however I think they are missing the big picture; a ‘component’ is much more than just JavaScript.” TJ Holowaychuk Friday, May 3, 13
12. Component.io github.com/component/component/wiki Friday, May 3, 13
13. component is more of a concept and a framework for building and distributing front-end components. github.com/component/component/wiki/Spec Friday, May 3, 13
14. Benefits Facilitates building modular components. Use CommonJS. Manages app/lib dependencies. Can build standalone components. Supports CSS, Images, Fonts, and JavaScript. Friday, May 3, 13
15. UI Component Example tjholowaychuk.com/post/37832588021/building-a-date-picker-component Friday, May 3, 13
16. Install, Build, & Attach to DOM % component install component/datepicker % component build Friday, May 3, 13
17. JS Component Example Friday, May 3, 13
18. Shameless Plug: selectn https://github.com/wilmoore/selectn Friday, May 3, 13
19. The relevant bits Friday, May 3, 13
20. Standalone Component % make selectn Makefile Friday, May 3, 13
21. Use everywhere % npm install selectn # use in Node or Browserify % bower install selectn % component install wilmoore/selectn CommonJS Standalone Friday, May 3, 13
22. Wiki github.com/component/component/wiki Spec github.com/component/component/wiki/Spec Workflow Tools github.com/component/component/wiki/Workflow Component “Registry” github.com/component/component/wiki/Components Documentation Friday, May 3, 13
23. Modern Client-Side Component Development webandphp.com/ModernClientSideComponentDevelopment Google+ Community plus.google.com/u/0/communities/109771441994395167277 Building better components github.com/component/component/wiki/Building-better- components Building a date picker component tjholowaychuk.com/post/37832588021/building-a-date-picker- component Resources Friday, May 3, 13
24. on meetup.com meetup.com/Denver-JS/ events/101355632/ on Twitter twitter.com/wilmoore on Github github.com/wilmoore Thanks for your feedback Friday, May 3, 13
25. Thank You :) Friday, May 3, 13