Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Save more on your purchases! discount-offer-chevron-icon
Savings automatically calculated. No voucher code required.
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
Mastering JavaScript Single Page Application Development
Mastering JavaScript Single Page Application Development

Mastering JavaScript Single Page Application Development: An in-depth guide to building scalable and maintainable single-page applications in JavaScript

eBook
€8.98 €29.99
Paperback
€36.99
Subscription
Free Trial
Renews at €18.99p/m

What do you get with eBook?

Product feature icon Instant access to your Digital eBook purchase
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
Modal Close icon
Payment Processing...
tick Completed

Billing Address

Table of content icon View table of contents Preview book icon Preview Book

Mastering JavaScript Single Page Application Development

Chapter 2. Model-View-Whatever

If you are a frontend developer, you may not be familiar with the traditional software architectural pattern referred to as Model-View-Controller (MVC). Variations of this pattern have found their way into frontend software architectural patterns in recent years through such frameworks as Backbone.js, Ember.js, and AngularJS. Regardless of your experience in these areas, this chapter will discuss the evolution of the so-called Model-View-Whatever (MVW) pattern and its relevance to SPA development through the following topic areas:

  • The original MVC pattern
  • Model-View-Presentation (MVP)/Model-View-ViewModel (MVVM) explained
  • View-Interactor-Presenter-Entity-Router (VIPER) and other variations of MVW
  • AngularJS and MVW
  • Using the MVW pattern in a SPA

The original MVC pattern

The MVC software architectural pattern has existed in one form or another since the 1970s, but it became more popular and generally accepted with its use in web application frameworks such as Ruby on Rails, CakePHP, and Django. MVC frameworks like these brought a higher level of organization and sophistication to web application development than had been previously conceived, and in doing so, paved the way for modern SPA development.

To understand the relevance of MVC to modern SPA development, let's first break down the components and ideology of MVC.

The Model

The Model component of MVC deals with an application's data. This includes data that is displayed to the user, received from the user, and stored in the database. Additionally, the Model handles all Create, Read, Update, Delete (CRUD) operations with the database. Many frameworks also use the Model to handle an application's business logic, or how the data should be manipulated before being...

MVP and MVVM

The term Model-View-Whatever came about amid the rise of many architectural patterns that included a Model and a View, but replaced the Controller with a different concept for a core component, or even with a number of them.

MVP

MVP is a variation on the MVC architectural pattern in which the Presenter component replaces the Controller. The Presenter also acts as the Controller in this pattern, but it takes on additional responsibility in that it serves to handle presentation logic for the View. The reasoning behind this paradigm is to enhance the testability of an application by having the View itself contain little to no presentation logic.

Another key difference between MVP and MVC is that a Presenter in MVP has a one-to-one relationship with a View, meaning there is a unique Presenter defined for every View, whereas MVC allows the Controller to have a one-to-many relationship with the View. In other words, MVC allows there to be any number of Views defined for a Controller...

VIPER and other variations of MVW

The primary reason that modern architectural patterns have moved away from MVC is that the Controller in MVC generally embodies too much application code and becomes unwieldy, thereby being difficult to test. This has led to patterns that not only replace the Controller with something else, but that add multiple layers in its place to further establish a separation of concerns within an application.

VIPER

In the world of iOS, Apple's mobile operating system, MVC was long encouraged as the pattern to follow. More recently, however, many iOS developers have moved away from pure MVC and have adopted patterns that establish more than just three layers within an application's architecture. One of these patterns is VIPER, which stands for View, Interactor, Presenter, Entity, and Routing (or Router).

Let's briefly cover what each of these components is:

  • View: Just as with MVC, the View represents the user interface.
  • Interactor: Contains the business...

AngularJS and MVW

AngularJS is a frontend JavaScript framework for building web applications, and it is a core component of the MEAN stack. It provides developers with the ability to use custom HTML attributes and elements to drive behavior within an app. It also provides some handy features such as two-way data binding and dependency injection.

A brief history of AngularJS

AngularJS began as a side project of two Google developers, but eventually became an official Google open source project. Since its inception, it has undergone many changes in its methodology, including a transition away from touting MVC as its pattern of choice. Instead, the AngularJS team now labels it as a JavaScript MVW framework (at the time of writing).

The reason for the declaration of AngularJS to be MVW was in response to extensive debate and confusion from the developer community over what pattern AngularJS follows. The label itself may not be important to some developers, but it is important in highlighting the...

The original MVC pattern


The MVC software architectural pattern has existed in one form or another since the 1970s, but it became more popular and generally accepted with its use in web application frameworks such as Ruby on Rails, CakePHP, and Django. MVC frameworks like these brought a higher level of organization and sophistication to web application development than had been previously conceived, and in doing so, paved the way for modern SPA development.

To understand the relevance of MVC to modern SPA development, let's first break down the components and ideology of MVC.

The Model

