What is x-ninja?

x-ninja is a new front-end framework built on the new architecture "DOM Ninja" that replaces "Virtual DOM". The architecture allows for seamless scaling from small-scale development to large-scale development like SPA.

x-ninja also has the functionality of a library like jQuery that directly manipulates the DOM, making it powerful for small-scale development that view templates only. You can get the imagine by the following equation.

jQuery + Vue.js = x-ninja

Noise-Canceling Syntaxes

The noise-canceling syntax is a feature that best describes x-ninja. Vue.js is a framework that claims "declarative rendering", but it has a few noise.

Firstly, look at the code example of Vue.js and x-ninja to reactive processing.

<!-- Reactive by Vue.js -->

<div id="controller">
  <input v-model="message">
  <p>Message = {{ message }}</p>
</div>

<script>
  new Vue({
    el: '#controller',
    data: {
      message: ''
    }
  })
</script>

<!-- Reactive by x-ninja -->

<div ::>
  <input x-model="message">
  <p>Message = {{ message }}</p>
</div>

Vue.js describes the code for "Mount the instance created with new Vue on the DOM element specified by the optional el". On the other hand, x-ninja does not need <script></script> itself, just add :: to the element in the reactive range.

The key to reactive in the above code is the binding of <input> and {{ }} syntax, all other codes are noise. "Noise Canceling Syntax" of x-ninja is what removes as much noise as possible from Vue.

The idea of the noise-canceling syntax has been applied throughout x-ninja's design philosophy. Even if you do not know about the whole picture of x-ninja, you could easily imagine that to purge noise-code makes reduced costs for learning.

Invisible code, it is the x-ninja.

Designer friendly

We can develop in x-ninja by with at least a browser and a text editor. Because x-ninja has no dependent modules, and all code is written in scratch. Therefore, when constructing the development environment, you will not be exhausted by "Solving dependent modules".

It may be difficult to understand the greatness of x-ninja just by listening so far. Because we can say same thing for to Vue.js in the development of the view layer. Then what about "developing while managing atomic parts in separate files"? In SFC (Single File Component) of Vue.js, it needs to be ready for development environment to check the operation on the browser.

x-ninja also has a function "HTML Imports" equivalent to SFC, however, we do not need to build a development environment to see it with a browser. We need only to update the browser, after modifying the parts file. By the way, the extension of the part file created by HTML Imports is ".html".

The cost of building a development environment for x-ninja is theoretical minimum. In fact, it is only a browser and a text editor. The learning cost less than any other framework. Designers can focus on design and coding without having to run npm commands in the terminal.

Evangelion of x-ninja (What x-ninja brings)

In the future, The architecture of x-ninja has the potential to change the way that designers and front enders work. No complicated development environment construction is required. And more, all designers can complete the screen construction work with only a knowledge of HTML, CSS and a little JavaScript.

The engineer is responsible for complex logic such as linking with the API, but the code can be cut out from the view template, so the designer does not see the code. This is the power of noise-canceling syntax.

Team of x-ninja

The core members are consisted by one CTO and one CXO. The specification of x-ninja is decided by all team, and the implementation is by CTO.