Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Newsletter Hub
Free Learning
Arrow right icon
timer SALE ENDS IN
0 Days
:
00 Hours
:
00 Minutes
:
00 Seconds
Modern JavaScript Applications
Modern JavaScript Applications

Modern JavaScript Applications: Keep abreast of the practical uses of modern JavaScript

Arrow left icon
Profile Icon Narayan Prusty
Arrow right icon
Free Trial
Full star icon Full star icon Full star icon Full star icon Full star icon 5 (1 Ratings)
Paperback Jul 2016 330 pages 1st Edition
eBook
S$41.98 S$59.99
Paperback
S$74.99
Subscription
Free Trial
Arrow left icon
Profile Icon Narayan Prusty
Arrow right icon
Free Trial
Full star icon Full star icon Full star icon Full star icon Full star icon 5 (1 Ratings)
Paperback Jul 2016 330 pages 1st Edition
eBook
S$41.98 S$59.99
Paperback
S$74.99
Subscription
Free Trial
eBook
S$41.98 S$59.99
Paperback
S$74.99
Subscription
Free Trial

What do you get with a Packt Subscription?

Free for first 7 days. $19.99 p/m after that. Cancel any time!
Product feature icon Unlimited ad-free access to the largest independent learning library in tech. Access this title and thousands more!
Product feature icon 50+ new titles added per month, including many first-to-market concepts and exclusive early access to books as they are being written.
Product feature icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Product feature icon Thousands of reference materials covering every tech concept you need to stay up to date.
Subscribe now
View plans & pricing
Table of content icon View table of contents Preview book icon Preview Book

Modern JavaScript Applications

Chapter 2. Building a Coupon Site

The best way to understand Seneca and microservices architecture is by building a server-side application that would benefit from the microservices architecture. In previous chapter, we saw how large and complex server-side application benefits from the microservices architecture and why enterprises use microservices architecture. In this chapter, we will build a coupon website to practically demonstrate the benefits of using microservices architecture and Seneca to create a server-side application. While building this coupon site, you will also learn how to design a server-side application using the microservices architecture from scratch, how to split the functionality of the application into services, how a client can directly communicate with the services, and many other things.

Some of the things that we will cover in this chapter, apart from things related to Seneca and microservices architecture, are as follows:

  • Using the seneca-mongo-store...

Getting started

The coupon site that we will build will allow users to submit coupons. For the coupon to be publicly visible, the administrator of the site should accept the coupon. Every coupon will have an image attached to it that will be stored and served by an image storage server.

We will be using MongoDB to store the coupons. Before you continue further, make sure that you have MongoDB installed and running. I am assuming that you have basic knowledge of MongoDB.

The exercise files contain two directories: Initial and Final. Inside the Final directory, you will find the complete coupon site source code. In the Initial directory, you will find the HTML code and directories for the monolithic core, services, image storage server, and so on. You will put code related to them in their respective directories. The Initial directory will help you quickly get started with building the coupon site.

We won't get into designing the frontend of our coupon site. We will only be concentrating...

Architecture of our site

Our server-side application will be composed of a monolithic core, three services, MongoDB server, and image storage server.

The monolithic core will serve pages to the site visitors and administrators.

The three services are database service, URL configuration service, and upload service. The following is what each of these services do:

  • Database service: Adding, retrieving, updating, and deleting coupons in MongoDB is done through database service. The monolithic core retrieves coupons from MongoDB through database service, and upload service stores coupons through database service.
  • Upload service: When a user submits a coupon, the HTML form is submitted to the upload service. The upload service then sends the image to the image storage server and adds metadata about the coupon to the database using the database service. We moved these operations to a different service, because if we are resizing and converting the uploaded image, then it will consume more memory and...

Creating the services

Let's first build the services before building the image storage server and monolithic core.

We will build the database service first, as it only depends on the MongoDB server, which is already running. The upload service and monolithic core depend on it, therefore it needs to be built before these.

Database service

The database service will provide actions to add coupons, list verified coupons, list unverified coupons, verify a coupon, and delete a coupon. These actions will be used by the upload service and monolithic core.

Open the Initial/database-service directory. Inside the directory, you will find a package.json file and an app.js file. The app.js file is where you will write the code, and package.json lists the dependencies for the database service. The database service is dependent on the seneca and seneca-mongo-store plugins. Run the npm install command inside Initial/database-service to install the dependencies locally.

