Library Vs. Framework

OK… lets talk, I feel as a new developer this concept is a little weird to wrap your head around…. at-least for me I know it is. Library vs Framework? Whats the difference? and how can you go about leveraging these to create awesome projects.

Flow

Before we can dig into these concepts of framework and library we need to talk technicalities… Inversion of Control(IoC). IoC is what differentiates these two from another, and how we can identify them. So what is IoC? Well this is where flow comes into play..for comparison when we use a library, we are in control of the flow of our application and decided when and when to execute our code. Unlike a Framework where you may write your code but ultimately the framework decides the flow and when to run your code.

Library(React.js)

Now that we understand the technicalities, lets look at examples of both; and whats a more powerful example then React. React is an open source front-end JavaScript library that is used for building user interface or UI components. -Wikipedia

A typical React component…

class HelloMessage extends React.Component {
  render() {
    return (
      <div>
        Hello {this.props.name}
      </div>
    );
  }
}

ReactDOM.render(
  <HelloMessage name="Taylor" />,
  document.getElementById('hello-example')
);
source: https://reactjs.org

React uses something called a render() method to take what input is given and have it returned. Typically done thru JSX syntax, we can access information thru render() by useing this.props. As we can see in the above example, the return is calling on this.props.name which is returning name which is being access thru our name prop. In this example we would receive the following output…

Hello Taylor

Because this is library we are controlling the flow and executing our code how we want.

Framework(Ruby on Rails)

Ruby on Rails (RoR) is a sever-side web application framework that utilizes the model-view-controller(MVC) framework providing a default strcuture for a database, web service and web pages.-Wikipedia

A typical RoR MVC…

Model:

class Book < ActiveRecord::Base
belongs_to :user
belongs_to :category
has_many :reviews
has_attached_file :book_img, :styles => { :book_index => "250x350>", :book_show => "325x475>" }, :default_url => "/images/:style/missing.png"
validates_attachment_content_type :book_img, :content_type => /\Aimage\/.*\Z/
end

View:

<h1 class="current-category"><%= params[:category] %></h1>
<% if @books.count == 0 %>
<h1>There are no books currently in this category</h1>
<% else %>
<div class="row">
<% @books.each do |book| %>
   <div class="col-md-3">
    <a href="/books/<%= book.id %>">
    <%= image_tag book.book_img.url(:book_index), class: "book" %>
    </a>
   </div>
  <% end %>
 </div>
<% end %>
<%= link_to "Add Book", new_book_path %>

Controller:

class BooksController < ApplicationController
before_action :find_book, only: [:show, :edit, :update, :destroy]
before_action :authenticate_user!, only: [:new, :edit]
def index
if params[:category].blank?
@books = Book.all.order("created_at DESC")
else
@category_id = Category.find_by(name: params[:category]).id
@books = Book.where(:category_id => @category_id).order("created_at DESC")
end
end
def show
if @book.reviews.blank?
@average_review = 0
else
@average_review = @book.reviews.average(:rating).round(2)
end
end
def new
@book = current_user.books.build
@categories = Category.all.map{ |c| [c.name, c.id] }
end
def create
@book = current_user.books.build(book_params)
@book.category_id = params[:category_id]
if @book.save
redirect_to root_path
else
render 'new'
end
end
......

This MVC framework gives the instruction on how to organize and run our code. This type of structure is obviously a little more restrictive and requires to meet certain conditions in order to run our code. Example, the MVC model relies on all of these to be associated with each other or other models in order to respond correctly or provide output.

Thanks for reading!