I have developed the project using polymer (3.0.2) and lit-element (0.5.2).
Now I want to convert this project to use the latest version of polymer (3.1.0) and lit-element (2.2.1).
Is there any script or simple way to do these changes instead of changing the syntax in each and every file?
I've been through this pain too - first from Polymer HTML Imports and then from Polymer to LitElement.
It's a little more complex than just changing syntax, which you can do fairly easily with regex/grep and the like, as there is a fundamental shift of approach.
Polymer relied heavily on two-way bindings - you put <input value={{property}}> and it would auto update. That relied on Polymer doing a lot of work and was fairly fragile - you were very limited about what you could build on top of it.
LitElement drops these - you have to do <input value=${this.property} #change=${e => this.property = e.target.value}> to explicitly handle changes. This lets LitElement be much smaller, much less opinionated, much more compatible with other libraries.
In addition LitElement components tend to be much more functional than Polymer ones. In Polymer you have lots of state properties/methods that you call from the template, while in LitElement those properties cause the render method to fire and are the starting point for building the template content.
So you can find-replace a lot of the components, and one way bindings (like <input value=[[property]]> to <input value=${this.property}>), but everything else needs to be adapted to LitElement's more bare-metal and functional approach.
On the plus side these can work side-by-side, so you can upgrade them one by one, but you have to do it manually.
Related
I have been developing a VueJS website for a few weeks, and realised my design skills were not good enough to design a proper landing page. I came across this stunning Bootstrap open source template and really would like to use it.
However, I would like to stick to VueJS since I need it for some other dynamic pages. What would be the best way to integrate this template into a VueJS component? It uses Bootstrap and a bit of JavaScript as well. I know of Vue Framework such as BootstrapVue, but they would require rewriting the whole page using its custom components (such as b-nav or b-nav-item).
I have tried just copying and pasting the HTML into a component but I then have the problem of the CSS and JavaScript. Is using a bootstrap.css file in Vue JS a good practice ?
I am not asking anyone to do some boring job for me, but it seems to me like tweaking such a template so that it fits to a VueJS component always has some side effects, and I wanted to make sure there were no easiest, more elegant and reliable solution for this.
The whole point of BootstrapVue is to drop Bootstrap's dependency on jQuery.
It only uses Bootstrap's scss and the jQuery part is replaced with BV's own JS (provided via Vue components).
At first glance, it doesn't look like that would be your case, since you want some additional jQuery code (the theme's own JS) - currently written in jQuery.
However, when looking closer, the theme's own jQuery script is quite small. It basically does three things:
routes the page URLs when you navigate between sections (which could/should be replaced by Vue Router calls in your case),
implements scrollSpy (which has a Vue alternative) - it does it for the same purpose - knowing when to change the page URL,
implements magnificPopup (which also has a Vue alternative).
So it looks like the jQuery dependency could be fairly easily dropped, provided it's replaced by Vue code.
You basically seem to want a Vue variant of the Bootstrap theme. Or, to be more exact, a BootstrapVue variant of it.
If we were to look for the best possible candidate for the job, it would probably be found somewhere in the pool of Vue or BootstrapVue experts, as well as the creators of the Bootstrap theme (chances are they shouldn't find BootstrapVue difficult to use - considering the quality of their template).
Whether or not this is a job fit for your abilities is a question only you can answer but, unless you're purely interested in the functional part (getting the job done[1]), it is definitely a good opportunity to learn more about both Vue and Bootstrap.
To provide a helpful estimate, a senior FE developer would take anywhere between 8 to 20 hrs to create this template, provided they know Vue.
[1] Getting the job done with the least amount of effort would mean to simply inject the entire template as a page into your existing Vue app, making sure you import everything it needs (jQuery, jQuery.easing, Bootstrap, magnificPopup & scrollSpy) - roughly estimated at ~4 hours - could be less but you have to account for testing and any potential bug fixing.
I strongly advise against this approach as it's likely to significantly increase the size of your app while reducing its scalability and flexibility. This approach produces applications nobody wants to touch as, in time, the probability that any modification will break some existing functionality increases exponentially.
Since SO questions are supposed to take no longer than 15 minutes to answer, it should be obvious none of the above described tasks is feasible as a Stack Overflow question. Besides, you need to show some of your own coding effort up so far and provide a minimal reproducible example.
I have worked around one year with Polymer 1 and 2 in a big company with large webcomponents catalog and I am confident webcomponents can be very usefull. I am aware about "cons ideas" like https://adamsilver.io/articles/the-problem-with-web-components/.
Now I am studding deepely how to efficiently use vanilla webcomponents. I just started with the premisse that using vanilla web-components will help to be a aligned with webcomponents improvement (I can't defend such idea - I just assume this for now). Then I am trying to create an stack for working with vanilla webcomponents.
Searching for a recommended approach for testing I reached https://open-wc.org/testing and I assume it is aimed to promote good practices without adds to specific framework (from its site: "Open Web Components is a community-effort, independent of any framework or company"). It is exactly what I am looking for: a kind of good pratices and well-known recommendation similar as we have for microservice from micorservice.io (this is just an analogy).
Trying it scaffold I got in package.json:
"dependencies": {
"lit-html": "^1.0.0",
"lit-element": "^2.0.1"
}
So, my main question is: why lit-html for a webcomponent?
Usefull doubts surrounding my main question, as far as I know lit-html is a framework sponsored by google and polymer team. Isn't that somehow forcing me to use polifylls to run in all browsers? Assuming I don't care about browsers not compliance with webcomponents, why would I need a framework?
Maintainer of open-wc here :)
The reason we recommend lit-html/element is because they are very small libraries that help you write web components, and dont lock you in to a framework. Down the line, LitElement simply extends HTMLElement, which makes it interoperable with other web components and even frameworks. LitElement also reduces the boilerplate you have to write for vanilla web components. We’re not married to it however, and personally I really enjoy vanilla component solutions. Also, most (if not all) of our tools should be compatible with web components.
Regarding polyfills; LitElement will attempt to use modern standards is possible (eg: constructable stylesheets), and use a fallback if not available. Loading the web components polyfills is up to the developer - not litelement. If you use our build configurations for rollup or webpack, you can opt in to having the polyfills loaded.
Hope that answers your questions, feel free to reach out!
It's been about a while Polymer version 2 is available out there, but
few people talk about it
few developers write about it in their blogs
few developers share their workflow and their experiences
Polymer Project is powered by Google, and the team seems have impeccable philosophy behind it.
Beside lack of browser support, Polyfills are doing the job still fine.
By the way, It seems people don't prefer to switch on it and work on it although Web components is an standard of the web.
There's a big why for me, there should be an explanation.
This is I think is related to Stackoverflow However I know many wouldn't like this kind of questions.
First, it's actually a very new technology since Polymer 2 was officially released in May of 2017.
Second, the fact that it is supported by Google is not necessarily an advantage: web developers who want to rely on this company's products may prefer Angular, which is also promoted by Google and is much more mature and famous.
Third, the fact that it is founded on the Web components standard is not an advantage too:
polyfills are doing the job (though not always) but their use adds a bit of complexity and can introduce a gap in therm of performance between the native and polyfilled implementation of Custom Element and Shadow DOM.
developers who know Custom Elements and Shadow DOM may prefer to create Vanilla web components instead as they became very easy to design thanks to... Google :-) That's precisely the purpose of these new web standards.
Fourth, the Material Design flavor chosen for UI elements may not fit everyone's taste.
Fifth, version 2 is not fully compatible with version 1, which may bring some confusion for newcomers, and some disappointments for those who invested on the ephemeral version 1.
Finally, one can question if Polymer is a long-term framework or just a way to support the launch of the early standards (Custom Elements and Shadow DOM) proposed by Google, and promote their adoption.
PS
Some of the above points are only assumptions.
Personally, I started using Polymer 1 during a few months, then I switched to Vanilla Custom Elements.
because of that is harder to implement other than material design or bootstrap or other designing frameworks
bootstrap is easily implemented and no other things to do with it like adding javascript with each of components and each component have its own styles
but afterall polymer is good project for whom who has a better designing skills and bootstrap and other is'nt requires higher designing skills
Even though Polymer is getting closer and closer to native Vanilla web components the fact that they are still not fully supported across all Browsers makes it not really practical to use.
I personally like the idea that this(Polymer) might end one day with a somewhat seamless transfer to native components.
What I also picked up during talks and conversations with fellow developers is that React is way bigger in the states while Developers in Europe tend to choose rather Polymer. Why exactly that is I do not really know, but I believe that there are many factors influencing it and that it can't be pinpointed to a specific disadvantage or advantage of one of these libraries.
As Supersharp already mentioned Polymer is still pretty new compared to other libraries such as Angular & React. But the developer community is growing from year to year which was especially emphasized at the last Polymer summit in Copenhagen where everything was about "The Platform". This turned out to be the community, web standards and everything around it rather than a total Polymer worship which I felt pretty pleasant.
On last thing to add.
Although, Polymer might be backed by Google the team working on it is relatively small. Youtube just switched to a 100% Polymer and what I picked up is that the team that made this happen is way bigger than the actual team developing the platform.(We are talking about a handful people here).
I use Polymer 2 for a small demo project mid 2017 (RC2, not final one), was nice and enjoyable. For my point of view, it is easier than Angular (1.6), but I don't have a lot of experience with it.
Pro
I like this idea of a component for each problem
Easy to split data (properties) and template
Easy use of events
Con
CSS rules was really intuitive
Polymer 2 Example Element
<dom-module id="input-array-element">
<template>
<h3>Inputs Array</h3>
<template is="dom-repeat" items="{{technology}}">
<input type="text" value="{{item.label::input}}">[[item.label]]<br/>
</template><br>
</template>
<script>
class InputArrayElement extends Polymer.Element {
static get is() { return 'input-array-element'; }
static get properties() {
return {
technology : {
type: Array,
value: [
{id:"php", label:"PHP", selected:false},
{id:"js", label:"Javascript", selected:false},
{id:"html", label:"HTML", selected:false},
{id:"css", label:"CSS", selected:false},
],
notify: true
}
}
}
ready() {
super.ready();
this.addEventListener("technology-changed", function(e){
console.log(e);
});
}
}
window.customElements.define(InputArrayElement.is, InputArrayElement);
</script>
</dom-module>
I am going to port our windows-based Customer Management software to Web-based. I find polymer may be a choice.
However, for our usage, we can't find polymer component has table-view, drop-down menu(aka. the "select" element in html), date-picker, tree list.
Will polymer add these components later? Or these components will not be the target?
Thanks,
Barry
Polymer is just primarily a polyfill library that helps enabling HTML 5 Web Components in browsers that don't support them by themselves.
Web Components can be written by any developer, so you might need to develop some controls on your own especially the table view one. I'd guess you'll find most of the others mentioned in your question implemented one way or another. You should check out some of the WebComponents collection pages:
http://customelements.io/
http://component.kitchen/
http://bower.io/search/?q=web-components
For your table view control: I had a similar problem couple of years ago and had to implement my own solution. Maybe you can find a regular HTML library that supports table views and make it a (Polymer) Web Component by yourself.
My question is about migration from Flex3 to HTML5. I want do migrate myself not application actually. The question is, what direction is the best and most similar to flex knowledge. Maybe I will reimplement some custom components I already have in my flex library. I think that some of useful flex components I will have to implement myself in HTML5 - e.g. AdvancedDataGrid or Tree.
Now I can see 2 possibilities:
assume page (or big DIV) as application master class, and implement
other components based on extending DIV functionality - and placing
DIV in DIV in DIV - like AS3 uses UIComponent. It gives me supported
by browser environment event handling or DIV movement and redrawing
etc.
assume one CANVAS component as application master class. Build own
classes tree with owner drawing control etc. I think i will need to
implement event handling & dispatching for my internal visual
components. Also all UI actions (like moving, redrawing) I need to
implement myself.
I assume, that I will start to build my own class/component library for long-term future use. Question is what is better for knowledge and work investing?
It will be good to know wide opinion on this problem.
Can you give yours here?
From experience, we can say that writing a DataGrid component is a VERY large undertaking. We've been working on our DataGrid components for 3 years now, and we're STILL adding features. Instead of writing your own ADG like component, you should consider JS frameworks. Below are some:
DOJO (Excellent framework for RIA Enterprise App Development, and
Free!)
Sencha (Pretty good, but commercial)
JQuery (Very popular, but highly fragmented).
Each of these come with their own grid component. Senchas grid is pretty good, but so are some jquery grids. See this for example: Best dynamic JavaScript/JQuery Grid
Bottom line, dont reinvent the wheel. There are many excellent paid and free versions out there, pick one that works for you and run with it.
Disclaimer: I am author of Web Atoms JS
Web Atoms JS was built to bring all concepts of Flex, Silverlight and XUL. And each of these technologies used more of XML markup for very high level UI controls. Screens become complex and visualizing them becomes painful when it keeps on changing.
With Web Atoms you will write for less code then any of other frameworks. Web Atoms comes with all basic flex Components & more are coming.
This is a Sample of what all things are possible in Web Atoms JS.
Here is link to documentation.
http://webatomsjs.neurospeech.com/docs