Lessons in Web Development @jenniferchenio-blog - Tumblr Blog

Rails Meets Backbone

As client-side applications have become more and more popular, so have client-side frameworks such as Backbone, Ember, and Angular. While Rails is great for traditional applications, where the majority of the work is done on the server, it does not provide many tools for developing dynamic single-page applications.

At first glance, it may seem a little redundant to use a back-end framework like Rails concurrently with a front-end framework like Backbone, since both follow the MV* pattern. In reality, the two actually have completely different responsibilities that do not conflict with each other.

In a nutshell, when used together, the back-end framework helps manage interactions with the database while the front-end framework helps manage interactions with the user.

I created the diagram above to give a high-level overview of how Rails and Backbone are able to work well together. The left-hand side is the server-side and the right-hand side is the client-side.

Going from right to left:

When a user interacts with the webpage, the client-side router calls the model or collection to fetch data from the server. On the server, the router determines which controller method should handle the request, and the controller method then creates a model, which is responsible for querying the database. The model then passes the data back to the controller, which renders it in an easily-parse-able format. The server-side router passes the response back to the client-side model, which is then fed into a view. The view uses this data to fill in the template, and renders the resulting html back to the client-side router. The html is then inserted into the correct section of the webpage without the page ever needing to reload completely.

#ruby on rails #backbone #web development #mvc

Syncing Up with Asynchronous Javascript

In a traditional web application, each time the client makes a request to the server, the server re-renders the page. In an asynchronous web application, the server renders the page once, and interactions between the client and the server take place in the background. Sections of the page are then updated as needed without reloading the entire page. Ajax (asynchronous JavaScript and XML) is a technique that allows us to make asynchronous requests.

JQuery provides the ajax method, which takes an object with parameters for the request. Here is a simple example for adding a new user to the database:

$.ajax({ url: "/users.json", type: "POST", data: { name: "Jennifer Chen", email: "[email protected]" }, success: function (result_data) { console.log(result_data); } });

Url and type correspond to the RESTful api. Data contains the user attributes. Success passes the response from the server to a callback function, which is called if the post request was successfully processed.

#ajax #jquery #javascript

Drawing with Canvas

Canvas is a built-in HTML5 element used for drawing graphics. It's great for charts, diagrams, and games.

To use canvas, we simply include the canvas tag in our HTML file, specifying the dimensions of the canvas area:

<canvas width="500" height="500"></canvas> <script src = "circle.js"></script> <script> var canvas = document.getElementsByTagName("canvas")[0]; var circle = new Circle(100, 100, 10); circle.render(canvas); </script>

In order to draw shapes, we must use Javascript. Here is what our circle.js file might include:

var Circle = function(x, y, radius) { this.x = x; this.y = y; this.radius = radius; }; Circle.prototype.render = function(canvas) { this.context = canvas.getContext("2d"); this.context.clearRect(0, 0, 500, 500); context.fillStyle = this.color; context.beginPath(); context.arc(this.x, this.y, this.radius, 0, 2 * Math.PI, false); context.fill(); };

We define the circle's position and radius in the constructor, then draw it in Circle#render. Calling the getContext method on the canvas DOM element gives us a 2D drawing context with methods that allow us to draw and color various shapes.

Here is a fantastic guide on how to use Canvas.

#canvas #graphics #web development

This Is Not What You Think It Is

In Javascript, this is a special variable that refers to the object a method is called on.

Consider the following constructor for the Course class, which creates a new object and sets the initial values for its "name" and "students" instance variables:

function Course (name) { this.name = name; this.students = []; }

Say that we wanted to add an enrollStudents method to Course, the implementation below seems like it should work:

Course.prototype.enrollStudents = function(students) { students.forEach(function(student) { this.students.push(student); }); return this.students; };

Since we are defining a method on the Course prototype, it would be natural to assume that this would refer to the course object. Unfortunately, what this refers to is dependent on the scope we are in. Here, because this.students.push(student) is called within the anonymous callback function passed to students.forEach(), this actually refers to the default global object, which is a special object that contains all of the global functions and constants.

The correct way to implement this method would be:

Course.prototype.enrollStudents = function(students) { var course = this; students.forEach(function(student) { course.students.push(student); }); return this.students; };

By capturing the course object in a local variable "course" we are now able to access it within the callback function.

#javascript #callbacks #this

Anatomy of a Rails App

Based on my experience, the three main benefits of Ruby on Rails are:

ActiveRecord, which abstracts away interactions with the database, facilitating quick implementation of MVC

The community and the variety of gems out there available for use

