Transcript
Page 1: Chapter 3.2 – RoR: easier, faster, better Maciej Mensfeld Presented by: Maciej Mensfeld RoR: easier, faster, better maciej@mensfeld.pl mensfeld.pl github.com/mensfeld

Chapter 3.2 – RoR: easier, faster, better

Maciej Mensfeld

Presented by:

Maciej Mensfeld

RoR: easier, faster, better

[email protected]

github.com/mensfeld

senior ruby [email protected] ruby [email protected]

Page 2: Chapter 3.2 – RoR: easier, faster, better Maciej Mensfeld Presented by: Maciej Mensfeld RoR: easier, faster, better maciej@mensfeld.pl mensfeld.pl github.com/mensfeld

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

Page 3: Chapter 3.2 – RoR: easier, faster, better Maciej Mensfeld Presented by: Maciej Mensfeld RoR: easier, faster, better maciej@mensfeld.pl mensfeld.pl github.com/mensfeld

Chapter 3.2 – RoR: easier, faster, better

Maciej Mensfeld

Make it good looking and make it fast!

RoR: Bootstrap

Page 4: Chapter 3.2 – RoR: easier, faster, better Maciej Mensfeld Presented by: Maciej Mensfeld RoR: easier, faster, better maciej@mensfeld.pl mensfeld.pl github.com/mensfeld

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

Page 5: Chapter 3.2 – RoR: easier, faster, better Maciej Mensfeld Presented by: Maciej Mensfeld RoR: easier, faster, better maciej@mensfeld.pl mensfeld.pl github.com/mensfeld

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

Page 6: Chapter 3.2 – RoR: easier, faster, better Maciej Mensfeld Presented by: Maciej Mensfeld RoR: easier, faster, better maciej@mensfeld.pl mensfeld.pl github.com/mensfeld

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.

Page 7: Chapter 3.2 – RoR: easier, faster, better Maciej Mensfeld Presented by: Maciej Mensfeld RoR: easier, faster, better maciej@mensfeld.pl mensfeld.pl github.com/mensfeld

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.

Page 8: Chapter 3.2 – RoR: easier, faster, better Maciej Mensfeld Presented by: Maciej Mensfeld RoR: easier, faster, better maciej@mensfeld.pl mensfeld.pl github.com/mensfeld

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.

Page 9: Chapter 3.2 – RoR: easier, faster, better Maciej Mensfeld Presented by: Maciej Mensfeld RoR: easier, faster, better maciej@mensfeld.pl mensfeld.pl github.com/mensfeld

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).

Page 10: Chapter 3.2 – RoR: easier, faster, better Maciej Mensfeld Presented by: Maciej Mensfeld RoR: easier, faster, better maciej@mensfeld.pl mensfeld.pl github.com/mensfeld

Chapter 3.2 – RoR: easier, faster, better

Maciej Mensfeld

Responsive bootstrap

http://twitter.github.io/bootstrap/base-css.html

Page 11: Chapter 3.2 – RoR: easier, faster, better Maciej Mensfeld Presented by: Maciej Mensfeld RoR: easier, faster, better maciej@mensfeld.pl mensfeld.pl github.com/mensfeld

Chapter 3.2 – RoR: easier, faster, better

Maciej Mensfeld

Controllers

Page 12: Chapter 3.2 – RoR: easier, faster, better Maciej Mensfeld Presented by: Maciej Mensfeld RoR: easier, faster, better maciej@mensfeld.pl mensfeld.pl github.com/mensfeld

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.

Page 13: Chapter 3.2 – RoR: easier, faster, better Maciej Mensfeld Presented by: Maciej Mensfeld RoR: easier, faster, better maciej@mensfeld.pl mensfeld.pl github.com/mensfeld

Chapter 3.2 – RoR: easier, faster, better

Maciej Mensfeld

Controllers

Page 14: Chapter 3.2 – RoR: easier, faster, better Maciej Mensfeld Presented by: Maciej Mensfeld RoR: easier, faster, better maciej@mensfeld.pl mensfeld.pl github.com/mensfeld

Chapter 3.2 – RoR: easier, faster, better

Maciej Mensfeld

Views & forms

