Modular Web Applications With Netzke
Upcoming SlideShare
Loading in...5
×
 

Modular Web Applications With Netzke

on

  • 1,921 views

Reasoning behind creating Netzke.

Reasoning behind creating Netzke.

Statistics

Views

Total Views
1,921
Views on SlideShare
1,921
Embed Views
0

Actions

Likes
3
Downloads
30
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Russian vs English\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • What’s common for these apps is that you see a lot of data on the screen, and have tools to edit that data.\n
  • What’s common for these apps is that you see a lot of data on the screen, and have tools to edit that data.\n
  • What’s common for these apps is that you see a lot of data on the screen, and have tools to edit that data.\n
  • 4cast as example\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Because an application can be WAY too complex to be loaded at once!\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • TODO: translate to JSON\n
  • TODO: translate to JSON\n
  • Inheritance on both sides\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Modular Web Applications With Netzke Modular Web Applications With Netzke Presentation Transcript

  • Modular webapplications with Netzke Ruby Open Air 2012, Minsk
  • Denis Gorin @nomadcoder
  • Denis Gorin @nomadcoder the Netherlands
  • Denis Gorin @nomadcoder the Netherlands+ 30 other countries and counting
  • Denis Gorin @nomadcoder the Netherlands+ 30 other countries and counting couchsurfing.org/travelista
  • Web apps
  • Web appsnot any web-apps
  • Web apps not any web-appsRich Internet Applications
  • RIA
  • RIARIA?..
  • RIARIA?..AJAX!
  • RIA RIA?.. AJAX!single-page
  • RIA
  • RIA DB-adminsECM Backends DMSE-commerce CMS
  • RIA DB-adminsECM Backends DMSE-commerce CMS logistics SCM ERP CRM accounting HR
  • RIA DB-admins ECM Backends DMS E-commerce CMSissue/time-trackers logistics Data logging management SCM ERP CRM accounting HR reporting
  • RIAMoving from desktop to Web
  • Sencha Ext JS
  • Sencha Ext JS Huge set of widgets Powerful architecture Good documentation Active forums
  • Ext JS + Rails = ?
  • Ext JS + Rails = ? How should we do this?
  • Showcase: Floralogic
  • Showcase: 4cast
  • Showcase:Yanit yanit.heroku.com
  • Showcase: Desktop netzke-desktop-demo.heroku.com
  • Ext JS + Rails = ? How should we do this?
  • MVC?
  • MVC?Aren’t controllers for data?
  • Rails API gem
  • Rails API gemComplete JavaScript on initial load?
  • Showcase: Floralogic
  • Showcase: FloralogicTrucksController OrdersController
  • Authorization
  • AuthorizationClient: “I need sellers to be able to login, too”
  • AuthorizationClient: “I need sellers to be able to login, too” “...Oh, and don’t let them change or delete anything”
  • AuthorizationClient: “I need sellers to be able to login, too” “...Oh, and don’t let them change or delete anything” Pro tip: treat your boss as your client
  • Floralogic: Sellers GUI
  • Floralogic: Sellers GUI
  • o_O
  • o_OSeparate JS per role?
  • o_OSeparate JS per role?Dynamically built JS?
  • o_OSeparate JS per role?Dynamically built JS? Configurable JS?
  • o_O Separate JS per role? Dynamically built JS? Configurable JS?What about server-side checks?
  • o_O Separate JS per role? Dynamically built JS? Configurable JS?What about server-side checks? HEADACHES
  • Extra headaches Dynamic loading of stuff
  • Let’s think components Ext JS is a component (widget) framework familienservice.de
  • Let’s think components Ext JS is a component (widget) frameworkreusability familienservice.de
  • Let’s think components Ext JS is a component (widget) framework reusabilityextensibility familienservice.de
  • Let’s think components Ext JS is a component (widget) framework reusability extensibilitycomposability familienservice.de
  • Let’s think components Ext JS is a component (widget) framework reusability extensibilitycomposability events familienservice.de
  • What’s missing?
  • What’s missing?Seamless server-side bindings
  • What’s missing?Seamless server-side bindingsServer-driven configuration
  • Start from server
  • Start from server Authorization
  • Start from server Authorization Data
  • Start from server Authorization Data Business logic
  • Start from server Authorization Data Business logic Ruby!
  • Client + server = <3
  • Client + server = <3Single point of configuration
  • Client + server = <3Single point of configuration Testability
  • Client + server = <3Single point of configuration Testability Reusability
  • Client + server = <3Single point of configuration Testability Reusability Codeencapsulation
  • Netzke component... is a Ruby classclass SimpleComponent < Netzke::Baseend
  • Netzke component ... is a Ruby class class SimpleComponent < Netzke::Base end... along with the corresponding JS class>> puts SimpleComponent.js_codeExt.define(Netzke.classes.SimpleComponent, { // ...});
  • Instantiating in Ext JSvar c = Ext.create(Ext.panel.Panel, { title: Hello, width: 200, height: 150, html: ... world!, bbar: [{text: Button}]});
  • Instantiating in Ext JSvar c = Ext.create(Ext.panel.Panel, { title: Hello, width: 200, height: 150, html: ... world!, bbar: [{text: Button}]});c.setTitle("Brave new");
  • Instantiating in Netzkec = SimpleComponent.new(title: "Hello", html: "...world!")>> pp c.js_config{ :title=>"Hello", :html=> "...world!"}
  • Showcase:Yanit
  • Showcase:YanitNetzke::Basepack::GridPanel
  • Showcase:Yanit Netzke::Basepack::GridPanelColumnconfig:texteditablesortablefilterableeditorhidden
  • GridPanelgrid = Netzke::Basepack::GridPanel.new ( model: "Issue", columns: [:name, :description, :priority])
  • GridPanel grid = Netzke::Basepack::GridPanel.new ( model: "Issue", columns: [:name, :description, :priority] )>> pp grid.js_config[:columns]
  • GridPanel grid = Netzke::Basepack::GridPanel.new ( model: "Issue", columns: [:name, :description, :priority] )>> pp grid.js_config[:columns][ {:name=>"id", :text=>"Id", :hidden=>true, :sortable=>true, :filterable=>true}, {:name=>"name", :editable=>true, :editor=>{:xtype=>:textfield}, ...}, {:name=>"description", :editor=>{:xtype=>:textarea}, ...}, {:name=>"priority", :editor=>{:xtype=>:numberfield}, ...}]
  • Inheritanceclass ExtendedComponent < SimpleComponentend>> puts ExtendedComponent.js_codeExt.define(Netzke.classes.ExtendedComponent, { extend: Netzke.classes.SimpleComponent, // ...});
  • Showcase: 4cast
  • ChartsWeekChart DayChart
  • Charts# It knows we deal with multiple# forecasts that have to be displayed class DayChart < ActivityChart# with colored lines, but its flexible def data# about what to display along the axes # query data for given day# (which is configurable) endclass ActivityChart < Netzke::Base end js_base_class "Ext.chart.Chart" class WeekChart < ActivityChart # lots of code ... def data # query data for given week # This data goes to the client end # via the constructor def data end [] endend
  • Other cool things
  • Other cool things Composability
  • Other cool things Composability Seamless server bindings
  • Other cool things Composability Seamless server bindings Dynamic loading of client-code
  • Conclusion Structured DRY code OOP JS code incapsulationDesktop-like development for web
  • Check it out! netzke.org @nomadcoder