The convention over configuration philosophy that creates standards everyone must follow, making it easy to pick up an application and know exactly what you’re looking at

To elaborate more on the third point:

When we start a rails project using the command “rails new”, these folders are automatically created for us:

app - models, controllers, views, helpers, javascript

bin - scripts that start the application

config - environment settings (most importantly, the routes.rb file)

db - database schema and migrations

ib - code that we control that is reusable outside of the project

log - log files for development, test, and production

public - static files

test - tests if using Test::Unit library

tmp - temporary cached files

vendor - third party code that we do not control

The root directory also contains the Gemfile, where we specify the gems we need to include.

Almost all rails applications are structured this way and the vast majority of a developer’s time is spent in the /app folder.

#ruby on rails #mvc #web development

Not So Regular Expressions

Regular expressions are funny-looking groups of characters that are essentially templates which strings are compared against. While they look anything but regular, these expressions are very powerful for parsing data.

Here is a cheat-sheet of the most commonly used regular expression symbols:

. any character \. . \d any digit \D any non-digit character \s any whitespace character \S any non-whitespace character \w any alphanumeric character \W any non-alphanumeric character [abc] a, b, or c [^abc] not a, b, or c [a-z] letters a to z [0-9] numbers 0 to 9 {x} x times {x, y} x to y times a* 0 or more "a"s a+ 1 or more "a"s ? optional ^ beginning anchor $ ending anchor ( ) capture group a|b match a or b \ escape special character ?<name> capture name

In Ruby, a regex is denoted by two forward-slash symbols / /, much like how a string is denoted by pairs of quotes ' ' or " ". Regular expressions are often used with the String#match method, which returns a MatchData object.

Here is an example of how we might use regex to parse a url. The regex is a little complex, but see if you can figure out what it does.

url = "http://mywebsite.com/user/2?post=35" match_data = url.match(/^(?<scheme>http|https):\/\/(?<host>\w+\.\w+):?(?<port>\d{2,4})?\/(?<path>[^?]*)\??(?<query_string>.+)?\.?(?<format>.+)?$/) > #<MatchData "http://mywebsite.com/user/2?post=35" scheme:"http" host:"mywebsite.com" port:"" path:"user/2" query_string:"post=35" format:nil>

Click here to see what methods you can call on the MatchData object.

#regex #regular expressions #ruby

Creating Associated Objects with Nested Forms

In rails, when we want to obtain user input to create associated objects together, we can use nested forms.

If I have a User model and a PhoneNum model, and each user has many phone numbers, I could use the form below to create a user and up to two phone numbers at the same time:

<form action="<%= users_url %>" method="post"> <label> Email<input type="text" name="user[email]"> </label> <label> Password<input type="password" name="user[password]"> </label> <label> Phone Number 1<input type="text" name="phone_num[1][num]"> </label> <label> Phone Number 1 Type<input type="text" name="phone_num[1][type]"> </label> <label> Phone Number 2<input type="text" name="phone_num[2][num]"> </label> <label> Phone Number 2 Type<input type="text" name="phone_num[2][type]"> </label> <input type="submit" value="Create User"> </form>

Note that the “name” attribute for phone number input fields have an extra bracket (e.g. “[1]”). When the form is submitted, the params hash will contain something like: {“phone_num” => {“1” => {“num” =>1234567890, “type” => “home”}, “2” => {“num” =>1111111111, “type” => “cell”}}}

In the UsersController, we use a helper method to filter the parameters, permitting an array of phone number hashes, each containing a num and a type:

def phone_num_params params.permit(:phone_num => [:num, :type]) .require(:phone_num) .values .reject { |data| data.values.all?(&:blank?) } end

Then, in the create action, we use user’s association (i.e. @user.phone_nums) to create new phone numbers. @user.phone_nums.new will automatically fill in the phone number’s foreign key (i.e. user_id) with the user’s id.

def create @user = User.new(user_params) @user.phone_nums.new(phone_num_params) if @user.save redirect_to user_url(@user) else flash.now[:errors] = @user.errors.full_messages render :new end end

#forms #html #ruby on rails #erb

Cryptic Passwords with BCrypt

It is a cardinal rule in web development that user passwords should never, ever be saved in a database. Because users tend to use the same passwords for multiply services, a security breach could lead to major repercussion for users. if someone were to hack into the database, they could potentially use the password to get into the users' email and bank accounts.

