Web Components with Elm - an introduction

[Josh Adams]

I wrote up an introduction to using Web Components and Polymer with Elm.  I just realized I hadn't posted this here, and since the recent thread about components came about it seemed reasonable.  Here it is:

https://www.dailydrip.com/topics/elm/drips/web-components-introduction

I've been using this in a project and it's honestly really enjoyable.  I also realized after the fact that this one post comes off sounding kind of down on elm-mdl in a way that I didn't intend - in the next one I go on to implement a layout using polymer, and while it's really nice and works very well, it's nowhere near as simple as doing the same thing with elm-mdl.

I kind of think that having an elm-mdl (but probably broken out as `elm-paper` and `elm-polymer-app` and `elm-iron`) that takes what elm-mdl has done and applies it to the use of these web components might be awesome (with corresponding suggestions on installing them properly, and potentially with the dev-mode easy-setup that something like elm-mdl's `Material.Scheme.topWithScheme` provides - knowing that it's no good for production but makes dev easier).

I was very skeptical that it would be great, but I find myself actually loving this.  In the larger project using it it's been a blast to get the benefits of elm while still being able to 'be part of' the larger web components ecosystem.  Tacking on some type-niceties to make it easier to use the components correctly would be extra nice, I think.

I haven't yet done a full build, but I don't actually have the worries I once did about the resulting bundle size either (this might be misguided!)

Anyway, what do you think?

[Peter Damoc]

from my own experiments, using Polymer in Elm right now has two large issues:
1. Tooling: In order to get to a deployment stage with a product that uses polymer, one needs to tweak a build setup and there are multiple points in which one has to edit in order to use this technology. 

    There is the issue of installing the components with bower, the issue of declaring their usage with the HTML imports, the issue of vulcanizing everything, the issue of always needing a webserver (you cannot simply open the resulting HTML) 
2. Elm side helpers. Without a library that does the mediation with the web components, a lot of Elm code needs to be written. I was planning on creating something like this but I've procrastinated. Maybe later this week I'll have something.

Regarding your video and putting down elm-mdl... I have not perceived it as such.
What you said is very much true, it is less hassle once a library that mediates this exists. 




 

--
You received this message because you are subscribed to the Google Groups "Elm Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to elm-discuss+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

There is NO FATE, we are the creators.
blog: http://damoc.ro/

[Peter Damoc]

I just realized that there is already an elm-polymer library:

https://github.com/edvail/elm-polymer

Josh, maybe you can do a quick follow up article using that library. 

[Wouter In t Velt]

Good stuff Josh!

After Peter's feedback on my earlier posts, I actually used your Daily Drip post yesterday to dip into Polymer + Elm myself. 

And for a webcomponents-noob like myself, it was easy to follow and really helped me get started quickly.

With the basis from your article, I actually managed to get some other components working quite quickly.

I can relate to the issues Peter mentions. To me. it does feel like pulling in all the Polymer stuff with bower makes the app a lot heavier.

Thank you Peter for pointing to the elm-polymer library. Will check it out for sure.