An Introduction to Ruby and Rails by David Rice For Designers Monday, 16 April 12

Technical Director at Rumble Labs David Rice @davidjrice Monday, 16 April 12

is a Web Software & Experience Design laboratory in Belfast, Northern Ireland http://rumblelabs.com Monday, 16 April 12

• Ruby is a programming language • Designed by Yukihoro Matsumoto in the mid 90s in Japan - “I wanted a scripting language that was more powerful than Perl, more object-orientated than Python. That’s why I decided to design my own language” • Everything in Ruby is an Object What is Ruby? Monday, 16 April 12

• It is an arti cial language created to communicate instructions to a machine • It is a collection of syntax and semantics like any other language. However these must be strictly obeyed or a computer will not understand • A scripting language is one that supports the writing of scripts, typically to automate the execution of tasks • Scripts can be written and executed on-the- y without explicit compilation into machine code before hand What is a programming language? Monday, 16 April 12

• Often people, especially computer engineers, focus on the machines. They think, "By doing this, the machine will run faster. By doing this, the machine will run more e ectively. By doing this, the machine will something something something." • They are focusing on machines. But in fact we need to focus on humans, on how humans care about doing programming or operating the application of the machines. We are the masters. They are the slaves. Why is Ruby di erent? Philosophy Monday, 16 April 12

• Rails is a framework for rapid web development • It’s written in Ruby (a programming language) • It’s open source (MIT License) and free to use • It was written by DHH of 37signals and released to the public in 2004 Ruby on Rails? Monday, 16 April 12

• A high-level abstraction of something else • They are essentially a collection of tools, techniques and patterns wrapped up in a convenient package • Because 90% of the time you need to do the same things as everyone else • Frameworks can even be made of other frameworks (woah, meta) What is a Framework? Monday, 16 April 12

Frameworks vs Libraries • A library is a collection of useful classes and methods that you might need • A framework generally provides a collection of core code that gives you a structure to write your own software • Libraries are usually lower level and do very speci c things, frameworks will generally consume many libraries and glue them all together cohesively • Once you adopt a framework it’s di cult to change, however libraries that are used in your application can usually be swapped easy enough Monday, 16 April 12

Frameworks vs. CMS • A framework is a set of tools to build an application • A CMS is an application specialised to serve and manage content, usually static sites or a blog • Most CMS are built on top of a framework themselves • @rumblelabs we don’t generally use CMS as they are too specialized and end up getting in the way of experimentation and innovation. Monday, 16 April 12

Examples of Frameworks • Ruby: Rails, Sinatra • PHP: CodeIgniter, Zend, Fuel • JavaScript: Spine.js, Backbone.js • CSS: Twitter Bootstrap, 960.gs, blueprint • HTML5 Boilerplate Monday, 16 April 12

Libraries • Ruby comes with a great way of managing external libraries that we want to use in our applications, called Rubygems http://rubygems.org • A gem is a library (but can be a framework too, Rails is released as a Gem) • They provide useful reusable code for speci c tasks that we can just include for free in our applications • Always look for a library that does something you’re trying to do, don’t reinvent the wheel Monday, 16 April 12

Ruby Version Manager (RVM) • RVM is management tool to let you use and switch between multiple versions of Ruby on your machine. http://beginrescueend.com/ • It is to Ruby what Rubygems is to gems • It’s great for working with old Rails applications / Ruby code or for working in teams Monday, 16 April 12

Bundler • Bundler manages a Ruby application’s gem dependencies. http://gembundler.com/ • It allows the easy speci cation of what gems to use in a Rails project and even what version • It lets you keep multiple machines, you, your coworker’s and your server all with the same versions of external code. • It’s best used with RVM on your machine Monday, 16 April 12

Why use these tools? • Good Philosophies and Methodologies behind them • All optimised for human qualities of happiness, reusability, productivity and collaboration • Good communities behind their development and usage Monday, 16 April 12

What makes them good for designers? • Great support in Ruby and Rails for user interface development • CSS Tools like: SASS, Compass, Bourbon • JavaScript Tools like: Co eeScript • Rails 3 Asset Pipeline, keep your assets more organised and automatically compile and minify your CSS and JS • No shortage of work for Ruby developers and designers these days Monday, 16 April 12

Getting Started • Before getting started we recommend you install all of the aforementioned technologies. Handy instructions can be found, here. • http://bit.ly/IPAVNF (Belfast Ruby Blog) Monday, 16 April 12

The Future: Rails.app? Monday, 16 April 12

@davidjrice Thanks! Monday, 16 April 12

The Super Duper basics of Rails by Tommy Palmer See: http://speakerdeck.com/u/tommy/p/super-duper-basics-of-rails Monday, 16 April 12

Workshop Building a simple blogging engine Monday, 16 April 12

Building a Simple Blog • Designing the App • Creating a new Rails project • Generating a scaffold • Create & Run Migrations • Launch with the built in server Monday, 16 April 12

Wireframe the App Monday, 16 April 12

Designing the App Monday, 16 April 12

Generating a new Rails App ## Setup RVM and Rails version we want rvm use 1.9.3@rails-3-2 --create gem install rails ## Generating a new App rails new blog ## Add a custom .rvmrc file to manage this project’s ruby version cd blog echo "rvm 1.9.3@rails-3-2" >> .rvmrc ## Setup a new git repository git init git add . git commit -m “First commit” Monday, 16 April 12

Generate a Sca old ## Create your database (Customise your database.yml if you want to use MySQL etc.) rake db:create ## Startup the rails development server rails s ## Open a browser open http://localhost:3000/posts ## Generating a scaffold model controller and views rails g scaffold Post title:string content:text published_at:datetime ## Migrate your database rake db:migrate Monday, 16 April 12

Bootstrap and Simple Form ## Add bootstrap and simple_form to our Gemfile gem 'bootstrap-sass' gem 'simple_form' ## Add to our app/assets/posts.css.scss @import "bootstrap"; ## Get this custom simple_form configuration to make it play nice with bootstrap curl https://raw.github.com/rafaelfranca/simple_form-bootstrap/master/config/ initializers/simple_form.rb > config/initializers/simple_form.rb Monday, 16 April 12

Further Tasks •Create a layout •Create a blog post partial •Using the Asset Pipeline •Using Twitter Bootstrap •Deployment to Heroku •Building an admin panel •Commenting on a post? •Post has_many comments •Push to github Monday, 16 April 12

Further Reading • https://github.com/rumblelabs/blog-demo-rails • http://guides.rubyonrails.org/getting_started.html • https://github.com/plataformatec/simple_form • https://github.com/thomas-mcdonald/bootstrap-sass Monday, 16 April 12