Detour!

detourA few months back I described my plan to explore various single page javascript web libraries during my free time. In case you were wondering what happened with it, I got through angular and was working through Ember when I got a particularly interesting challenge from my day job around dynamically generating UIs based on specification. I’d like to share the details and maybe even open source the concept, but I need to do a little digging on what my company would be ok with me sharing. I still plan to pick back up with web framework exploration then my current work gets off the ground, so stay tuned for interesting stuff to come;-)

Angular: Initial Thoughts

So I’ve embarked on some “spare time” in playing with and analyzing some of the popular single-page web frameworks out there.  This past month I’ve been playing with angular.  There’s a lot to this framework, so I’ll use this post to give an an overview on what I tried and share some initial thoughts.

What I did…

Starting from the angular seed app, I created an extremely simple app that combined a grid and a form.  Below is a screenshot.  I used bootstrap for a basic screen setup and style.  For the grid, I used ng-grid from the angular ui suite project.  For the form I just used some basic angular forms and validation.

SampleAngular

A nice way of doing MVC

Angular views are completely declarative, defined in html.  Because of this, the angular controllers have no direct dependencies on their views.  This is a welcome difference from the MVP pattern we’ve used in GWT, where the presenter layer acts as glue between model and view and references to both.  Angular makes unit test more straightforward because of this.

Its Nicely Declarative with HTML

In Angular you lay out complex widgets on your screen in html as opposed to programmatically adding things to the DOM.  This allows for a more visual view of how the screen is laid out, as well as cuts down on the amount of code you have to write to do so.  Also, since your layout is html, its easy to supply your favorite complementary CSS technology, such as Less or Sass.  In my example I used bootstrap to define the screens with no problem.

More importantly, if you have a UX design team that works with programmers to create web applications, it creates a really clean separation between markup and code, allowing UX to contribute directly to great screen designs in technologies they are familiar with.

The Model is automatically wired in

Angular widgets allow you to specify a model object, which can be any javascript object set within the scope.  Any changes to the model get automatically updated in the DOM, and vice-versa, without the developer explicitly coding observer patterns.

For example, take ng-grid used in the example the data grid is configured by creating a gridOptions object, which takes a model and selections array.  Any update to these arrays results and updates to the UI:

app.controller('MyCtrl1', ['$scope',function(sc) {
sc.mySelections = [];

sc.myData = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}];

sc.gridOptions = {
data: 'myData',
columnDefs: [{field:'name',displayName:'Name'},{field:'age',displayName:'Age'}],
jqueryUIDraggable: true,
selectedItems: sc.mySelections,
multiSelect: false

};
…
}]);

In the html you simply supply the name of the gridOptions object:

<div class="gridStyle" ng-grid="gridOptions"/>

 

The form elements in the example also make use of the mySelections object, so that any update in the field gets updated in the model (and vice-versa):

<input type="text" class="form-control" id="name" ng-model="mySelections[0].name" placeholder="Enter Name"/>

It has a mechanism to create new reusable assets

A major requirement for web frameworks is the ability to create reusable assets.  When you develop for multiple complex apps over a similar domain, there tends to be overlap in complex widgets.  Angular allows you to create reusable assets as DOM elements through its concept of “directives”.  Its a nice way to define reuse assets, making it easy for people to use in various apps.  All you have to do is import the component and drop it into html.

Providing a clean reuse mechanism is a big deal for shops that use the same technology over multiple projects.  Check out more on how to do directives here: http://docs.angularjs.org/guide/directive

Awesome Automated Test Capability

Angular is well suited for test because of its separation of view from controller, and its use of dependency injection. It integrates well with Karma, a web application test harness.  Karma essentially spawns a web server.  When you point your supported browsers at the web application (or tell Karma to start them), your tests get executed and reported.  You can also tell it to run whenever files are saved.  Here’s a nice, in depth article on testing with angular: http://www.yearofmoo.com/2013/01/full-spectrum-testing-with-angularjs-and-karma.html.  Combined with a behavior driven technology such as Jasmine or Mocha and Chai creates a readable and effective test solution.

So that’s Angular.  I like it, and I easily can see why its quickly gaining popularity. While in my current job I use some of angular’s patterns in my current GWT code, such as dependency injection and declarative views, I really like the way its done in Angular, especially the auto-wiring around the model.  I’m inspired to start playing in my “day” job to replicate some of the slickness.   I also really like the unit test harness and look forward to using it more.

Next up, Ember.

6 Web Frameworks in 6 Months

In an effort to keep up with the explosion of browser-side single-page web technologies in recent years,  I’m starting a side exercise to understand the differences in approaches of each.

The plan:
Create a simple web program that produces a page that we commonly use at work:
A side by side Grid/form combination, that loads data from a web service.  I’ll use whatever web service technology is complimentary to the technology.
It’ll look something like this…
Image