Most websites solve this problem by storing a password hash instead of the password itself. A hash function involves a series of transformations that are hard to reverse engineer. When a user sets a password, the website runs the password string through an encryption mechanism and stores the resulting password hash in the database. The next time the user tries to log in, the website can perform the same encryption method on the given password string and check to see that the resulting hash is the same as the password hash stored in the database. Even if someone were to hack into the database and obtain the password hashes, it would be near impossible for them to deduce what the passwords are.

BCrypt is a Ruby gem for encryption. To hash a password, use BCrypt::Password#create:

password_hash = BCrypt::Password.create("supersecretpassword") > "$2a$10$8haAfQb4vqxLcxHv3Kjwdu.JnWob3QfB1SHwVN4i0IQ/SY24Qb3y."

To check a password, use BCrypt::Password#new on the password_hash to create a new BCrypt object, then call the #is_password? method on the object, passing in the string to be checked:

BCrypt::Password.new(password_hash).is_password?("supersecretpassword") > true

#bcrypt #password #encryption #hash

Better Errors with Better Errors

It's common knowledge in programming that usually, 10% of a developer's time is spent generating code, and 90% of time is spent debugging. When programming in Ruby, pry is a useful tool which enhances console output to make debugging easier. There is also a pry-rails gem that does this for the Rails console. However, when building applications, pry is only useful for the model layer. When the issue lies in the controller, we are left sifting through the server logs to identify the problem.

Better errors is a ruby gem that helps us debug controllers. It consists of an enhanced console that shows up in the browser when an error arises as we test the application. We can run commands directly in the console to examine the state the application was in when the error occurred. If no error is thrown, but the application is not behaving the way way we expected it to, we could also insert the fail keyword in the controller method, which invokes the better errors console when that line is evaluated.

To use better errors, just include the 'better_errors' and 'binding_of_caller' gems in your rails application's Gemfile. (better_errors is dependent on the binding_of_caller gem) Note that for security reasons, we should only include the better errors gem in the development group in the Gemfile.

#debugging #ruby on rails #better errors #pry

Rails Routes

The config/routes.rb file in a rails application is responsible for directing a user's request to the correct controller method. After creating a new resource and adding it to the routes file, we can run rake routes to see a list of routes Rails has generated for us. Here is what it looks like:

Prefix Verb URI Pattern Controller#Action users GET /users(.:format) users#index POST /users(.:format) users#create new_user GET /users/new(.:format) users#new edit_user GET /users/:id/edit(.:format) users#edit user GET /users/:id(.:format) users#show PATCH /users/:id(.:format) users#update PUT /users/:id(.:format) users#update DELETE /users/:id(.:format) users#destroy

Prefix refers to the path name, which we can use within our controller to refer to the page (ex. users_path gives the path /users and users_path_url gives the full url). Verb refers to the http request method. URI Pattern refers to the URL path. (.:format) refers to the format of the returned file, which is usually .html or .json. Controller#Action refers to the method in the resource controller.

For example, if someone made a POST request to "http://www.mywebsite.com/users", rails would call the create method in my UsersController file to create a new user based on the information in the body of the request. If he/she made a GET request to "http://www.mywebsite.com/users/1", rails would call the show method in my UsersController file to render the information for the user with id 1.

Here is a list of the actions and what they are responsible for:

Index - list all users

Create - create a new user

New - obtain information to create a new user

Edit - obtain information to edit an existing user

Show - show a user's information

Update - edit an existing user

Destroy - delete an existing user

#ruby on rails #routes #web development

OAuth

OAuth is a popular system for authenticating users. Here is how it works:

The client application registers with the service (Facebook, Twitter, etc.)

