Closed marcelschliesser closed 8 years ago
Polymer looks great but it really does need server side rendering, the holes are too glaring in any JavaScript app that doesn't, it would really help compatibility with browsers, lynx, performance on first load, scraping, accessibility, screen readers etc
Things like Google translate don't work: https://translate.google.co.uk/translate?sl=auto&tl=ar&js=y&prev=_t&hl=en&ie=UTF-8&u=https%3A%2F%2Fshop.polymer-project.org%2F&edit-text=
or the Internet Archive https://web.archive.org/web/20160523112309/http://shop.polymer-project.org/
At the moment the custom tags are like placeholder doms till polymer loads, maybe that could be changed so that content can be put in before via the server, then upgraded when the JavaScript loads, React does this with dom diffing maybe there's a more native way than just attaching ids to everything like react does..
It would need a powerful server side parser to take components and parse their css into encapsulated css, and parse the dependancy graph to get at a big html string and maybe leave the JavaScript out of the components, leave that till the components are upgraded later in page load
It looks like we could have done a better job of updating <title>
, but Google has indexed the entire (dynamic) app without any trouble:
and the source doesn't have any of these details. Woot!
Other SPA Polymer examples are the Google I/O web app and Polymer's new site. Both of those are indexed.
The important bit is to follow the existing web master guidelines, and include things like canonical links, use <a href>
, correct meta data, etc.
it would really help compatibility with browsers, lynx, performance on first load, scraping, accessibility, screen readers etc
I'm not I understand the argument. Compatibility is great thanks to the polyfills. Performance of Shop is great thanks to h2, push, and async HTML Imports + dynamically loaded content.
The added value to accessibility may be to have the aria
labels already in the markup at load time. However, I'm not sure that's a great signal to screen readers users. You wouldn't want a component to be interacted with until it's truly ready. I also love that I don't need to remember all the a11y tricks. It's nice to have components do that for me!
@blasten To update the page title for SEO, I think we can just update the document.title in _onChangeSection
.
And what about things like Google Translate or Internet Archive? As @slifin said.
I ran the Google Translate chrome extension on pp.org:
Do other tools like internet archive work on today's existing SPAs? It's important to remember some of these tools were created a long time ago and may need updating.
@ebidel I'm not sure if all of them are SPA, but it works:
@abdonrd those are doc sites. I'd be more curious about apps built using those frameworks.
@abdonrd most of the examples you give don't really use the frameworks they are advertising and are more static content than SPAs (ah, @ebidel posted the same while I was typing).
Using the "fetch as google" in webmaster tools is a good test as well - I've found polymer works well and renders the dynamically-loaded page content, Angular 2 has been hit and miss with which pieces are rendered.
@ebidel @CaptainCodeman Thanks guys!
@ebidel
Could the shop demo then be updated with localisation (https://www.polymer-project.org/1.0/toolbox/localize).
It would be a perfect example because you have everything in this demo:
sorry i did not realise this is closed. I will raise a NEW issue
http://webcache.googleusercontent.com/search?sourceid=chrome-psyapi2&ion=1&espv=2&ie=UTF-8&q=cache%3Ahttps%3A%2F%2Fshop.polymer-project.org&oq=cache%3Ahttps%3A%2F%2Fshop.polymer-project.org&rlz=1C1RAEH_deDE626DE648&aqs=chrome..69i57j69i58.1255j0j4
I Think it is bad for a Web-Shop.