Skip to main content
main-content
Top

About this book

Enrich your software design skills and take a guided tour of the wild, vast, and untamed frontier that is JavaScript development. Especially useful for frontend developers, this revision includes specific chapters on React and VueJS, as well as an updated one on Angular. To help you get the most of your new skills, each chapter also has a "further reading" section.

This book will serve as an introduction to both new and well established libraries and frameworks, such as Angular, VueJS, React, Grunt, Yeoman, RequireJS, Browserify, Knockout, Kraken, Async.js, Underscore, and Lodash. It also covers utilities that have gained popular traction and support from seasoned developers and tools applicable to the entire development stack, both client- and server-side.

While no single book can possibly cover every JavaScript library of value, JavaScript Frameworks for Modern Web Development focuses on incredibly useful libraries and frameworks that production software uses. You will be treated to detailed analyses and sample code for tools that manage dependencies, structure code in a modular fashion, automate repetitive build tasks, create specialized servers, structure client side applications, facilitate horizontal scaling, and interacting with disparate data stores.

What You'll LearnWork with a variety of JavaScript frameworks, such as Angular, Vue, React, RequireJS, Knockout, and more

Choose the right framework for different types of projects

Employ the appropriate libraries and tools in your projects

Discover useful JavaScript development tools such as Grunt, Yeoman, Lodash, etc.

Who This Book Is For

Web developers of all levels of ability; particularly relevant for front-end developers, server-side coders, and developers interested in learning JavaScript.

Table of Contents

Development Tools

Frontmatter

Chapter 1. Grunt

Abstract
In his book Programming Perl, Larry Wall (the well-known creator of the language) puts forth the idea that all successful programmers share three important characteristics: laziness, impatience, and hubris. At first glance, these traits all sound quite negative, but dig a little deeper, and you’ll find the hidden meaning in his statement:
Sufyan bin Uzayr, Nicholas Cloud, Tim Ambler

Chapter 2. Yeoman

Abstract
The development community has witnessed a role reversal of sorts take place in recent years. Web applications, once considered by many to be second-class citizens in comparison to their native counterparts, have largely supplanted traditional desktop applications, thanks in large part to the widespread adoption of modern web development technologies and the rise of the mobile Web. But as web applications have grown increasingly sophisticated, so too have the tools on which they rely and the steps required to bootstrap them into existence.
Sufyan bin Uzayr, Nicholas Cloud, Tim Ambler

Chapter 3. PM2

Abstract
The previous chapters within this section have covered a variety of useful web development tools, with our primary focus placed on client-side development. In this chapter, we will round out our coverage of development tools by shifting our focus to the server. We will be exploring PM2, a command-line utility that simplifies many of the tasks associated with running Node applications, monitoring their status, and efficiently scaling them to meet increasing demand. Topics covered include
Sufyan bin Uzayr, Nicholas Cloud, Tim Ambler

Module Loaders

Frontmatter

Chapter 4. RequireJS

Abstract
While JavaScript now plays a far more significant role in web applications, the HTML5 specification (and therefore modern browsers) does not specify a means to detect dependency relationships among scripts or how to load script dependencies in a particular order. In the simplest scenario, scripts are typically referenced in page markup with simple <script> tags. These tags are evaluated, loaded, and executed in order, which means that common libraries or modules are typically included first, then application scripts follow. (For example, a page might load jQuery and then load an application script that uses jQuery to manipulate the Document Object Model [DOM].) Simple web pages with easily traceable dependency hierarchies fit well into this model, but as the complexity of a web application increases, the number of application scripts will grow and the Web of dependencies may become difficult, if not impossible, to manage.
Sufyan bin Uzayr, Nicholas Cloud, Tim Ambler

Chapter 5. Browserify

Abstract
Browserify is a JavaScript module loader that works around the language’s current lack of support for importing modules within the browser by serving as a “pre-processor” for your code. In much the same way that CSS extensions such as SASS and LESS have brought enhanced syntax support to stylesheets, Browserify enhances client-side JavaScript applications by recursively scanning their source code for calls to a global require() function. When Browserify finds such calls, it immediately loads the referenced modules (using the same require() function that is available within Node.js) and combines them into a single, minified file—a “bundle”—that can then be loaded within the browser.
Sufyan bin Uzayr, Nicholas Cloud, Tim Ambler

Client-Side Frameworks

Frontmatter

Chapter 6. Knockout

