https://mdworld.nl/_app/immutable/chunks/2017-07-30-polymer2-redux.e743b719.js

1import{S as mt,i as pt,s as dt,k as s,q as t,a as D,l as n,m as i,r as o,h as a,c as K,n as p,b as h,F as e,G as De}from"./index.f054af2f.js";function ct(it){let m,V,y,X,Y,b,Z,$,M,ee,te,R,oe,ae,L,le,re,C,se,ne,H,ie,me,O,pe,de,U,w,ce,g,he,fe,G,f,ue,W,ve,we,J,ye,be,z,d,ge,I,Ie,Ee,E,_e,xe,F,Pe,ke,q,Se,Te,_,je,Ae,B,u,Me,x,Re,Le,P,Ce,He,N,v,Oe,k,We,Je,S,Fe,qe;return{c(){m=s("p"),V=t("The coming time I will be spending a lot of time developing in "),y=s("a"),X=t("Polymer 2.0"),Y=t(", so I’ve done some research and made a small project to test some aspects of setting up a real-world application with it. It is in "),b=s("a"),Z=t("this repo"),$=t(". It contains two basic elements ("),M=s("em"),ee=t("polygram-searchbox"),te=t(" and "),R=s("em"),oe=t("polygram-details"),ae=t(") that share state via Redux and also I’ve separated the UI from the API with a container element ("),L=s("em"),le=t("polygram-ui-details"),re=t(" vs "),C=s("em"),se=t("polygram-details"),ne=t("). This separation of concerns simplifies reuse (I reuse "),H=s("em"),ie=t("polygram-ui-details"),me=t(" in "),O=s("em"),pe=t("polygram-marvel-details"),de=t(")."),U=D(),w=s("p"),ce=t("Polymer CLI provides convenient utilities (project scaffolding, building), but the linter and WCT (web component tester) are lacking because they are too limited compared to e.g. ESLint and Karma and in fact it is "),g=s("a"),he=t("encouraged to use an separate linter"),fe=t(". For that reason, I would have preferred that the Polymer linter would have been provided as an ESLint plugin."),G=D(),f=s("p"),ue=t("In the examples I use ES6 syntax without a transpiler, but I will soon have to investigate if bundling can be enriched with transpilation because I would at least like to try to use TypeScript. Of course we’re losing the module imports ("),W=s("code"),ve=t("import x from './x'"),we=t(") in favor of html imports of elements ("),J=s("code"),ye=t('<link rel="import" href="x.html">'),be=t("). I think it’s a loss, we finally have a standard for imports, why not stick to it?"),z=D(),d=s("p"),ge=t("I would also still like to look at the possibility of adding "),I=s("a"),Ie=t("Redux Thunk"),Ee=t(" and/or "),E=s("a"),_e=t("RxJS"),xe=t(" for async event handling. It seems that at least certain features of RxJS are already available in Polymer, e.g. "),F=s("em"),Pe=t("observers"),ke=t(" on properties and the "),q=s("em"),Se=t("debounce"),Te=t(" attribute on "),_=s("a"),je=t("iron-ajax"),Ae=t("."),B=D(),u=s("p"),Me=t("On a side track I’ve also done a small comparative case between Polymer and "),x=s("a"),Re=t("native web components"),Le=t(", currently on version 1. This example is in the same repo, in the "),P=s("a"),Ce=t("HelloWorld demo"),He=t(". Polymer builds on web components and implements of component driven development"),N=D(),v=s("p"),Oe=t("So far the syntax is very similar, but Polymer is opinionated on certain design decisions (the HTML format, for instance) and adds some convience functions, and more importantly polyfills for wider support (see "),k=s("a"),We=t("webcomponents-lite"),Je=t(") and a "),S=s("a"),Fe=t("catalog"),qe=t(" of reusable web components."),this.h()},l(l){m=n(l,"P",{});var r=i(m);V=o(r,"The coming time I will be spending a lot of time developing in "),y=n(r,"A",{href:!0,rel:!0});var Ke=i(y);X=o(Ke,"Polymer 2.0"),Ke.forEach(a),Y=o(r,", so I’ve done some research and made a small project to test some aspects of setting up a real-world application with it. It is in "),b=n(r,"A",{href:!0,rel:!0});var Ue=i(b);Z=o(Ue,"this repo"),Ue.forEach(a),$=o(r,". It contains two basic elements ("),M=n(r,"EM",{});var Ge=i(M);ee=o(Ge,"polygram-searchbox"),Ge.forEach(a),te=o(r," and "),R=n(r,"EM",{});var ze=i(R);oe=o(ze,"polygram-details"),ze.forEach(a),ae=o(r,") that share state via Redux and also I’ve separated the UI from the API with a container element ("),L=n(r,"EM",{});var Be=i(L);le=o(Be,"polygram-ui-details"),Be.forEach(a),re=o(r," vs "),C=n(r,"EM",{});var Ne=i(C);se=o(Ne,"polygram-details"),Ne.forEach(a),ne=o(r,"). This separation of concerns simplifies reuse (I reuse "),H=n(r,"EM",{});var Qe=i(H);ie=o(Qe,"polygram-ui-details"),Qe.forEach(a),me=o(r," in "),O=n(r,"EM",{});var Ve=i(O);pe=o(Ve,"polygram-marvel-details"),Ve.forEach(a),de=o(r,")."),r.forEach(a),U=K(l),w=n(l,"P",{});var Q=i(w);ce=o(Q,"Polymer CLI provides convenient utilities (project scaffolding, building), but the linter and WCT (web component tester) are lacking because they are too limited compared to e.g. ESLint and Karma and in fact it is "),g=n(Q,"A",{href:!0,rel:!0});var Xe=i(g);he=o(Xe,"encouraged to use an separate linter"),Xe.forEach(a),fe=o(Q,". For that reason, I would have preferred that the Polymer linter would have been provided as an ESLint plugin."),Q.forEach(a),G=K(l),f=n(l,"P",{});var T=i(f);ue=o(T,"In the examples I use ES6 syntax without a transpiler, but I will soon have to investigate if bundling can be enriched with transpilation because I would at least like to try to use TypeScript. Of course we’re losing the module imports ("),W=n(T,"CODE",{});var Ye=i(W);ve=o(Ye,"import x from './x'"),Ye.forEach(a),we=o(T,") in favor of html imports of elements ("),J=n(T,"CODE",{});var Ze=i(J);ye=o(Ze,'<link rel="import" href="x.html">'),Ze.forEach(a),be=o(T,"). I think it’s a loss, we finally have a standard for imports, why not stick to it?"),T.forEach(a),z=K(l),d=n(l,"P",{});var c=i(d);ge=o(c,"I would also still like to look at the possibility of adding "),I=n(c,"A",{href:!0,rel:!0});var $e=i(I);Ie=o($e,"Redux Thunk"),$e.forEach(a),Ee=o(c," and/or "),E=n(c,"A",{href:!0,rel:!0});var et=i(E);_e=o(et,"RxJS"),et.forEach(a),xe=o(c," for async event handling. It seems that at least certain features of RxJS are already available in Polymer, e.g. "),F=n(c,"EM",{});var tt=i(F);Pe=o(tt,"observers"),tt.forEach(a),ke=o(c," on properties and the "),q=n(c,"EM",{});var ot=i(q);Se=o(ot,"debounce"),ot.forEach(a),Te=o(c," attribute on "),_=n(c,"A",{href:!0,rel:!0});var at=i(_);

1je=o(at,"iron-ajax"),at.forEach(a),Ae=o(c,"."),c.forEach(a),B=K(l),u=n(l,"P",{});var j=i(u);Me=o(j,"On a side track I’ve also done a small comparative case between Polymer and "),x=n(j,"A",{href:!0,rel:!0});var lt=i(x);Re=o(lt,"native web components"),lt.forEach(a),Le=o(j,", currently on version 1. This example is in the same repo, in the "),P=n(j,"A",{href:!0,rel:!0});var rt=i(P);Ce=o(rt,"HelloWorld demo"),rt.forEach(a),He=o(j,". Polymer builds on web components and implements of component driven development"),j.forEach(a),N=K(l),v=n(l,"P",{});var A=i(v);Oe=o(A,"So far the syntax is very similar, but Polymer is opinionated on certain design decisions (the HTML format, for instance) and adds some convience functions, and more importantly polyfills for wider support (see "),k=n(A,"A",{href:!0,rel:!0});var st=i(k);We=o(st,"webcomponents-lite"),st.forEach(a),Je=o(A,") and a "),S=n(A,"A",{href:!0,rel:!0});var nt=i(S);Fe=o(nt,"catalog"),nt.forEach(a),qe=o(A," of reusable web components."),A.forEach(a),this.h()},h(){p(y,"href","https://www.polymer-project.org/"),p(y,"rel","nofollow"),p(b,"href","https://github.com/mdvanes/polygram/"),p(b,"rel","nofollow"),p(g,"href","https://www.polymer-project.org/2.0/docs/tools/polymer-cli-commands#lint"),p(g,"rel","nofollow"),p(I,"href","https://github.com/gaearon/redux-thunk"),p(I,"rel","nofollow"),p(E,"href","http://reactivex.io/rxjs/"),p(E,"rel","nofollow"),p(_,"href","https://www.webcomponents.org/element/PolymerElements/iron-ajax"),p(_,"rel","nofollow"),p(x,"href","https://html.spec.whatwg.org/multipage/custom-elements.html"),p(x,"rel","nofollow"),p(P,"href","https://github.com/mdvanes/polygram/tree/master/demo/HelloWorld"),p(P,"rel","nofollow"),p(k,"href","https://www.webcomponents.org/polyfills/"),p(k,"rel","nofollow"),p(S,"href","https://www.webcomponents.org/"),p(S,"rel","nofollow")},m(l,r){h(l,m,r),e(m,V),e(m,y),e(y,X),e(m,Y),e(m,b),e(b,Z),e(m,$),e(m,M),e(M,ee),e(m,te),e(m,R),e(R,oe),e(m,ae),e(m,L),e(L,le),e(m,re),e(m,C),e(C,se),e(m,ne),e(m,H),e(H,ie),e(m,me),e(m,O),e(O,pe),e(m,de),h(l,U,r),h(l,w,r),e(w,ce),e(w,g),e(g,he),e(w,fe),h(l,G,r),h(l,f,r),e(f,ue),e(f,W),e(W,ve),e(f,we),e(f,J),e(J,ye),e(f,be),h(l,z,r),h(l,d,r),e(d,ge),e(d,I),e(I,Ie),e(d,Ee),e(d,E),e(E,_e),e(d,xe),e(d,F),e(F,Pe),e(d,ke),e(d,q),e(q,Se),e(d,Te),e(d,_),e(_,je),e(d,Ae),h(l,B,r),h(l,u,r),e(u,Me),e(u,x),e(x,Re),e(u,Le),e(u,P),e(P,Ce),e(u,He),h(l,N,r),h(l,v,r),e(v,Oe),e(v,k),e(k,We),e(v,Je),e(v,S),e(S,Fe),e(v,qe)},p:De,i:De,o:De,d(l){l&&a(m),l&&a(U),l&&a(w),l&&a(G),l&&a(f),l&&a(z),l&&a(d),l&&a(B),l&&a(u),l&&a(N),l&&a(v)}}}const ft={title:"Polymer 2 and Redux",cover:"https://picsum.photos/800/600?image=2",date:"30-07-2017",category:"webdevelopment",tags:["webdevelopment"],preview:"The coming time I will be spending a lot of time developing in Polymer 2.0, so I’ve done some research and made a small project to test some aspects of setting up a real-world application with it. It is in this repo. It contains two basic elements...",previewHtml:'<p>The coming time I will be spending a lot of time developing in <a href="https://www.polymer-project.org/" rel="nofollow">Polymer 2.0</a>, so I’ve done some research and made a small project to test some aspects of setting up a real-world application with it. It is in <a href="https://github.com/mdvanes/polygram/" rel="nofollow">this repo</a>. It contains two basic elements (<em>p...</em></p>'};class ut extends mt{constructor(m){super(),pt(this,m,null,ct,dt,{})}}export{ut as default,ft as metadata};