UPLOAD

    4.7K

    WEB DEVELOPMENT TOOLS & FRAMEWORKS

    Published: October 09, 2018

    Web Development Stages Tools & Frameworks

    Comments

    WEB DEVELOPMENT TOOLS & FRAMEWORKS

    • 1. Slide1 WEB DEVELOPMENT TOOLS & FRAMEWORKS
    • 2. Slide3 A brief history of Web Development https://pantheon.io/blog/history-‐website-‐development-‐infographic
    • 3. Web Development Stages1 – Concept Development         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.
    • 4. Web Development Stages2 – Prototype Development         Web Development Stages 2 – Prototype Development A “broken” version of your website: ◦Links work, but don’t lead to any content. ◦“User Journey” is complete: ◦“As a I want to “ ◦Quick to change and move things around.
    • 5. Web Development Stages3 -­‐ Development         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
    • 6. Web Development Stages  4 -­‐ Testing Web Development Stages 4 -‐ Testing If you don’t 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?)
    • 7. Web Development Stages5 -­‐ Deployment         Web Development Stages 5 -‐ Deployment Deployment Process Should Be: ◦Documented ◦Repeatable ◦Predictable ◦Rehearsed ◦Tools help!
    • 8. Web Development Stages6 -­‐ Maintenance         Web Development Stages 6 -‐ Maintenance Small effort, big rewards ◦Enable maintenance by tracking: ◦Successful requests ◦Failed requested ◦Repeated failed requests ◦Key function execution ◦Infrastructure
    • 9. Slide10 Tools & Frameworks USE THESE TO JUMPSTART YOUR DEVELOPMENT
    • 10. Slide11
    • 11. Categories of Tools & Frameworks:Server Side Development         Categories of Tools & Frameworks: Server Side Development
    • 12. Categories of Tools & Frameworks  Frontend Development         Categories of Tools & Frameworks Frontend Development
    • 13. Categories of Tools & Frameworks  Platforms         Categories of Tools & Frameworks Platforms
    • 14. Categories of Tools & Frameworks  Development Helpers         Categories of Tools & Frameworks Development Helpers
    • 15. Slide16
    • 16. A quick note about workflows 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.
    • 17. Slide18 Quick Demo Web Development QUICKEST WAY TO PUBLISH A WEBSITE – GUARANTEED!
    • 18. Demo Requirements – 30 minutes         Demo Requirements – 30 minutes Windows •git •Text Editor •github.com account •Python (2 or 3) Mac •Same Linux •Same
    • 19. Demo Steps – Phase 1Local Development & Testing         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:\gustt_demo 2.On Mac, default path is /users/home/yourusername/gustt_demo 2.Create a index.httml file in this directory, with any content you like. 3.Start a local server: 1.Python 2: 1.pytthon –m SimpleHTTPServer 8000 2.Python 3: 1.pytthon –m httttp.server 8000 4.Browse httttp://localhostt:8000
    • 20. Demo Steps – Phase 2  Publishing Demo Steps – Phase 2 Publishing 1.Commit your files to git: 1.gitt initt 2.gitt add . 3.gitt committ –m “inittial committ” 2.Create a repository on github: 1.Login to your github account https://github.com/name/ 2.If you are creating an account for the first time, click on the welcome email to verify it. 3.Create a repository called name.gitthub.io 4.Type these commands to configure git: 1.gitt config –global user.name “Your Name” 2.gitt config –global user.email “you@email.com” 3.Push your website: 1.gitt remotte add origin httttps://gitthub.com/name/name.gitthub.io.gitt 2.gitt push –u origin mastter
    • 21. Slide22 Q&A
    • 22. Slide23 Web Development – Recap LETS STOP AND LOOK BACK AT WHAT WE DID
    • 23. How Does It All Work? How Does It All Work? THE DETAILS
    • 24. Slide25 The Internet A LARGE NETWORK OF COMPUTERS, CONNECTED THROUGH A COMMON NETWORK SPREAD ACROSS A LARGE AREA.
    • 25. Slide26 World Wide Web AN INFORMATION NETWORK BUILT ON TOP OF THE INTERNET USING HYPERLINKED DOCUMENTS.
    • 26. HTML & HTML5 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
    • 27. CLIENT SIDE 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
    • 28. SERVER SIDE SERVER SIDE A TERM USED TO DESCRIBE TECHNOLOGY THAT RUNS ON THE SERVERS CONNECTED TO THE INTERNET PROVIDING ONE OR MORE SERVICES.
    • 29. Slide30 USER AGENT THE TECHNICAL TERM FOR THE PIECE OF SOFTWARE THAT IS USED TO DISPLAY DOCUMENTS ON THE WORLD WIDE WEB (WWW).
    • 30. Slide31 DOCUMENT OBJECT MODEL A CONVENTION OF DESCRIBING AND INTERACTING WITH HTML DOCUMENTS AS A SERIES OF NODES ON A TREE.
    • 31. Slide32 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.
    • 32. TCP/IP  IPv4  IPv6 TCP/IP IPv4 IPv6 Protocols Used To Communıcate Wıth Servers on the Internet. Each Devıce That Connects to Internet Needs an Ip Address.
    • 33. DOMAIN NAME SYSTEM DOMAIN NAME SYSTEM A DISTRIBUTED SYSTEM DESIGNED TO ASSIGN NAMES TO IP ADDRESSES, IN ORDER TO IDENTIFY RESOURCES ON A NETWORK.
    • 34. WEB SERVER WEB SERVER A PIECE OF SOFTWARE CODE THAT LISTENS TO CONNECTIONS AND RESPONDS WITH DOCUMENTS OR OTHER RESOURCES ON THE WORLD WIDE WEB.
    • 35. Slide36 APACHE IIS NGINX POPULAR WEB SERVER USED ON THE INTERNET. APACHE CONTROLS THE MAJORITY OF THE MARKET.
    • 36. Slide37 HTTP HTTPS HYPERTEXT TRANSFER PROTOCOL. A TEXT PROTOCOL CONSISTING OF A SERIES OF COMMANDS USED TO SEND DATA AND REQUEST DOCUMENTS OVER THE WEB.
    • 37. Slide38 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.
    • 38. Slide39 FTP/SFTP FILE TRANSFER PROTOCOL. A METHOD OF TRANSFERRING DATA BETWEEN SERVERS. SFTP IS SECURE-‐FTP
    • 39. Slide40 SECURE SHELL (SSH) AN ENCRYPTED METHOD OF CONNECTING TO REMOTE COMPUTERS AND EXECUTING COMMANDS.
    • 40. GIT   MERCURIAL  SUBVERSION GIT MERCURIAL SUBVERSION POPULAR REVISION CONTROL SYSTEMS. THESE SYSTEMS TRACK CHANGES IN FILES ALLOWING EASY RECOVERY OF PREVIOUS VERSIONS.
    • 41. Slide42 DEMO PLEASE FOLLOW ALONG IF YOU CAN
    • 42. Classic Web Application  Architecture        BASIC        BUILDING        BLOCKS        FOR        MOST        WEB        APPLICATIONS Classic Web Application Architecture BASIC BUILDING BLOCKS FOR MOST WEB APPLICATIONS
    • 43. The old (and current) way         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
    • 44. Modern Web  Application Architecture Modern Web Application Architecture ADVANCED APPLICATIONS – FOR ADVANCED DEVICES
    • 45. Modern Applications (Simplified)         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)
    • 46. Slide47 DEMO CREATING A CMS FROM SCRATCH
    • 47. Web Development –  Part II Web Development – Part II USING A WORKFLOW FOR WEB DEVELOPMENT
    • 48. Demo Requirements – 1 Hour (excluding  download time)           Demo Requirements – 1 Hour (excluding download time)   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
    • 49. Pre-­‐requisites – All Platforms         Pre-‐requisites – All Platforms