Page 15: Chapter 3.2 – RoR: easier, faster, better Maciej Mensfeld Presented by: Maciej Mensfeld RoR: easier, faster, better maciej@mensfeld.pl mensfeld.pl github.com/mensfeld

Chapter 3.2 – RoR: easier, faster, better

Maciej Mensfeld

Views & formsBasic HTML & CSS knowledge required

Page 16: Chapter 3.2 – RoR: easier, faster, better Maciej Mensfeld Presented by: Maciej Mensfeld RoR: easier, faster, better maciej@mensfeld.pl mensfeld.pl github.com/mensfeld

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.

Page 17: Chapter 3.2 – RoR: easier, faster, better Maciej Mensfeld Presented by: Maciej Mensfeld RoR: easier, faster, better maciej@mensfeld.pl mensfeld.pl github.com/mensfeld

Chapter 3.2 – RoR: easier, faster, better

Maciej Mensfeld

Generators

Page 18: Chapter 3.2 – RoR: easier, faster, better Maciej Mensfeld Presented by: Maciej Mensfeld RoR: easier, faster, better maciej@mensfeld.pl mensfeld.pl github.com/mensfeld

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

Page 19: Chapter 3.2 – RoR: easier, faster, better Maciej Mensfeld Presented by: Maciej Mensfeld RoR: easier, faster, better maciej@mensfeld.pl mensfeld.pl github.com/mensfeld

Chapter 3.2 – RoR: easier, faster, better

Maciej Mensfeld

Generators

Page 20: Chapter 3.2 – RoR: easier, faster, better Maciej Mensfeld Presented by: Maciej Mensfeld RoR: easier, faster, better maciej@mensfeld.pl mensfeld.pl github.com/mensfeld

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.

Page 21: Chapter 3.2 – RoR: easier, faster, better Maciej Mensfeld Presented by: Maciej Mensfeld RoR: easier, faster, better maciej@mensfeld.pl mensfeld.pl github.com/mensfeld

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.

Page 22: Chapter 3.2 – RoR: easier, faster, better Maciej Mensfeld Presented by: Maciej Mensfeld RoR: easier, faster, better maciej@mensfeld.pl mensfeld.pl github.com/mensfeld

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

Page 23: Chapter 3.2 – RoR: easier, faster, better Maciej Mensfeld Presented by: Maciej Mensfeld RoR: easier, faster, better maciej@mensfeld.pl mensfeld.pl github.com/mensfeld

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.

Page 24: Chapter 3.2 – RoR: easier, faster, better Maciej Mensfeld Presented by: Maciej Mensfeld RoR: easier, faster, better maciej@mensfeld.pl mensfeld.pl github.com/mensfeld

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.

Page 25: Chapter 3.2 – RoR: easier, faster, better Maciej Mensfeld Presented by: Maciej Mensfeld RoR: easier, faster, better maciej@mensfeld.pl mensfeld.pl github.com/mensfeld

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).

Page 26: Chapter 3.2 – RoR: easier, faster, better Maciej Mensfeld Presented by: Maciej Mensfeld RoR: easier, faster, better maciej@mensfeld.pl mensfeld.pl github.com/mensfeld

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

Page 27: Chapter 3.2 – RoR: easier, faster, better Maciej Mensfeld Presented by: Maciej Mensfeld RoR: easier, faster, better maciej@mensfeld.pl mensfeld.pl github.com/mensfeld

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.

Page 28: Chapter 3.2 – RoR: easier, faster, better Maciej Mensfeld Presented by: Maciej Mensfeld RoR: easier, faster, better maciej@mensfeld.pl mensfeld.pl github.com/mensfeld

Chapter 3.2 – RoR: easier, faster, better

Maciej Mensfeld

Testing - Units

Page 29: Chapter 3.2 – RoR: easier, faster, better Maciej Mensfeld Presented by: Maciej Mensfeld RoR: easier, faster, better maciej@mensfeld.pl mensfeld.pl github.com/mensfeld

Chapter 3.2 – RoR: easier, faster, better

Maciej Mensfeld

Live long and prosper!

Presented by:

Maciej Mensfeld

[email protected]

github.com/mensfeld