Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Week 1

554 views

Published on

Published in: Education, Technology
  • Be the first to comment

  • Be the first to like this

Week 1

  1. 1. LESSON ONEWeb Apps 101
  2. 2. Course Overview
  3. 3. WHO WE AREWill Gaybrick• Currently: Thrive Capital / YLS ’12• Previously: Harvard ’07 (math) => finance (Blackstone) => startups (hunch.com, jumo.com, milewise.com)Bay Gross• Currently: BlueFusion / Yale ’13• Previously: Various web apps, magnum opus => isitchickentendersday.com
  4. 4. WHY HACKYALE?Good ideas + good developers => goodtech companies• Yale ⊃ many students with good ideas• Yale ⊅ many students who can implement those ideas
  5. 5. GOALSCourse Overview
  6. 6. GOALSPractical, not theoretical / academic• Zero => prototype• Prototype => full application• Not training CTOs
  7. 7. GOALSFocus on processes and psychology of webdevelopment more than content• Learn by doing; learn by immersion• Memorization as the emergent byproduct of experience• We can’t make you successful developers• We can equip you with kernel of knowledge and key resources with which to makes yourselves successful developers
  8. 8. GOALSGoogle is your friend
  9. 9. GOALS80% of web development is knowing whereto lookMost common answer => Google• Things to Google: --Error messages --Syntax --Entire problems. Ex: “javascript dropdown menu”
  10. 10. Anatomy 101[for web applications]
  11. 11. TERMINOLOGYClient-server model • Client == (you and your) browser • Server == machine sending (or “serving”) you the data and files you request“Host” ~== “server” • “to host” (code, files, applications) ~== “to serve”“Local” => hosted on the machine in question“Remote” => hosted on a different machine
  12. 12. REQUEST-RESPONSE CYCLE(1) Client (browser) makes a “request” • “Request” == textual message whose syntax and semantics are defined by HyperText Transfer Protocol (“HTTP”)(2) Server issues a “response” • “Response” == textual message whose syntax and semantics are defined by HTTP • Contains status code. Ex: 404 (“Not Found”), 200 (“Okay”), 500 (“Internal Server Error”)(3) Cycle repeats itself
  13. 13. THE CLIENT-SERVER MODEL REQUEST FOR - html, css, js - image - document - etc… RESPONSE FROMCLIENT SERVER - requested content… or - some other reasonable response based on context (ex. 404 Not Found)
  14. 14. KEY TECHNOLOGIES Anatomy 101 [for web applications]
  15. 15. ON THE CLIENT SIDE REQUEST FOR - html, css, js - image - document - etc… RESPONSE FROMCLIENT SERVER - requestedHTML content… orCSS - some otherJAVASCRIPT reasonable response based on context (ex. 404 Not Found)
  16. 16. ON THE SERVER SIDE REQUEST FOR - html, css, js - image - document - etc… RESPONSE FROMCLIENT SERVER - requested PYTHONHTML content… or RUBY (ON RAILS)CSS - some otherJAVASCRIPT reasonable response JAVA based on context (ex. 404 Not Found)
  17. 17. JAVASCRIPT ON BOTH! REQUEST FOR - html, css, js - image - document - etc… RESPONSE FROMCLIENT SERVER - requested PYTHONHTML content… or RUBY (ON RAILS)CSS - some otherJAVASCRIPT reasonable response JAVA based on context (ex. JAVASCRIPT 404 Not Found)
  18. 18. The Command Line [brief intro to operating systems]
  19. 19. OPERATING SYSTEMSOperating systems sit between applicationsoftware and computer hardware • Examples: Mac OSX, Linux (UNIX), Windows 7 { memory operating system CPU hard disk
  20. 20. OPERATING SYSTEMS“System calls” are the interface by which aprogram communicates with an OS • Ex: open, read, write, close, fork, killApplications consist of code: • (1) “Lower level” languages (C, for example) making such calls directly; or • (2) “Higher level” languages (Python, for example) making such calls indirectly via “compilation” into lower level languages
  21. 21. THE COMMAND LINE• The command line is a program that provides a text-only interface to communicate dynamically with the operating system• Several different command line programs or “shells”: BASH (most common), sh (Bourne shell) { memory operating system CPU hard disk BASH, sh
  22. 22. THE COMMAND LINE• On OSX, the command line program is “Terminal” (in Utilities), a BASH implementation• On Windows7, cmd.exe (native) or “Cygwin” (open source BASH implementation)
  23. 23. THE COMMAND LINE
  24. 24. The Front End[client side code]
  25. 25. Front-End DevelopmentAn interaction between three “languages” • HTML - the content of the internet • CSS - the style of the internet • Javascript - the logic and action of the internet
  26. 26. HTMLThe “content” of the internet • just text, no formatting.
  27. 27. HTMLThe “content” of the internet • just text, no formatting.
  28. 28. HTMLThe “content” of the internet • just text, no formatting.
  29. 29. Coding in HTMLTags delineate ‘code’ from content. • <div> I’m inside a tag! </div> • Tags have “properties,” and these properties are then passed on to the content within the tags
  30. 30. Popular Tags• <div> the delineating blocks of html <div>This content will be in an div block!</div>• <a> links <a href=”http://www.hackyale.com”>Home</a>• <img> images <img src=”http://www.hackyale.com/logo.png” />• <p> paragraphs <p>This text will be in a nice paragraph</p>
  31. 31. Form Tags<form> First name: <input type="text" name="firstname" /><br /> Last name: <input type="text" name="lastname" /></form><form> <input type="radio" name="sex" value="male" /> Male<br /> <input type="checkbox" name="sex" value="female" /> Female</form><form name="input" action="/signup"> Username: <input type="text" name="user" /> <input type="submit" value="Submit" /></form>
  32. 32. Form Tags<form> First name: <input type="text" name="firstname" /><br /> Last name: <input type="text" name="lastname" /></form><form> <input type="radio" name="sex" value="male" /> Male<br /> <input type="checkbox" name="sex" value="female" /> Female</form><form name="input" action="/signup"> Username: <input type="text" name="user" /> <input type="submit" value="Submit" /></form>
  33. 33. HTML in action!
  34. 34. HTML in action!But there’s no styling...
  35. 35. Enter, CSS “Cascading Style Sheets”<p> Hello World! </p><p> Paragraphs are great! </p><p> Totally </p>
  36. 36. Enter, CSS “Cascading Style Sheets”<p> Hello World! </p><p> Paragraphs are great! </p><p> Totally </p>
  37. 37. Now make them red. Alright, no problem sir!
  38. 38. Now make them red. Alright, no problem sir!<p style=”color:red”> Hello World! </p>
  39. 39. Now make them red. Alright, no problem sir!<p style=”color:red”> Hello World! </p><p style=”color:red” > Paragraphs are great! </p>
  40. 40. Now make them red. Alright, no problem sir!<p style=”color:red”> Hello World! </p><p style=”color:red” > Paragraphs are great! </p><p style=”color:red” > Totally </p>
  41. 41. Now make them red. Alright, no problem sir!<p style=”color:red”> Hello World! </p><p style=”color:red” > Paragraphs are great! </p><p style=”color:red” > Totally </p>
  42. 42. Meh. Now make them blue. But I just changed them all!
  43. 43. Meh. Now make them blue. But I just changed them all!<p style=”color:blue”> Hello World! </p>
  44. 44. Meh. Now make them blue. But I just changed them all!<p style=”color:blue”> Hello World! </p><p style=”color:blu” > Paragraphs are great! </p>
  45. 45. Meh. Now make them blue. But I just changed them all!<p style=”color:blue”> Hello World! </p><p style=”color:blu” > Paragraphs are great! </p><p style=”color:red” > Totally </p>
  46. 46. Meh. Now make them blue. But I just changed them all!<p style=”color:blue”> Hello World! </p><p style=”color:blu” > Paragraphs are great! </p><p style=”color:red” > Totally </p>
  47. 47. In-line styling is sloppy
  48. 48. In-line styling is sloppy CSS lets us get “DRY” => don’t repeat yourself!
  49. 49. Styling in CSSTwo Benefits
  50. 50. Styling in CSSTwo Benefits 1. Cleaner code
  51. 51. Styling in CSSTwo Benefits 1. Cleaner code 2. Flexible code
  52. 52. Selectors in CSSStyles are applied to selectors.
  53. 53. Selectors in CSSStyles are applied to selectors. 1. tags, i.e.: div, a, p
  54. 54. Selectors in CSSStyles are applied to selectors. 1. tags, i.e.: div, a, p 2. classes, non-unique identifiers
  55. 55. Selectors in CSSStyles are applied to selectors. 1. tags, i.e.: div, a, p 2. classes, non-unique identifiers 3. ids, unique identifiers
  56. 56. Selectors in HTML
  57. 57. Selectors in CSS
  58. 58. Without CSS
  59. 59. With CSS
  60. 60. Javascript[making web pages dynamic]
  61. 61. OverviewJavascript introduces logic into the client side • Ex: If page element A is clicked, make page element B disappear • Ex: When a person submits their name to this box (“input”), hide the input and display “Thank you!”
  62. 62. Brief History of JavascriptSee: this excerpt from Metafilter • Created by Brendan Eich at Netscape in less than two weeks => a little rough around the edges • Has almost nothing to do with Java • During the web 1.0 days, was much derided / blocked • Web 2.0 was really all about Javascript • Currently the most important language in existence
  63. 63. JavascriptA general purpose programming language • Unlike HTML / CSS, which are domain specific • Contains variables & logical statements • “Event driven” => structured around “callbacks” • A “callback” is a function or code snippet executed upon the occurrence of some specified event
  64. 64. Server Side JavascriptThanks to Google & Joyent, Javascript is nowcommonly used server side • Google’s V8 engine => Javascript lightning fast • Joyent => Node.js, a web application framework based on V8
  65. 65. Deployment[going live with your code]
  66. 66. ESSENTIAL ASIDE: GIT“Git” is a document version control tool • Created by Linus Torvalds & team to manage distributed development of Linux kernel • Consists of (1) a command line executable, and (2) a domain specific language (“DSL”) (“add,” “commit,” “push,” “pull,” “merge,” “checkout,” etc.) • Maintains a local repository of “diffs” allowing you to reconstruct the state of your code at the moment of any “git commit [file or directory]” command
  67. 67. ESSENTIAL ASIDE: GIT“Git” will be confusing at first • Don’t get frustrated • Don’t start by reading a Git reference • You will grasp the basic commands quickly via example • Then feel free to supplement your knowledge by reference to resources section of HackYale.com
  68. 68. GITHUB Deployment[going live with your code]
  69. 69. GITHUBWebsite (github.com) that hosts applicationcode • Free if you share it • Pay to protect it
  70. 70. GITHUBAs the name suggests, Github is integratedwith the git utility • Genius customer acquisition strategy => slip seamlessly into existing workflow • Send your code to github: git push [remote] [branch] • Get some code from github: git pull [remote] [branch]
  71. 71. GITHUB“Github is the hacker resume” -Clever person
  72. 72. GITHUBWe will be using GithubPart of your homework for this week is toinstall git and make a Github profile
  73. 73. HEROKU Deployment[going live with your code]
  74. 74. HEROKUCloud based service that hosts applications • Hosting code != hosting applications • A “front end” to Amazon EC2 • HackYale.com lives on Heroku
  75. 75. HEROKUIncredibly fast deployment via command line: • (1) $ gem install heroku • (2) $ heroku create • (3) $ git push heroku master
  76. 76. HEROKUFantastic business • Integrated Insert to Githubto=> genius customer with sell Heroku taken amount of time acquisitionSalesforce strategy • Free to host an app. Pay for “add-ons” and scale => another genius customer acquisition • Targeted Rails apps at outset => a third genius customer acquisition strategy • Hosted on Amazon’s servers => no Capex or server maintenance costs => high margins • Sold to Salesforce.com for $200mm after [X months]
  77. 77. HEROKU Lookup Rack middleware. Routes to server?We will use Heroku • Supports both Node.js and Rails • More broadly, supports Rack middleware based applications • Part of this week’s homework is to create an account on Heroku and deploy a “static” page
  78. 78. QUESTIONS?contact will_and_bay@hackyale.com

×