Chapter 3.2 – RoR: easier, faster, better
RoR: easier, faster, better
Presented by:
Maciej Mensfeld
senior ruby developer@wordwatch.com
senior ruby developer@furioustribe.com
maciej@mensfeld.pl
mensfeld.pl
github.com/mensfeld
Maciej Mensfeld
Chapter 3.2 – RoR: easier, faster, better
RoR: easier, faster, better
Please…
• …ask me to slow down, if I speak to quickly;
• …ask me again, if I forget;
• …ask questions, if anything i say is not clear;
• …feel free to share your own observations
Maciej Mensfeld
Chapter 3.2 – RoR: easier, faster, better
RoR: Bootstrap
Make it good looking and make it fast!
Maciej Mensfeld
Chapter 3.2 – RoR: easier, faster, better
RoR: Bootstrap
Sleek, intuitive, and powerful front-end framework for
faster and easier web development.
github.com/twitter/bootstrap
twitter.github.io/bootstrap
builtwithbootstrap.com
wrapbootstrap.com
GRID:FLUIDGRID:FIXEDLAYOUT/FLUIDLAYOUTRESPONSIVEDESIGN:TYPOGRAPHY:
CODEVIEWTABLES:FORMS:BUTTONS:ICONS:BUTTONGROUPS:TABS:PILLS:NAVLIS
TS:NAVBARBREADCRUMBS:PAGINATION:PAGER:INLINELABELSBADGES:PAGEHEA
DERUNIT:HEROUNITTHUMBNAILS:ALERTS:PROGRESSBARS:WELLSCLOSEICON:M
ODALS:DROPDOWNS:SCROLLSPYTOGGLABLETABS:TOOLTIPS:POPOVERS:COLLAPS
ECAROUSEL:TYPEAHEAD
Maciej Mensfeld
Chapter 3.2 – RoR: easier, faster, better
Bootstrap installation
Gemfile:
gem "less-rails"
gem "twitter-bootstrap-rails"
bundle install
rails generate bootstrap:install less
rails g bootstrap:layout application fluid
Maciej Mensfeld
Chapter 3.2 – RoR: easier, faster, better
Bootstrap basics: grids
The default Bootstrap grid system utilizes 12 columns, making for a 940px wide
container without responsive features enabled. With the responsive CSS file added, the
grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px
viewports, the columns become fluid and stack vertically.
Maciej Mensfeld
Chapter 3.2 – RoR: easier, faster, better
Bootstrap basics: grids
For a simple two column layout, create a .row and add the appropriate number of
.span* columns. As this is a 12-column grid, each .span* spans a number of those 12
columns, and should always add up to 12 for each row (or the number of columns in
the parent).
The fluid grid system uses percents instead of pixels for column widths. It has the same
responsive capabilities as our fixed grid system, ensuring proper proportions for key
screen resolutions and devices.
Make any row "fluid" by changing .row to .row-fluid. The column
classes stay the exact same, making it easy to flip between fixed and
fluid grids.
Maciej Mensfeld
Chapter 3.2 – RoR: easier, faster, better
Bootstrap basics: grids
Move columns to the right using .offset* classes. Each class increases the left
margin of a column by a whole column. For example, .offset4 moves .span4 over
four columns.
Maciej Mensfeld
Chapter 3.2 – RoR: easier, faster, better
Responsive bootstrap
For faster mobile-friendly development, use these utility classes for showing and
hiding content by device. Below is a table of the available classes and their effect
on a given media query layout (labeled by device).
Maciej Mensfeld
Chapter 3.2 – RoR: easier, faster, better
Responsive bootstrap
http://twitter.github.io/bootstrap/base-css.html
Maciej Mensfeld
Chapter 3.2 – RoR: easier, faster, better
Controllers
Maciej Mensfeld
Chapter 3.2 – RoR: easier, faster, better
Controllers
Lazy loading is a design
pattern commonly used in
computer programming to
defer initialization of an
object until the point at which
it is needed. It can contribute
to efficiency in the program's
operation if properly and
appropriately used. The
opposite of lazy loading is
eager loading.
Maciej Mensfeld
Chapter 3.2 – RoR: easier, faster, better
Controllers
Maciej Mensfeld
Chapter 3.2 – RoR: easier, faster, better
Views & forms
Maciej Mensfeld
Chapter 3.2 – RoR: easier, faster, better
Views & forms
Basic HTML & CSS knowledge required
Maciej Mensfeld
Chapter 3.2 – RoR: easier, faster, better
Views & forms
http://guides.rubyonrails.org/form_helpers.html
Forms in web applications are an essential interface for user input. However, form
markup can quickly become tedious to write and maintain because of form control
naming and their numerous attributes. Rails deals away with these complexities by
providing view helpers for generating form markup. However, since they have different
use-cases, developers are required to know all the differences between similar helper
methods before putting them to use.
Maciej Mensfeld
Chapter 3.2 – RoR: easier, faster, better
Generators
Maciej Mensfeld
Chapter 3.2 – RoR: easier, faster, better
Generators
Rails generators are an essential tool if you plan to improve your workflow.
http://guides.rubyonrails.org/generators.html
rails g
Maciej Mensfeld
Chapter 3.2 – RoR: easier, faster, better
Generators
Maciej Mensfeld
Chapter 3.2 – RoR: easier, faster, better
Sessions
http://guides.rubyonrails.org/security.html
HTTP is a stateless protocol. Sessions make it stateful.
Most applications need to keep track of certain state of a particular user. This could
be the contents of a shopping basket or the user id of the currently logged in user.
Without the idea of sessions, the user would have to identify, and probably
authenticate, on every request. Rails will create a new session automatically if a
new user accesses the application. It will load an existing session if the user has
already used the application.
Maciej Mensfeld
Chapter 3.2 – RoR: easier, faster, better
Sessions
Do not store large objects in a session. Instead you should store them in the
database and save their id in the session. This will eliminate synchronization
headaches and it won’t fill up your session storage space (depending on what
session storage you chose, see below). This will also be a good idea, if you
modify the structure of an object and old versions of it are still in some user’s
cookies. With server-side session storages you can clear out the sessions, but
with client-side storages, this is hard to mitigate.
Critical data should not be stored in session. If the user clears his cookies or
closes the browser, they will be lost. And with a client-side session storage, the
user can read the data.
Rails provides several storage mechanisms for the session
hashes. The most important are ActiveRecord::SessionStore
and ActionDispatch::Session::CookieStore.
Maciej Mensfeld
Chapter 3.2 – RoR: easier, faster, better
Sessions
rake db:sessions:create
rake db:migrate
vim config/initializers/session_store.rb:
Rails.application.config.session_store :active_record_store
Maciej Mensfeld
Chapter 3.2 – RoR: easier, faster, better
Testing, testing, testing
http://guides.rubyonrails.org/testing.html
Testing support was woven into the Rails fabric from the
beginning. It wasn’t an “oh! let’s bolt on support for
running tests because they’re new and cool” epiphany.
Just about every Rails application interacts heavily with
a database – and, as a result, your tests will need a
database to interact with as well. To write efficient tests,
you’ll need to understand how to set up this database
and populate it with sample data.
Every Rails application you build has 3 sides: a
side for production, a side for development,
and a side for testing.
Maciej Mensfeld
Chapter 3.2 – RoR: easier, faster, better
Testing - Fixtures
For good tests, you’ll need to give some thought to setting up test data. In
Rails, you can handle this by defining and customizing fixtures.
Every Rails application you build has 3 sides: a
side for production, a side for development,
and a side for testing.
Maciej Mensfeld
Chapter 3.2 – RoR: easier, faster, better
Testing - Fixtures
Fixtures is a fancy word for sample data. Fixtures allow you to populate your testing
database with predefined data before your tests run. Fixtures are database
independent and assume a single format: YAML.
You’ll find fixtures under your test/fixtures directory. When you run rails generate
model to create a new model, fixture stubs will be automatically created and placed in
this directory.
YAML-formatted fixtures are a very human-friendly way to describe your sample data.
These types of fixtures have the .yml file extension (as in users.yml).
Maciej Mensfeld
Chapter 3.2 – RoR: easier, faster, better
Testing - Fixtures
Rails by default automatically loads all fixtures from the test/fixtures folder for your unit
and functional test. Loading involves three steps:
• Remove any existing data from the table corresponding to the fixture
• Load the fixture data into the table
• Dump the fixture data into a variable in case you want to access it directly
Maciej Mensfeld
Chapter 3.2 – RoR: easier, faster, better
Testing - Units
In Rails, unit tests are what you write to test your models and libs.
Many Rails developers practice Test-Driven Development (TDD). This is an excellent way
to build up a test suite that exercises every part of your application.
Maciej Mensfeld
Chapter 3.2 – RoR: easier, faster, better
Testing - Units
Maciej Mensfeld
Chapter 3.2 – RoR: easier, faster, better
Live long and prosper!
Presented by:
Maciej Mensfeld
maciej@mensfeld.pl
dev.mensfeld.pl
github.com/mensfeld
Maciej Mensfeld