1

This is more of a general question in regard to learning Polymer 1.0 and it was proposed by the polymer team to publish them here on stackoverflow.

The best way I personally learn stuff is to rebuild small apps. A great source has been todomvc.com.

I have trouble rebuilding the polymer app, because their javascript file seems to be this 124kb or when beautified 4736 lines of javascript code, which makes it nearly impossible to reproduce.

These lines seem to contain any javascript associated with every other element used (flatiron-director, iron-selector, iron-localstorage, etc.) and also a whole bunch of javascript probably associated with a core library, not sure which one.

How would anyone reproduce this todomvc-app?

Compared to the vue todo app javascript file, which requires only a maximum of 123 lines of actual javascript code to function properly, polymer's 4736 lines of code seem a bit out of proportion to be an app for educational purposes in the todomvc.com stack.

Any ideas how one would actually reproduce polymer's todomvc app?

Also the app doesn't seem to have been build with polymer's philosophy of modularity, since there is one giant elements.build.html file, which contains four dom-modules, instead of different custom elements. Are polymer apps supposed to be build this way, or has this particular app been build this way, because of any restrictions I am not aware of?

EDIT

It was suggested to just rename the builds.elements.html to elements.html, but this did not work, because tasks are not shown and adding tasks throws the error:

Uncaught TypeError: Cannot read property 'concat' of undefined

LoveAndHappiness
  • 9,735
  • 21
  • 72
  • 106
  • Seems like the app went under a build step. You may have to ask the polymer team if the todomvc app's source is available to the public. – Neil John Ramal Oct 23 '15 at 07:10

2 Answers2

3

elements.build.html and elements.build.js are generated in the build step by running npm run build. See Making Updates.

To learn from this example, I recommend you to:

  1. clone the repository
  2. install dependencies with npm and bower
  3. remove index.html (maybe)
  4. empty the elements/ directory
  5. add the following blank files:
    • index.html if you removed it
    • elements/elements.html
    • elements/td-input.html
    • elements/td-item.html
    • elements/td-model.html
    • elements/td-todos.html
  6. implement a file and compare with source
  7. npm run build
  8. python -m SimpleHTTPServer (or a server of your choice)
  9. repeat steps 5 - 8

You might get a 404 Not Found involving learn.json. To resolve it, you could either add the file yourself or remove the code that calls it.

Lawrence Williams
  • 46
  • 2
  • I had to just change `elements/build.elements.html` to `elements/elements.html` but I had an async property which I shouldn't have had. – LoveAndHappiness Oct 24 '15 at 13:19
2

Here's the app source for the Polymer 1.0 TodoMVC app. https://github.com/tastejs/todomvc/tree/master/examples/polymer

Notice the package.json file. It went under polybuild so that's why you're seeing an elements.build.html file.

Neil John Ramal
  • 3,734
  • 13
  • 20
  • That’s better than my answer :) – poke Oct 23 '15 at 07:22
  • Not sure if we are on the same page here. The javascript file I posted was exactly from this app source directory you posted, that means, either I am overlooking something obvious in your answer or I was already aware of this "unhelpful" source. If I understood your comment correctly you are explaining, why I only see the elements.build.html, but you are not stating, how to see the real source without the build step. Did I understand you correctly? – LoveAndHappiness Oct 23 '15 at 07:55
  • 1
    @LoveAndHappiness On the index.html page, you can rename the `elements/elements.build.html` import to `elements/elements.html`. `elements.build.html` is a product of the vulcanize tool inside the polybuild. It concatenates all your imports into one huge file. This is for network performance benefits. – Neil John Ramal Oct 23 '15 at 09:36
  • 1
    @LoveAndHappiness The reason why you have to concatenate your imports (vulcanization in Polymer's context) is that HTTP 1.1 is very poor in handling multiple parallel requests thus concatenating all your files into one huge blob is the preferred method. In HTTP/2 however, you can actually load requests in parallel, thus gaining huge boosts in network performance. This makes concatenating files unnecessary in HTTP/2. – Neil John Ramal Oct 23 '15 at 09:43
  • @NeilJohnRamal just renaming from ```builds.elements.html``` to ```elements.build.html``` doesn't show any tasks and adding tasks throws an "Uncaught TypeError: Cannot read property 'concat' of undefined". – LoveAndHappiness Oct 23 '15 at 10:05