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:


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.

Done. Enjoy your real-time chat web app. For a more elaborate example, please check our tutorials section.


Contact

Email: development@spacemagic.io

Twitter: @SpaceMagicIO