<commit_before>Netzke is a framework that greatly facilitates creation of complex [Sencha Ext JS](http://www.sencha.com/products/extjs/) + [Ruby-on-Rails](http://rubyonrails.org/) applications by leveraging a modular, object-oriented approach.

[![Gem Version](https://badge.fury.io/rb/netzke.svg)](https://badge.fury.io/rb/netzke)

## Rationale

[Sencha Ext JS]("http://www.sencha.com/products/extjs") is a powerful front-end framework, which is used for crafting web-apps that give the end user experience similar to that of a desktop application. It has an extensive set of widgets ('components'), and leverages a modular approach to its fullest: a developer can extend components (using Ext JS's own class system), nest components with the help of many powerful layouts, dynamically create and destroy them, etc. The architecture of Ext JS is well thought out and complete.

However, with Ext JS being server-agnostic, it is not always a trivial task for a developer to bind Ext JS components to the server-side data *and* application business logic, especially in complex applications. Netzke as the solution that allows you to extend the modular approach to the server side.

Netzke Core takes the burden of implementing the following key aspects of the framework:

* Client-side (JavaScript) class generation
* Client-server communication
* Extendibility of components (with the help of inheritance and mixins)
* Unlimited nesting (composition)
* Dynamic component loading
* Client-side class caching

...and more.

All this extremely facilitates building fast, low-traffic, robust, and highly maintainable applications. As a result, your code scales much better in the sense of complexity, compared to using conventional MVC, where developers are pretty much limited with the programming techniques that they can apply.

## HelloWorld component

Here's a mini-tutorial on building a simple Netzke component that illustrates client-server communication in Netzke.

Ext JS files are not distributed with Netzke, so, make sure that they are located in (or sym-linked as) `YOUR_APP/public/extjs`.

In `YOUR_APP/components/hello_world.rb`:

```ruby
class HelloWorld < Netzke::Base
  # Configure client class
  client_class do |c|
    c.title = "Hello World component"
  end

  # Actions are used by Ext JS to share functionality and state b/w buttons and menu items
  # The handler for this action should be called netzkeOnPingServer by default
  action :ping_server

  # Self-configure with a bottom toolbar
  def configure(c)
    super
    c.bbar = [:ping_server] # embed the action into bottom toolbar as a button
  end

  # Endpoint callable from client class
  endpoint :greet_the_world
    # call client class' method showGreeting
    client.show_greeting("Hello World!")
  end
end
```

In `YOUR_APP/components/hello_world/client/hello_world.js` put the client class (JavaScript) methods:

```javascript
{
  // handler for the ping_server action
  netzkeOnPingServer: function(){
    // calling greet_the_world endpoint
    this.server.greetTheWorld();
  },

  // called by the server as the result of executing the endpoint<commit_msg>fix README HelloWorld example<commit_after>Netzke is a framework that greatly facilitates creation of complex [Sencha Ext JS](http://www.sencha.com/products/extjs/) + [Ruby-on-Rails](http://rubyonrails.org/) applications by leveraging a modular, object-oriented approach.

[![Gem Version](https://badge.fury.io/rb/netzke.svg)](https://badge.fury.io/rb/netzke)

## Rationale

[Sencha Ext JS]("http://www.sencha.com/products/extjs") is a powerful front-end framework, which is used for crafting web-apps that give the end user experience similar to that of a desktop application. It has an extensive set of widgets ('components'), and leverages a modular approach to its fullest: a developer can extend components (using Ext JS's own class system), nest components with the help of many powerful layouts, dynamically create and destroy them, etc. The architecture of Ext JS is well thought out and complete.

However, with Ext JS being server-agnostic, it is not always a trivial task for a developer to bind Ext JS components to the server-side data *and* application business logic, especially in complex applications. Netzke as the solution that allows you to extend the modular approach to the server side.

Netzke Core takes the burden of implementing the following key aspects of the framework:

* Client-side (JavaScript) class generation
* Client-server communication
* Extendibility of components (with the help of inheritance and mixins)
* Unlimited nesting (composition)
* Dynamic component loading
* Client-side class caching

...and more.

All this extremely facilitates building fast, low-traffic, robust, and highly maintainable applications. As a result, your code scales much better in the sense of complexity, compared to using conventional MVC, where developers are pretty much limited with the programming techniques that they can apply.

## HelloWorld component

Here's a mini-tutorial on building a simple Netzke component that illustrates client-server communication in Netzke.

Ext JS files are not distributed with Netzke, so, make sure that they are located in (or sym-linked as) `YOUR_APP/public/extjs`.

In `YOUR_APP/components/hello_world.rb`:

```ruby
class HelloWorld < Netzke::Base
  # Configure client class
  client_class do |c|
    c.title = "Hello World component"
  end

  # Actions are used by Ext JS to share functionality and state b/w buttons and menu items
  # The handler for this action should be called netzkeOnPingServer by default
  action :ping_server

  # Self-configure with a bottom toolbar
  def configure(c)
    super
    c.bbar = [:ping_server] # embed the action into bottom toolbar as a button
  end

  # Endpoint callable from client class
  endpoint :greet_the_world do
    # call client class' method showGreeting
    client.show_greeting("Hello World!")
  end
end
```

In `YOUR_APP/components/hello_world/client/hello_world.js` put the client class (JavaScript) methods:

```javascript
{
  // handler for the ping_server action
  netzkeOnPingServer: function(){
    // calling greet_the_world endpoint
    this.server.greetTheWorld();
  },

  // called by the server as the result of executing the endpoint
{'fraction_non_alphanumeric': 0.06910762402916469, 'fraction_numerical': 0.0, 'mean_word_length': 4.491731940818103, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 3, 'https://': 4, 'lorem ipsum': 0, 'www.': 4, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2415008', 'n_tokens_mistral': 1729, 'n_tokens_neox': 1642, 'n_words': 779}