Basic Introduction to Web Development

Download Basic Introduction to Web Development

Post on 28-Jul-2015




0 download


1. WEB DEVELOPMENT TOOLS & FRAMEWORKS BURHAN KHALID (@BURHAN) GUST MARCH 30 2015 2. Todays Talk Brief History of Web Development Stages of Web Development Concept Development Prototyping Development Testing Launch Maintenance Tools & Frameworks Next Generation Development (exciting stuff!) Q&A 3. A brief history of Web Development 4. Web Development Stages 1 Concept Development Write down the following: Who is this website for? (the types of users) Why am I making it? (what is the problem?) What is the most important thing visitors should do on your website. Write, read. Write, read. Repeat. Sketch (draw) your website outline. 5. Web Development Stages 2 Prototype Development A broken version of your website: Links work, but dont lead to any content. User Journey is complete: As a _______ I want to _______ Quick to change and move things around. 6. Web Development Stages 3 - Development Ideally, your requirements are complete Work at an iterative pace: Develop at the lowest possible work unit Use the tool that suits you, and makes you the most productive: Text Editor IDE Terminal GUI 7. Web Development Stages 4 - Testing If you dont test; prepare to fail. Types of testing: Functional Test (does the feature work?) User acceptance test (is it what the user wants?) Unit test (is the code stable?) Coverage tests (are all code paths executing?) 8. Web Development Stages 5 - Deployment Deployment Process Should Be: Documented Repeatable Predictable Rehearsed Tools help! 9. Web Development Stages 6 - Maintenance Small effort, big rewards Enable maintenance by tracking: Successful requests Failed requested Repeated failed requests Key function execution Infrastructure 10. Tools & Frameworks USE THESE TO JUMPSTART YOUR DEVELOPMENT 11. Categories of Tools & Frameworks: Server Side Development 12. Categories of Tools & Frameworks Frontend Development 13. Categories of Tools & Frameworks Platforms 14. Categories of Tools & Frameworks Development Helpers 15. A quick note about workflows A good development workflow: Helps you get started. Maintains your dependencies. Enforces best practices. Prepares your tools. Fights regressions. Eases the release process. 16. Quick Demo Web Development QUICKEST WAY TO PUBLISH A WEBSITE GUARANTEED! 17. Demo Requirements 30 minutes Windows git Text Editor account Python (2 or 3) Mac Same Linux Same 18. Demo Steps Phase 1 Local Development & Testing 1. Create a directory anywhere in your file system, and change (cd) into this directory: 1. On Windows recommended to use a path without spaces, so D:gust_demo 2. On Mac, default path is /Users/yourloginname/gust_demo 3. On Linux, default path is /home/yourusername/gust_demo 2. Create a index.html file in this directory, with any content you like. 3. Start a local server: 1. Python 2: 1. python m SimpleHTTPServer 8000 2. Python 3: 1. python m http.server 8000 4. Browse http://localhost:8000 19. Demo Steps Phase 2 Publishing 1. Commit your files to git: 1. git init 2. git add . 3. git commit m initial commit 2. Create a repository on github: 1. Login to your github account 2. If you are creating an account for the first time, click on the welcome email to verify it. 3. Create a repository called 4. Type these commands to configure git: 1. git config global Your Name 2. git config global 3. Push your website: 1. git remote add origin 2. git push u origin master 20. Q&A 21. Web Development Recap LETS STOP AND LOOK BACK AT WHAT WE DID 22. How Does It All Work? THE DETAILS 23. The Internet A LARGE NETWORK OF COMPUTERS, CONNECTED THROUGH A COMMON NETWORK SPREAD ACROSS A LARGE AREA. 24. World Wide Web AN INFORMATION NETWORK BUILT ON TOP OF THE INTERNET USING HYPERLINKED DOCUMENTS. 25. HTML & HTML5 HYPERTEXT MARKUP LANGUAGE. A LANGUAGE CONSISTING OF A SERIES OF TAGS USED TO ANNOTATE DOCUMENTS THAT ARE TO BE LINKED TOGETHER ON THE WEB. THE LATEST VERSION IS 5 26. CLIENT SIDE A TERM USED TO DESCRIBE TECHNOLOGY THAT RUNS ON THE DEVICE CONNECTED TO THE INTERNET AND REQUESTING DOCUMENTS FROM A SERVER. EXAMPLE: JAVASCRIPT, FLASH 27. SERVER SIDE A TERM USED TO DESCRIBE TECHNOLOGY THAT RUNS ON THE SERVERS CONNECTED TO THE INTERNET PROVIDING ONE OR MORE SERVICES. 28. USER AGENT THE TECHNICAL TERM FOR THE PIECE OF SOFTWARE THAT IS USED TO DISPLAY DOCUMENTS ON THE WORLD WIDE WEB (WWW). 29. DOCUMENT OBJECT MODEL A CONVENTION OF DESCRIBING AND INTERACTING WITH HTML DOCUMENTS AS A SERIES OF NODES ON A TREE. 30. TELNET A PLAIN TEXT BI-DIRECTIONAL PROTOCOL USED TO COMMUNICATE WITH SERVERS. IT IS ALSO THE NAME OF A PROGRAM THAT IS USED TO CONNECT OT SERVERS. 31. TCP/IP IPv4 IPv6 PROTOCOLS USED TO COMMUNICATE WITH SERVERS ON THE INTERNET. EACH DEVICE THAT CONNECTS TO INTERNET NEEDS AN IP ADDRESS. 32. DOMAIN NAME SYSTEM A DISTRIBUTED SYSTEM DESIGNED TO ASSIGN NAMES TO IP ADDRESSES, IN ORDER TO IDENTIFY RESOURCES ON A NETWORK. 33. WEB SERVER A PIECE OF SOFTWARE CODE THAT LISTENS TO CONNECTIONS AND RESPONDS WITH DOCUMENTS OR OTHER RESOURCES ON THE WORLD WIDE WEB. 34. APACHE IIS NGINX POPULAR WEB SERVER USED ON THE INTERNET. APACHE CONTROLS THE MAJORITY OF THE MARKET. 35. HTTP HTTPS HYPERTEXT TRANSFER PROTOCOL. A TEXT PROTOCOL CONSISTING OF A SERIES OF COMMANDS USED TO SEND DATA AND REQUEST DOCUMENTS OVER THE WEB. 36. REQUEST/RESPONSE THE NAME GIVEN TO THE COMPLETE CYCLE TO FETCH DOCUMENTS AND RESOURCES USING HTTP. THE CLIENT INITIATES THE REQUEST, AND THE SERVER SENDS THE RESPONSE. 37. FTP/SFTP FILE TRANSFER PROTOCOL. A METHOD OF TRANSFERRING DATA BETWEEN SERVERS. SFTP IS SECURE-FTP 38. SECURE SHELL (SSH) AN ENCRYPTED METHOD OF CONNECTING TO REMOTE COMPUTERS AND EXECUTING COMMANDS. 39. GIT MERCURIAL SUBVERSION POPULAR REVISION CONTROL SYSTEMS. THESE SYSTEMS TRACK CHANGES IN FILES ALLOWING EASY RECOVERY OF PREVIOUS VERSIONS. 40. DEMO PLEASE FOLLOW ALONG IF YOU CAN 41. Classic Web Application Architecture BASIC BUILDING BLOCKS FOR MOST WEB APPLICATIONS 42. The old (and current) way DATABASE (the models) Server Code (controllers) View (code to render HTML) Client Side Javascript (jquery components) HTML Templates; CSS; layouts 43. Modern Web Application Architecture ADVANCED APPLICATIONS FOR ADVANCED DEVICES 44. Modern Applications (Simplified) Models (database, document) Services (API, Authentication, Caching, Serialization) Business Logic (controllers, routers) View Layer (code to render HTML) Models (client side models) Presentation (HTML, CSS, Responsive) Local Storage (HTML5) 45. DEMO CREATING A CMS FROM SCRATCH 46. Web Development Part II USING A WORKFLOW FOR WEB DEVELOPMENT 47. Demo Requirements 1 Hour (excluding download time) J Windows git Text Editor Python (2 or 3) node & npm virtualenv & pip A fast Internet connection Vagrant VirtualBox Mac In addition to Windows Homebrew Xcode & Xcode Command Line Tools brew install libpng libjpeg libxml2 postgresql Linux In addition to Windows Development toolchain 48. Pre-requisites All Platforms 49. Demo 50. Q&A Thank You SLIDES AVAILABLE (@GDGKUWAIT / @BURHAN / @SIRDAB_LAB)