The Model component of MVC deals with an application's data. This includes data that is displayed to the user, received from the user, and stored in the database. Additionally, the Model handles all Create, Read, Update, Delete (CRUD) operations with the database. Many frameworks also use the Model to handle an application's business logic, or how the data should be manipulated before being saved or viewed,...

MVP and MVVM


The term Model-View-Whatever came about amid the rise of many architectural patterns that included a Model and a View, but replaced the Controller with a different concept for a core component, or even with a number of them.

MVP

MVP is a variation on the MVC architectural pattern in which the Presenter component replaces the Controller. The Presenter also acts as the Controller in this pattern, but it takes on additional responsibility in that it serves to handle presentation logic for the View. The reasoning behind this paradigm is to enhance the testability of an application by having the View itself contain little to no presentation logic.

Another key difference between MVP and MVC is that a Presenter in MVP has a one-to-one relationship with a View, meaning there is a unique Presenter defined for every View, whereas MVC allows the Controller to have a one-to-many relationship with the View. In other words, MVC allows there to be any number of Views defined for a Controller...

Left arrow icon Right arrow icon
Download code icon Download Code

Key benefits

  • *Build large-scale, feature-complete SPAs by leveraging widely used tools and techniques.
  • *Gain a solid understanding of architecture and SPA design to build applications using the library or framework of your choice.
  • *Explore the various facets of SPA development to build web apps that are fast, scalable, and easy to test.

Description

Single-page web applications—or SPAs, as they are commonly referred to—are quickly becoming the de facto standard for web app development. The fact that a major part of the app runs inside a single web page makes it very interesting and appealing. Also, the accelerated growth of browser capabilities is pushing us closer to the day when all apps will run entirely in the browser. This book will take your JavaScript development skills to the next level by teaching you to create a single-page application within a full-stack JavaScript environment. Using only JavaScript, you can go from being a front-end developer to a full-stack application developer with relative ease. You will learn to cross the boundary from front-end development to server-side development through the use of JavaScript on both ends. Use your existing knowledge of JavaScript by learning to manage a JSON document data store with MongoDB, writing a JavaScript powered REST API with Node.js and Express, and designing a front-end powered by AngularJS. This book will teach you to leverage the MEAN stack to do everything from document database design, routing REST web API requests, data-binding within views, and adding authentication and security to building a full-fledged, complex, single-page web application. In addition to building a full-stack JavaScript app, you will learn to test it with JavaScript-powered testing tools such as Mocha, Karma, and Jasmine. Finally, you will learn about deployment and scaling so that you can launch your own apps into the real world.

Who is this book for?

This book is ideal for JavaScript developers who want to build complex single-page applications in JavaScript. Some basic understanding of SPA concepts will be helpful but not essential.

What you will learn

  • *Organize your development environment using the command line with NPM, Bower, and Grunt.
  • *Choose an accurate design pattern for your app
  • *Understand modular JavaScript programming and Node.js
  • *Interact with a REST API using JavaScript and AJAX with practical examples
  • *Build a single page application using the MEAN stack
  • *Connect your app across popular social media platforms such as Facebook, Twitter, and LinkedIn
  • *Test your app, both on the server side and in views
  • *Prepare your app for the real world and deploy it to Heroku

Product Details

Country selected
Publication date, Length, Edition, Language, ISBN-13
Publication date : Oct 28, 2016
Length: 452 pages
Edition : 1st
Language : English
ISBN-13 : 9781785886447
Vendor :
Google
Languages :
Tools :

What do you get with eBook?

Product feature icon Instant access to your Digital eBook purchase
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
Modal Close icon
Payment Processing...
tick Completed

Billing Address

Product Details

Publication date : Oct 28, 2016
Length: 452 pages
Edition : 1st
Language : English
ISBN-13 : 9781785886447
Vendor :
Google
Languages :
Tools :

Packt Subscriptions

See our plans and pricing
Modal Close icon
€18.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
€189.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 €5 each
Feature tick icon Exclusive print discounts
€264.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 €5 each
Feature tick icon Exclusive print discounts

Frequently bought together


Stars icon
Total 115.97
Node.js  Design Patterns
€41.99
Mastering JavaScript Single Page Application Development
€36.99
MEAN Web Development
€36.99
Total 115.97 Stars icon

Table of Contents

14 Chapters
1. Getting Organized with NPM, Bower, and Grunt Chevron down icon Chevron up icon
2. Model-View-Whatever Chevron down icon Chevron up icon
3. SPA Essentials – Creating the Ideal Application Environment Chevron down icon Chevron up icon
4. REST is Best – Interacting with the Server Side of Your App Chevron down icon Chevron up icon
5. Its All About the View Chevron down icon Chevron up icon
6. Data Binding, and Why You Should Embrace It Chevron down icon Chevron up icon
7. Leveraging the MEAN Stack Chevron down icon Chevron up icon
8. Managing Data Using MongoDB Chevron down icon Chevron up icon
9. Handling Web Requests with Express Chevron down icon Chevron up icon
10. Displaying Views Chevron down icon Chevron up icon
11. Adding Security and Authentication Chevron down icon Chevron up icon
12. Connecting the App to Social Media Chevron down icon Chevron up icon
13. Testing with Mocha, Karma, and More Chevron down icon Chevron up icon
14. Deploying and Scaling the SPA Chevron down icon Chevron up icon