Here is the code to import the seneca...

Creating the image upload server

We have finished building the services. Now let's build the image storage server. The image storage server defines the routes using which an image can be stored, deleted, or retrieved.

Open the Initial/image-storage directory. Inside the directory, you will find a package.json file and an app.js file. The app.js file is where you will write the code, and package.json lists the dependencies for the image storage server. The upload service is dependent on express, connect-multiparty, path, and fs. Run the npm install command inside Initial/image-storage to install the dependencies locally.

The following is the code to import the modules:

var express = require("express");
var app = express();
var fs = require("fs");
var multipart = require("connect-multiparty")();

Now let's define the route using which the upload service can store images in the image storage server. The upload service makes the POST request to the /store...

Getting started


The coupon site that we will build will allow users to submit coupons. For the coupon to be publicly visible, the administrator of the site should accept the coupon. Every coupon will have an image attached to it that will be stored and served by an image storage server.

We will be using MongoDB to store the coupons. Before you continue further, make sure that you have MongoDB installed and running. I am assuming that you have basic knowledge of MongoDB.

The exercise files contain two directories: Initial and Final. Inside the Final directory, you will find the complete coupon site source code. In the Initial directory, you will find the HTML code and directories for the monolithic core, services, image storage server, and so on. You will put code related to them in their respective directories. The Initial directory will help you quickly get started with building the coupon site.

We won't get into designing the frontend of our coupon site. We will only be concentrating on building...

Architecture of our site


Our server-side application will be composed of a monolithic core, three services, MongoDB server, and image storage server.

The monolithic core will serve pages to the site visitors and administrators.

The three services are database service, URL configuration service, and upload service. The following is what each of these services do:

  • Database service: Adding, retrieving, updating, and deleting coupons in MongoDB is done through database service. The monolithic core retrieves coupons from MongoDB through database service, and upload service stores coupons through database service.

  • Upload service: When a user submits a coupon, the HTML form is submitted to the upload service. The upload service then sends the image to the image storage server and adds metadata about the coupon to the database using the database service. We moved these operations to a different service, because if we are resizing and converting the uploaded image, then it will consume more memory...

Creating the services


Let's first build the services before building the image storage server and monolithic core.

We will build the database service first, as it only depends on the MongoDB server, which is already running. The upload service and monolithic core depend on it, therefore it needs to be built before these.

Database service

The database service will provide actions to add coupons, list verified coupons, list unverified coupons, verify a coupon, and delete a coupon. These actions will be used by the upload service and monolithic core.

Open the Initial/database-service directory. Inside the directory, you will find a package.json file and an app.js file. The app.js file is where you will write the code, and package.json lists the dependencies for the database service. The database service is dependent on the seneca and seneca-mongo-store plugins. Run the npm install command inside Initial/database-service to install the dependencies locally.

Here is the code to import the seneca module...

Creating the image upload server


We have finished building the services. Now let's build the image storage server. The image storage server defines the routes using which an image can be stored, deleted, or retrieved.

Open the Initial/image-storage directory. Inside the directory, you will find a package.json file and an app.js file. The app.js file is where you will write the code, and package.json lists the dependencies for the image storage server. The upload service is dependent on express, connect-multiparty, path, and fs. Run the npm install command inside Initial/image-storage to install the dependencies locally.

The following is the code to import the modules:

var express = require("express");
var app = express();
var fs = require("fs");
var multipart = require("connect-multiparty")();

Now let's define the route using which the upload service can store images in the image storage server. The upload service makes the POST request to the /store URL path to store the image. Here is the...

Left arrow icon Right arrow icon
Download code icon Download Code

Key benefits

  • Explore the new features of ECMAScript 6 and how they can be incorporated to build cutting edge web applications
  • Learn about modern web architectures and build real-world apps on top of them
  • Make use of modern JavaScript tools, techniques and frameworks to enhance your web development skills

Description

