(Blog Park starter) Open source Framework Knot.js officially released, for front-end development to bring a new way to develop--CBS

Hi, I'm the author of Knot.js, a programmer who has been addicted to programming for almost 20 years now. My Weibo is http://www.weibo.com/2018493034/profile, if there is any problem, welcome to the microblog and I discuss.

Knot.js This project has actually started and formed two years ago, and its first version has actually been applied to my project for more than a year and has been very good. However, it was not until now that the project was completely reconstructed and the site was built and detailed documentation was created, thanks to the busy work and the children, coupled with the procrastination outbreak.

Knot.js English official website here: http://www.knotjs.com very sorry Chinese website has not been able to complete, if you are interested in joining me to help build Chinese website, please email [email protected]

I will use a series of blogs to introduce knot.js to you before the Chinese website is established.

Knot.js is not a simple "another" front-end MVVM framework. Compare Angularjs,knockoutjs and other predecessors, Knot.js has a lot of innovation and breakthroughs, below I briefly introduce the following knot.js several advantages:

Cbs

CBS is a new approach to front-end development. Its name comes from "Cascading Binding Sheet", does it look like "CSS"? In fact it works the same way as CSS, and you can learn that you don't need much extra cost to be familiar with CCS.

Just as CSS pulls styles out of HTML to make Web pages more maintainable, CBS extracts the data-binding logic in HTML, creating a standalone, structured CBS block or CBS file that makes your HTML and data-binding logic crisp and easy to read.

On the left is the ANGULARJS data binding configuration instance fragment, the right side is the same function after the CBS Knot.js configuration instance fragment, Knot.js significantly more refreshing. As the project becomes larger and more complex, the benefits of CBS will be significant. In fact, the main reason I had to take the plunge last year to apply a completely immature knot.js to the project was that I couldn't resist the temptation of CBS. I'm sure you'll have a similar feeling if you just try CBS.

Automatic Data sense

Another feature of Knot.js is data auto-sensing. The traditional MVVM framework, in order to realize data awareness (to detect changes in data to modify the UI), often forces users to write Model/view model according to its requirements and specifications, everything you know is changed in the frame, even a simple timer has to be re-learned, the whole learning curve is quite steep.

Knot.js almost does not make any demands on your model/view model, even if it is a straightforward JSON object, Knot.js can automatically establish two-way bindings. All of your previous knowledge worked in Knot.js, so you can get started quickly by simply familiarizing yourself with the few concepts in knot.js.

On the left is the code snippet for Angularjs, and the right is the code snippet after using Knot.js. You should be able to find that the Knot.js code is almost no different from the JS code you write.

Debugger

believe that any program that has used the framework has had a painful experience of wrestling with the frame. A small configuration error can kill you for an afternoon's time. Knot.js wants to change the situation. So I modeled the common CSS Debugger and developed the Knot.js CBS debugger, which allows you to monitor the binding state of each HTML element in real-time throughout the system. The Knot.js debugger even provides a common mouse selection element/element highlighting feature in the CSS debugger, allowing you to easily locate the HTML elements you want to monitor.

The Knot.js debugger basically turns the entire system into a white-box system, with all the details of the work being viewed. Most of the problems in your development process can be solved by the debugger.

Knot.js also has these advantages

1. The file is small. Compressed but 45k (excluding debugger).
2. Fast. According to my initial test, knot.js is only slightly slower than using jquery directly to manipulate Dom Tree, faster than Angularjs. http://www.knotjs.com/performance/
3. Knot.js is fully functional. Although the file is small, this is because the overall system design is quite concise. The various functions you need are basically knot.js have been provided.
4. Free. Knot.js the programmer's control of the system throughout the design process. You can get involved in almost any step and add the logic you want. Using this framework, you will not feel much more restrictive than using jquery directly.
5. Free. Based on MIT License.
   
   

Some tips

1. Knot.js supports all major browsers, but does not support IE8 and earlier versions
2. This is Knot.js's first official release.
3. While I will continue to blog about all aspects of knot.js, you may need to read English documents to get help before the Chinese site is established.

An example

Here is a simple example to give you an initial visual impression. This example displays a text box, entering a name, to get Greetings from knot.js. You can visit Knot.js home trial: http://www.knotjs.com

You can immediately visit http://www.knotjs.com/tutorial/to start learning using Knot.js.

Html

1 <Divclass= "Knot_example">2 3     <!--clear and clean HTML for easy maintenance -4 5     <H3>Greeting from Knot.js</H3>6     <P>7         <label>Input Your name here:</label>8         <inputtype= "text">9     </P>Ten     <P> One         <bID= "Hellostring"></b> A     </P> - </Div> -         

CBS

 1  /*    This CBS bar the Value property of the TextBox is bound to the #hellostring's Text property  3   4   "[Immediately:1]" This option tells Knot.js to update the data every time the keystroke is pressed.  5  */  .knot_example input  {7   value[immediately : 1] > {return value? ("Hello" + value + "!"): "" }8  : #hello String.text;  9   

If you are interested in knot.js, please follow me for a follow up update alert. At the same time please click on the recommended article, knot.js need enough attention to attract developers and build their own community.

Knot.js Thank you for your support.

(Blog Park starter) Open source Framework Knot.js officially released, for front-end development to bring a new way to develop--CBS