O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support 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
    6. www.PacktPub.com
      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 socket.io 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