SPACE MAGIC
Dead-simple real-time webdev for node. v0.0.0
SpaceMagic is a full-stack javascript web development framework designed to allow you to build fast, real-time web applications as easily as you would non-realtime applications. Just use your mocks as templates, write your app in javascript, and fields and data will be live updated, like magic.
Features:
Real-Time Live Updates
Views on all clients are updated immediately when relevant data changes.
Semantic HTML Templates
Write templates in the semantic HTML you were going to use in the first place. SpaceMagic transforms your mocks into working apps.
Client-Server Code Sharing
Share relevant code between the client and server. Validations and other important processes can be run on both the client and server.
Live Asset Updates
Stylesheets and images are automatically pushed to the browser during development.
Just Works
Just drop it in and go. SpaceMagic works with your previously existing Node install and is interoperable with all of your current packages. No changes needed.
EXAMPLE: Realtime Chat
Model, (/app/models/chat.js)
var Chat = module.exports = Document.define("Chat")
.key("name", { length: [1, 18] })
.key("content", { length: [1, 140] })Views, (/app/views/chats/list.js, /app/views/chats/new.js)
module.exports = ListView.define("ChatView")
.template("/templates/chats/list.html")
.subView("#newChatForm", NewChatView)
module.exports = View.define("NewChatView")
.action("submit #newChatForm", function(event, element) {
event.preventDefault()
var chatInput = element.find(".chat")
, chat = chatInput.val()
chatInput.val("")
var name = element.find(".name").val()
Chat.create({ content: chat, name: name })
})Controller, (/app/controllers/application_controller.js)
Controller("/chat", function(app) {
app.get(function() {
this.view = new ChatView(Chat.find())
})
})HTML, (/assets/templates/chats/list.html)
<section>
<ul class = "chats">
<li class = "chat">
<div>
<span class = "createdAt" data-date-from-now></span> <span class = "name"></span> said:
</div>
<div class = "content"></div>
</li>
</ul>
<form id = "newChatForm">
<label for="name">name:</label><input type = "text" class = "name">
<label for="chat">message:</label><input type = "text" class = "chat">
<input type = "submit" value="send">
</form>
</section>IE support coming in the near future.