Deprecate web components v0 (Chrome) ?

[Jonas Bojesen]

Hi,

As I interpret this Chrome will likely deprecate web components v0 with start 2019Q2

https://groups.google.com/a/chromium.org/d/msg/blink-dev/h-JwMiPUnuU/sl79aLoLBQAJ

Have a small live dart-polymer app with regular users, so have started to look into migrations paths, most likely handcode standard element bindings towards mdc web components https://github.com/material-components/material-components-web

Fits well to pack this with other re-factors Dart1 -> Dart2, dart-polymer -> plain html, web comp v0 -> standard elements.

Others in similar situation, which have found other mitigators like some kind of backport polyfill?

  Regards 

                    Jonas

ps. Would like if this mail thread could be limited to concern technical issues, not general pro/cons web comps or Dart team communication toward community. Dart related to web components and dart:html are heated topics https://github.com/dart-lang/sdk/issues/27445 , anyone with more views on these, could just create another thread. Have contributions to discussions around dart:html regarding updates, doc and version traceability.

[Ged Wed]

I was also reading that issue on GitHub as I think dart with MDC is a great setup.

I looked around on dart pub and GitHub to find out if there was a project doing it but found none.

I really like how you can use either fully qualified html elements with MDC too so you get the nice cognitive feedback of exactly what a html element really is from the html.

So I would be able to devote time to helping on a project like this.

Gedw99 is my GitHub repo.

Gedw99 AT Gmail DOT com is my email. If you remember to let me know if and when a dart MDC happens somewhere it would be great.

--
You received this message because you are subscribed to the Google Groups "Dart Web Development" group.
To unsubscribe from this group and stop receiving emails from it, send an email to web+uns...@dartlang.org.
Visit this group at https://groups.google.com/a/dartlang.org/group/web/.
To view this discussion on the web visit https://groups.google.com/a/dartlang.org/d/msgid/web/419a6635-b3c6-4d36-893b-3992af8e8bba%40dartlang.org.

[Tobe Osakwe]

I was, at a point, working on NGDart bindings for MDC (includes a package:js binding that can be used without Angular), but found the effort to be too much for one person.

If you’re willing to help me revive it...

To view this discussion on the web visit https://groups.google.com/a/dartlang.org/d/msgid/web/CAN_L7j3RTR2wMYVV9PKU4ZDaL%2BdGP-_DoL4iuZ_v1ZOaH0mb%2Bg%40mail.gmail.com.

[Jonas Bojesen]

Hi,

  Thanks for the tip. Anyhow the dart-polymer app I need to migrate is based on like 20 polymer elements. So in this case much less effort to handcode bindings with standard elements, than start development on a framework.

  My interest was most if others had live dart-polymer apps and in this case how they intend to migrate their apps. There are quite a lot of technical components/roadmaps on the plate, so maybe I have overseen a detail. Handcode of bindings to standard elements is the safe and lowtech way, so I was scanning if somebody have identified some more hightech variants :-) Like some polyfill backport of web comp v1 to support v0.  

[Ged Wed]

Ah that means it's using angular directives and stuff.

Normally I kind of dislike that IOC ( inversion of control ) stuff.

Go a repo link though ? Let's have a look-see.

It's amazing how much complexity there is to reuse the MDC stuff. 

My own opinion is that Google's skis wasm work will mean flutter will run on the web as a 2d canvas. Architecturally it's damn smart. No Dom slowing stuff down. Wasm all the way.

If you look into the skis code you can see it and it's being matched to flutter. I bet a beer on it :)

--

You received this message because you are subscribed to the Google Groups "Dart Web Development" group.
To unsubscribe from this group and stop receiving emails from it, send an email to web+uns...@dartlang.org.
Visit this group at https://groups.google.com/a/dartlang.org/group/web/.

To view this discussion on the web visit https://groups.google.com/a/dartlang.org/d/msgid/web/d031a186-eba0-46ca-91ef-0e8b4928cf8c%40dartlang.org.

[Jonas Bojesen]

Yes, interesting to follow wasm, especially when/if the feature "host bindings" got implemented by the browsers.

Ok lets jump back to 2018Q3 - 2019Q2, this thread concerns mitigators for dart-polymer apps when/if web components v0 got deprecated in Chome 2019Q2. Here skia/flutter/wasm/angular maybe not be the most appropriate way out :-) 

[Ged Wed]

True - back to earth :)

The web components MDC has not had a commit for 2 months.

So it's been left for dead from what I can see.

Have a look...

To view this discussion on the web visit https://groups.google.com/a/dartlang.org/d/msgid/web/53e1d4da-df80-4c17-bdc4-76cd6e514810%40dartlang.org.

[Jonas Bojesen]

Great, maybe/maybe not...

https://github.com/material-components/material-components-web-components/issues

Issues written by sorvell and azakus less that a week ago, both key-members of the Polymer-js team.

Anyhow this thread concerns mitigators for dart-polymer apps when/if web components v0 got deprecated in Chome 2019Q2. So you are very welcome to kick-off a new thread. As I see material-components-web-components(web comp v1) will not help in dart-world (web comp v0).

[Ged Wed]

https://github.com/apptreesoftware/flutter_js_polyfill

Used for web components based on dart.

Follow along with the docs etc to the article and let's vote demo

[Jonas Bojesen]

Ok, finished the refactors. Actually less work than expected. Much of the polymer html template contributes to complicated constructs (the dom if). So in someway more clear code.

[Ged Wed]

Got a link to the code.

Eager to see how you did it ..

[Jonas Bojesen]

Hi,

 The refactored project isn't opensource and still some redesign/stylling work to do. So not possible to give a link.

 Anyhow the interfacing towards mdcweb is more less straight ahead, using js_interop. Maybe the more complicated part is how things are wrapped on dart side. I just used some simple plain aggregation flavor and worked fine for this small project.

  

  Below mdc-dialog is used as example. 3 Layers js, dart-js_interop, dart. When I got head up from the project and if interest, I consider give it a try, to see if possible to polish things to a lib and put it on github.

  

    Regards

              Jonas

----------- js ---------

function buildDialog(element) {
  return new mdc.dialog.MDCDialog(element);
}

------- dart js_interop --------- 

@JS()
class MdcDialogJS {
  external void show();
}


@JS()
external MdcDialogJS buildDialog(Element e);

-------- Dart  ----------

class MdcDialog {

  final DivElement _e;
  jsreg.MdcDialogJS _mdcDialogJS;

  MdcDialog()
      : _e = build();

  DivElement element() => _e;

  static DivElement build() =>
      ElementTemplateLoader.tempElementStr(HTML_TEMPLATE).querySelector('div');

  void show() {
    _mdcDialogJS.show();
  }

  void mdcJsInitialSyncWithDOM() {
    _mdcDialogJS = jsreg.buildDialog(_e);
  }
}