search

Polymer / pwa-starter-kit

Starter templates for building full-featured Progressive Web Apps from web components.
https://pwa-starter-kit.polymer-project.org
2.36k stars 431 forks source link

What architecture is this PWA Starter Kit based on? #253

Closed freshgrapes closed 5 years ago

freshgrapes commented 5 years ago

I came from Google's old Web Starter Kit, and got very confused when I tried to work with this new PWA Starter Kit, because back in Web Starter Kit, I could just put my Javascript logics inside .js files and html structures inside .html files. However, in this new PWA Starter Kit, everything got very unfamiliar, because the actual html contents that users see are now inside .js files (which also caused some methods that I am used to using to stop working, such as document.getElementById), and there are new ways to handle data and function calling that I've never worked with before, like '${this._quantity}', and '${this._checkoutButtonClicked}.

I know there is the introduction of the whole Redux concept, but even the code on the template-no-redux branch have the above-mentioned architecture and I don't understand how to work with it.

What is the name of this new architecture that I could google so that I can learn more about how to work with it? I can figure out the rest by myself if I just know what to google to learn to use this new architecture.

Thanks!

Dabolus commented 5 years ago

The PWA Starter Kit is based on Web Components. More specifically, it uses Lit Element, that is a Web Component that allows to easily create other Web Components, using lit-html to render their templates. lit-html is a library that allows you to write HTML Templates using JavaScript template literals, and that's the reason why you are seeing only JS files: the HTML is inside the JS.

So, to better understand the architecture of this Starter Kit I would suggest to start by taking a look to JavaScript template literals, then to lit-html, and finally to Lit Element (and maybe also to Redux if you'd like to use it too).

EDIT: I also forgot to mention that, if you don't know what Web Components are, you should definitely check them out too.

freshgrapes commented 5 years ago

@Dabolus Thanks so much! After carefully reading your reply, I found the solution to document.getElementById not working in this architecture by simply googling "Lit html document.getElementById" and found the solution here (which is to use this.shadowRoot.getElementById('id') instead).

Everything becomes so much more solvable now that I know what I am dealing with (i.e. what terms I should be googling to understand this new architecture). It was crazy to encounter problems and not even know what to google to find a solution of them. It's like trying to find a specific video on YouTube without knowing its title.

Thanks so much and I will be digging deeper into the keywords you provided to fully understand the other parts of this unfamiliar architecture!