In this course, you will learn to build a fully-functional application with Rails Webpacker, Webpack, and TypeScript.

railspostgresssl.tar.gz

introduction/01

introduction/02

introduction/03

introduction/04

introduction/05

introduction/06

stimulus/01

stimulus/02

stimulus/03

stimulus/04

stimulus/05

stimulus/06

react/01

react/02

react/03

react/04

css/01

css/02

css/03

server/01

server/02

server/03

server/04

server/05

server/06

state/01

state/02

state/03

state/04

state/05

state/06

adv_types/01

adv_types/02

adv_types/03

testing/01

testing/03

all_stimulus/01

all_react/01

introduction/01_testing

testJob

introduction/01-copy

introduction/02-copy

introduction/03-copy

introduction/04-copy

introduction/05-copy

introduction/06-copy

stimulus/01-copy

stimulus/02-copy

stimulus/03-copy

stimulus/04-copy

stimulus/05-copy

stimulus/06-copy

react/01-copy

react/02-copy

react/03-copy

react/04-copy

css/01-copy

css/02-copy

css/03-copy

server/01-copy

server/02-copy

server/03-copy

server/04-copy

server/05-copy

server/06-copy

state/01-copy

state/02-copy

state/03-copy

state/04-copy

state/05-copy

state/06-copy

adv_types/01-copy

adv_types/02-copy

adv_types/03-copy

all_stimulus/01-copy

introduction/01-copy-r0guf3

In this course, you will learn to build a fully-functional application with Rails Webpacker, Webpack, and TypeScript.

To kick things off, you’ll walk through the basics of getting Rails set up to use Webpacker which will serve JavaScript and CSS to the browser. You’ll then get acquainted with Stimulus and React which will help with creating richer interactions.

In the latter half, you’ll work with TypeScript and set up communication between a server. Beyond that, you’ll work through managing state in your Stimulus code, as well as how to test and troubleshoot your application.

By the end of this course, you will be well equipped to create larger, more complex applications that make use of modern tools.

Modern Front-end Development for Rails

Webpacker is a static module bundler, whereas webpack is a controller manager for Ruby.

Webpacker is a default configuration for webpack and startup configurations for many popular JavaScript frameworks including Ruby.

They both refer to the same thing. In Ruby docs, webpack is simply called Ruby Webpacker.

What's the difference between webpack and Webpacker?

What’s the difference between webpack and Webpacker?

Compressing all assets, such as images and videos, for the best rendering performance.

Concatenating JavaScript files in a way that keeps the files that depend on each other together so that nothing breaks.

Converting JavaScript files into separate smaller bundles to optimize network requests.

Which of the following best describes JavaScript static module bundling?

Which of the following best describes JavaScript static module bundling?

The JavaScript files all get concatenated into one `index.js` at `./model`.

The files are all exported to `./model/index.js` on the remote server.

The entry point for bundling is `./model/index.js`.

What is true about the following `webpack.config.js` file?

```
const path = require('path');

module.exports = {
  entry: './model/index.js'  
};
```

What is true about the following <code>webpack.config.js</code> file?
<pre><code>const path = require('path');

module.exports = {
 entry: './model/index.js' 
};
</code></pre>

Which of the following are advantages of using Webpack?

Which of the following are advantages of using Webpack?

Webpack can only bundle JavaScript files by default.

Webpack can only bundle JavaScript files by default.

They are used to decrease asset load times.

They help bundle other files other than JavaScript.

Getting Started

Client-side Rails

Stimulus

React

Cascading Style Sheets

TypeScript

Webpack

Webpacker

Talking to the Server

Managing State in Stimulus Code

Managing State in React

Using Redux to Manage State

Validating Code with Advanced TypeScript

Testing with Cypress

More Testing and Troubleshooting Basics

Appendix

Quiz Yourself on webpack