The Technologies:

  • March: angular (I’ve been hearing about angular the most of late – I figured this would be a good leadoff)
  • April: ember
  • May: hoplon or pedestal (Whatever the clojurescript community is gravitating to more come May)
  • June: dart
  • July: meteor
  • August: gwt (I know, I already work in this, but I figured I’d have some new ideas in it by the time I get through all these.  Also my hope is that it will have lambda support to try)

I’ll try to use the most appropriate web service layer for the task.  Some of the libraries above come with a web service technology, others I’ll use what seems to fit (angular->node)

The plan is to take notes and blog what I find, with the hope that others will find it of some use.

Going Back…To the Future!

BackToTheFutureDeloreanIncluded in my goals for the year is to explore a new programming language, as well as start becoming involved in open source.  I’ve looked around a bit and decided I’d really like to give Clojure a closer look.  I’m a bit fascinated by functional programming lately, and Clojure seems like a good place for me to start, since it is developed on the JVM, plus ClojureScript is compiled in to javascript – both spaces I’ve been working in for a while.  Also, it seems that Clojure is gaining some traction and popularity both locally and with some folks I respect.

For those that don’t know much about Clojure, its a Lisp dialect – Lisp being a program language that’s been around for over 50 years.  It seems the defacto development environment for Clojure (and other Lisps) is Emacs (as its Lisp based itself).  So anyways, on my own time, I’m taking up the emacs editor and starting some Clojure hacking (hence the time machine needed).   Since I’m a front end guy at heart, I’m looking at Pedestal – a new open source web app library built entirely in Clojure.

I’m excited about my dolorean trip.  I think it’ll do a few things for me…

  • Get me good enough at emacs to speed up my coding workflow
  • Infuse in me some functional thinking that will undoubtably help the java and javascript code I produce for my current job
  • Understand some of the ideas behind another web application library, and possibly feed back ideas in our current we app environment (and vice versa)
  • Learn Clojure!
  • Give back to open source (if I can get around my current company’s restrictions around it)
  • Be fun :-)

P.S.  I see there’s a Clojure/Pedestal meetup this month… I’ll see if I can show up and learn from/with some folks that have been soaking in clojure a while….

Getting in the zone

Where are you your most productive? I feel I get in my best flow in a public place with wifi and some headphones. That mix of background chatter and lack of interruption really does the trick. It seems like research backs me up on this. So the nice little trick I’ve been using these days is a website called Coffitivity. It simply simulates noise from a coffee shop. Pair this with music just slightly higher in volume and you are good to go!

(written with Coffitivity and Pandora in the background ;-)

My Google Reader Replacement: I’m digging The Old Reader

Ever since my heart was broken by Google, I’ve been looking for an alternative. I’ve tried a few, but I think I’m going to land on “The Old Reader” for a while. It has the features that Google had, plus it has social feature that google dumped, such as the ability to share posts and follow people. Anyways, just wondering if anyone else is using so I can play with some of the social features…

What I’m up to: February

catInBedSo its half way through the month of February and I wanted to get back posting to my external blog. One of my goals for this year is to get blogging externally, and that hasn’t quite happened yet, so I’m pushing myself to get off my rear to do so.

Asset Sharing

It’s been a productive year so far professionally I think.  One of the focuses of my spare time is to get a UI asset sharing platform off the ground at my work.  This has caused me to dive into customizing Jive to serve as a collaboration platform for UI developers looking to see what assets other teams are creating within the bank.  Many of us develop similar types of web applications and there is some degree of duplicated effort.  My thinking is a collaboration platform paired with distributed source control (Git), paired with a community that meets and discusses this stuff will go a long way.

Open Source

Another goal for me this year is to start contributing to open source.  I’ve been looking around a bit and am getting a feel for the areas that I want to invest.  Since I’ve been focusing on web development over the last decade or so, I figured I’d stick to that realm, but at the same time pick up a project that has a new language that would allow me to grow and stay current to where the industry is moving.  Two projects that look interesting are ClojureScript and CoffeeScript.  I’m fascinated a bit by functional programming and clojure seems like a good place start, while coffeescript intrigues me after programming in javascript for a while – seeing how working in a language that takes away much of the ugliness of javascript while keeping the good parts can change the experience.

Continued Learning

I continue to look to consume knowledge, to grow as a developer.  I’ve taken to listening to podcasts at night while I work out.  Some that I’ve really enjoyed include Relevance, FLOSS, Pragmatic Podcast, and Software Engineering Radio.  Its really interesting to hear about other technologies, as well as how others approach software development.

I feel like I have a lot going on and its a fun time to be a software developer.  Now I just need to bring myself to work out loud a bit more;-)