Joe Conley Tagged knockoutjs

Build responsive webapps using total.js and Knockout.js

Wed, 18 Jun 2014 00:00:00 +0000

I’ve recently spent time evaluating the myriad universe of Node.js 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

Convention over configuration (i.e. reasonable MVC patterns, routing, etc.)
Integrates easily with other libraries/good framework utilities
Wealth of practical examples

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 total.js framework most appealing.

Criteria

Sensible conventions

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:

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){}

Plays well with others

Total.js enjoys all the benefits of any Node.js framework, namely access to the treasure trove of libraries in npm. However, I was pleasantly surprised to find a sizeable collection of built-in utlities 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 has already built a list of modules to get you started.

Examples

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 totaljs examples answered most if not all of my questions.

Obligatory TODO App

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 basic TODO app using total.js and Knockout.js. This app took roughly 20 minutes to build, and most of that time was spent refreshing my memory on knockout.js data-binding syntax.

Caveats

Total.js minifies html/cs/jss by default, so debugging javascript is nigh impossible if you write javascript code in <script> 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.

Conclusion

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.

(Triz)Swagging out at the Philly Codefest

Tue, 25 Feb 2014 00:00:00 +0000

This past weekend I teamed up with some buddies from Point.io (Angel, Jon, and Dylan) to participate in my first hackathon, Philly Codefest. 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 here.

Angel demoing Point.io's apiDoc service

Lessons Learned

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.

Coast-to-Coast JSON

I’ve always been a big fan of Domain-driven Design. 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 MongoDB and served by Flask). 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 the Mandubian Blog

Knockout.js Mapping plugin

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 mapping plugin. 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).

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.

Understanding your tools

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.

Conclusion

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 Point.io API. Great job Team TrizSwagger!

Jon, Dylan, and Joe doing some last-minute coding

Hacking NPR's Sunday Puzzle

Mon, 10 Feb 2014 00:00:00 +0000

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 NPR’s Weekend Edition Puzzle 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.

You can find a running version of the puzzle solver here. The Scala library of the puzzle utilities can be found here. This project also has an npr package which shows examples of programs written to solve past NPR puzzles.

Puzzle Solver

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.

Puzzle Modes

Anagrams

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:

GREEV WORNC KNITSY KRUTYE

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.

Scrabble

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).

Regular expressions

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 here.

Word Lists

I’ve gathered two common word lists, a list of valid Scrabble words mentioned here and the UNIX word list. I’ve also added a space to add a custom list of words to search.

Technology

I’ve built this app using Play Scala as the backend. After importing my puzzles library, here’s the relevant controller code:

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 JsPath.as. Please don’t think less of me!

I’ve also employed Knockout.js 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:

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 Enumeratee library. If anyone’s interested in that I can post a follow-up detailing that solution.

Puzzle Solution - Double S (Non-Programmers)

Now our tool is ready to help us solve a recent puzzle. Here’s the question, reprinted from NPR’s website:

What word, containing two consecutive S's, becomes its own synonym if you drop those S's?

Using Regex mode and our Scrabble word list, we can define the regular expression .ss. to return all words with a double S:

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:

abbe|aby|abyes|...|zestle|ziple|zonele

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 here):

Puzzle Solution - Double S (Programmers)

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:

Conclusion

If you enjoy NPR’s Sunday Puzzle, I’d highly recommend Blaine’s Puzzle Blog 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.

Happy puzzling!