align-toparrow-leftarrow-rightbackbellblockcalendarcamerachatcheckchevron-downchevron-leftchevron-rightchevron-small-downchevron-small-leftchevron-small-rightchevron-small-upchevron-upcircle-with-crosscrosseditfacebookglobegoogleimagesinstagramlocation-pinmagnifying-glassmailmoremuplabelShape 3 + Rectangle 1outlookpersonplusImported LayersImported LayersImported Layersshieldstartwitteryahoo

Building Web Components Today

Jeremy Wilken will be the speaker. He is going to treat us to his html5devconf talk: http://html5devconf.com/speakers/jeremy_wilken.html

Web Components are a promising tool, except the spec for Components is incomplete and the browser support today is quite poor. Web Components are interesting because it aims to reduce the need for boilerplate and duplicated code or markup found in today's sharable components such as jQuery plugins or Bootstrap components. Native Web Components are the future, but discover how to start building and using Web Components today. Based on real examples from work at eBay, we'll dig into several ways to create and use Web Components now, and the strengths and weaknesses of each approach.

We'll look at how to use Polymer, X-Tags, AngularJS, and plain ol' Javascript to build near (or functionally similar to) native Web Components, and some of the tooling we developed. This means you won't have to use Chrome Canary to use Web Components! You'll walk away with not just a comparison, but real examples of how these different approaches work and can benefit your site or application.

Join or login to comment.

  • Pedro de la Cruz J.

    Today's meet up was good. I have been thinking about this topic for some time now for a somewhat large javascript application I'm working on. I don't think HTML or javascript alone will ever be able to produce true encapsulation. This is due to its high level desgin. In the future, I think, HTML and or javascript will mearly try to converge to modulation. I think the closest "High level" method to produce web components will be angularDart, though it's still very young. [AngularDart can produce javascript if you want] . In fact angularDart did completely away with directives to accomplish the so-called "web compoent" . AngularDart sports a templateUrl along with a cssUrl. This is what I think most web developers are requiring and needing. Lastly I read that the angular team is investing a lot into angularDart. It looks like whatever angularDart moves towards, AngularJS will try to reproduce/mimic.

    May 12, 2014

    • Pedro de la Cruz J.

      I agree Jeremy. I just dont see an easy way to make HTML web components using just HTML/CSS/JS. The three alone or together can't do it "well" . Some other abstraction layer has to be used, I think. If it's not Dart then it's going to have to be something else. Short of just scrapping the DOM architecture (think window scope) something like Dart or something like it will be the next best thing.

      May 14, 2014

    • Jeremy

      I don't think I said it would be easy, but it is possible. The biggest drawbacks are ease of development, browser compatibility, and tooling. Polymer is the best option with the most support to do it as close to 'native' as possible, but I definitely agree there will likely be more abstractions or approaches like you suggest.

      May 14, 2014

  • Jeremy

    I've been doing some research to answer the questions raised.

    http://www.polymer-project.org/platform/shadow-dom.html#known-limitations

    CSS encapsulation is limited (no real details on that). Currently you it only seems to work correctly on Chrome (and then it seems flaky or dependent on some about:flags being turned on. The Shadow DOM spec is intended to prevent styles from bleeding out or in, it acts as a barrier, but it does provide a set of pseudo selectors for a component to access the host and a host to access the component internals.

    Javascript encapsulation does not exist in reality. https://stackoverflow.com/questions/18976643/javascript-encapsulation-with-webcomponents-shadowdom

    CORS headers are required to import a file from another domain, similar to making AJAX requests across domains. Otherwise, it should execute the same as assets from the domain.

    Hope that helps!

    May 14, 2014

  • Mike

    Not enough tables and seats for everyone.presenter was very open and genuine.

    1 · May 13, 2014

  • Jeremy

    Thanks for having me and happy to talk more about web components!

    1 · May 12, 2014

  • Micah S.

    All About Polymer at SFHTML5 (Complete Event Recording) http://m.youtube.com/watch?v=mN7IAaRdi_k

    May 12, 2014

  • Micah S.

    1 · May 12, 2014

  • Jonathan B.

    FYI: Use the side door at START to get in. The main door is locked. :)

    I am here so I can let people in etc

    1 · May 12, 2014

Our Sponsors

  • The Iron Yard

    Meeting space, sometimes food/beer/coffee and at times hackspace!

  • START

    START is coworking space where we hold some of our meetings.

People in this
Meetup are also in:

Sign up

Meetup members, Log in

By clicking "Sign up" or "Sign up using Facebook", you confirm that you accept our Terms of Service & Privacy Policy