Sharing life and geek notes from Philadelphia.

Main menu

Category Archives: CoffeeScript

Sorry for the dead air over the last few months. Things got a bit hectic at my job and I couldn’t seem to find the free time to post. On the plus side, things are starting to calm down. We’ve shipped some more software and I’m finally catching up with some side projects.

One project which I started at the March CocoaHead Hackday is GoldCards. It’s an iOS reference tool for Hearthstone.

While I want this to be a Universal (iPhone and iPad) app in time I think I’m going to finish up a few more loose ends and release it as an iPhone-only app for now.

Another big side project is CocoaLove, an iOS-focused conference coming to Philly. I’m on the planning committee (sponsorship and AV to be specific). I’d also like to help build a simple conference app with the schedule and what not. Shouldn’t be too hard considering my history with such things.

In addition to all that I’m also trying to catch up with some web tech, Ember and Node to be precise. There are a few things on my idea board that could utilize such skills so I’m taking some time reading books and going through Code School examples to catch up.

Over the last three weeks, I’ve been slowly picking up Ember.js while helping some colleagues with a project. It’s pretty interesting tech and I’d like to share some early thoughts.

What is Ember?

To be frank, I don’t think the Ember homepage does a very good job of explaining Ember. It features terms like “less code” and “developer ergonomics,” which are too much like “marketing speak” for me.

How I view Ember. Normally with a web app, you (as a user) will go page to page, sometimes viewing data and then sometimes editing data with forms. That’s what I’ll call a form-based web app. Sometimes you might want a bit of AJAX in these form-based web apps and, to get that, you’ll typically grab a DOM element and manually shove in a bunch of jQuery when needed, including direct commands and event callbacks. This process can work, but the more AJAX and client side stuff you add, the messier you can make things.

Then there is a class of web apps which work as one-page apps, where all interaction and DOM changes happen on the fly, without moving from page to page. Data is sent to and requested from the server in the background. Think of how Gmail and Trello work.

For me, Ember.js is all about giving you the toolchain to provide those types of dynamic, one-page web app experiences. Ember.js is a full stack, client-side, JavaScript-based MVC framework. The main objects you’ll work with client-side in the browser include:

Routers, which match the requested URL to controllers. They also ensure that the client URL is updated to allow the user to bookmark the different states of your app.

Models, to define your business nouns and store/retrieve user data.

Controllers, which handle actions and pass model data to the views.

Views to connect user events like clicks and taps to controller actions.

Templates to describe the HTML on screen.

Some Notable Features

Bindings

If you’ve done AJAX work before, you might recognize that knowing what to update in the DOM can be a nightmare as the app state changes on a given page. Ember is particularly good at dealing with this, and as you build your HTML templates, the substitution hashes like {{ name }} for a person’s name not only are substituted for the real value on the first render, but everything is always kept up-to-date with an internal bindings system. This, combined with calculated attributes, really takes a lot of stress off the developer, in terms of keeping the app state in sync with the UI state.

Persistence

For actually persisting the data, there is the ember-data project which will let you connect and map your client-side Ember models to REST endpoints. If you are using Rails, there are a bunch of gems that can really help to simplify this while providing all the serialization and API endpoints you’ll need. For more info, see this article.

Sharp Edges

As of this writing, Ember itself is version 1.0.0-pre-4 and ember-data is officially considered alpha quality. There is an upcoming Ember Camp, which hopes to see continued progress towards an official 1.0 release. Keep an eye on the Ember blog for more info. I do believe things have settled down to a point where there is value for people who want to get started with Ember and get their hands dirty. As to “production ready” — well, that will greatly depend on the needs of your application and your comfort with working around some sharp edges.

I’ve been spec’ing out this app idea off and on for a few months. At first I was going to do it on the Mac, but, as time passed, I decided to make it a web app in the newer style instead. Not a “present form, hit submit, view results” kind of thing, but something that is always saving and receiving messages from the server — very dynamic.

I’m actually blessed that there are a number of great web tools, libraries, and frameworks to choose from these days. One great overview I read last night was Rich JavaScript Applications – the Seven Frameworks by Steven Sanderson. It does a great job listing and categorizing some of the more popular choices out there. New to me on the list was Meteor, and I consider its video a must-see.

I’m still getting my head around many of these things. My general battle plan is to continue reading and playing with the example code of my CoffeeScript book (which also has some basic jQuery and NodeJS stuff), and then work through some of the various implementations of TodoMVC to see what tech speaks to me.

TodoMVC is a project that offers the same Todo application implemented using MV* concepts in most of the popular JavaScript MV* frameworks of today. These frameworks include Backbone, Ember, AngularJS, and Spine, to name a few. TodoMVC offers a great way to see how different stacks approach the same problem.

Ace is a standalone code editor written in JavaScript. Our goal is to create a web-based code editor that matches and extends the features, usability, and performance of existing native editors such as TextMate, Vim, or Eclipse. It can be easily embedded in any web page and JavaScript application. Ace is developed as the primary editor for Cloud9 IDE and the successor of the Mozilla Skywriter (Bespin) Project.

ShareJS is an Operational Transform library for NodeJS & browsers. It lets you easily do live concurrent editing in your app.

While I personally have a lot of Rails experience, I’m not going to shy away from NodeJS and other solutions. I almost welcome the opportunity to try something new these days. I’m also very excited to see that the NodePhilly group has gotten off the ground — I hope to make the next meeting in September.