Directive-X — Directives for JSX
Many developers who switch from Angular to React long for certain features offered in the former and not the latter. As a huge fan of React and a tribute to Angular developers like myself, I decided to import some of these features, namely the `directives`. This sparked the birth of Directive-X, a cool new lib.
Directive-X is a JSX extension that simplifies coding in JSX. It uses makes use of Babel to transpile its `xProps` (or so-called directives) that manipulate JSX element structures instead of DOM elements as in Angular.
Guilty as charged, I’m not a big fan of React’s loop technique that uses `Array.map()` to iterate through arrays. I favoured an `ng-repeat` like approach that is really simple to read and make sense of, especially for beginners. Hence, I built my first directive, `xRepeat` to mimic this cool feature the React way.
However, since I intended to extend JSX, I preferred to feed my `xProps` with valid JS expressions, contrary to Angular’s directives that accept strings as values. This would allow Directive-X users to leverage these features without compromising the syntax highlights and other goodies of their favourite code editors.
Note: `xBind` does not resemble nor mimic `ng-bind`. In fact, they are completely different in nature. Refer to Directive-X’s `README.md` file for more details.
Angular directives vs Directive-X
Bare in mind, the performance of apps that utilize Directive-X is not compromised either, since all transpilation is done in the build-time. That way the clients stay as performant as ever. It’s as if Directive-X wasn’t there at all. This is what sets it apart from Angular’s approach.
Angular on the other hand, manipulates DOM nodes and parses the string values along with other overheads that could be counter performance.
What’s instore for the future
I did not intend to import all Angular directives to JSX via Directive-X, but rather only the useful and relevant ones since some Angular directives are specific to Angular’s framework such as their `ng-src` or `ng-bind`.
Directive-X currently holds four useful directives that I find to be very useful in development. More will be added soon. If you have any suggestions feel free to contact me via twitter: @bukharim96
The next major feature that I slate for the near future is to allow Directive-X developers to define custom directive in a simpler way than writing parsers with Babel. This depends on the attraction that this lib gets. If many find it to be useful then I’ll add this cool feature.
Directive-X was mentioned in the recent @ReactEurope 2018 by Sunil Pai (great guy, follow him on twitter: @threepointone). If you liked this lib star it on GitHub and follow me on twitter: @bukharim96. Enjoy!
