You are previewing Modern JavaScript Applications.
O'Reilly logo
Modern JavaScript Applications

Book Description

An example-driven guide that explores the world of modern web development with JavaScript

About This Book

  • 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

  • Who This Book Is 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

  • In Detail

    Over the years, JavaScript has taken significant strides in the world of modern web development to enhance the development of a wide range of applications with different architectures. This book explores the advanced and new features that have arrived in JavaScript and how they can be applied to develop high-quality applications with different architectures.

    The book begins by covering a single page application that builds on the innovative MVC approach using AngularJS. As we move forward, the book shows you how to develop an enterprise-level application with the microservices architecture, using Node to build web services. We then focus on network programming concepts and you’ll build a real-time web application with websockets.

    When you’ve gained a solid grip on the different architectures, we’ll move on to the area where JavaScript shines, that is, UI development. You’ll learn to build responsive, declarative UIs with React and Bootstrap. As we near the end of this book, you’ll see how the performance of web applications can be enhanced using Functional Reactive Programming (FRP). Along the way, the book also explores how the power of JavaScript can be increased multi-fold.

    After reading this book, you will have a solid knowledge of the latest JavaScript techniques, tools, and architecture to build modern web apps.

    Style and approach

    Covering all the new features in ECMAScript 6, this book takes a project-based approach to introduce you to all the latest techniques, tools, and architectures of JavaScript web development. Each project that the book builds will show you a different angle of the power of JavaScript in modern web development.

    Downloading the example code for this book. You can download the example code files for all Packt books you have purchased from your account at If you purchased this book elsewhere, you can visit and register to have the code file.

    Table of Contents

    1. Modern JavaScript Applications
      1. Table of Contents
      2. Modern JavaScript Applications
      3. Credits
      4. About the Author
      5. About the Reviewer
        1. eBooks, discount offers, and more
      7. Preface
        1. What this book covers
        2. What you need for this book
        3. Who this book is for
        4. Conventions
        5. Reader feedback
        6. Customer support
          1. Downloading the example code
          2. Downloading the color images of this book
          3. Errata
          4. Piracy
          5. Questions
      8. 1. Breaking into Microservices Architecture
        1. What is monolithic architecture?
          1. Demerits of monolithic architecture
            1. Scaling monolithic architecture
            2. Writing monolithic server-side applications
            3. Other issues of monolithic architecture
        2. Microservices architecture to the rescue
          1. Merits of microservices architecture
          2. Scaling services
          3. Demerits of microservices architecture
          4. When to use microservices architecture
          5. Data management
        3. Implementing microservices using Seneca
          1. Creating your first Seneca application
            1. Creating actions
            2. Creating plugins
            3. Creating services
            4. Storing data
            5. Integrating Express and Seneca
        4. Summary
      9. 2. Building a Coupon Site
        1. Getting started
        2. Architecture of our site
        3. Creating the services
          1. Database service
          2. URL config service
          3. Upload service
        4. Creating the image upload server
        5. Creating the monolithic core
        6. Website walkthrough
        7. Further improvements to the site
        8. Summary
      10. 3. Communication between Browsers in Real Time
        1. Terminologies
          1. Stream
          2. Peer-to-peer network model
          3. Real-time data
        2. Introduction to WebRTC
          1. MediaStream API
          2. navigator.getUserMedia
          3. RTCPeerConnection API
            1. Establishing peer-to-peer connection
            2. Transferring MediaStream
          4. RTCDataChannel API
        3. WebRTC applications using PeerJS
          1. PeerServer
          2. PeerJS API
        4. Miscellaneous
        5. Summary
      11. 4. Building a Chatroulette
        1. Creating your own PeerServer
          1. Run PeerServer from shell
          2. Using PeerServer library
            1. Creating custom PeerServer
            2. Integrating PeerServer with the Express server
        2. Creating a chatroulette
          1. Building the backend
          2. Building the frontend
            1. Testing the website
        3. Summary
      12. 5. Bidirectional Communication in Real Time
        1. Introducing WebSocket
          1. The relationship between WebSocket and HTTP
          2. Sending and receiving data on a WebSocket connection
          3. WebSocket schemes
          4. The interaction of WebSocket with proxy servers, load balancers, and firewalls
          5. The same-origin policy for WebSocket
        2. Introduction to Socket.IO
          1. Setting up your project
          2. Diving into the Socket.IO API
            1. Restricting connections based on origin
            2. Namespaces in Socket.IO
              1. Referring to all connected Socket.IO clients
            3. Rooms in Socket.IO
              1. Joining and leaving a room
              2. Referring to all connected Socket.IO clients in a room
            4. Broadcasting messages and custom events to namespaces and rooms
              1. Broadcasting to a namespace
              2. Broadcasting to a room
            5. Middleware in Socket.IO
            6. Disconnecting manually
        3. Summary
      13. 6. Building a Live Score Site
        1. Building the backend
          1. Integrating server with the Express server
          2. Serving static files and HTML to the users
          3. Serving HTML to the administrator and protecting the admin panel
          4. Socket.IO cookie authentication and broadcasting messages to a namespace
        2. Building the frontend
        3. Testing the website
        4. Summary
      14. 7. Functional Reactive Programming
        1. Introduction to reactive programming
          1. Problems with writing reactive code
        2. Functional programming in a nutshell
          1. The advantages of immutable data
          2. Functional data structures
          3. The advantages of pure functions
          4. Functional programming with JavaScript
          5. Functional programming helper functions
        3. Getting started with FRP
          1. EventStreams
          2. Properties
        4. FRP using Bacon.js
          1. Setting up the project
          2. Bacon.js APIs
            1. Creating EventStreams
            2. Creating properties
            3. Merging, filtering, and transforming EventStreams and properties
              1. Merging
              2. Filtering
              3. Transforming
        5. Summary
      15. 8. Building an Advanced Profile Search Widget
        1. Errors in Bacon.js
          1. Subscribing to errors
          2. Mapping errors
          3. Retrying a function call
          4. Ending an EventStream or property on error
        2. Handling exceptions
        3. Constant properties
        4. An overview of buses
        5. Subscribing to the end of EventStreams and properties
        6. Unplugging subscribers
        7. Combining and zipping
        8. Lazy evaluation
          1. Type 1
          2. Type 2
        9. Building the profile search widget
          1. Understanding project directories and files
          2. Converting Express.js routes to a functional reactive pattern
          3. Making the user experience better
          4. The company suggestions route
          5. The search result route
          6. Building the frontend
          7. Testing the widget
        10. Summary
      16. 9. New Features of Bootstrap 4
        1. Downloading Bootstrap 4
        2. Browser and device support
        3. Understanding the rem and em CSS units
        4. The grid system
        5. Global margin reset
        6. Spacing utility classes
        7. Display headings
        8. Inverse tables
        9. The card component
          1. Card groups, decks, and columns
        10. Outline buttons
        11. Moving from Less to Sass
        12. Text alignment and float utility classes
        13. Reboot
        14. Flexbox support
        15. JavaScript improvements
        16. Adding Tether
        17. The 21:9 aspect ratio class
        18. Customizing Bootstrap 4
        19. Glyphicons dropped
        20. Summary
      17. 10. Building User Interfaces Using React
        1. Introducing React
          1. Setting up a basic React project
          2. Virtual DOM
          3. Components
          4. One-way data binding
          5. Isomorphic UI development
        2. Getting started with JSX
          1. Compiling JSX
          2. JSX syntax
        3. Digging into components
          1. Component composition
          2. Component ownership
        4. Reconciliation
        5. Default component property values
        6. Component life cycle methods
          1. componentWillMount()
          2. componentDidMount()
          3. componentWillReceiveProps(nextProps)
          4. shouldComponentUpdate(nextProps, nextState)
          5. componentWillUpdate(nextProps, nextState)
          6. componentDidUpdate(prevProps, prevState)
          7. componentWillUnmount()
        7. Mixins
        8. Using Refs
        9. ReactDOMServer.renderToStaticMarkup
        10. Summary
      18. 11. Building an RSS Reader Using React and Flux
        1. Understanding Flux
        2. Using Flux.js
        3. Using MicroEvent.js
        4. Introduction to React Router
        5. Creating the RSS feed reader
          1. Setting up the project directories and files
          2. Building the backend
          3. Building the frontend
            1. Defining routes
            2. Creating dispatcher, actions, and stores
          4. Testing the application
        6. Summary
      19. 12. New Features of Angular 2
        1. The Angular 2 architecture
        2. Introducing web components
          1. Templates
          2. Custom elements
          3. Shadow DOM
        3. Setting up an Angular 2 project
        4. Angular 2 fundamentals
        5. Styling components and shadow DOM
        6. Angular 2 change detection
        7. Understanding view children and content children
          1. Getting the reference of components of content children and view children
          2. Local template variables
        8. Component lifecycle methods
        9. Writing templates
          1. Rendering a value
            1. Pipes
          2. Handling events
          3. Binding state to element attributes
          4. Two-way data binding
          5. Directives
            1. Attribute directives
            2. Structural directives
        10. Outputs
          1. Two-way data binding with inputs and outputs
        11. Understanding providers
        12. The difference between providers and the viewProviders property
        13. Summary
      20. 13. Building a Search Engine Template Using AngularJS 2
        1. Setting up the project
        2. Configuring routes and bootstrapping the app
        3. Generating random search results
        4. Creating route components
        5. Testing the template
        6. Routing life cycle methods
        7. Production mode versus development mode
        8. Summary
      21. 14. Securing and Scaling Node.js Applications
        1. Common vulnerabilities in applications
          1. Helmet
          2. Cross-site request forgery
          3. Cross-site scripting
          4. Session fixation
        2. Non-vulnerability based attacks
          1. Denial-of-service attacks
          2. Brute force attacks
        3. Using secure packages
        4. Scaling Node.js servers
        5. Summary
      22. Index