Building a Complete Web Application with Ruby on Rails

Build an isomorphic application that renders html server-side with Rails and React, using web pack and Express, explore Flux and Redux patterns, and test with browser-based integration testing.

Build the skeleton of a Ruby on Rails application by scaffolding a restaurants model, configuring key gems, and enabling an admin interface with Rails admin.

Define the ancestry relationship in the comment model and validate its restaurant association, building a nested comment tree with the ancestry gem in a Ruby on Rails app.

Learn to build a Rails app by defining a restaurants controller and views, wiring restful routes, and applying foundation rails styling, with a show page and restaurant name rendering.

Define the show action and wire up restaurant routes to display a restaurant's name and description on the show page, aligning routes with the restaurants index.

Build your first React component in a Rails app with the react-rails gem, using JSX, Sprockets, and a comment component with prop types for author, body, and rank.

Explore extending a React comment component into a nested comment list in a Ruby on Rails app, passing author, body, and rank, rendering json via Jbuilder templates.

Learn to render a dynamic comment list in a Rails app using a React component, parsing JSON data, and passing comment details as props.

Discover how to build a Rails app with react-rails, rendering restaurant and comments, then implement a flux-based architecture with a store, actions, and a single dispatcher to manage real-time updates.

Learn to implement a simple flux store in a Ruby on Rails app by wiring actions, stores, and components with an event emitter and a lodash-based App Store file.

Extend a flux-style store with an event emitter prototype, manage a central comments array, implement add comment and retrieve comments, and connect a central dispatcher and actions to emit changes.

Wire the comment list to a flux architecture by wiring the store and dispatcher to a React component, enabling add comment actions to update the store and re-render.

Explore integrating ES6 with Ruby on Rails using sprockets and Babel, creating an ES6 file, and watching Babel transpile let and arrow functions to ES5.

Convert the flux javascript app to es6 by renaming app.js to app.es6, refactoring the store and actions into classes, and using constructor, super, babel, and a system jacks module loader.

Learn to migrate an existing app to ES6 by modularizing with ES6 imports and exports, integrating SystemJS as a module loader, and configuring Rails Sprockets and Babel for isomorphic JavaScript.

Transform an ESX application into a modular ES6 setup using System.import, removing global variables and wiring a common store, app dispatcher, and actions to enable isomorphic rendering.

This introduction shows transforming a Ruby on Rails app through React components to esx modules, exposing stores and actions, and building a comment section with nested lists and forms.

Convert a JavaScript application to ES6 by refactoring a comment list component into a class that extends React.Component, wiring actions and a store via props and preparing for context sharing.

Shows how React context eliminates prop drilling by declaring child context types, providing a store via getChildContext, and accessing it in nested components to enforce a contract.

Refactor the comment form into an ES6 React class component with local state for author and body, using onChange and submit handlers, and connect to the store via context.

Learn to refactor the store with context and action creators, fetch and render comments from the server, and replace global state with localized actions for a scalable component tree.

Hook the client app to the server by implementing a set comments action and rendering server-provided comments through the flux store and comments index.

Learn to send server data by building a simple API class, posting comments to Rails, and returning JSON via a comments controller and jbuilder.

Explore the promise architecture in a Rails web app by chaining API post calls, transforming server responses to json, and dispatching updates to the store after receiving confirmation.

Implement nested comments on the front end with an ancestry-based tree and parent_id, enabling child replies to restaurant comments; render via a reusable comment component and form in React.

Permit parent_id in the Rails controller and extend the comment store to filter by parent_id, enabling a recursive, client-server nested comment tree.

Transform the comment list into an unordered list with a parent id to filter nested comments, and add a show-hide toggle for the reply form using state and props.

Learn bidirectional data flow and data binding by connecting a parent comment component to its form with a submit handler. Pass functions via props to update state and reveal comments.

Implement ranking by upvoting comments in a Ruby on Rails app with a React frontend, adding routes, flux actions, and store updates to order and display rankings.

Refactor the ranking feature and fix comment ordering using lodash chain and sort by rank, while removing hardcoded IDs and converting actions to a class with dynamic restaurant IDs.

Explain real-time updates in a Flux and React app using web sockets or long polling, and implement a comments index endpoint with a Jbuilder view.

Implement long polling by adding a watch method in the actions class to fetch restaurant comments every second and call set comments.

Explore the isomorphic architecture with server-side rendering of React components to improve performance and search engine indexing for real-time comments, using Rails, Flux, and Foreman.

Migrate a flux-based react app to a node and webpack workflow by defining a package.json, installing dependencies, configuring babel loaders, and building the bundle with webpack.

Move the Rails front end from sprockets to webpack by relocating components, stores, actions, and constants into the client assets JavaScript folder and building the isomorphic React client bundle.

Finalize the integration of Rails and Webpack by correctly importing the Flux dispatcher and Event Emitter, and implement a window.render_react bridge to render React components, including the comments section.

Finish the Rails webpack bridge by implementing a client-side helper to render React components on pages, with dynamic component loading and cleaned up dependencies.

Review our isomorphic architecture in the Ruby on Rails app and trace the shift from ES6 with sprockets and webpack to a client bundle served by sprockets.

Bundle rails and client processes with foreman, create a dev proc file, and run the rails server on port 4000 alongside the web pack client under one managed process.

Build and run a Node.js and Express server to deliver React components as strings to a Rails app, using Babel, body-parser, and render to string.

Finish isomorphic spike by wiring a component render server into a Rails app, adding a proc file, and implementing an isomorphic bridge to render props server- and client-side using json.

Switch between server-side and client-side rendering with a flag to test in production and staging, delivering ESX isomorphic app with flux architecture using Rails, Node, and React and real-time component.

Set up a Rails testing environment with rspec and our_spack, add gems in the gem file, and generate and run a sanity spec to verify zero examples and zero failures.

Configure and run code coverage in a Rails app with SimpleCov, integrate it into RSpec, and interpret coverage reports and gaps.

Configure database cleaner to reset the database between specs, write and refine restaurant and comment model specs, validate associations, add default values, and boost test coverage with red-green-refactor.

Utilize Capybara with Poltergeist to run browser-based tests in a Rails app, configure an asset host and the JavaScript driver, and write a feature spec that verifies page content.

Test a Rails and React app with rspec and capybara to verify restaurant listings and comments, exploring flux testing and fetch polyfills.

Round off Ruby on Rails code coverage by adding a browser-based test for uploading comments and testing the comments index action, achieving 100 percent coverage.

Explore the evolution of a Rails app with React, from React Rails to Flux, ES6 with Sprockets, and isomorphic Redux, ending with a Redux refactor.

Explore how Redux constructs an application using reducers, a provider, and middleware, replacing a centralized store with event-driven state updates via actions, containers, and isomorphic components.

Explore how Redux handles actions and middleware to manage an array of comments, dispatching server responses through thunks after upvotes and adds, with set, add, and update flows via reducers.

Explore redux and react component architecture by wiring actions, action creators, and reducers through a provider, with explicit props, filtered comment lists, and browser-based testing.