Cx, React, Angular, Ext JS, and D3
What Cx has in common with other frameworks, and what’s different
In the previous post, I said that Cx is inspired by React, Redux, Angular, Ext JS and D3. In this post, I’ll try to explain how I see Cx as a perfect combination of these frameworks. Please understand that this post is about Cx and its competitive advantages, and not about discrediting any other framework in any way.
For those who do not yet know anything about Cx, Cx is a front-end framework/widget toolkit intended for building admin and dashboard applications. It’s best to take a quick look at our demo application or this fiddle to see what it is all about.
D3
D3 and Cx are not of similar nature, but share common ideals, which are being data-driven and offer building blocks for data visualization.
Cx is data-driven. Data is located in the central data repository called the store. Application logic manipulates the data in the store; the view is automatically updated without asking how to deal with widgets or the DOM in any way.
Cx offers nice visualizations through its SVG and charting package and follows the philosophy of D3 by providing building blocks instead of complete solutions. For example, you don’t get an entire bar chart with D3, but you get all types of axes, scales and all other ingredients to put together into anything you want.
Cx doesn’t offer as many features as D3, not even close, but it is simpler to use.
Redux
Cx follows the concept of the central data store from Redux. The store holds the whole application state in a single, immutable, JavaScript object. This allows selector memoization and efficient shouldComponentUpdate calculation, which are the key performance factors in Cx.
Unlike Redux, which allows state changes only through actions and reducers, Cx offers two-way data binding which is very simple to use.
If you prefer actions and reducers or want to use a little bit of both, Cx works nicely with Redux too.
Angular
Like Angular, Cx supports declarative data-binding, iteration, and controllers. Widgets are automatically connected to the store and access the data they need through two-way data binding (:bind), string-templates (:tpl) and data expressions (:expr). The Repeater control can be used to iterate over collections. Controllers are there to prepare the data and process user inputs and data changes.
The fundamental difference between Angular and Cx is that widgets (grids, forms, charts) are an integral part of the framework, while Angular relies on external widget libraries, mainly Material Design and Bootstrap.
React
Cx is greatly influenced by React. Cx widgets are implemented using React, so there are a lot of things in common, but the important shared features would be the JSX syntax and widget composability.
Unlike React, Cx rendering is done in multiple passes. This allows cool features like inner and outer layouts and contextual communication between widgets. Form validation, auto-scaled chart axes, and color maps feel like magic, but that’s just widgets talking to each other in the background.
Almost anything can be built using React, but I would say that React is a library for low-level DOM manipulation and rendering. React is the new jQuery, a DOM abstraction that allows cool things to be built on top of it. People experiment with React a lot. There are already countless libraries of React components, and some of them are first grade, but sometimes it can be difficult to combine all the pieces together. Cx tries to overcome that problem by offering store and data-binding logic combined with widgets, router, and charts, in a single, highly-integrated package.
Ext JS
Beside React, Cx is very much influenced by Ext JS. At Codaxy, we have a long-term experience with Ext JS. It’s a framework that offers so much. For a long time, Ext JS is one of the best tools for building large, enterprise scale applications, which tend to live and expand forever. The framework has a crucial role as it provides the common ground that holds the team together.
Ext JS has its weaknesses. It’s big and complicated, all apps basically have the same look, the generated HTML markup is very complex. I have seen developers that are scared to look at the DOM, even after years of working with Ext JS (and JavaScript).
Cx is much lighter, easier to style and allows mixing widgets with plain HTML. It’s also more modern and leverages the key advances made in the JavaScript world— namely ES6 (Babel), npm, React, webpack.
After all this being said, please take a look at a couple of things built with Cx:
- Starter Kit Application — admin pages, dashboards, routing, appearance — GitHub
- Documentation — introduction, key concepts, widgets, charts — Source
- Recent Fiddles — Grid dashboard, Forms Widgets, KPIs, Pong.
We would love to hear from you. Please ask any questions about Cx or suggest how to make it even better.
