Embed Size (px)
Chapter 3.2 – RoR: easier, faster, better
Maciej Mensfeld
Presented by:
Maciej Mensfeld
RoR: easier, faster, better
github.com/mensfeld
senior ruby [email protected] ruby [email protected]
Chapter 3.2 – RoR: easier, faster, better
Maciej Mensfeld
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
RoR: easier, faster, better
Chapter 3.2 – RoR: easier, faster, better
Maciej Mensfeld
Make it good looking and make it fast!
RoR: Bootstrap
Chapter 3.2 – RoR: easier, faster, better
Maciej Mensfeld
RoR: Bootstrap
GRID:FLUIDGRID:FIXEDLAYOUT/FLUIDLAYOUTRESPONSIVEDESIGN:TYPOGRAPHY:CODEVIEWTABLES:FORMS:BUTTONS:ICONS:BUTTONGROUPS:TABS:PILLS:NAVLISTS:NAVBARBREADCRUMBS:PAGINATION:PAGER:INLINELABELSBADGES:PAGEHEADERUNIT:HEROUNITTHUMBNAILS:ALERTS:PROGRESSBARS:WELLSCLOSEICON:MODALS:DROPDOWNS:SCROLLS
PYTOGGLABLETABS:TOOLTIPS:POPOVERS:COLLAPSECAROUSEL:TYPEAHEAD
Sleek, intuitive, and powerful front-end framework for faster and easier web development.
github.com/twitter/bootstraptwitter.github.io/bootstrap
builtwithbootstrap.comwrapbootstrap.com
Chapter 3.2 – RoR: easier, faster, better
Maciej Mensfeld
Bootstrap installation
bundle install
Gemfile:gem "less-rails"
gem "twitter-bootstrap-rails"
rails generate bootstrap:install less
rails g bootstrap:layout application fluid
Chapter 3.2 – RoR: easier, faster, better
Maciej Mensfeld
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.
Chapter 3.2 – RoR: easier, faster, better
Maciej Mensfeld
Bootstrap basics: gridsFor 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).
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.
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.
Chapter 3.2 – RoR: easier, faster, better
Maciej Mensfeld
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.
Chapter 3.2 – RoR: easier, faster, better
Maciej Mensfeld
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).
Chapter 3.2 – RoR: easier, faster, better
Maciej Mensfeld
Responsive bootstrap
http://twitter.github.io/bootstrap/base-css.html
Chapter 3.2 – RoR: easier, faster, better
Maciej Mensfeld
Controllers
Chapter 3.2 – RoR: easier, faster, better
Maciej Mensfeld
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.
Chapter 3.2 – RoR: easier, faster, better
Maciej Mensfeld
Controllers
Chapter 3.2 – RoR: easier, faster, better
Maciej Mensfeld
Views & forms
Chapter 3.2 – RoR: easier, faster, better
Maciej Mensfeld
Views & formsBasic HTML & CSS knowledge required
Chapter 3.2 – RoR: easier, faster, better
Maciej Mensfeld
Views & formshttp://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.
Chapter 3.2 – RoR: easier, faster, better
Maciej Mensfeld
Generators
Chapter 3.2 – RoR: easier, faster, better
Maciej Mensfeld
Generators
Rails generators are an essential tool if you plan to improve your workflow.
http://guides.rubyonrails.org/generators.html
rails g
Chapter 3.2 – RoR: easier, faster, better
Maciej Mensfeld
Generators
Chapter 3.2 – RoR: easier, faster, better
Maciej Mensfeld
Sessionshttp://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.
Chapter 3.2 – RoR: easier, faster, better
Maciej Mensfeld
SessionsDo 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.
Chapter 3.2 – RoR: easier, faster, better
Maciej Mensfeld
Sessions
rake db:sessions:create
rake db:migrate
vim config/initializers/session_store.rb:
Rails.application.config.session_store :active_record_store
Chapter 3.2 – RoR: easier, faster, better
Maciej Mensfeld
Testing, testing, testing
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.
http://guides.rubyonrails.org/testing.html
Every Rails application you build has 3 sides: a side for production, a side for development,
and a side for testing.
Chapter 3.2 – RoR: easier, faster, better
Maciej Mensfeld
Testing - FixturesFor 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.
Chapter 3.2 – RoR: easier, faster, better
Maciej Mensfeld
Testing - FixturesFixtures 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).
Chapter 3.2 – RoR: easier, faster, better
Maciej Mensfeld
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
Chapter 3.2 – RoR: easier, faster, better
Maciej Mensfeld
Testing - UnitsIn 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.
Chapter 3.2 – RoR: easier, faster, better
Maciej Mensfeld
Testing - Units
Chapter 3.2 – RoR: easier, faster, better
Maciej Mensfeld
Live long and prosper!
Presented by:
Maciej Mensfeld
github.com/mensfeld