Customer reviews

Rating distribution
Full star icon Full star icon Full star icon Full star icon Empty star icon 4
(2 Ratings)
5 star 50%
4 star 0%
3 star 50%
2 star 0%
1 star 0%
Kerridee Aug 04, 2020
Full star icon Full star icon Full star icon Full star icon Full star icon 5
Brought JavaScript to life for me... easy to understand!
Amazon Verified review Amazon
AW 65843 Dec 22, 2016
Full star icon Full star icon Full star icon Empty star icon Empty star icon 3
The first third of the book is lucid and well-written. Early chapters walk you through setting up your workspace to write JavaScript-based web apps including walking you through the use of tools like npm, bower and grunt. There's a very nice chapter on the history of MCV -> MVW architectures. It's a good read.About 1/3 of the way through the book it seems like the authors gave up on the editing process. At that point there is still some good content but it feels like a rough draft. There's a lot of repetition after that -- for example I don't know how many times they tell you what Mongo is, why they like it, and that MongoDB uses BSON, and what BSON is; or how many times they tell you what Angular and Express are. I hope the author will go back, finish the second 1/2 to 2/3 of the book, and republish.
Amazon Verified review Amazon
Get free access to Packt library with over 7500+ books and video courses for 7 days!
Start Free Trial

FAQs

How do I buy and download an eBook? Chevron down icon Chevron up icon

Where there is an eBook version of a title available, you can buy it from the book details for that title. Add either the standalone eBook or the eBook and print book bundle to your shopping cart. Your eBook will show in your cart as a product on its own. After completing checkout and payment in the normal way, you will receive your receipt on the screen containing a link to a personalised PDF download file. This link will remain active for 30 days. You can download backup copies of the file by logging in to your account at any time.

If you already have Adobe reader installed, then clicking on the link will download and open the PDF file directly. If you don't, then save the PDF file on your machine and download the Reader to view it.

Please Note: Packt eBooks are non-returnable and non-refundable.

Packt eBook and Licensing When you buy an eBook from Packt Publishing, completing your purchase means you accept the terms of our licence agreement. Please read the full text of the agreement. In it we have tried to balance the need for the ebook to be usable for you the reader with our needs to protect the rights of us as Publishers and of our authors. In summary, the agreement says:

  • You may make copies of your eBook for your own use onto any machine
  • You may not pass copies of the eBook on to anyone else
How can I make a purchase on your website? Chevron down icon Chevron up icon

If you want to purchase a video course, eBook or Bundle (Print+eBook) please follow below steps:

  1. Register on our website using your email address and the password.
  2. Search for the title by name or ISBN using the search option.
  3. Select the title you want to purchase.
  4. Choose the format you wish to purchase the title in; if you order the Print Book, you get a free eBook copy of the same title. 
  5. Proceed with the checkout process (payment to be made using Credit Card, Debit Cart, or PayPal)
Where can I access support around an eBook? Chevron down icon Chevron up icon
  • If you experience a problem with using or installing Adobe Reader, the contact Adobe directly.
  • To view the errata for the book, see www.packtpub.com/support and view the pages for the title you have.
  • To view your account details or to download a new copy of the book go to www.packtpub.com/account
  • To contact us directly if a problem is not resolved, use www.packtpub.com/contact-us
What eBook formats do Packt support? Chevron down icon Chevron up icon

Our eBooks are currently available in a variety of formats such as PDF and ePubs. In the future, this may well change with trends and development in technology, but please note that our PDFs are not Adobe eBook Reader format, which has greater restrictions on security.

You will need to use Adobe Reader v9 or later in order to read Packt's PDF eBooks.

What are the benefits of eBooks? Chevron down icon Chevron up icon
  • You can get the information you need immediately
  • You can easily take them with you on a laptop
  • You can download them an unlimited number of times
  • You can print them out
  • They are copy-paste enabled
  • They are searchable
  • There is no password protection
  • They are lower price than print
  • They save resources and space
What is an eBook? Chevron down icon Chevron up icon

Packt eBooks are a complete electronic version of the print edition, available in PDF and ePub formats. Every piece of content down to the page numbering is the same. Because we save the costs of printing and shipping the book to you, we are able to offer eBooks at a lower cost than print editions.

When you have purchased an eBook, simply login to your account and click on the link in Your Download Area. We recommend you saving the file to your hard drive before opening it.

For optimal viewing of our eBooks, we recommend you download and install the free Adobe Reader version 9.

Modal Close icon
Modal Close icon