Skip to content

Commit 6f74398

Browse files
Update todo.md
1 parent d1a9180 commit 6f74398

File tree

1 file changed

+19
-29
lines changed

1 file changed

+19
-29
lines changed

docs/tutorial/todo.md

Lines changed: 19 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11

2-
# TodoMVC Tutorial (Rails 5.2.0)
2+
# TodoMVC Tutorial (Rails 5.2.x)
33

44
### Prerequisites
55

66
{ [Ruby On Rails](http://rubyonrails.org/) }
77

88
### The Goals of this Tutorial
99

10-
In this tutorial you will build the classic [TodoMVC](http://todomvc.com) application using Hyperloop
10+
In this tutorial, you will build the classic [TodoMVC](http://todomvc.com) application using Hyperloop. This tutorial will demonstrate all Hyperloop concepts - client side Components and Isomorphic Models.
1111

1212
The finished application will
1313

@@ -20,35 +20,23 @@ The finished application will
2020

2121
You will write less than 100 lines of code, and the tutorial should take about 1-2 hours to complete.
2222

23-
You can find the older application source code here:
24-
2523
### Skills required
2624

2725
Working knowledge of Rails required
2826

29-
#### Pre-Requisites
30-
31-
+ Yarn must be installed (https://yarnpkg.com/en/docs/install#mac-stable)
32-
3327
### Chapter 1: Setting Things Up
3428

35-
Simply run the command below to create a new Rails app with Hyperstack all configured:
36-
37-
```
38-
rails new MyApp -m https://rawgit.com/hyperstack-org/hyperstack/edge/install/rails-webpacker.rb
39-
```
29+
1) `rails new MyApp`
30+
2) `cd MyApp` directory
31+
3) add `gem 'hyperloop'` to the Gemfile
32+
4) `bundle install`
33+
5) `run rails g hyperloop:install`
4034

4135
#### Start the Rails app
4236

43-
+ `foreman start` to start Rails and OpalHotReloader
44-
+ Navigate to `http://localhost:5000/`
37+
+ `bundle exec foreman start` to start Rails and OpalHotReloader
4538

46-
Run foreman
47-
```ruby
48-
$ foreman start
49-
```
50-
51-
Navigate to the given location and you should see the word **App** displayed on the page.
39+
Navigate to `http://localhost:5000/` and you should see the word **App** displayed on the page.
5240

5341
### Chapter 2: Hyperloop Models are Rails Models
5442

@@ -58,11 +46,11 @@ We are going to add our Todo Model, and discover that Hyperloop models are in fa
5846
+ Changes to models on the server are synchronized with all participating browsers.
5947
+ Data access is is protected by a robust *policy* mechanism.
6048

61-
>*A Rails ActiveRecord Model is a Ruby class that is backed by a database table. In this example we will have one model class called `Todo`. When manipulating models, Rails automatically generates the necessary SQL code for you. So when `Todo.all` is evaluated Rails generates the appropriate SQL
62-
and turns the result of the query into appropriate Ruby data structures.*
49+
>A Rails ActiveRecord Model is a Ruby class that is backed by a database table. In this example we will have one model class called `Todo`. When manipulating models, Rails automatically generates the necessary SQL code for you. So when `Todo.all` is evaluated Rails generates the appropriate SQL
50+
and turns the result of the query into appropriate Ruby data structures.
6351

64-
>*Hyperloop Models are extensions of ActiveRecord Models that synchronize the data between the client and server
65-
automatically for you. So now `Todo.all` can be evaluated on the server or the client.*
52+
**Hyperloop Models are extensions of ActiveRecord Models that synchronize the data between the client and server
53+
automatically for you. So now `Todo.all` can be evaluated on the server or the client.**
6654

6755
Okay lets see it in action:
6856

@@ -91,11 +79,13 @@ Okay lets see it in action:
9179
which will create the table.
9280

9381
2. **Make Some Models Public:**
94-
*Move* `models/todo.rb` and `models/application_record.rb` to `hyperloop/models`.
9582

96-
This will make the model accessible on the clients *and the server*, subject to any data access policies.
83+
+ *Move* `models/todo.rb` to `hyperloop/models`
84+
+ Stop and restart your rails server
85+
86+
This will make the model accessible on the clients *and the server*, subject to any data access policies.
9787

98-
*Note: The hyperloop installer adds a policy that gives full permission to all clients but only in development and test modes. Have a look at `app/policies/application_policy` if you are interested.*
88+
*Note: The hyperloop installer adds a policy that gives full permission to all clients but only in development and test modes. Have a look at `app/policies/application_policy` if you are interested.*
9989

10090
3. **Try It**
10191
Change your `App` component's render method to:
@@ -927,4 +917,4 @@ end
927917

928918
3: Its possible to get things so messed up the hot-reloader will not work. Restart the server and reload the browser.
929919

930-
You can find the final application source code here:
920+
4: Reach out to us on Gitter, we are always happy to help get you onboarded!

0 commit comments

Comments
 (0)