Web Development Presentation
1 like4,711 views
The document provides an overview of web development. It discusses how the web was created in 1989 by Tim Berners-Lee and the initial technologies of HTTP, HTML, and URLs. It then explains how a basic web application works with a browser connecting to a web server to request and receive HTML files and other resources. The document also summarizes key concepts in web development including front-end versus back-end code, common programming languages and frameworks, database usage, and standards that allow interoperability across systems.
Web Development Presentation
- 2. Aditya Narayan CEO, TurnToTech mobile technology school and incubator Past: 2 startups, chief architect at Marvel, head of security at Starwood
- 4. 1989, CERN The web server Tim Berners-‐Lee The browser HTTP HTML URL’s
- 6. How does a web applicaOon work?
- 7. Web Server HTML Files, JPGs, business logic 1. Type info.cern.ch/TheProject.html in the browser 2. Browser connects to server named info.cern.ch 3. Browser asks for a resource called TheProject.html 5. TheProject.html is sent back to the browser 4. TheProject.html may have links to other websites Tim Berners-Lee 1989
- 8. Domain name Server Browser Login Database Secure Reliable Graphics designer Should work on mobile Fast Future proof Cost AnalyOcs Data Developer Features Let’s develop a web app APIs
- 9. But where’s the recipe?
- 14. Admin AP Vendors
- 15. Focus: Business Process Outcome: User roles, System features and capabiliOes Business
- 17. Focus: InformaOon hierarchy, NavigaOon
- 20. Focus: InformaOon hierarchy, NavigaOon Outcome: Data model, Screen layout InformaOon
- 22. Hardware System So[ware ApplicaOon So[ware
- 23. Hardware System So[ware ApplicaOon So[ware
- 24. Backend, Frontend, CSS, HTML, HTTP, Framework, Ruby on Rails, JavaScript, Database server, Web Server …
- 25. 1. User types www.webapp.com/index.html in the browser 2. Browser connects to server named www.webapp.com 3. Browser asks for a resource called index.html 5. The final index.html is sent back to the browser 4. index.html may need some data from a database server
- 26. Browser (Thin client) Downloads UI code from server and runs it Web Server Contains business rules and generates code for the browser Database Server Holds the data
- 27. Database Server Holds the data Web Server Contains business rules and generates code for the browser Browser (Thin client) Downloads UI code from server and runs it
- 28. Q: How are different browsers running on different operaOng systems able to use the same web app? A: Standards such as HTML and HTTP
- 29. Code that runs in the browser is front-‐end code HTML, CSS and JavaScript QuesOon: How are different browsers able to work with the same web app? Answer: HTML, CSS and JavaScript happen to be standards accepted worldwide without excepOon
- 31. HTML will let you write UI code in without wriOng ‘real’ code <bufon type="bufon">Click Me!</bufon>
- 32. CSS adds ‘personality’ <bufon type="bufon"> Click Me! </bufon> <bufon type="bufon” style=" background-‐color:orange"> Click Me! </bufon>
- 33. Alerts Form validaOon
- 34. JavaScript HTML and CSS can make your pages look nice But they don’t make the pages appear responsive JavaScript was created as a simple language to address this need
- 35. Technologies derived from JavaScript AJAX jquery Angular
- 36. And code that doesn’t run in the browser is back-‐end code
- 37. Typical backend code runs on the Web Server and the Database server
- 38. Typical backend code runs on the Web Server and the Database server
- 39. RelaOonal Database Typically, code wrifen in SQL runs on the database server And SQL code is all about performing CRUD operaOons on Data Create Read Update Delete
- 41. Typical backend code runs on the Web Server and the Database server
- 43. Web Servers There are several compeOng frameworks for running code on Web Servers JEE,.NET, Rails, Django, PHP
- 44. Web Servers There are several compeOng frameworks for running code on Web Servers JEE,.NET, Ruby on Rails, Django, PHP
- 45. What is a framework?
- 46. Architecture and standards of the web constrain the kind of code you can write.
- 47. The general pafern receive request from browser connect to database generate page send page to browser
- 48. Imagine a web app with 1000 pages receive request from browser connect to database generate page send page to browser
- 49. Frameworks do all the plumbing You write code specific to your app
- 50. PlaKorm Language Supported by JEE Java Oracle .NET C# Microso[ Ruby on Rails Ruby Community Django Python Community PHP PHP Community
- 51. Backend, Frontend, CSS, HTML, HTTP, Framework, Ruby on Rails, JavaScript, Database server, Web Server …
- 52. How about systems talking to systems?
- 54. XML JSON HTTP
- 55. iOS Android Mobile Plaqorms
- 56. Mobile changes the noOon of front-‐end and backend
- 57. Just like web, mobile plaqorms have their frameworks
- 58. A mobile app is self contained server only provides data, not code
- 59. XML JSON HTTP ObjecOve-‐C Java {Watching=7, Buying=23, Selling=5}
- 60. How much so[ware do we need to build? How much can we license?
- 61. Open Source
- 62. Development
- 63. Agile Waterfall
- 64. TDD
- 65. Deployment
- 66. Hosted Public Cloud Private Cloud
- 70. A server must be always on
- 73. AnalyOcs
- 74. Google AnalyOcs
- 76. Over the wire At rest EncrypOon
- 78. OAuth
- 80. New Developments
- 82. Web Sockets
- 83. HTML5
- 85. Web Sockets HTML5 NoSQL
- 86. The web relies on open standards