WidLib - विजेट्स के निर्माण के लिए घोषणात्मक js- फ्रेमवर्क

कार्यों की सीमा

1. वितरण आदेश विजेट
2. वाई-फाई एप्लिकेशन (स्थानीय वाई-फाई से कनेक्ट करते समय शॉपिंग सेंटर गाइड या एक इंटरैक्टिव मेनू)
3. कैलकुलेटर (ऋण, प्लास्टिक की खिड़कियां और दरवाजे)
4. वेबसाइट सदस्यता प्रपत्र
5. क्विज़ (गेमिंग, साथ ही साथ विपणन अभियान और ड्रॉ)
6. टेस्ट (योग्यता परीक्षण, प्रशिक्षण, कर्मियों के साथ काम)
7. ऑनलाइन सहायक (जैसे पर्यटक मार्ग या कॉल सेंटर सहायक को चुनना)
8. मोबाइल अनुप्रयोगों में विगेट्स एम्बेड करना (यहाँ यह PhoneGap के समान है)
9. सामाजिक नेटवर्क के लिए संवाद अनुप्रयोग (फिर से क्विज़, गैर-रैखिक मतदान)
10. बुकिंग (हवाई जहाज का टिकट, होटल के कमरे या दंत चिकित्सक के समय)
11. आदि

Coffeescript

widlib=require("widlib-server") server=widlib.init #     (index_template=Handlebars.compile("...")), #     ,    @app.template template: index_template pages: type: #         template: type_template # @app.pages["type"].template body: " " #       submit,      (   ) #       onLeave, onEnter inputs: [ { value: "", type: "link", name: "type", price: 350 }, { value: "", type: "link", name: "type", price: 360 }, { value: "", type: "link", name: "type", price: 370 }, { value: " ", type: "link", name: "type", price: 380 }, ] size: body: " " #      -    inputs: -> price = @session.input("type").price # session -    . @session.input("type")     type. [ { value: "30", type: "link", name: "size", price: price }, { value: "40", type: "link", name: "size", price: price*1.2 }, { value: "50", type: "link", name: "size", price: price*1.5 }, ] #           onSubmit: "address" address: body: " " inputs: [ { name: "address", type: "text", placeholder: ", , , " }, { type: "submit", value: "" } ] phone: body: " " inputs: [ { name: "phone", type: "text", placeholder: "+7 xxx xx xx" }, { type: "submit", value: "" }] onSubmit: -> #     onLoad, on @data("orders").push @session.values() #      @data("email").push email_template(@session.values()) "success" #     success: body: "     " image: -> "/images/#{@session.value("type")}.jpg" #    ,    image  view data: orders: type: "spreadsheet" #     API         url: "https://docs.google.com/spreadsheet/ccc?key=0Au4e-jj1-69ZdEloMW03UExKLXIZFSUE" email: type: "email" to: "1@interactiff.net" server.listen "3000" 

 widlib=require("widlib-server") server=widlib.init template: index_template pages: type: template: type_template body: " " inputs: [ { value: "", type: "link", name: "type", price: 350 }, { value: "", type: "link", name: "type", price: 360 }, { value: "", type: "link", name: "type", price: 370 }, { value: " ", type: "link", name: "type", price: 380 }, ] size: body: " " inputs: -> price = @session.value("type").price [ { value: "30", type: "link", name: "size", price: price }, { value: "40", type: "link", name: "size", price: price*1.2 }, { value: "50", type: "link", name: "size", price: price*1.5 }, ] onSubmit: "address" address: body: " " inputs: [ { name: "address", type: "text", placeholder: ", , , " }, { type: "submit", value: "" } ] phone: body: " " inputs: [ { name: "phone", type: "text", placeholder: "+7 xxx xx xx" }, { type: "submit", value: "" }] onSubmit: -> #     onLoad, on @data("orders").push @session.values() @data("email").push email_template(@session.values()) "success" success: body: "     " image: -> "/images/#{@session.value("type")}.jpg" data: orders: type: "spreadsheet" url: "https://docs.google.com/spreadsheet/ccc?key=0Au4e-jj1-69ZdEloMW03UExKLXIZFSUE" email: type: "email" to: "1@interactiff.net" server.listen "3000" 

 var client, server, widlib; widlib = require("widlib-server"); server = widlib.init({ template: index_template, pages: { type: { template: type_template, body: " ", inputs: [ { value: "", type: "link", name: "type", price: 350 }, { value: "", type: "link", name: "type", price: 360 }, { value: "", type: "link", name: "type", price: 370 }, { value: " ", type: "link", name: "type", price: 380 }, ] }, size: { body: " ", inputs: function() { var price; price = this.session.input("type").price; return [ { value: "30", type: "link", name: "size", price: price }, { value: "40", type: "link", name: "size", price: price*1.2 }, { value: "50", type: "link", name: "size", price: price*1.5 }, ]; }, onSubmit: "address" }, address: { body: " ", inputs: [ { name: "address", type: "text", placeholder: ", , , " }, { type: "submit", value: "" } ] }, phone: { body: " ", inputs: [ { name: "phone", type: "text", placeholder: "+7 xxx xx xx" }, { type: "submit", value: "" }], onSubmit: function() { this.data("orders").push(this.session.values()); this.data("email").push(email_template(this.session.values())); return "success"; } }, success: { body: "     ", image: function() { return "/images/" + (this.session.value("type")) + ".jpg"; } } }, data: { orders: { type: "spreadsheet", url: "https://docs.google.com/spreadsheet/ccc?key=0Au4e-jj1-69ZdEloMW03UExKLXI3cGRlbkJteGZFSUE#gid=0" }, email: { type: "email", to: "1@interactiff.net" } } }); server.listen("3000"); 

 client=new Widlib.Client #       ,     . # pages: ... # data: ... server: "/" container: "#container" 

सुविधाओं

• घोषणात्मक लेखन शैली
• सरल मामलों के लिए, वस्तुतः कोई प्रोग्रामिंग कौशल नहीं
• रेडीमेड टेम्प्लेट का उपयोग करना संभव है (सामान्य लोगों द्वारा विजेट बनाने के लिए टेम्प्लेट और विजार्ड की लाइब्रेरी बनाने की भी योजना है)
• घोषणात्मक html-टेम्पलेट इंजन और rivets.js बाइंडिंग (AngularJS में समान) का उपयोग करना संभव है। बाइंडिंग स्क्रिप्ट फ्रेमवर्क रिपॉजिटरी में उपलब्ध होगी।
• DOM के साथ काम करने के लिए लाइब्रेरी की स्वतंत्रता
• क्लाइंट और सर्वर के बीच साझा कोड
• सर्वर-साइड स्क्रिप्ट के लिए एक अगोचर फ़ॉलबैक क्लाइंट।