ryantk

Lessons learnt by a budding Software Engineer

[ryantk]

You might not need a javascript framework

I'm going to let you in on a pattern I've been using in my rails applications that is by no means new but I thought it was good enough to bring up in this age of mindboggling Javascript frameworks.

I will be using rails in my examples but the formula is so simple it can be applied to any "web app".

Priciples

1, Render your front end from the server as normal, your application should work 100% without JS enabled at this point. 2, Intercept form submit events using javascript and resubmit them using AJAX with a request type of 'script' 3, Handle 'script' type requests on the server, handle the request as you would a non-AJAX request, but instead of rendering a HTML view, render the JS that will manipulate the view and make it appear dynamic like an SPA.

Example

# app/views/users/index.html.erb <ul id="users"> <%= @users.each do |user| %> <%= render partial: 'users/single_user', user: user %> <% end %> </ul> <form id="newUser" action="/users" method="post"> Name: <input type="text" name="user_name"> <input type="submit"> </form> <script> $(document).ready(function() { $('form#newUser').submit(function(){ // resubmit as script type $.ajax({ type : $(this).attr('method'), dataType : 'script', data : $(this).serialize(), url : $(this).attr('action') }); }); }); </script> # app/views/users/_single_user.html.erb <li><%= user.name %></li> # app/controllers/users_controller.rb class UsersController def create # create a user as you normally would @user = the_created_user @users = all_users end end # app/views/users/create.js.erb $('ul#users).append('<%= escape_javascript(render partial: 'users/single_user', user: @user) %>'); # app/views/users/create.html.erb <h1>Successfully created user!</h1> <%= render template: 'users/index' %>

[ryantk]

Sharing your localhost with ngrok

Have you ever wanted to show a teammate a cool thing you are working on locally, or test out your code on a mobile device?

There are a few tools to help you do this, my favourite is ngrok.

Installation

Installation is easy as there are no runtime dependencies you need to have in order to run ngrok. Simply download the .zip file and place the binary in your $PATH.

Using ngrok

Simply run ngrok http 3000 (3000 here is my exaple of a rails server, this is the port you wish to forward)

You will now see the ngrok overview, here you can see your link and monitor connections to your localhost.

Try it out, and have fun!

[ryantk]

Functions, a love story

[ryantk]

Fix your brittle tests by testing the outcome, not the implementation

As a developer relatively inexperienced with TDD/BDD I find myself in a pickle when tests I have written only yesterday start failing when I add new features.

Most of the time this is because I have been testing the wrong things in my code.

Example:

Feature: "User can create an Account"

Success Criteria:

Account has start_date set

Account has end_date set

Account has user_id set the the User's id

My previous (naive) aproach to testing

describe CreateAccount describe '.for_user' do it 'sets all the feilds correctly' do Account.expects(:create).with( start_date: start, end_date: end, user_id: user.id ) user = stub(id: 1) CreateAccount.for_user(user, start, end) end end end

The problem works fine for this specific feature, but what happens when an Account needs more fields to be set, for instance a Property's id? I can update the .for_user method but then my above test will fail as a new field is being set that wasnt expected. I can add this new expectation, but I will have to do this every time! This is clearly not scalable.

A better aproach

class Account def valid? user_id && property_id && start && end end end describe CreateAccount describe '.for_user' do it 'creates a valid Account' do user = stub(id: 1) property = stub(id: 2) account = CreateAccount.for_user(user, property, start, end) expect(account).to be_valid end end end

Now I can add as many fields as is required and not have to change my tests.

[ryantk]

Angular: Validation for forms in ng-repeat

The following code example shows a form which has dynamically generated forms which can be independantly validated, and an outer form which contains each subform which can be validated based on it's inner forms.

<form name="outerForm"> <div ng-repeat="user in users"><!-- our iteration --> <ng-form="form"><!-- new inner form for this iteration --> <input name="name" ng-model="user.name" required> <input name="name" ng-model="user.email" required> <p ng-show="form.$invalid"> This user is invalid! </p> </ng-form> </div> <p ng-show="outerForm.$invalid"> I will show if ANY of the inner forms are invalid. </p> </form>

[ryantk]

Persistant todo list in 58 characters

Here is a really short todo list in ruby (74 characters):

t=[];loop{print"> ";x=gets.chomp;break if x=='q';t<<x;print"\ntodo: ";p t}

