googlearchive/todomvc

Polymer-based TodoMVC

Polymer TodoMVC Example

Polymer is a new type of library for the web, built on top of Web Components, and designed to leverage the evolving web platform on modern browsers.

Polymer - www.polymer-project.org

Learning Polymer

The Polymer website is a great resource for getting started.

Here are some links you may find helpful:

• Getting Started
• FAQ
• Browser Compatibility

Get help from Polymer devs and users:

• Find us on IRC on #polymer at freenode.
• Join the high-traffic polymer-dev Google group or the announcement-only polymer-announce Google group.

Implementation

The Polymer implementation of TodoMVC has a few key differences with other implementations:

• Since Web Components allow you to create new types of DOM elements, the DOM tree is very different from other implementations.
• The template, styling, and behavior are fully encapsulated in each custom element. Instead of having an overall stylesheet (base.css or app.css), each element that needs styling has its own stylesheet.
• Non-visual elements such as the router and the model are also implemented as custom elements and appear in the DOM. Implementing them as custom elements instead of plain objects allows you to take advantage of Polymer data binding and event handling throughout the app.

Compatibility

Polymer and its polyfills are intended to work in the latest version of evergreen browsers. IE9 is not supported. Please refer to Browser Compatibility for more details.

Running this sample

1. Install node.js (required for bower client-side package management)

2. Install bower: npm install -g bower

3. From the todomvc\ folder, run bower update

4. Start a web server in the todomvc\ folder. Hint: if you have python installed, you can just run:

   python -m SimpleHTTPServer

5. Browse to the server root

todomvc's Issues

Main item list does not render in Firefox Nightly

The app renders correctly in Firefox Beta (22), but the main item list does not appear in Firefox Nightly (24a 6/18/2013).

The one difference I see in the console is that the polymer.min.js file produces a NotSupportedError on Nightly.

Looking at polymer.min.js I see a couple uses of eval(). Perhaps the failure is due to CSP support in Firefox 23+.

Maintenance

If it would help, I don't mind taking over maintenance of this repo. At the moment, we're (separately) refreshing the Polymer TodoMVC implementation over on the site every few months, but it's unclear whether you'd like both repos to stay in sync or have this one be different.

Would you like me to bring in the latest version that uses core-* elements?

I do think we should do an architectural review of the solution when there's more time as a ton has changed in Polymer since the implementation was first put together.

App not functional in latest Chrome stable

Using Chrome v27.0.1453.116 m Polymer TodoMVC looks like this:

In the console:

Uncaught TypeError: Object function Array() { [native code] } has no method 'observe' in boot.js on line 17.

Update to Polymer 1.0

It would be nice to have this updated to new Polymer 1.0

Small editing bug

After a bower install to fetch components, I fired up a server to test the app and ran into a small visual bug with adding new items.

Enter in text and the editing field, which should be visible on double-click, is instead persistently visible. Hiding the text input field by default should fix this.

Chrome:

Safari:

Readme feedback

Non-visual elements such as the router and the model are also implemented as custom elements and appear in the DOM.

Could you summarize in a line or two why these were implemented as custom elements over say, just vanilla objects?

Since Web Components allow you to create new types of DOM elements

Link up 'Web Components' - perhaps to a primer on them.

Polymer and its polyfills are intended to work in the latest version of evergreen browsers

It may be worth linking up 'evergreen browsers' to http://tomdale.net/2013/05/evergreen-browsers/

https://github.com/Polymer/todomvc/blob/master/readme_template.md

This should be good to nuke now :)

Dead description link

The link http://todomvc.com/architecture-examples/polymer/index.html from the project description is dead.

The new link is: http://todomvc.com/examples/polymer/index.html.

Model status

I had a chat with @sjmiles about a few of the different model variations for Polymer apps that can currently be found over in https://github.com/Polymer/projects/tree/stable/todomvc.

I see that in this version of the app, the model layer has been implemented as a component. Should it be assumed that this is going to be the way Polymer advocates the model layer being implemented? :)

I ask as I've been in the process of starting to get Polymer into the TodoMVC repo (well, all of the variations) so that we could get back some feedback on which model variant developers like. Just wondering if this is the one you settled on :)

If so, I'm happy to nuke that branch over on TodoMVC and bring this one into our labs folder.

Doesn't work out of the box

The index.html is including

<script src="../polymer/polymer.js"></script>

This is not mentioned in the Readme. Also when polymer is checked out into the same parent running the local webserver causes a 404 on the polymer.js.

When I run the index.html in Canary with --allow-file-access-from-files --disable-web-security I get a little further but get these errors:

polymer.min.js:3: GET file:///Users/srohde/Documents/polymer-all/projects/todomvc/todomvc/components/director/build/director.min.js

Uncaught ReferenceError: Router is not defined

Refresh the implementation with core-elements.

App specification issues

To comply with the app specification:

• make a readme
• support IE9 and Opera (or put in readme that we do not)
• use tabs in code
• use strict mode (or put in readme that we do not)
• use bower
• implement persistence

Learn.JSON not found

When ever load the site in server with todo example , i'm getting Learn.json file not found error . I had updated bower also.