Request to add NX framework TodoMVC app.

[solkimicreb]

About the framework

Home page: http://www.nx-framework.com/
GitHub page: https://github.com/RisingStack/nx-framework

NX doesn't include any revolutionary concepts, it just tries to combine and perfect the best patterns from the recent years. It uses the newest APIs to do so, like Web Components and ES6 Proxies.

The core of NX is a thin wrapper around Web Components. It allows the registration of middlewares, which run when a new component instance is attached to the DOM. Everything else is separated into focused middlewares. This paves the way for future extendability.

Middlewares include:

• Text interpolation: one time or dynamic text interpolation with optional filters
• Dynamic and custom attributes: one time or dynamically evaluated custom or native attributes
• Event handling: inline event handlers with optional rate limiters
• Dynamic styling: dynamic inline style and class attributes
• Visual flow: if and for blocks in the HTML view
• Data binding: one-way, one-time or two-way binding on any event. Works with expando, inherited and getter/setter properties too.
• Routing: routing with optional auto parameter synchronization and router events.
• Some other low level ones
• Anything else you define with the simple function middleware (elem, state, next) {} syntax

These can be combined by the developer to create components with the desired functionalities. Alternatively ready made core components can be used and extended too.

Important note

NX is in Alpha. The API is relatively stable, but Safari and IE support is not ready yet. Safari 10 beta is supported and with the beta ending Safari will be supported too. IE support is a bit more problematic because of the unpolyfillable ES6 Proxies. I monitor the community feedback about this one and if it is a must I will implement this proposal.

Test results

todomvc-browser-tests@ test /Users/miklosbertalan/nx/todomvc/tests
mocha allTests.js --no-timeouts --reporter spec "--framework=nx"

TodoMVC - nx
When page is initially opened
✓ should focus on the todo input field
No Todos
✓ should hide #main and #footer (97ms)
New Todo
✓ should allow me to add todo items (406ms)
✓ should clear text input field when an item is added (240ms)
✓ should append new items to the bottom of the list (601ms)
✓ should trim text input (228ms)
✓ should show #main and #footer when items added (296ms)
Mark all as completed
✓ should allow me to mark all items as completed (81ms)
✓ should correctly update the complete all checked state (187ms)
✓ should allow me to clear the completion state of all items (136ms)
✓ complete all checkbox should update state when items are completed / cleared (195ms)
Item
✓ should allow me to mark items as complete (544ms)
✓ should allow me to un-mark items as complete (483ms)
Editing
✓ should focus the input
✓ should hide other controls when editing (51ms)
✓ should save edits on enter (267ms)
✓ should save edits on blur (299ms)
✓ should trim entered text (266ms)
✓ should remove the item if an empty text string was entered (196ms)
✓ should cancel edits on escape (239ms)
Counter
✓ should display the current number of todo items (468ms)
Clear completed button
✓ should display the correct text (93ms)
✓ should remove completed items when clicked (236ms)
✓ should be hidden when there are no items that are completed (207ms)
Persistence
✓ should persist its data (708ms)
Routing
✓ should allow me to display active items (173ms)
✓ should respect the back button (399ms)
✓ should allow me to display completed items (242ms)
✓ should allow me to display all items (356ms)
✓ should highlight the currently applied filter (189ms)

Linter results

Locally both jshint and jsrcs passed for both .js files.

[solkimicreb]

Added a few explanation comments to the code (;

[solkimicreb]

Quick update about browser support:
iOS 10 release date is September 13, mac OS Sierra release date is September 20. NX will support the latest Safari on both. IE remains unsupported for now.

[solkimicreb]

Updated NX version to alpha.2.3.1 to improve list rendering performance.

[solkimicreb]

Hi!

I updated the NX version to alpha.3.0.1 and changed the deprecated show attributes to native hidden attributes in the view.

Also: in case you are interested in a bit bigger scale example in NX, this is a Hacker News clone (:

[solkimicreb]

Hi!

Updated NX to alpha 4.0.0. It requires no changes in the code, I did it for the performance update only. I would really appreciate some feedback.

Thx (:

[solkimicreb]

Can someone take a look at this PR please? Thx (:

[dcy0701]

awesome!

[solkimicreb]

@dcy0701 Thanks 🙂

[janat08]

@addyosmani?