Abstract
Knockout is a JavaScript library concerned with binding HTML markup to JavaScript objects. It is not a full framework. It has no state router, HTTP AJAX capability, internal message bus, or module loader. Instead, it focuses on two-way data binding between JavaScript objects and the DOM. When the data in a JavaScript application changes, HTML elements bound to Knockout views receive automatic updates. Likewise, when DOM input occurs—through form field manipulation, for example—Knockout captures the input changes and updates the application state accordingly.
Sufyan bin Uzayr, Nicholas Cloud, Tim Ambler

Chapter 7. Angular

Abstract
In this chapter, we will be turning our attention toward a very popular framework, that is, Angular. It is one of the world’s most popular frameworks and is a leading name in the field of JavaScript and web development. In fact, if you have had even a basic amount of introduction to web development, you might have already heard of Angular as well as AngularJS.
Sufyan bin Uzayr, Nicholas Cloud, Tim Ambler

Server-Side Frameworks

Frontmatter

Chapter 8. Kraken

Abstract
As development platforms go, Node is no longer the new kid on the block. But as many well-known and respected organizations will attest, the benefits afforded by JavaScript as a server-side language have already had a tremendous impact on the manner in which they develop and deploy software. Among the many accolades for Node, Michael Yormark, Project Manager at Dow Jones, has proclaimed “The simple truth is Node has reinvented the way we create websites. Developers build critical functionality in days, not weeks.” ( www.joyent.com/blog/the-node-firm-and-joyent-offer-node-js-training )
Sufyan bin Uzayr, Nicholas Cloud, Tim Ambler

Managing Database Interaction

Frontmatter

Chapter 9. Mongoose

Abstract
MongoDB is a popular cross-platform document database, often lumped into the “NoSQL” classification with other nonrelational data stores such as CouchDB, Cassandra, RavenDB, and so forth. It is a popular choice for data storage among Node.js developers because its “records” are stored as plain JSON objects, and its query interface and stored functions are written in plain JavaScript.
Sufyan bin Uzayr, Nicholas Cloud, Tim Ambler

Chapter 10. Knex and Bookshelf

Abstract
In this chapter, we will explore two libraries that work together to ease many of the difficulties that Node.js developers often encounter when working with relational databases. The first, Knex, provides a flexible and consistent interface for interacting with several well-known SQL platforms such as MySQL and PostgreSQL. The second, Bookshelf, builds on this foundation by providing developers with a powerful object-relational mapping (ORM) library that simplifies the process of modeling the entities that comprise an application’s data structure, along with the various relationships that exist between them. Readers who are familiar with Backbone.js and its emphasis on structuring data within Models and Collections will quickly find themselves at home with Bookshelf, as the library follows many of the same patterns and provides many of the same APIs.
Sufyan bin Uzayr, Nicholas Cloud, Tim Ambler

Managing Control Flow

Frontmatter

Chapter 11. Async.js

Abstract
We are now familiar with libraries and frameworks such as KnexJS and RequireJS, among many others. This chapter discusses Async.js, a callback-driven JavaScript library that provides a suite of powerful functions to manage asynchronous collection manipulation and control flow.
Sufyan bin Uzayr, Nicholas Cloud, Tim Ambler

Further Useful Libraries

Frontmatter

Chapter 12. Underscore and Lodash

Abstract
JavaScript is a pragmatic utility language, useful in no small part because of its simple APIs and sparse type system. It is an easy language to learn and master because its surface area is so small. And while this characteristic lends itself nicely to productivity, sadly it means that JavaScript types have historically lacked advanced features that would make the language stronger, such as functional iteration constructs native to collections and hashes.
Sufyan bin Uzayr, Nicholas Cloud, Tim Ambler

Front-End Development

Frontmatter

Chapter 13. React

Abstract
So far in this book, we have covered a diverse selection of JavaScript frameworks. Many of these frameworks serve a specific purpose and cater to a particular niche. Many others, on the other hand, have a more diversified plethora of functions and can perform various tasks and actions.
Sufyan bin Uzayr, Nicholas Cloud, Tim Ambler

Chapter 14. Vue.js

Abstract
So far in this book, we have covered various JavaScript frameworks that serve different purposes. Most of these JS frameworks have a more or less noticeable ecosystem and have been around for years.
Sufyan bin Uzayr, Nicholas Cloud, Tim Ambler
Additional information