Book Image

Node.js Web Development - Fourth Edition

By : David Herron
Book Image

Node.js Web Development - Fourth Edition

By: David Herron

Overview of this book

Node.js is a server-side JavaScript platform using an event-driven, non-blocking I/O model allowing users to build fast and scalable data-intensive applications running in real time. This book gives you an excellent starting point, bringing you straight to the heart of developing web applications with Node.js. You will progress from a rudimentary knowledge of JavaScript and server-side development to being able to create, maintain, deploy and test your own Node.js application.You will understand the importance of transitioning to functions that return Promise objects, and the difference between fs, fs/promises and fs-extra. With this book you'll learn how to use the HTTP Server and Client objects, data storage with both SQL and MongoDB databases, real-time applications with Socket.IO, mobile-first theming with Bootstrap, microservice deployment with Docker, authenticating against third-party services using OAuth, and use some well known tools to beef up security of Express 4.16 applications.
Table of Contents (14 chapters)

Problem – the Notes app isn't mobile friendly


Let's start by quantifying the problem. We need to explore how well (or not) the application behaves on a mobile device. This is simple to do:

  1. Start the Notes application. Determine the IP address of the host system.
  2. Using your mobile device, connect to the service using the IP address, and browse around the Notes application, putting it through its paces, noting any difficulties.

Another way to approach this is to use your desktop browser, resizing it to be very narrow. The Chrome DevTools also includes a mobile device emulator. Either way, you can mimic the small screen size of a smartphone on your desktop.

To see a real user interface problem on a mobile screen, edit views/noteedit.ejs and change this line:

<br/><textarea rows=5 cols=80 name='body' >
    {{#if note }}{{note.body}}{{/if}} 
    </textarea>  

What's changed is the cols=80 parameter. We want this textarea element to be overly large so that you can experience how a...