Joe Conley Tagged knockoutjs Random thoughts on technology, books, golf, and everything else that interests me Build responsive webapps using total.js and Knockout.js <p>I’ve recently spent time evaluating the myriad universe of <a href="">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="">total.js framework</a> most appealing.</p> <table class="image"> <tr><td><a href="" 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="">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="">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="">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="" 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="">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 (Triz)Swagging out at the Philly Codefest <p>This past weekend I teamed up with some buddies from <a href=""></a> (<a href="">Angel</a>, <a href="">Jon</a>, and <a href="">Dylan</a>) to participate in my first hackathon, <a href="">Philly Codefest</a>. We spent the weekend bringing Angel’s dream to life: a platform called TrizSwagger to analyze and track the use of “swag” (i.e. T-shirts, office supplies, and other marketing mathoms). We leveraged social media and geolocation to give companies real-time visibility to their marketing campaigns. Feel free to check out the app <a href="">here</a>.</p> <table class="image"> <caption align="bottom">Angel demoing's apiDoc service</caption> <tr><td><img src="/assets/angel.jpg" alt="Angel promoting" /></td></tr> </table> <p> <br /></p> <h2 id="lessons-learned">Lessons Learned</h2> <p>Good programming is always concerned with simplicity and efficiency, whether it’s using efficient data structures and algorithms, conciseness in your codebase, or even naming variables properly. Building an app in 24 hours, however, throws the need for simplicity and efficiency into sharp relief. Here are a few takeways from my experience.</p> <h3 id="coast-to-coast-json">Coast-to-Coast JSON</h3> <p>I’ve always been a big fan of <a href="">Domain-driven Design</a>. Writing POJOs in Java and case classes in Scala can provide a clear crystallization of the main actors of your application. However, models may not always be necessary, especially if your app is backed by a service/database which gives you JSON (TrizSwagger is backed in <a href="">MongoDB</a> and served by <a href="">Flask</a>). The extra layer of complexity in marshalling/unmarshalling between JSON and your model can hinder performance and readability of your code, especially if you’re using heavy ORM frameworks like Hibernate. During a hackathon, if you’re rapidly making changes to the model you’ll surely get slowed down. For a more thorough treatment of JSON Coast-to-Coast, check out <a href="">the Mandubian Blog</a></p> <h3 id="knockoutjs-mapping-plugin">Knockout.js Mapping plugin</h3> <p>In order to implement coast-to-coast design effectively, it’s important to have a front-end framework that manages JSON well. One such framework I’m fond of is Knockout.js, more specifically their <a href="">mapping plugin</a>. This plugin automatically maps a JSON message into a Javascript observable object. You can then code the front-end directly against object properties without having to pre-define a viewmodel. You can also customize how objects are mapped by either modifying or enhancing the created object. This strategy proved quite helpful during the hackathon as any changes to our back-end API literally only had to be changed in one place (the front-end).</p> <p>One caveat is the creation of a new object using this plugin. Since the plugin requires a JSON object to build out the observable, I wrote a basic method in Play to take an expected JSON object and “empty” it, setting default values that would be used in the new object form.</p> <script src=""></script> <h3 id="understanding-your-tools">Understanding your tools</h3> <p>TrizSwagger integrates with both Twitter and Facebook. Understanding and setting up those integrations, however, occupied a lot of our time. We also ran into issues with a server on OpenShift, slowing us down further. Ultimately I think simpler is better, and every choice in technology needs to be well thought-out and well-suited to its use case.</p> <h2 id="conclusion">Conclusion</h2> <p>Overall it was an awesome experience. Even though we didn’t win (or place, or show for that matter), we learned a lot and we still took the time to mentor other teams who were using the <a href=""> API</a>. Great job Team TrizSwagger!</p> <table class="image"> <caption align="bottom">Jon, Dylan, and Joe doing some last-minute coding</caption> <tr><td><img src="/assets/triz.jpg" alt="Jon, Dylan, and Joe doing some last-minute coding" /></td></tr> </table> Tue, 25 Feb 2014 00:00:00 +0000 Hacking NPR's Sunday Puzzle <p>I’m a big fan of puzzles. I’ll often start my day attempting the Philadelphia Inquirer’s jumble and crossword, with varying degress of success. One puzzle I never miss is <a href="">NPR’s Weekend Edition Puzzle</a> featuring New York Times puzzle editor Will Shortz. At the end of each segment, he poses a question to the audience, and occasionally these questions can be solved with the help of programming. To that end, I’ve built an app to help non-programmers solve these puzzles. I’ve also added common puzzle utilities like an Anagram checker and a Scrabble solution generator.</p> <p>You can find a running version of the puzzle solver <a href="">here</a>. The Scala library of the puzzle utilities can be found <a href="">here</a>. This project also has an npr package which shows examples of programs written to solve past NPR puzzles.</p> <h2 id="puzzle-solver">Puzzle Solver</h2> <p>This single-page app searches through a specified list of words searching for one of three things: anagrams, potential Scrabble solutions, or most powerfully, a regular expression. We’ll use this last mode to solve a recent NPR puzzle.</p> <h3 id="puzzle-modes">Puzzle Modes</h3> <h4 id="anagrams">Anagrams</h4> <p>This mode will search for all potential anagrams of the input word. Helpful for solving the jumble commonly found in your newspaper. For example, here are today’s four jumble clues from the Inquirer:</p> <div class="well well-lg"> GREEV WORNC KNITSY KRUTYE </div> <p>Setting the app controls to Mode = Anagram and Word List Source = Scrabble (a good list source for most purposes), we set Input once for each jumble and after hitting Submit, we get one proper anagram for each jumble.</p> <h4 id="scrabble">Scrabble</h4> <p>This mode will search for all possible valid Scrabble words based on the letters (i.e. your Scrabble hand) provided. You can also specify how many wild cards (i.e. “blanks”) are in your hand. This is useful not only to help find solutions but to verify solutions as well (faster than leafing through a Scrabble dictionary).</p> <h4 id="regular-expressions">Regular expressions</h4> <p>This is the most powerful mode. This will return all words matching a valid Java regular expression. You can find a good tutorial about Java regular expressions <a href="">here</a>.</p> <h3 id="word-lists">Word Lists</h3> <p>I’ve gathered two common word lists, a list of valid Scrabble words mentioned <a href="">here</a> and the <a href=";content-type=text%2Fplain">UNIX word list</a>. I’ve also added a space to add a custom list of words to search.</p> <h2 id="technology">Technology</h2> <p>I’ve built this app using <a href="">Play Scala</a> as the backend. After importing my puzzles library, here’s the relevant controller code:</p> <script src=""></script> <p>I probably could have handled the JSON a bit safer by using a Reads[T] object to handle the parsing, but as this app was fairly simple I used the unsafe conversion Please don’t think less of me!</p> <p>I’ve also employed <a href="">Knockout.js</a> to manage the front-end functionality. Knockout.js is a lightweight MVVM framework which manages DOM updates automatically and succinctly, ensuring that your front-end code is not a monolith of jQuery calls. Here’s the code for the front-end:</p> <script src=""></script> <p>And that’s it! A good future exercise would be to stream the solutions reactively, especially when dealing with a long word list. This would be done using Play’s <a href="">Enumeratee library</a>. If anyone’s interested in that I can post a follow-up detailing that solution.</p> <h2 id="puzzle-solution---double-s-non-programmers">Puzzle Solution - Double S (Non-Programmers)</h2> <p>Now our tool is ready to help us solve a recent puzzle. Here’s the question, reprinted from <a href="">NPR’s website</a>:</p> <div class="well well-lg">What word, containing two consecutive S's, becomes its own synonym if you drop those S's?</div> <p>Using Regex mode and our Scrabble word list, we can define the regular expression .<em>ss.</em> to return all words with a double S:</p> <p><img src="/assets/regex.bmp" alt="Regex Step One" /></p> <p>From there, we use Excel to store this list in the first column. We can then copy this list in the second column and do a Find/Replace to remove instances of “SS”. We could inspect each row for synonyms but as we have 1976 results, that’s a lot of words to inspect. To further narrow down our choices, I used Excel to transpose the second column into one row, copy that into a text file and do another Find/Replace by highlighting the space between each word and replacing with a vertical bar. This gives us another regular expression that should look like this:</p> <div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>abbe|aby|abyes|...|zestle|ziple|zonele </code></pre></div></div> <p>Using that regular expression, we can use our Puzzle Solver to determine which words in the list are valid words and which aren’t (we only care about words that are valid). This second search takes significantly longer, but we’ll eventually get a list back of 156 valid words. Plugging this list back into Excel, we can use a VLOOKUP to identify the pairs of words which are valid. After sorting to see valid word pairs first, we can inspect to see which pairs are synonyms. Luckily, the answer appears fairly early in the list (spreadsheet can be downloaded <a href="">here</a>):</p> <p><img src="/assets/SS.bmp" alt="Regex Solution" /></p> <h2 id="puzzle-solution---double-s-programmers">Puzzle Solution - Double S (Programmers)</h2> <p>The previous non-coding solution might have seemed a bit convoluted. A much simpler method would be to use my Scala library directly to find the solutions, which can be done with as little as four lines of code:</p> <script src=""></script> <h2 id="conclusion">Conclusion</h2> <p>If you enjoy NPR’s Sunday Puzzle, I’d highly recommend <a href="">Blaine’s Puzzle Blog</a> as an excellent companion resource. This blog community offers tantalizing, interesting hints for the solution of the puzzle and often digress into other challenging puzzles as well.</p> <p>Happy puzzling!</p> Mon, 10 Feb 2014 00:00:00 +0000