Over the years, JavaScript has become vital to the development of a wide range of applications with different architectures. But JS moves lightning fast, and it’s easy to fall behind. Modern JavaScript Applications is designed to get you exploring the latest features of JavaScript and how they can be applied to develop high-quality applications with different architectures. Begin by creating a single page application that builds on the innovative MVC approach using AngularJS, then move forward to develop an enterprise-level application with the microservices architecture using Node to build web services. After that, shift your focus to network programming concepts as you build a real-time web application with websockets. Learn to build responsive, declarative UIs with React and Bootstrap, and see how the performance of web applications can be enhanced using Functional Reactive Programming (FRP). Along the way, explore how the power of JavaScript can be increased multi-fold with high performance techniques. By the end of the book, you’ll be a skilled JavaScript developer with a solid knowledge of the latest JavaScript techniques, tools, and architecture to build modern web apps.

Who is this book for?

This book is for existing JavaScript developers who want to explore some of the modern JavaScript features, techniques, and architectures to develop cutting edge web applications.

What you will learn

  • Learn to create single page websites
  • Gain expertise in responsive and dynamic website design
  • Enable Real-time communications between client-client and client-server/server-client
  • Create APIs for large-scale applications
  • Write complete applications using functional reactive programming

Product Details

Country selected
Publication date, Length, Edition, Language, ISBN-13
Publication date : Jul 25, 2016
Length: 330 pages
Edition : 1st
Language : English
ISBN-13 : 9781785881442
Languages :
Tools :

What do you get with a Packt Subscription?

Free for first 7 days. $19.99 p/m after that. Cancel any time!
Product feature icon Unlimited ad-free access to the largest independent learning library in tech. Access this title and thousands more!
Product feature icon 50+ new titles added per month, including many first-to-market concepts and exclusive early access to books as they are being written.
Product feature icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Product feature icon Thousands of reference materials covering every tech concept you need to stay up to date.
Subscribe now
View plans & pricing

Product Details

Publication date : Jul 25, 2016
Length: 330 pages
Edition : 1st
Language : English
ISBN-13 : 9781785881442
Languages :
Tools :

Packt Subscriptions

See our plans and pricing
Modal Close icon
$19.99 billed monthly
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Simple pricing, no contract
$199.99 billed annually
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just S$6 each
Feature tick icon Exclusive print discounts
$279.99 billed in 18 months
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just S$6 each
Feature tick icon Exclusive print discounts

Frequently bought together


Stars icon
Total S$ 208.97
Modern JavaScript Applications
S$74.99
Modular Programming with JavaScript
S$66.99
Mastering JavaScript Object-Oriented Programming
S$66.99
Total S$ 208.97 Stars icon

Table of Contents

15 Chapters
1. Breaking into Microservices Architecture Chevron down icon Chevron up icon
2. Building a Coupon Site Chevron down icon Chevron up icon
3. Communication between Browsers in Real Time Chevron down icon Chevron up icon
4. Building a Chatroulette Chevron down icon Chevron up icon
5. Bidirectional Communication in Real Time Chevron down icon Chevron up icon
6. Building a Live Score Site Chevron down icon Chevron up icon
7. Functional Reactive Programming Chevron down icon Chevron up icon
8. Building an Advanced Profile Search Widget Chevron down icon Chevron up icon
9. New Features of Bootstrap 4 Chevron down icon Chevron up icon
10. Building User Interfaces Using React Chevron down icon Chevron up icon
11. Building an RSS Reader Using React and Flux Chevron down icon Chevron up icon
12. New Features of Angular 2 Chevron down icon Chevron up icon
13. Building a Search Engine Template Using AngularJS 2 Chevron down icon Chevron up icon
14. Securing and Scaling Node.js Applications Chevron down icon Chevron up icon
Index Chevron down icon Chevron up icon

Customer reviews

Rating distribution
Full star icon Full star icon Full star icon Full star icon Full star icon 5
(1 Ratings)
5 star 100%
4 star 0%
3 star 0%
2 star 0%
1 star 0%
Olivier Pons Aug 05, 2016
Full star icon Full star icon Full star icon Full star icon Full star icon 5
It's just state-of-the-art technology.You'll learn what :- microservices are... and how they are used in a real life application (a coupon site),- WebRTC and PeerJS are... and how they are used in a real life application (chat-roulette like),- Functional Reactive Programming is (even though I hate this, I know what it is now and how it works),- ReactJS is and how to use it with Flux in a real life application (RSS reader),...And above all: you'll learn about all the new features of Boostrap 4 and the basics and principles of Angular 2.Well all in all here's how I see the book: either I spend 2 days learning on the Web, trying and trying everything, and this has a big cost, or I buy a book like this and stay up to date with new technologies. My choice is made and I dont regret it.Only one thing to keep in mind: it's not for beginners.
Amazon Verified review Amazon
Get free access to Packt library with over 7500+ books and video courses for 7 days!
Start Free Trial

