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

Reactive Programming with JavaScript

Book Description

Learn the hot new front-end web framework from Facebook: ReactJS, an easy way of developing the V in MVC and a better approach to software engineering in JavaScript

About This Book

  • Learn to develop webapps for Facebook’s front-end development using ReactJS
  • Use functional reactive programming with ReactJS
  • Easyto understand, comprehensive with in-depth coverage of practical examples

Who This Book Is For

If you are proficient with JavaScript and want to know about functional programming, reactive programming, functional reactive programming, and the Facebook approach to functional reactive programming then this book is for you.

This book is also for web/front-end developers who would like webapps to be developed faster and more easily using the ReactJS framework.

Basic knowledge of JavaScript is expected.

What You Will Learn

  • Learn functional reactive programming with JavaScript for non-mathematicians
  • Experience Facebook’s primary front-end framework, ReactJS
  • Using the tools Facebook uses to build a better site in less time
  • Create and implement Node.js
  • Delve into the development of webapps using ReactJS
  • Implementation of FRP ReactJS with live examples

In Detail

Reactive programming is carried out using the building blocks of functional programming. JavaScript libraries such as ReactJS are used for front-end web development that is both competent and powerful. ReactJS is intensively being used to develop webapps for Facebook.

This title is among the first of those addressing how everyday programmers can take advantage of (functional) reactive programming without having an extremely heavy mathematical background. It starts with the basics a front-end developer can easily connect with, while also covering the basics of functional programming. Then it goes on to explain non-functional reactive programming with the help of a live example. After that it gives a theoretical overview of reactive programming supported by functional programming. Tools to make functional reactive programming easier like Bacon.js, a library like jQuery, are also covered. Finally, it finishes with building one small and one larger front-end project.

Style and approach

A rounded and multifaceted approach covers reactive JavaScript with Facebook’s ReactJS. The author’s lively approach makes the book even more engaging. Also, with easy-to-understand examples, readers will learn how to use functional reactive programming with JavaScript.

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 files e-mailed directly to you.

Table of Contents

  1. Reactive Programming with JavaScript
    1. Table of Contents
    2. Reactive Programming with JavaScript
    3. Credits
    4. About the Author
    5. About the Reviewers
    6. www.PacktPub.com
      1. Support files, eBooks, discount offers, and more
        1. Why subscribe?
        2. Free access for Packt account holders
    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. Errata
        3. Piracy
        4. Questions
    8. 1. Introduction and Installation
      1. A 10,000-foot overview
        1. An easier way to handle user interface programming
          1. Programming paradigms
      2. Installing the tools required
        1. Installing Google Chrome
        2. Installing Node.js
        3. Installing the Starter Kit for ReactJS
      3. Summary
    9. 2. Core JavaScript
      1. The strict mode
      2. Variables and assignment
        2. Flow control
      3. A note on values and NaN
        1. Functions
        2. Loops
        3. Taking a look at ECMAScript 6
      4. Summary
    10. 3. Reactive Programming – The Basic Theory
      1. Declarative programming
      2. The war on Heisenbugs
      3. The Flux Architecture
      4. From the pit of despair to the pit of success
      5. Complete UI teardown and rebuild
      6. JavaScript as a Domain-specific Language
      7. The Big-Coffee Notation
      8. Summary
    11. 4. Demonstrating Nonfunctional Reactive Programming – A Live Example
      1. The history of a game with multiple ports
      2. The HTML for the web page
        1. Using a content distribution network wherever we can
        2. Some simple styling
        3. A fairly minimal page body
      3. The JavaScript that animates that page
        1. A brief syntax note – Immediately Invoked Function Expression
        2. Variable declaration and initialization
        3. The function used to start or restart the game
        4. The function that creates game levels
        5. Getting our hands dirty with ReactJS classes
        6. Tick-tock, tick-tock – the game's clock ticks
        7. GAME OVER
      4. Summary
    12. 5. Learning Functional Programming – The Basics
      1. Custom sort functions – the first example of functional JavaScript and first-class functions
        1. This leads us to array.filter()
        2. Illusionism, map, reduce, and filter
        3. Fool's gold – extending Array.prototype
        4. Avoiding global pollution
        5. The map, reduce, and filter toolbox – map
        6. The reduce function
        7. The last core tool – filter
      2. An overview of information hiding in JavaScript
        1. Information hiding with JavaScript closures
      3. Summary
    13. 6. Functional Reactive Programming – The Basics
      1. A trip down computer folklore's memory lane
        1. Advanced prerequisites for Hello, World!
      2. Distinguishing the features of functional reactive programming
      3. If you learn just one thing...
      4. Learn what you can!
      5. JavaScript as the new bare metal
      6. Summary
    14. 7. Not Reinventing the Wheel – Tools for Functional Reactive Programming
      1. ClojureScript
      2. Om
      3. Bacon.js
      4. Brython – a Python browser implementation
      5. Immutable.js – permanent protection from change
      6. Jest – BDD unit testing from Facebook
      7. Implementing the Flux Architecture using Fluxxor
      8. Summary
    15. 8. Demonstrating Functional Reactive Programming in JavaScript – A Live Example, Part I
      1. What we will be attempting in this chapter
      2. This project's first complete component
      3. The render() method
      4. Triggering the actual display for what we have created
      5. Summary
    16. 9. Demonstrating Functional Reactive Programming in JavaScript with a Live Example Part II – A To-do List
      1. Adding a to-do list to our application
        1. Including ReactJS add-ons in our project
        2. Setting the appropriate initial state
        3. Making text editable
        4. Heavy lifting with render()
        5. Inner functions used to render
        6. Building the result table
        7. Rendering our result
        8. Differentiating columns visually
      2. Summary
    17. 10. Demonstrating Functional Reactive Programming in JavaScript: A Live Example Part III – A Calendar
      1. Play it again Sam – an interesting challenge
      2. Classical Hijaxing works well
      3. Built with usability in mind, but there's still room to grow
      4. Plain old JavaScript objects are all you need
      5. Progressive disclosure that starts simply
      6. A render() method can easily delegate
      7. Boring code is better than interesting code!
      8. A simple UI for simply non-recurring entries...
      9. The user can still opt-in for more
      10. Avoiding being clever
      11. Anonymous helper functions may lack pixie dust
      12. How far in the future should we show?
      13. Different stripes for different entry types
      14. Now we're ready to display!
      15. Let's be nice and sort each day in order
      16. Let them use Markdown!
      17. One thing at a time!
      18. The holidays that inspired this calendar
      19. Summary
    18. 11. Demonstrating Functional Reactive Programming in JavaScript with a Live Example Part IV – Adding a Scratchpad and Putting It All Together
      1. Adding a WYSIWYG scratchpad, courtesy CKeditor
        1. Bringing all things together into one web page
        2. This book is about ReactJS, so why use CKeditor?
      2. CKeditor – small free offerings, and small is beautiful
        1. Including CKeditor in our page
      3. Integrating all four subcomponents into one page
      4. Persistence
        1. One detail – persisting the CKeditor state
      5. Summary
    19. 12. How It All Fits Together
      1. A review of the terrain covered
      2. Could the Mythical Man-Month have been avoided?
      3. ReactJS is just a view, but what a view!
      4. Programming is fun again!
      5. Summary
        1. The next steps from here
    20. A. A Node.js Kick start
      1. Node.js and INTERCAL
      2. Warning – Node.js and its ecosystem are hot, and hot enough to burn you badly!
      3. A sample project – a server for our Pragmatometer
      4. Client-side preparations
      5. The server side
      6. Summary
    21. Index