Makers Apprenticeship Week 5

Makers Learning Objectives

Write feature tests using Capybara
Test-drive a simple Sinatra app
Follow an effective process to debug web applications
Explain and diagram the HTTP request/response cycle
Explain and diagram the MVC pattern
Define process modelling as a tool to describe and understand a process.
Use process modelling to further your understanding of HTTP requests and responses.

Applied Learnings

TDD: Learn Capybara
Servers/clients: Battle Game
Build a simple app: Rock Paper Scissors

Personal Learning Objectives

tightening the loop across the whole web stack: from the browser, to a template, to a controller, to a Ruby object, to a test.
using error messages and p to get visibility in templates, controllers, Ruby objects and tests
complete the pair programming and individual challenges

Things to celebrate

achieved level 6 kyu on Codewars
getting faster at understanding stuff
finding a bug in a code line I could not solve during my first week by applying a more methodical approach
built my first web app, although that took quite a long time

Emotions

As a person who is dominant on the visual side, working with code and getting to see the implementation in real time was an amazing learning experience. I've enjoyed working with http, seeing how browsers interact with servers and understanding the essential tools for building a simple web app.

I've also enjoyed learning about Capybara and Sinatra. Feature testing using capybara felt like quite a natural progression from irb.

The workshop on debugging was particularly helpful this week.

Progress and Learnings

WWW

HTTP: Hypertext Transfer Protocol is an application protocol that defines a language for clients and servers to speak to each other. A protocol is a system of rules that define how data is exchanged within or between computers.
internet developed in the 70s and the web around the 90s
browser - send requests using URL to servers and display response

request response to browser - not all source code is being sent as some are private server side documents
server = piece of software that runs on a computer
server - listen to requests and send back files
web tools - used to inspect elements of the files received by the browser. You can edit them on your view of the content

Process Modelling

Time to first byte = download time of files
Request time depends on where the files are hosted (like us vs uk).Some companies host copies of their files in many places around the world (duplicate servers)
HTTPStatus Codes:

1xx Information

2xx Success

3xx Redirections

4xx User/client error

5xx Server error
Process Modelling practical

HTTP Modelling

Debugging web applications

How do we identify a bug?

Code doesn't work a expected | Unintended behaviour | Errors
Error types

Syntax

Runtime errors | NoMethodError

HTTP status code or error | 404 | 500

What's on the page is wrong

How do we get visibility of bugs?

p/puts
debugger on code editor
network tab of dev tools
capybara save_and_open_page

Web frameworks

Sinatra vs. Rails

small framework for writing web applications

Sinatra is like a bike, less features, whereas rails is like a car with a lot of functionality in place already. Rack would be a pair of shoes. Sinatra and Rails both use Rack under the hood.

Sinatra is great for learning the basics of HTTP and routing.

The problem domain that Sinatra lives in is building web applications. And web applications which “speak” HTTP with browsers.

It therefor has methods like, for example, get, post, put, and delete. You can use these methods in order to describe how your application responds to HTTP requests.

The code uses language specific to the domain of HTTP

In Sinatra calls to methods like get, post, put, and delete are called routes. They take a path, and a block that handles a request.

Capybara

Capybara is a web-based automation framework used for creating functional tests that simulate how users would interact with your application.

Replaces the traditional irb feature testing

Capybara is a library/gem built to be used on top of an underlying web-based driver.

When the page is loaded using the DSL (and underlying web driver i.e. rack, selenium), Capybara will try to locate the relevant element in the DOM (Document Object Model) and execute the action, such as click button, link, etc.

Web drivers supported by Capybara:

Rack

Rack is the underlying technology behind all the web frameworks in the Ruby World

rackup utility to run the servers in ruby

an architecture that has three characteristicsRack provides a minimal, modular, and adaptable interface for developing web applications in Ruby
Selenium Web driver

Pairing Challenge Learnings

Learn how to use HTTPie syntax to interact with HTTP servers

GET request - request to view a data source from a server

http -v [http://makersipsum.herokuapp.com](http://makersipsum.herokuapp.com/)

POST request - request to create a new resource

http -f -v POST [https://getpostworkout.herokuapp.com/](https://getpostworkout.herokuapp.com/) name=Joe

PUT request - request to update an existing resource

http -f -v PUT [https://getpostworkout.herokuapp.com/](https://getpostworkout.herokuapp.com/) name=Joe

DELETE request - request to delete an existing resource

http -f DELETE [https://getpostworkout.herokuapp.com/](https://getpostworkout.herokuapp.com/) name=Joe

Read and understand HTTP Headers

HTTP requests can contain parameters, embedded into the URL as a query string.

Set up a basic Sinatra app and use Sinatra Reloader
Create routes and make them return html elements/forms

Separation of concerns between controlling (app file) and presentation concerns (views)

|     Incoming     |
      request
         v
____________________
|    Controller    |
---------------------
|      Model       |
____________________

Understand how to set query strings params and URL path params
Implement feature tests using capybara
Hide params using POST/redirect/GET pattern
Use test helpers (helpers class) to DRY up code
General

What do sessions do?
- a session stores data about browser
- session ID = session id goes into the cookies on the browser where the data gets stored
Feature tests Capybara
- separate files for each feature = diff scenarios for each feature on the same file
Global variables
- lose control of ability to decide when it could be changed
- use RSpec or Sinatra - name clash if the library already has a global variable with a similar name
- Global variables are generally avoided because they threaten “encapsulation”
- https://medium.com/@ashnashahgrover777/a-good-use-of-a-global-variable-f3e596c8070c