Search code examples
javascriptpolymervue.jstodomvc

How to rebuild Polymer's TodoMVC App

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

Solution

  • 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.