The NX framework
NX is a modular front-end framework – inspired by the server-side and Web Components. It has a tiny unopinionated core and a set of focused middlewares responsible for data-binding, routing and animations among other things.
GET STARTED
Overview
The NX core is a tiny, powerful library designed with one purpose — to create simple, reusable components that can be enhanced through middlewares. Each component executes its middlewares when attached to the DOM, gaining extra functionality and flexibility without added complexity. This modular approach mirrors how modern enterprise platforms evolve through layered functionality. For example, How Workday HCM Transforms Modern HRexplores a similar concept in the HR domain, where integrated systems streamline processes and improve efficiency. NX comes with several built-in middlewares out of the box, which you can find listed below.
These can be combined to create components with the desired functionality. Alternatively ready made core components can be extended and used, to avoid boilerplate code.
Text interpolation:
Interpolate values from the code into the view dynamically or one-time. Includes optional filters.
Dynamic and custom attributes:
Use one-time or dynamically evaluated native attributes or define some custom ones.
Event handling:
Add inline event handlers to listen on any event. Includes optional rate limiters.
Visual flow:
Use conditional blocks and loops inside the HTML view.
Data binding:
One-way, one-time or two-way data binding on any event and with no edge cases.
Metadata and analytics:
Handle your SPA’s metadata and analytics declaratively with ease.
Dynamic styling:
A dynamic extension to the style and class attributes.
Anything else you define
with the simple function middleware (elem, state, next) {}
syntax.
Rendering:
Modularize your HTML and CSS code by moving them into separate files. Supports shadow DOM and scoped CSS.
Routing:
Simple, but powerful routing with automatic parameter synchronization and router events.
Animations:
Create powerful animations with the help of a few HTML attributes.
Features
WEB COMPONENTS
The building blocks of an NX app are components.
An NX component is a thin wrapper around a standard Web Component, which makes it simple and future proof.
MIDDLEWARE SYSTEM
NX has a flexible middleware system at its core. This makes extending the framework easy and fun.
On top of this, every existing feature is located in a separate, focused middleware. You can pick what you really need and nothing else. Your app requires some simple routing? Just drop in the routing middleware.
DATA BINDING
NX takes data binding to the next level with the use of ES6 Proxies.
It has a simple syntax and comes with extreme flexibility. You can bind one-way, two-way or one time and on any event. You can even change an element’s binding behavior on the fly.
EVENT HANDLING
Inline event handling follows the conventions of other frameworks. Just prefix any event name with # to create a new handler.
It is simple to use and it supports advanced features like custom events, multi-event handlers and rate limiters.
CLIENT-SIDE ROUTING
Routing is designed to be simple and powerful. It is very easy to get started with, but supports features like router events and relative routes for more complex use cases.
It is split into three middlewares, that are responsible for routing, query-state synchronization and internal references. As with everything else, you don’t have to include what you don’t need.
ANIMATIONS
Animations can be added to any element with the enter-animation, leave-animation and move-animation attributes.
It simple to use, but it can handle complex scenarios with the help of dynamic animation attribute values. Animation behavior can be customized to the smallest details and it can even be changed on the fly.
Comparison
TODOMVC
The TodoMVC project helps developers to choose their favorite front-end libraries, by providing the same app written in different frameworks. You can play around with the NX implementation here and check the source code in this repository . Click on the framework names below to compare their TodoMVC implementation with the NX one.
REACT
NX provides access to the DOM and encourages you to directly modify it, if necessary. This is in contrast with the virtual DOM approach of React.
A virtual DOM abstracts away a lot of native features and introduces some new syntax. While it is possible to access real DOM elements in React, it is a lot clumsier than the direct access NX provides.
Mixing HTML and JS is also something NX avoids. It follows the old school logic/view separation approach. If you enjoy hacking around in native HTML and JavaScript, NX should feel natural to you.
ANGULAR
Angular piled a lot unnecassary features while paving the way for the younger frameworks. NX is a fresh start, that includes only the required features and nothing else.
Angular forces a complex dependency injection system on you, while NX leaves this task to modern alternatives like Webpack. Instead of having controllers, factories, providers and services, NX simply uses middlewares for everything.
The NX state object is very similar to an Angular scope, but it provides fast, transparent data binding instead of dirty checking.
VUE
NX has many similarities with Vue, but it uses the next generation of APIs. This means less supported browsers, but less extra syntax and frustration too.
NX works with native Web Components, while Vue requires CSS selectors to bind the code and the view together.
The Vue data binding system is based on accessors, which means that expando properties, getters/setters and arrays require special treatment to work. In NX you can add properties dynamically or use native getters/setter instead of computed properties. Everything is bound correctly thanks to the ES6 Proxy based data binding engine.
POLYMER
While internally NX and and Polymer both use Web Components, they are very different on the surface.
Similiarly to Vue, Polymer uses a declarative syntax for component definition. Properties and methods have to be defined on a config object, that is passed to the Polymer() function. In contrast to this, NX has a very light config object and encourages you to augment your components dynamically inside the middleware functions.
Polymer has a large library of ready-made components, that NX is lacking for now. However NX comes with more functionalities in the form of core middlewares.
Performance
The Benchmark
The benchmark runs the same set of operations on TodoMVC implementations of NX and other popular frameworks. It simulates user actions asynchronously, which ensures that the real DOM is updated and rendered after every operation. This is a more realistic approach, than using batched, synchronous operations.
You can see the execution time in milliseconds for each framework on the chart. Lower execution times are better. If you would like to run the benchmark locally, press the button in the top-right corner of the chart.
Conclusion
The purpose of this benchmark is not to measure performance accurately, but to give a rough comparison of the strenghts and weaknesses of NX and some other frameworks. The get a fuller picture please run the benchmark locally and check the Source Code.
Contrary to popular belief, the React virtual DOM doesn’t guarantee better performance. The virtual DOM is a diffing technique, which avoids unnecessary DOM modifications. Other alternatives do the diffing on the data level, like dirty checking. While a virtual DOM is much faster than dirty checking, it usually doesn’t perform better than modern, data level diffing solutions. The benchmark results reflect this. NX, Vue and Polymer perform equally well with React, while Angular is a bit behind.
NX is a bit slower than the others on heavy DOM modifications, like batch insertions. The reason of this is the chain of middlewares, that runs on Node attachments. However data binding or smaller DOM reactions, like text and attribute interpolation are faster in NX, thanks to the internal usage of ES6 Proxies. This makes NX a perfect candidate for creating widgets and small apps. Large scale application performance can be boosted by hand picking the necessary middlewares only, instead of using them all by default.
By running the benchmark in a browser other than Chrome, you will see a small performance decrease with both NX and Polymer. The reason for this is Web Components support. NX and Polymer use Web Components internally, that are only supported by Chrome currently. In other browsers a polyfill has to run instead of the native code. This will change when browsers start to support Web Components in the near future.
