Xalt 27 Jun 2013

So I’ve been working on this thing called Xalt for the past few days; an object-oriented web development library/toolkit for NodeJS. It’s a bit weird, and at this point even I’m not sure if it provides any benefit over the “standard” NodeJS workflow. I did some research before starting Xalt, and discovered ASP.NET WebForms. After reading DaedTech’s blog post on it, I thought I might be able to make something better. Yes, WebForms abstracts away a substantial portion of the web development process, but it does so inside of an entirely new environment. It adds new HTML directives, and you still need to write CSS and client-side JS the old fashioned way.

I never liked how spread out web development is. Traditionally, you wrote your markup in HTML, styles in CSS, client-side code in JS, and server-side code in PHP. Nowadays, on top of those we have JADE/SLIM/HAML for markup, SASS/LESS for CSS, JS/CoffeeScript for client-side, and a plethora of server-side languages and frameworks. Coming from desktop/CLI application development, this can be a bit of a shock. Of course, it’s a great process; we have a great number of fantastic websites and developers enjoying the tools at their disposal. I’m a huge fan of NodeJS, and am beginning to see the appeal of RoR. Times are good.

Can they be better though? Consider this:

 1 someWebsite = new Website
 3 homepage = new Page "/", someWebsite,
 4   "background-color": "#f3f3f3"
 5   "color": "#333"
 7 homepage.build = ->
 9   navbar = new Navbar
10     "Home": "/"
11     "About": "/about"
12     "Contact": "/contact"
14   new Header "h1", "Request an invite",
15     "text-align": "center"
16     "display": "block"
18   new Container ->
20     inputEmail = new Input "email", "someone@example.com..."
21     submitButton = new Button "Send", ->
22       email = inputEmail.getText()
23       mail.send "admin@gmail.com", "Invite Request", "User #{email} has requested an invite!"
25       inputEmail.setAttr "disabled", "disabled"
26       inputEmail.setText "Request Sent"
28       @setAttr "disabled, "disabled"
29 }
31 someWebsite.serve 7000

That to me seems like, in theory, it would make for a better development workflow. The syntax above is what I’m attempting to achieve with Xalt. Instead of breaking developers out of the environment they are used to though, Xalt runs as a NodeJS module utilizing SocketIO and Express to do its dirty work. This way, developers can continue to use the modules they normally code with.

Xalt is written in CoffeeScript, and is at an extremely early stage of development. My worry is that the way of doing things it offers might not scale well to large, extremely dynamic websites. I don’t know of anything close enough to it to compare with, so I’m a bit hesitant about moving forward. Maybe web development is the way it is for a reason, and CSS/JS aren’t just stretchmarks? I’ll continue to add features, and will use Xalt for some small, real world web apps. Comments, critique, and contributions are welcome. To end things on a code-related note (the best note), here is an extremely simple snippet showing some of Xalt’s current functionality:

 1 xalt = require "./xalt"
 3 demo = new xalt.xaltBase "#{__dirname}/static"
 5 new xalt.xaltPage "/test", demo, ->
 6   btn = @factory "xaltElementButton", "Click me!"
 7   label = @factory "xaltElementButton", "No labels yet"
 8   input = @factory "xaltElementInput"
10   btn.setOnClick (data, socket) ->
11     input.getText socket, (text) ->
12       label.setText text, socket
14 demo.listen "7000"

Oh yeah, and you can also write client-side code in the same file as server-side code, and Xalt will handle sending it for you :)

Full demo