Intro to Web Development from Bloc.io

34
http://gitbookio.github.io/javascript/

description

Learn about web development, MVC frameworks, CRUD applications. Learn about Git, Github and Heroku, and how to create a basic Ruby on Rails web application.

Transcript of Intro to Web Development from Bloc.io

Page 2: Intro to Web Development from Bloc.io

IntroAbout Doug

● Not a C.S. major!● Bloc engineer & former Bloc student● School > Film > Marketing > Engineering● Previously worked at New Relic, Get Satisfaction, and 99designs● Author of RubyKin

Page 3: Intro to Web Development from Bloc.io

Intro

We will cover:

1. The basics of a Web Application2. Understanding MVC, CRUD and other key concepts3. How to get your first app online with Heroku

Page 4: Intro to Web Development from Bloc.io

Behind the scenes of a web app

MVC

DBs

CRUD

Page 5: Intro to Web Development from Bloc.io

Requests

WebApplication

CRUD

Page 6: Intro to Web Development from Bloc.io

Get, Post, Put, DeleteWhat do users do with a web application?

aka CRUD

GET

Read

POST

Create

PUT

Update

DELETE

Destroyhttp://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol#Request_methods

Page 7: Intro to Web Development from Bloc.io

our MVC application

http://www.essenceandartifact.com/2012/12/the-essence-of-mvc.html

Page 8: Intro to Web Development from Bloc.io

http://www.essenceandartifact.com/2012/12/the-essence-of-mvc.html

Model View Controller

Page 9: Intro to Web Development from Bloc.io

Model Controller View

http://www.essenceandartifact.com/2012/12/the-essence-of-mvc.html

Page 10: Intro to Web Development from Bloc.io

Requests & Resources

Model Controller View

Page 11: Intro to Web Development from Bloc.io

Application Files

app● assets

○ images○ stylesheets○ javascripts

● controllers● models● views

Page 12: Intro to Web Development from Bloc.io

Creating Web CRUD apps

Rails

A web framework written in Ruby.

Django

A web framework written in Python.

http://rubyonrails.org/

Page 13: Intro to Web Development from Bloc.io

ViewsHTML

CSS

JavaScript

Hello World!

Page 14: Intro to Web Development from Bloc.io

ViewsHTML

CSS

JavaScript

Haml

Sass

CoffeeScript

Page 15: Intro to Web Development from Bloc.io

Controller & View Sublime (text editor)

Page 16: Intro to Web Development from Bloc.io

Routes => Controller => View

Page 17: Intro to Web Development from Bloc.io

Sublime, Git & Heroku

HerokuGit & GitHubText Editor

Page 18: Intro to Web Development from Bloc.io
Page 19: Intro to Web Development from Bloc.io

Let’s make a Rails App!

http://docs.railsbridge.org/installfest/choose_your_operating_system

Terminal

Install Guide

Page 20: Intro to Web Development from Bloc.io

Let’s make a Rails App!rails new ‘your project name’

Open my_app

Page 21: Intro to Web Development from Bloc.io

Controllers

http://guides.rubyonrails.org/command_line.html

Terminal (Shell)

Page 22: Intro to Web Development from Bloc.io

Controllers

http://guides.rubyonrails.org/command_line.html

Sublime (text editor)

Page 23: Intro to Web Development from Bloc.io

Controllers Terminal (Shell)

http://guides.rubyonrails.org/command_line.html#rails-server

Page 24: Intro to Web Development from Bloc.io

Controllers

http://guides.rubyonrails.org/command_line.html#rails-server

Web Browser

Page 25: Intro to Web Development from Bloc.io

Routes

http://guides.rubyonrails.org/routing.html

Sublime (text editor)

Page 26: Intro to Web Development from Bloc.io

Git● Git

○ Revision control and pushing to Heroku

Page 27: Intro to Web Development from Bloc.io

Github

https://help.github.com/articles/create-a-repo

Browser

● Github○ Repository online and pushing to Heroku

Page 28: Intro to Web Development from Bloc.io

Github

https://help.github.com/articles/create-a-repo

Terminal (shell)

Page 29: Intro to Web Development from Bloc.io

Heroku

https://toolbelt.heroku.com/

Terminal (shell)

● Heroku client○ CLI tool for creating and managing Heroku apps

Page 31: Intro to Web Development from Bloc.io

Heroku

https://devcenter.heroku.com/articles/git

Terminal (shell)

Page 32: Intro to Web Development from Bloc.io

Bundle & Push

https://devcenter.heroku.com/articles/git

Terminal (shell)

Page 33: Intro to Web Development from Bloc.io

Deployed! Terminal (shell)

Page 34: Intro to Web Development from Bloc.io

LinksStart Here! Install Ruby, Rails and more...

http://docs.railsbridge.org/installfest/choose_your_operating_system

Starter Kit for new Rails app with lots of Gems

http://railsapps.github.io/rails-composer

http://www.gitbook.io/

Rails Guides: http://guides.rubyonrails.org/getting_started.html

Codecademy

http://RubyKin.com