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 senior ruby developer@wordwatch.com senior ruby developer@furioustribe.com

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

3. Chapter 3.2 – RoR: easier, faster, better Maciej Mensfeld Make it good looking and make it fast! RoR: Bootstrap

4. Chapter 3.2 – RoR: easier, faster, better Maciej Mensfeld RoR: Bootstrap 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 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

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

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

7. Chapter 3.2 – RoR: easier, faster, better Maciej Mensfeld 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). 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.

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

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

10. Chapter 3.2 – RoR: easier, faster, better Maciej Mensfeld Responsive bootstrap http://twitter.github.io/bootstrap/base-css.html

11. Chapter 3.2 – RoR: easier, faster, better Maciej Mensfeld Controllers

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

13. Chapter 3.2 – RoR: easier, faster, better Maciej Mensfeld Controllers

14. Chapter 3.2 – RoR: easier, faster, better Maciej Mensfeld Views & forms

15. Chapter 3.2 – RoR: easier, faster, better Maciej Mensfeld Views & forms Basic HTML & CSS knowledge required

16. Chapter 3.2 – RoR: easier, faster, better Maciej Mensfeld 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.

17. Chapter 3.2 – RoR: easier, faster, better Maciej Mensfeld Generators

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

19. Chapter 3.2 – RoR: easier, faster, better Maciej Mensfeld Generators

20. Chapter 3.2 – RoR: easier, faster, better Maciej Mensfeld 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.

21. Chapter 3.2 – RoR: easier, faster, better Maciej Mensfeld 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.

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

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

24. Chapter 3.2 – RoR: easier, faster, better Maciej Mensfeld 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.

25. Chapter 3.2 – RoR: easier, faster, better Maciej Mensfeld 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).

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

27. Chapter 3.2 – RoR: easier, faster, better Maciej Mensfeld 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.

28. Chapter 3.2 – RoR: easier, faster, better Maciej Mensfeld Testing - Units

29. Chapter 3.2 – RoR: easier, faster, better Maciej Mensfeld Live long and prosper! Presented by: Maciej Mensfeld maciej@mensfeld.pl dev.mensfeld.pl github.com/mensfeld