Learning Web App Development

Learning Web App Development

by Semmy Purewal
Released February 2014
Publisher(s): O'Reilly Media, Inc.
ISBN: 9781449370190

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Buy on Amazon Buy on ebooks.com
Start your free trial

Book description

Grasp the fundamentals of web application development by building a simple database-backed app from scratch, using HTML, JavaScript, and other open source tools. Through hands-on tutorials, this practical guide shows inexperienced web app developers how to create a user interface, write a server, build client-server communication, and use a cloud-based service to deploy the application.

Each chapter includes practice problems, full examples, and mental models of the development workflow. Ideal for a college-level course, this book helps you get started with web app development by providing you with a solid grounding in the process.

  • Set up a basic workflow with a text editor, version control system, and web browser
  • Structure a user interface with HTML, and include styles with CSS
  • Use JQuery and JavaScript to add interactivity to your application
  • Link the client to the server with AJAX, JavaScript objects, and JSON
  • Learn the basics of server-side programming with Node.js
  • Store data outside your application with Redis and MongoDB
  • Share your application by uploading it to the cloud with CloudFoundry
  • Get basic tips for writing maintainable code on both client and server

Publisher resources

View/Submit Errata

Table of contents

  1. Dedication
  2. Preface
    1. Technology Choices
    2. Is This Book for You?
    3. Learning with This Book
    4. Teaching with This Book
    5. Where to Go for Help
    6. General Comments on Code
    7. Conventions Used in This Book
    8. Using Code Examples
    9. Safari® Books Online
    10. How to Contact Us
    11. Acknowledgments
      1. Errata Reporters
  3. 1. The Workflow
    1. Text Editors
      1. Installing Sublime Text
      2. Sublime Text Basics
    2. Version Control
      1. Installing Git
      2. Unix Command-Line Basics
        1. Where am I?
        2. Changing directories
        3. Creating directories
        4. Filesystems and trees
      3. Git Basics
        1. Configuring Git for the first time
        2. Initializing a Git repository
        3. Determining the status of our repository
        4. Our first commits!
        5. Viewing the history of our repo
        6. Saving versus committing
    3. Browsers
      1. Installing Chrome
    4. Summary
    5. More Practice and Further Reading
      1. Memorization
      2. Sublime Text
      3. Emacs and Vim
      4. Unix Command Line
      5. More About Git
      6. GitHub
  4. 2. The Structure
    1. Hello, HTML!
      1. Tags Versus Content
      2. <p> Is for Paragraph
      3. Comments
      4. Headings and Anchors and Lists, Oh My!
      5. Generalizations
    2. The Document Object Model and Trees
    3. Using HTML Validation to Identify Problems
    4. Amazeriffic
      1. Identifying Structure
      2. Visualizing Structure with a Tree
      3. Implementing the Structure with Our Workflow
      4. Structuring the Main Content
      5. Structuring the Footer
    5. Summary
    6. More Practice and Further Reading
      1. Memorization
      2. Tree Diagrams
      3. Build the FAQ Page for Amazeriffic
      4. More About HTML
  5. 3. The Style
    1. Hello, CSS!
      1. Rulesets
      2. Comments
      3. Padding, Border, and Margin
    2. Selectors
      1. Classes
      2. Pseudoclasses
      3. More Complex Selectors
      4. Cascading Rules
      5. Inheritance
    3. Layouts with Floats
      1. The clear Property
    4. Working with Fonts
    5. Resetting Browser Inconsistencies
    6. Using CSS Lint to Identify Potential Problems
    7. Interacting and Troubleshooting with the Chrome Developer Tools
    8. Styling Amazeriffic
      1. The Grid
      2. Creating the Columns
      3. Adding and Manipulating Fonts
      4. A Few More Modifications
    9. Summary
    10. More Practice and Further Reading
      1. Memorization
      2. CSS Selectors Practice
      3. Style the FAQ Page for Amazeriffic
      4. Cascading Rules
      5. Responsiveness and Responsive Libraries
  6. 4. The Interactivity
    1. Hello, JavaScript!
    2. Our First Interactive App
      1. The Structure
      2. The Style
      3. The Interactivity
        1. Handling click events
        2. Dynamically manipulating the DOM
        3. Squashing a bug
        4. Clearing out the input box
        5. Making the Enter key work as expected
        6. Fading in our new comment
        7. Refactoring for simplicity
    3. jQuery Generalizations
      1. Setting Up a Project
      2. Comments
      3. Selectors
      4. DOM Manipulation
        1. Adding elements to the DOM
        2. Removing elements from the DOM
      5. Events and Asynchronicity
    4. JavaScript Generalizations
      1. Interacting with JavaScript in the Chrome JavaScript Console
      2. Variables and Types
      3. Functions
      4. Selection
      5. Iteration
      6. Arrays
    5. Using JSLint to Identify Potential Problems
    6. Adding Interactivity to Amazeriffic
      1. Getting Started
      2. The Structure and Style
      3. The Interactivity
        1. Creating the tab functionality
        2. Refactoring the code using a function
        3. Refactoring the code using a loop
        4. Refactoring the code using a forEach loop
        5. Manipulating content
        6. Setting up the tab content
    7. Summary
    8. More Practice and Further Reading
      1. Memorization
      2. jQuery Plug-ins
      3. jQuery Selectors
      4. FizzBuzz
      5. Array Practice
      6. Project Euler
      7. Other JavaScript References
  7. 5. The Bridge
    1. Hello, JavaScript Objects!
      1. Representing Playing Cards
      2. Generalizations
    2. Communication Between Computers
      1. JSON
      2. AJAX
      3. Accessing an External JSON File
      4. Overcoming Browser Security Restrictions
      5. The getJSON Function
      6. A JSON Array
      7. So What?
    3. Getting Images from Flickr
    4. Adding a Tags Feature to Amazeriffic
      1. The map Function
      2. Adding a Tags Tab
      3. Building the UI
      4. Creating an Intermediate Tags Data Structure
        1. Setting up a test bed
        2. My solution
      5. Tags as Part of Our Input
    5. Summary
    6. More Practice and Further Reading
      1. Flickr Slideshow
      2. Object Practice
      3. Other APIs
  8. 6. The Server
    1. Setting Up Your Environment
      1. Installing VirtualBox and Vagrant
      2. Building Your Virtual Machine
      3. Connecting to Your Virtual Machine with SSH
      4. Hello, Node.js!
    2. Mental Models
      1. Clients and Servers
      2. Hosts and Guests
      3. Practicalities
    3. Hello, HTTP!
    4. Modules and Express
      1. Installing Express with NPM
      2. Our First Express Server
      3. Sending Your Client App
      4. Generalizations
    5. Counting Tweets
      1. Getting Your Twitter Credentials
      2. Connecting to the Twitter API
      3. What’s Happening Here?
      4. Storing Counts
        1. Using the indexOf function to find words
        2. Using the setInterval function to schedule tasks
      5. Modularizing Our Tweet Counter
      6. Importing Our Module Into Express
      7. Setting Up a Client
    6. Creating a Server for Amazeriffic
      1. Setting Up Our Directories
      2. Initializing a Git Repository
      3. Building the Server
      4. Running the Server
      5. Posting Information to the Server
    7. Summary
    8. More Practice and Further Reading
      1. Installing Node.js Locally
      2. JSHint and CSS Lint via NPM
      3. Generalizing Our Tweet Counter Code
      4. Poker API
  9. 7. The Data Store
    1. NoSQL Versus SQL
    2. Redis
      1. Interacting with the Redis Command-Line Client
      2. Installing the Redis Module via a package.json File
      3. Interacting with Redis in Our Code
      4. Initializing the Counts from the Redis Store
      5. Using mget to Get Multiple Values
    3. MongoDB
      1. Interacting with the MongoDB Command-Line Client
      2. Modeling Data with Mongoose
        1. Models
      3. Storing Amazeriffic ToDos
    4. Summary
    5. More Practice and Further Reading
      1. Poker API
      2. Other Database References
  10. 8. The Platform
    1. Cloud Foundry
    2. Creating an Account
    3. Getting Your App Ready for Deployment
    4. Deploying Our App
    5. Getting Information About Your Apps
    6. Updating Your App
    7. Deleting Apps from Cloud Foundry
    8. Dependencies and package.json
    9. Binding Redis to Your App
    10. Binding MongoDB to Your App
    11. Summary
    12. More Practice and Further Reading
      1. Poker API
      2. Other Platforms
  11. 9. The Application
    1. Refactoring Our Client
      1. Generalizing Meaningful Concepts
      2. AJAXifying Our Tabs
      3. Ridding Ourselves of Hacks
      4. Handling AJAX Errors
    2. Refactoring Our Server
      1. Code Organization
        1. Separating concerns: models
        2. Separating concerns: controllers
      2. HTTP Verbs, CRUD, and REST
      3. Setting Up Routes by ID
      4. Using jQuery for put and delete Requests
      5. HTTP Response Codes
      6. Model-View-Controller
    3. Adding Users to Amazeriffic
      1. Building the User Model
      2. Building the User Controller
      3. Setting Up Routes
      4. Improving Our ToDo Controller Actions
    4. Summary
    5. More Practice and Further Reading
      1. Removing ToDos
      2. Adding a User Admin Page
      3. Views Using EJS and Jade
      4. Build Another App
      5. Ruby on Rails
  12. Index
  13. Colophon
  14. Copyright

Product information

  • Title: Learning Web App Development
  • Author(s): Semmy Purewal
  • Release date: February 2014
  • Publisher(s): O'Reilly Media, Inc.
  • ISBN: 9781449370190