Here is a version which speaks the todo list to you! (120 characters):

def s x;system("say #{x}");end;t=[];loop{print"> ";x=gets.chomp;break if x=='q';t<<x;print"\ntodo: ";p t;t.each{|y|s y}}

Here is a version which persists the todo list to a file (102 characters):

t=[];loop{$><<"> ";x=gets.chomp;break if x=='q';t<<x;$><<"\ntodo: ";p t;system("echo #{x} >> todo")}

EDIT: With a bit of jiggling around, I managed to get it down to 68 (64 if i forgoe printing the final list) and still persisting the todo list:

t=[];$<.map{|l|l.strip!;break if l=='q';t<<l;`echo #{l} >>todo`};p t

EDIT EDIT: cutting out the array (I'm persisting each time anyways) and removing unnecessary spacing around the echo saves me some more characters, I'm down to 58 now!

$<.map{|l|l.strip!;break if l=='q';t<<l;`echo #{l}>>todo`}

[ryantk]

Ways to call a method on each element of an array in Ruby

You will be familiar with this pattern in ruby:

doubles = [1, 2, 3].map {|i| i * 2 } # => [2, 4, 6]

Or if you want to call a method on each

def double(x) x * 2 end doubles = [1, 2, 3].map {|i| double i } # => [2, 4, 6]

Or you can use this lesser known feature

def double(x) x * 2 end doubles = [1, 2, 3].map(&method(:double)) # => [2, 4, 6]

Which calls the specified method passing in each element of the array in turn, rather than ON the element like this

strings = [1, 2, 3].map(&:to_s) # => ["1", "2", "3"]

Which is essentially

strings = [1, 2, 3].map {|i| i.to_s } # => ["1", "2", "3"]

[ryantk]

Ruby's module_function

Problem:

You have a module of utility methods of which you only use a handful and only in your private methods. The utiltiy methods are polluting your class namespace and you are losing sleep and pulling your hair out at an alarming rate.

"Not as good" solution:

module UrlThingies def self.query_parts(url) # do thingies end private def query_parts(url) self.class.query_parts(url) end end

Now you can access your methods at both a module and instance level, but now you have to replicate every method you write twice and your therapist is concerned with your progress.

Introducing 'module_function'

module UrlThingies module_function def query_parts(url) raise "Clever Cloggs Alert" end end

With that one line of code you have both a module and instance level version of the following methods - plus! the instance methods are considered private, so your class API is left unscaved.

Phew that was a close one!

[ryantk]

"Tell, don't ask" and Controllers

Check out these easy to make refactorings and keep your domain logic out of the framework!

The code example is in Rails but the idea is framework agnostic.

Standard Rails controller:

class UserController < ApplicationController def create @user = User.new(new_user_params) if @user.save redirect_to @user, :notice => "Welcome!" else render :new end end end

Becomes

class UserCreator attr_reader :listener def initialize(listener) @listener = listener end def create_for(user_attributes) user = User.new(user_attributes) if user.save listener.user_creation_succeeded(user) else listener.user_creation_failed(user) end end end class UserController < ApplicationController def create user_creator = UserCreator.new(self) user_creator.create_for(new_user_params) end def user_creation_succeeded(user) @user = user redirect_to @user, :notice => "Welcome!" end def user_creation_failed(user) render :new end end

Or how about compose functionality together using the decorator pattern?

class UserEmailer attr_reader :next_listener def initialize(next_listener) @next_listener = next_listener end def user_creation_succeeded(user) next_listener.user_creation_succeeded(user) send_welcome_email(user) end def user_creation_failed(user) next_listener.user_creation_failed(user) # emailer doesn't care end def send_welcome_email(user) # etc end end class UserController < ApplicationController def create user_creator = UserCreator.new(UserEmailer.new(self)) user_creator.create_for(new_user_params) end def user_creation_succeeded(user) @user = user redirect_to @user, :notice => "Welcome!" end def user_creation_failed(user) render :new end end

[ryantk]

Setting up my dev environment on OSX

Install iTerm2

Install homebrew

Install oh-my-zsh

Install syntax-highliting for zsh : https://github.com/zsh-users/zsh-syntax-highlighting

Setup my .vimrc

Install pathogen for vim

Install solarized color scheme

Install ruby with brew

Install rails gem etc

...

Profit!