Joe Conley Tagged totaljs Random thoughts on technology, books, golf, and everything else that interests me http://www.josephpconley.com/name/totaljs Build responsive webapps using total.js and Knockout.js <p>I’ve recently spent time evaluating the myriad universe of <a href="http://nodejs.org/">Node.js</a> web frameworks. My motivation was twofold: to get acquainted with the increasingly popular Javscript server-side technologies, and learn a simple framework wherein I could quickly build a reasonably complex web application. As my search wore on, the following criteria for such a framework began to emerge</p> <ol> <li>Convention over configuration (i.e. reasonable MVC patterns, routing, etc.)</li> <li>Integrates easily with other libraries/good framework utilities</li> <li>Wealth of practical examples</li> </ol> <p>After spending much time traversing the impassioned treatises of StackOverflow and consulting the hallowed counsel of the ThoughtworksRadar, I have found the simplicity of the <a href="http://www.totaljs.com/">total.js framework</a> most appealing.</p> <table class="image"> <tr><td><a href="http://www.totaljs.com" target="_blank"><img src="/assets/totaljs-logo.png" alt="total.js logo" /></a></td></tr> </table> <p> <br /></p> <h2 id="criteria">Criteria</h2> <h3 id="sensible-conventions">Sensible conventions</h3> <p>Total.js follows the model-view-controller convention to much success. Simply place the relevant code in models/views/controllers folders and you’re good to go. In addition, the routing is very simple to wire up, requiring a simple declaration mapping each route to a Javascript function. Here’s an example of a typicaly RESTful routing situation:</p> <div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>exports.install = function(framework) { framework.route('/users', listUsers) framework.route('/users', addUser, ['post']) framework.route('/users/{id}' updateUser, ['put']) framework.route('/users/{id}' deleteUser, ['delete']) }; function listUsers(){} function addUser(){} function updateUser(id){} function deleteUser(id){} </code></pre></div></div> <h3 id="plays-well-with-others">Plays well with others</h3> <p>Total.js enjoys all the benefits of any Node.js framework, namely access to the treasure trove of libraries in <code class="highlighter-rouge">npm</code>. However, I was pleasantly surprised to find a <a href="https://docs.totaljs.com/latest/en.html#api~Framework">sizeable collection of built-in utlities</a> to manage common web application functionality like file operations, email, and websocket administration. There is also the option to build your own modules by writing custom code which can hook into different events in the web application lifecycle. Total.js <a href="https://github.com/totaljs/modules">has already built a list of modules</a> to get you started.</p> <h3 id="examples">Examples</h3> <p>One potential drawback here is the relatively small size of collaboration/interest in this framework as of now (try googling a nontrivial issue), but overall I’ve found that the wealth of examples provided in <a href="https://github.com/totaljs/examples">totaljs examples</a> answered most if not all of my questions.</p> <h2 id="obligatory-todo-app">Obligatory TODO App</h2> <table class="image"> <tr><td><a href="http://www.knockoutjs.com" target="_blank"><img src="/assets/ko-logo.png" alt="Knockout.js logo" /></a></td></tr> </table> <p> <br /></p> <p>As I evaluated Node.js frameworks, I noted that the most popular example app was the TODO application. In that spirit, I’ve created a <a href="https://github.com/totaljs/examples/tree/master/knockoutjs-todo">basic TODO app using total.js and Knockout.js</a>. This app took roughly 20 minutes to build, and most of that time was spent refreshing my memory on knockout.js data-binding syntax.</p> <h2 id="caveats">Caveats</h2> <p>Total.js minifies html/cs/jss by default, so debugging javascript is nigh impossible if you write javascript code in <code class="highlighter-rouge">&lt;script&gt;</code> tags in your html. If you plan on doing significant Knockout.js development, I’d highly recommend keeping all viewmodel code in a separate Javascript file, and setting the js-minify flag in your config-debug file to false.</p> <h2 id="conclusion">Conclusion</h2> <p>There’s no lack of Javascript web frameworks, and like any technology toolbox it’s important to use the right tool for the job. While I’ve only just scratched the surface of the framework, I would highly recommend total.js to beginners and experts alike.</p> Wed, 18 Jun 2014 00:00:00 +0000 http://www.josephpconley.com/2014/06/18/totaljs-knockoutjs.html http://www.josephpconley.com/2014/06/18/totaljs-knockoutjs.html