Web Development 101 – ODIN Project – 2

odinWeb Development Frameworks

You’ve probably heard about ‘Ruby on Rails‘ and ‘Backbone.js’ and other  development frameworks. In this section, you’ll learn what a framework is, why we use them.


Step 1: Introduction to Frameworks

If you’re programming with Ruby or any other language, you pretty much start with a blank text file and go from there. Programmers, the best of whom are pretty lazy folk, got tired of having to write the same code over and over and over again just to cover the basic tasks that they wanted their applications to perform. So they batched that recycled code together and called it a framework.

In addition to preventing repetition, frameworks provide great organization. They tend to force you to organize your files and code in a way that keeps it highly modular and really clean. When you start a new Rails application, you’re given dozens of folders already organized in a hierarchy which makes sense and follows good Model-View-Controller (MVC) separation principles.

There are often several different popular frameworks for a given language. They can have exciting names like Ember (http://emberjs.com/), Meteor (https://www.meteor.com/), Django (https://www.djangoproject.com/), Rails (http://rubyonrails.org/), Grok (http://grok.zope.org/), etc.  Wikipedia has a comprehensive comparison of frameworks (https://en.wikipedia.org/wiki/Comparison_of_web_application_frameworks) that should give you an appreciation for the number of them.  For Ruby alone, though Rails is the most popular, there is also Sinatra (http://www.sinatrarb.com/) and Padrino (http://padrinorb.com/) and more.

A final thing to note is about licensing.  Frameworks are typically (though not always) open-source and their license allows you to use them, modify them, make money off them, sell products with them etc. all without owing any fees to their original creators. You may not think too much about that as you blithely code away using other people’s frameworks, but it’s a very important distinction between open-source frameworks and commercially produced/sold software.

You’ll Need to Know:

  • What is a framework?
  • What’s the difference between a programming language and a framework?
  • What languages have frameworks?

Your Task

1. Read Get Started with Web Frameworks (http://www.webmonkey.com/2010/02/get_started_with_web_frameworks/)

2. Read An Introduction to Web Development Frameworks (http://www.crossbrowser.net/an-introduction-to-web-development-framework/)


Additional Resources


Step 2: Ruby on Rails Basics

You’ll learn the basics of the popular framework that has made thousands of programmers highly productive and happy.

You’re probably here because you want to learn the Ruby on Rails (http://rubyonrails.org/) framework but you may not be entirely sure what it is.  Well, Rails is just a bunch of Ruby code written to handle the parts of a web application that you don’t often want to think about.

Rails uses, as you’ll often hear, “convention over configuration”.  That means that the creators of Rails have made a lot of decisions for you about how things should be structured and how the code should run. You can change them, but it’s best if you just go with the flow and work within their rules.

As you saw in the introduction:

Why Rails? Why not. There are dozens of possible technologies out there to choose from and, frankly, they do pretty much the same things. Rails is attractive because it’s a relatively straightforward and very well documented framework that’s used by many great startups and tech companies today and it has a very strong community of developers and students who support it. It lets you put up a functioning website in hours not days or weeks. The “in” tech will probably be something completely different in a few years, as it always is, but Rails presents a great platform on which to build the skills you need to carry you to that next phase.

Because Rails has made a lot of decisions for you, you can work incredibly fast. You can have a website up on the internet (though it won’t look like much) within a couple minutes. The very first time you generate a new project, everything is in place so you just have to fire up your local server (by typing simply $ rails server) and you’ll already see the Rails welcome page up there. Then it’s just a matter of plugging in all the pieces you actually need to make your rich web application run.

It also means that you can start immediately making small changes and seeing how they affect your application where before you would have had to build a ton of infrastructure and write lots of code before seeing a single thing change live. Rails makes your life a whole lot easier!

Rails also firmly organizes your code using an MVC pattern.

The best way to understand Rails is to use it, so we’ll spend a bit of time on some videos and reading but you’ll mostly be building your own Rails sample app.  You may have no idea what you’re doing, and that’s okay, but at least you should begin to understand what you DON’T know and what you’ll want to pay attention to going forward. A good tactic is to write down all the things that confuse you and either go looking for them on your own or keep them in mind for later.

Points to Ponder

Look through these now and then use them to test yourself after doing the tasks

  • What is Rails?
  • What language is Rails written in?
  • Refresher: What are gems?
  • What are the seven gems that make up Rails?
  • What is the purpose of the gemfile?
  • What is the command to create a new Rails app from the command line?
  • How is a GET request different from a POST request?
  • What is REST?
  • What is a view?
  • What is a controller?
  • What is a model?

Tasks

  1. Watch this basic overview of Rails Ruby on Rails 3 – An Overview (https://www.youtube.com/watch?v=b_DJdmvBStE) from Michael Hartl. It will walk through the creation of a very basic web application.

Uploaded on 9 September 2010
This is a sample video from the LiveLessons Video Training product from Addison-Wesley.
2. Read Daniel Kehoe’s excellent What is Ruby on Rails? (https://railsapps.github.io/what-is-ruby-rails.html)

3. Go through the Learn Rails the Zombie Way tutorial (http://railsforzombies.org/) which lets you begin programming Rails right in your browser! It goes pretty quickly and you’ll probably need to re-watch the videos.

4. Watch the YouTube video Ruby on Rails: Understanding MVC architecture | lynda.com overview

https://www.youtube.com/watch?v=3mQjtk2YDkM

Uploaded on 25 October 2010
This Ruby on Rails overview explores the Model View Controller (MVC) architecture.

This tutorial is just a single movie from chapter one of the Ruby on Rails 3 Essential Training course presented by lynda.com author Kevin Skoglund. The complete Ruby on Rails 3 Essential Training course has a total duration of 12 hours and explores the fundamental and best practices for working with the Rails framework.

In Ruby on Rails 3 Essential Training, instructor Kevin Skoglund shows how to create full-featured, object-oriented web applications with the popular, open-source Ruby on Rails framework. This course explains the complete process – from the fundamental concepts and best practices behind the Rails framework, to how to build a complete application with dynamic, database-driven content. Using a content management system as an example project, this course explains how to structure databases, build database-driven, object-oriented models, route incoming requests, render pages with dynamic content, and to process and validate form data. Previous experience with Ruby is recommended, but not required. Exercise files accompany the course.

Topics include:

  • Understanding MVC (Model View Controller ) architecture
  • Routing browser requests through the framework
  • Responding to requests with dynamic content
  • Defining associations and database relationships
  • Creating, reading, updating and deleting records
  • Working with forms
  • Validating form data
  • Reviewing built-in security features
  • Authenticating users and managing user access
  • Debugging and error handling

Ruby on Rails 3 Essential Training table of contents:
Introduction
1. What is Ruby on Rails?
2. Installing Ruby and Rails on a Mac
3. Installing Ruby on Rails on a Windows Machine
4. Getting Started
5. Controllers, Views, and Dynamic Content
6. Databases and Migrations
7. Models, ActiveRecord, and ActiveRelation
8. Associations
9. Controllers and CRUD
10. Layouts, Partials, and View Helpers
11. Forms
12. Data Validation
13. User Authentication
14. Improving the Simple CMS
15. Debugging and Error Handling
16. Introducing More Advanced Topics

4. Read Getting Started with Rails (http://guides.rubyonrails.org/getting_started.html) and try to follow along with the application they build.   The Ruby on Rails Guides provide some of the best documentation for the Rails language.


Additional Resources


Project: Ruby on Rails

You’ve learned the basics, now let’s put them to work by building a basic application.

In this project, you’ll get the opportunity to actually build a real Rails application.

The point here is to get familiar with the process of creating a Rails app, what things generally look like, and what you don’t know. When you get to the end of this project, you can consider yourself remarkably persistent and resilient.

1. Set up a Github repository for this project as previously.  See http://bedford-computing.co.uk/learning/ruby-on-rails/web-development-101-odin-project/

2. Go through the Jumpstart Labs Blogger 2 tutorial (http://tutorials.jumpstartlab.com/projects/blogger.html} sections 10 to 14. Pay attention to any error messages you get, both planned (because the tutorial walks you through a common error-guided workflow) and unplanned. You’ll see all these messages again and again when you’re building Rails apps, so it’s helpful to start getting familiar with which portions of the message you should pay attention to.

3. Here is a list of some common errors that may be encountered completing the Jumpstart Lab Blogger -especially if you are running into issues with routes, deleting, partials, and redirect_to (https://gist.github.com/burtlo/4970471).

4. Add in authentication in section I5. Warning: There is currently an error in this section of the tutorial. Make sure to enter the :username parameter into both your _form.html.erb and authors controller. Otherwise you will see an error like this: “authors.username may not be NULL:”

5. Try doing the final Extras section I6.

6. Don’t forget to deploy your app to Heroku!  See Deploy a Rails App (http://installfest.railsbridge.org/installfest/deploy_a_rails_app)


Extra Credit

  • Michael Hartl guides you through creating a sample app using scaffolding as the first stage of his Rails tutorial (https://www.railstutorial.org/book/toy_app). Just do Chapter 2 – you’ll be doing the rest of the tutorial later.

Additional Resources

  • Watch the YouTube video Ruby on Rails – Part 3: Basic Rails – an older and slightly more technical 1.5 hour video introduction to rails from Armando Fox of UC Berkeley RAD Lab (https://www.youtube.com/watch?v=LuuKDyUYFTU)

Uploaded on 11 March 2008
Ruby on Rails Intensive 1-Day Course
Part 3: Basic Rails
ActiveRecord, ActionController, ActionView: validation, model lifecycle, controller actions and the session, filters, forms and parameters, page layouts and partials, CSS.
This is an intensive one-day overview of the fundamental concepts of the Ruby on Rails Web programming framework, presented by the UC Berkeley RAD Lab. The overview consists of six sections of approximately one hour each.

Step 3: Backbone.js

A brief introduction to get you introduced to Backbone.js, a popular front-end web development framework.

You thought only server-side languages could utilize frameworks? Think again. More and more heavy lifting is being done in the browser these days and that means lots of repetitive and disorganized code to tidy up (and JavaScript can get very disorganized).

While there are many popular JavaScript frameworks, we’ll focus on Backbone for similar reasons to why we’re focusing on Rails – it’s probably the most straightforward and best documented one. That doesn’t mean it’s the best or the newest, but if you’ve mastered your fundamentals in Backbone you’ll be more than capable of picking up a slightly more esoteric framework. There are many websites out there that need to be built and maintained in Backbone.

To appreciate Backbone you need a good understanding of JavaScript, MVC, frameworks, JQuery, APIs etc.

Points to Ponder

Look through these now and then use them to test yourself after doing the tasks

  • What are the major differences between a front end and back end framework?
  • What language is Backbone written in?
  • What are the advantages to using Backbone over just normal javascript?
  • What elements of Backbone are nearly identical to Rails?
  • What elements of Backbone are very different from Rails?

Tasks

1. Read Getting Started with Backbone.js (http://code.tutsplus.com/tutorials/getting-started-with-backbone-js–net-19751)

2. Read CodeBeerStartUps A complete guide for learning backbone js (http://codebeerstartups.com/2012/12/a-complete-guide-for-learning-backbone-js/).  Chapters 1 and 2 have some more basic explanations.


Additional Resources