Back To Basics

back2basicsI just finished an insane release where we worked crazy hours for the span of about 6 months.  I had a good idea to improve the productivity of creating hundreds of diverse web form UI screens, and my team was given the challenge of implementing it in less than 6 months.  It became my sole focus at work, and sucked up pretty much all of my free non-family time; time I typically spend reading, writing, and growing in my profession and health.

So now I have an opportunity to refocus.  To retrieve that time and to use it wisely.

Here’s my plan:

Write every day. 

I don’t mean blog posts.  Just write. I have a lot of things to say, but I don’t write it down because it takes time to organize my thoughts.  I want to say things that are easy to understand and relevant.  Problem is this takes time for me.  Time is precious with a demanding job and a large family.  So my new strategy is this: Just pour out 1000 words a day.  It doesn’t have to be pretty.  It doesn’t have to be great.  It just has to be 1000.  My theory is that over time organizing and writing coherent things will get easier.  I’ve heard that you need 10,000 hours of doing something to become proficient at it.  I think this is also true for writing.

Return to what I want to stake my career on

The craziness of this last software release got me away from the things I that I want to focus on, that I know will have a beneficial long term benefit to my company and my career.
TDD – It works.  I feel good about my code output when I use it.  I want to pass it on to my teams.
Mentoring – Its the only way I know to change the culture around here.  We have young talented developers entering this company that are learning from the anti-patterns common in our legacy apps.  This is bad for the company and bad for them.
Innovation – Innovation requires time to think, and time to try stuff.  If you are always swallowed up in “emergencies”, then it won’t happen.

Exercise

Exercise is another thing I cut out during this run.  This is not just for my health.  I do my best thinking and have my best ideas while I’m exercising.  I must be the extra oxygen flowing through my head.  If I’m really going to write each night, this should go hand in hand.

Stay up to Date

Reading and trying new technologies give me inspiration.  This inspiration feeds back into my day job big time.  Learning what technologies and patterns working for others in the industry helps me to make decisions for my own projects, and its just plain fun to geek out on.  It feeds back into how I do my job and what I write about.

So that’s my goal: Every day spend some time writing, reading, and exercising essentially.  The key will be balancing my time, not only between work and life, but also between urgent daily job stuff and forward thinking.  I need to do this, not only for my career, but also for my sanity!!!

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…