The service issues the client a set of keys ("client key' and "client secret")

The user is directed to an url hosted by the service to approve the client request

The client is given an access token to make API requests to the service on behalf of the user

The benefit of OAuth is that the user only needs to provide his/her password to the service and he/she has control over what the client is permitted to do.

#oauth #authentication #web security

Metaprogramming with define_method

Metaprogramming is the act of writing programs that write other programs. When we need to create methods for different classes that are similar in nature, we could practice metaprogramming by using define_method to generate custom methods dynamically.

Here is an example:

class Animal def self.say_hello(sound) define_method(sound) { |times| puts "#{sound}" * times } end end class Cat < Animal say_hello("meow") end class Dog < Animal say_hello("woof") end c = Cat.new c.meow(3) > meowmeowmeow d = Dog.new d.woof(2) > woofwoof

There you go. Happy metaprogramming!

#metaprogramming #ruby

Lights, Camera, Active Record

Active Record provides a layer of abstraction that allows us to interact with a database without using raw SQL statements. The Active Record Query Interface includes a collection of methods that build SQL queries for us behind the scenes. Here is a list of the some of the commonly used methods that correspond to well-known SQL keywords. These methods can be called on any model class that inherits from ActiveRecord::Base. They can be used separately or chained together.

.joins

.group

.having

.order

.where

.select

.distinct

.limit

A few other useful methods:

.find_by

.first

.last

.includes

For more complex queries, we can use the .find_by_sql method, passing it a SQL string.

http://guides.rubyonrails.org/active_record_querying.html is a great resource with more details on how to use these methods.

#activerecord #Ruby #SQL

The Class With the Foreign Key Always Belongs

When declaring an association between two ActiveRecord models, we must identify the nature of the relationship as well as the foreign and primary keys. Take the example below. In the migration file, I created two tables, employees and companies.

class CreateTables < ActiveRecord::Migration def change create_table :employees do |t| t.string :first_name t.string :last_name t.integer :company_id end create_table :companies do |t| t.string :name t.string :address end end end

Assuming each employee could only work for one company, I created a column in the employees table that holds a foreign key to the companies table. Company_id references the id column in the companies table, which is automatically generated. I define the relationship between employees and companies in the class definitions below.

class Employee < ActiveRecord::Base belongs_to( :company, :class_name => "Company", :foreign_key => company_id, :primary_key => id ) end class Company < ActiveRecord::Base has_many( :employees, :class_name => "Employee", :foreign_key => company_id, :primary_key => id ) end

An employee belongs to a company, and a company has many employees. The foreign key for this association is company_id, which sits in the employees table. The primary key is the id column in the companies table. By definition, the class that corresponds to the table that holds the foreign key is always on the belongs to end of the relationship. This makes sense because for each row in the employees table, there could only be one foreign key. On the other hand, there could be multiple rows that have the same foreign key value.

Let's say, for argument's sake, that we want each employee to work for multiple company and each company to have only one employee, we would have an employee_id foreign key in the companies table instead of a company_id in the employees table.

#activerecord #ruby on rails #belongs_to #has_many

SQL Sequel: SQLite3

SQLite3 is a simple, light-weight implementation of SQL that is often used in development.

We can create tables by saving the create table SQL commands in a .sql file, piping it into the SQLite3 interpreter, saving it to a database, like so:

$ cat create_tables.sql | sqlite3 my_db.db

Example code for create_tables.sql:

CREATE TABLE items ( id INTEGER PRIMARY KEY, name VARCHAR(255) NOT NULL ); INSERT INTO items (name) VALUES ('thing'), ('another thing');

We can then use the SQLite3 Ruby gem to access the data in our database and create objects. The Singleton gem allows us to ensure that there is only one connection to the database.

class MyDatabase < SQLite3::Database include Singleton def initialize super('my_db.db') self.results_as_hash = true self.type_translation = true end end class Item def self.all results = MyDatabase.instance.execute('SELECT * FROM items') results.map { |result| Item.new(result) } end def initialize(options = {}) @id = options['id'] @name = options['name'] end end

#SQLite3 #SQL #Ruby

SQL 101

Standard Query Language (SQL) is by and large the most widely used query language for obtaining data from relational databases.

Here are the main query clauses and what each does:

SELECT

specify which columns to include in the query's result set

FROM

specify tables from which to draw data and how the tables should be joined

WHERE

identify which rows to filter out

GROUP BY

group rows together by common column values

HAVING

filter out unwanted groups

ORDER BY

sort rows of final result by one or more columns

Queries are generally some combination of two or more of the above clauses. Aside from SELECT, we can also INSERT, UPDATE, and DELETE rows in a table.

The best way to learn SQL is to experiment with different queries to see what they do. SQLZoo is a pretty good site with useful exercises.

#SQL #app academy

Respect for RSpec

RSpec is a popular testing library for Ruby. It has its own domain-specific language that make for tests that read almost like English.

In RSpec, each test sits within an "it" block and tests are organized into "describe" blocks. Within the "it" block, an expectation is specified. Here is the general syntax:

describe Class do subject(:object) { Class.new } describe('#method') do it "does something" do expect(object.method).to eq(value) end end end

RSpec contains an extensive list of expectation matchers as well as a "mocks" library that allows us to create dummy objects for testing purposes.

Not everyone subscribes to the Test-Driven Development (TDD) approach, but I definitely see the benefits of explicitly defining specific functionality before execution and having an automated way to test existing code as changes and updates are made.

#rspec #tdd #ruby #app academy

Trending Blogs

Recently Viewed Blogs

Lessons in Web Development