O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

6 JavaScript Projects

Book Description

There's no doubt that the JavaScript ecosystem changes fast. Not only are new tools and frameworks introduced and developed at a rapid rate, the language itself has undergone big changes with the introduction of ES2015 (aka ES6). Understandably, many articles have been written complaining about how difficult it is to learn modern JavaScript development these days. We're aiming to minimize that confusion with this set of books on modern JavaScript.

This book presents six complete JavaScript projects; each taking advantage of modern JavaScript and its ecosystem. You'll learn to build several different apps, and along the way you'll pick up a ton of useful advice, tips, and techniques. It contains:

  • Build a Full-Sphere 3D Image Gallery with React VR by Michaela Lehr
  • Build a WebRTC Video Chat Application with SimpleWebRTC by Michael Wanyoike
  • Build a JavaScript Single Page App Without a Framework by Michael Wanyoike
  • Build a To-do List with Hyperapp, the 1KB JS Micro-framework by Darren Jones
  • Use Parcel to Bundle a Hyperapp App & Deploy to GitHub Pages by Darren Jones
  • Interactive Data Visualization with Modern JavaScript and D3 by Adam Janes

This book is for all front-end developers who wish to improve their JavaScript skills. You'll need to be familiar with HTML and CSS and have a reasonable level of understanding of JavaScript in order to follow the discussion.

Table of Contents

  1. 6 JavaScript Projects
  2. Notice of Rights
  3. Notice of Liability
  4. Trademark Notice
  5. About SitePoint
  6. Preface
    1. Who Should Read This Book?
    2. Conventions Used
      1. Code Samples
      2. Tips, Notes, and Warnings
  7. Chapter 1: Build a Full-Sphere 3D Image Gallery with React VR
    1. by Michaela Lehr
    2. Development Setup and Project Structure
    3. Adding a Spherical Image to the Scene
    4. Create a UI Component to Hold Four Buttons
    5. Add Animations for Button State Transitions
    6. Building and Testing the Application
    7. Further Resources
  8. Chapter 2: Build a WebRTC Video Chat Application with SimpleWebRTC
    1. by Michael Wanyoike
    2. What is SimpleWebRTC
    3. Building the WebRTC Video Chat App
    4. Dependencies
    5. Project Setup
    6. Markup
    7. Templates
    8. Main App Script
    9. Chat Room Script
    10. Remote Video Camera
    11. Deployment
    12. Conclusion
  9. Chapter 3: Build a JavaScript Single Page App Without a Framework
    1. by Michael Wanyoike
    2. Prerequisites
    3. Building the Project
    4. Project Directories and Dependencies
    5. Application Base
    6. Front-end Skeleton Templates
    7. Client-side Routing
    8. Latest Currency Rates
    9. Exchange Conversion
    10. Historical Currency Rates
    11. Summary
  10. Chapter 4: Build a To-do List with Hyperapp, the 1KB JS Micro-framework
    1. by Darren Jones
    2. So, What Is HyperApp?
    3. Getting Started
    4. Hello Hyperapp!
    5. Components
    6. State
    7. Actions
    8. Hyperlist
    9. Initial State and View
    10. Adding a Task
    11. Mark a Task as Completed
    12. Delete a Task
    13. Delete All Completed Tasks
    14. That’s All, Folks
  11. Chapter 5: Use Parcel to Bundle a Hyperapp App & Deploy to GitHub Pages
    1. by Darren Jones
    2. Basic Setup
    3. Folder Structure
    4. Some Basic HTML
    5. ES6 Modules
    6. Add Some Style
    7. Babel
    8. Parcel
    9. npm Scripts
    10. Deploying to GitHub Pages
    11. Workflow
    12. That’s All, Folks!
  12. Chapter 6: Interactive Data Visualization with Modern JavaScript and D3
    1. by Adam Janes
    2. The Project
    3. Sketching
    4. Borrowing Code
    5. Walking Through Our Code
    6. Adapting Code
    7. Making it Dynamic
    8. Making it Interactive