FAQs

What is included in a Packt subscription? Chevron down icon Chevron up icon

A subscription provides you with full access to view all Packt and licnesed content online, this includes exclusive access to Early Access titles. Depending on the tier chosen you can also earn credits and discounts to use for owning content

How can I cancel my subscription? Chevron down icon Chevron up icon

To cancel your subscription with us simply go to the account page - found in the top right of the page or at https://subscription.packtpub.com/my-account/subscription - From here you will see the ‘cancel subscription’ button in the grey box with your subscription information in.

What are credits? Chevron down icon Chevron up icon

Credits can be earned from reading 40 section of any title within the payment cycle - a month starting from the day of subscription payment. You also earn a Credit every month if you subscribe to our annual or 18 month plans. Credits can be used to buy books DRM free, the same way that you would pay for a book. Your credits can be found in the subscription homepage - subscription.packtpub.com - clicking on ‘the my’ library dropdown and selecting ‘credits’.

What happens if an Early Access Course is cancelled? Chevron down icon Chevron up icon

Projects are rarely cancelled, but sometimes it's unavoidable. If an Early Access course is cancelled or excessively delayed, you can exchange your purchase for another course. For further details, please contact us here.

Where can I send feedback about an Early Access title? Chevron down icon Chevron up icon

If you have any feedback about the product you're reading, or Early Access in general, then please fill out a contact form here and we'll make sure the feedback gets to the right team. 

Can I download the code files for Early Access titles? Chevron down icon Chevron up icon

We try to ensure that all books in Early Access have code available to use, download, and fork on GitHub. This helps us be more agile in the development of the book, and helps keep the often changing code base of new versions and new technologies as up to date as possible. Unfortunately, however, there will be rare cases when it is not possible for us to have downloadable code samples available until publication.

When we publish the book, the code files will also be available to download from the Packt website.

How accurate is the publication date? Chevron down icon Chevron up icon

The publication date is as accurate as we can be at any point in the project. Unfortunately, delays can happen. Often those delays are out of our control, such as changes to the technology code base or delays in the tech release. We do our best to give you an accurate estimate of the publication date at any given time, and as more chapters are delivered, the more accurate the delivery date will become.

How will I know when new chapters are ready? Chevron down icon Chevron up icon

We'll let you know every time there has been an update to a course that you've bought in Early Access. You'll get an email to let you know there has been a new chapter, or a change to a previous chapter. The new chapters are automatically added to your account, so you can also check back there any time you're ready and download or read them online.

I am a Packt subscriber, do I get Early Access? Chevron down icon Chevron up icon

Yes, all Early Access content is fully available through your subscription. You will need to have a paid for or active trial subscription in order to access all titles.

How is Early Access delivered? Chevron down icon Chevron up icon

Early Access is currently only available as a PDF or through our online reader. As we make changes or add new chapters, the files in your Packt account will be updated so you can download them again or view them online immediately.

How do I buy Early Access content? Chevron down icon Chevron up icon

Early Access is a way of us getting our content to you quicker, but the method of buying the Early Access course is still the same. Just find the course you want to buy, go through the check-out steps, and you’ll get a confirmation email from us with information and a link to the relevant Early Access courses.

What is Early Access? Chevron down icon Chevron up icon

Keeping up to date with the latest technology is difficult; new versions, new frameworks, new techniques. This feature gives you a head-start to our content, as it's being created. With Early Access you'll receive each chapter as it's written, and get regular updates throughout the product's development, as well as the final course as soon as it's ready.We created Early Access as a means of giving you the information you need, as soon as it's available. As we go through the process of developing a course, 99% of it can be ready but we can't publish until that last 1% falls in to place. Early Access helps to unlock the potential of our content early, to help you start your learning when you need it most. You not only get access to every chapter as it's delivered, edited, and updated, but you'll also get the finalized, DRM-free product to download in any format you want when it's published. As a member of Packt, you'll also be eligible for our exclusive offers, including a free course every day, and discounts on new and popular titles.