Netzke is a framework that greatly facilitates creation of complex Sencha Ext JS + Ruby-on-Rails applications by leveraging a modular, object-oriented approach.
Sencha Ext JS 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.
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:
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
endIn YOUR_APP/components/hello_world/client/hello_world.js put the client class (JavaScript) methods:
{
// 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
showGreeting: function(greeting){
this.update("Server says: " + greeting);
}
}To embed the component in Rails view:
Use load_netzke in the layout to include Ext JS and Netzke scripts and stylesheets:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<%= csrf_meta_tag %>
<%= load_netzke %>
</head>
<body>
<%= yield %>
</body>
</html>Embed the component in the Rails view:
<%= netzke :hello_world %>To learn about Netzke architecture in detail, refer to the Netzke Core README.
The netzke Ruby gem is a meta-gem that has the following framework parts as dependencies:
- Netzke Core - the "bare bones" of the framework. Its README is a must-read for understanding the framework.
- Netzke Basepack - a few feature-packed pre-built components.
- Netzke Testing - a set of helpers that simplify development and testing of Netzke components.
Netzke components consist of server side (Ruby) and client side (JavaScript) code, each having an API that you will want to use in your app. Documentation for the server-side (Ruby) classes is auto-generated (with YARD) and hosted by RubyDoc.info. Documentation for client-side classes is generated manually with yuidoc using scripts provided in this gem; it is hosted here.
Symlink Netzke gems (such as netzke-basepack and netzke-core) into the doc/client directory, then run
rake client_doc:generate
The combined docs for all symlinked gems will be generated in doc/client/build.
- Project website - place to start
- Demo - demo showing off components from Basepack (browse through demo components and see their source code)
- Twitter - bite-sized announcements about Netzke
It depends. For developing new components or extending existing ones (e.g. from Basepack) you'll most probably need to apply your Sencha Ext JS knowledge (and Netzke isn't supposed to limit you here in any way). However, the idea is that you write JavaScript code only once. After the component is created, use it as if it were a part of some Ruby library. A comparison with Ruby gems that use C extensions is also appropriate here: as some Ruby gems incapsulate C code for you, the same way Netzke components incapsulate JavaScript.
In the current scene, Ext JS is the only library I know of that has the architecture consistent, flexible, and complete enough to allow for complex "enterprise level" web applications.
I'm creating new components according to my own practical needs. As soon as get something generic, I might add that to netzke-basepack or to a dedicated gem. However, the key idea of Netzke is that it facilitates creating new components which are extremely easy to share, so that anybody could contribute.
Copyright (c) 2009-2017 Good Bit Labs, released under the same license as Ext JS
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent